Product Design Intern
May 2023 - July 2023
I got an opportunity to work at Atlassian, as a Product Design Intern. internship was of 8 weeks (2 months) internship.
I was assigned to Enterprise Data Center Design Team (Australia) Ent journey to cloud in design - Enterprise Department and worked on product named BITBUCKET.
During this internship,
Vincent Feeney (Design manager) was manager
Rhys Hobbs (Senior product designer) was mentor
Nebin Biju (Product designer) was buddy.
Bitbucket is a Git based code hosting and collaboration tool, built for teams. It allows users to do basic Git operations such as reviewing or merging code while controlling read and write access to the code. It also provides integration with other Atlassian tools. Bitbucket's best-in-class Jira and Trello integrations are designed to bring the entire software team together to execute on a project. It provides one place for your team to collaborate on code from concept to Cloud, build quality code through automated testing, and deploy code with confidence.
During my internship at Atlassian,
• I was responsible to work on the Dark mode of Bitbucket’s user interface.
• I was working with Atlassian’s Design System (ADS) Token to assign proper color tokens to components.
• Understanding developer’s limitations to update dark mode.
• Completing whole Bitbucket’s dark mode along with testing.
Before me joining Atlassian, For the Bitbucket project, the Wonder and Explore phase were completed by AUI and design-token-system team.
I needed to understand Atlassian Design System first so I went through existing documentations of AUI and Atlaskit design system for light and dark mode.
My team was in Impact and Make phase, but for some design decisions, I had to go back Explore phase.
Atlassian design team created Atlassian Design Tokens (ADT) which now comes with both, light and dark color variants. You can find open documentation on Atlassian.design website.
Same tokens were listed in Atlassian design system (ADS) pluging of Figma, which had hex values also mention in their description section. Following image can give more clarity on how it is shows
In documentation, different states of different components like links, buttons, etc. were covered and had separate tokens assigned.
Some hex values of tokens came with the transparency and some had actual color code value. I had to take care of this transaparency parameter as, color does get affected by the background color.
One important that was affect while assigning the tokens to dark theme, All tokens do affect light mode as well. So It is important to choose appropriate tokens by taking care of both, light and dark modes
There are some WCAG (Web Content Accessibility Guidelines) set of guidelines created by the World Wide Web Consortium (W3C) that we followed during the product design. These outlines how to make web content more accessible to people with disabilities.
I performed these AA and AAA tests for all components using figma plugins.
Level A is the minimum level of conformance, while level AAA is the highest level of conformance. These guidelines for color contrast fall under level AA conformance, which means that they are essential for ensuring accessibility
Bitbucket's Development team worked on some automation to map the new design tokens DS token on old design tokens, which were AUI tokens.
From inspect element's inspector section, we were able to identify and understand these tokens. But at many places, automated mapping did not work and were using old AUI tokens. Also some color values were hard coded, and we designers needed to test and assign them new DS tokens.
Engineer Carlos from bitbucket team provided us test environment with extra themes to identify issues with token mapping, which helped us to identify the list of components that needed to work work on, also it helped us to identify hard coded values.
In Above image, Components which used old AUI tokens or hard coded values, did not turn yellow, and needed new DS token
We gave access to Engineer Carlos to our figma file and created section where final work was showcased.
I came up with Before and After approach, which will be helpful for engineer to understand where exactly the work is needed.
Mentor, Rhys suggested the token naming conventions with all required details, which was helful to co-ordinate with engineer.
One interesting thing happened with me. My manager gave me chance to present my designs in critique session called The ACDC (A Crit for Data Center).
In 5th week of my internship, I got chance to present design in front of the entire Ent-DC-Design team. I brought 2 components to design critique session, Left hand sidesheet and right hand sidesheet
Issue with these components was, colors used were not consistent across Atlassian’s products, like Jira, Confluence, etc. I came up with some combinations which can be used throughout Atlassian Suite. So brought these designs to get inputs and critique from other designers.
I conducted this crit session on Figma where team was welcomed to give feedback through comments sections. They had total 15 mins to observe the designs and write feedback.
Got some feedback, inputs and some opinions. This actually opened all possible perspectives, which was helpful to make checklist of what final designs should have.
Above image shows some of all feedback. I was able to catagories these all comments.
I categorised all inputs into sections. With the help of mentor, I went back to design decision making documentation, which was made by core design team. Also I went to slack channel where all queries regarding these tokens were discussed.
I got references and I went through documents. With the help of all feedback, documentation, and mentor's guidance, the designs were finalized. I documented all design decisions which I made and sent to core design team. It will impact component across all products but It's now uniform across all Atlassian
During second last week of internship, I worked with 2 senior designers for user interview. They found users and scheduled online interview with them.
This was user testing for dark mode of product as well as to understand the gaps or issues if any. I was part of one of the interviews as silent observer. Before going into user interviews, we defined a task, an activity and prepared list of questions.
Being part of user interview, as a Silent observer, I noted down all observations in format of empathy map. I needed to catagories actions, what user says, thinks and feels.
Along with me, other two senior designers also noted points and we gathered them up in one FigJam file. After that we started, to categories and completed affinity mapping.
Then we used Imapct-efforts Matrix and MoSCoW analysis to define priorities of new features, functionality or tasks.
In the beiginning, confusion between AUI token and DS tokens was creating problems. In the starting I did not used appropriate tokens but color wise those were proper. Mentor Rhys helped me with clarifying this confusion.
I found one issue with DS variable mapping on AUI variables. From inspect element, I found issue with color variables not being right as mentioned in confluence document and Atlassian's figma plugin
With the help of engineer Carlos, we addressed and resolved this issue of mapping variables.
I was a developer so I understand the product and how it should be used. And in my opinion, this was my biggest bias. Forming questions or designing an activity were getting hampered cause of my biases. Mentor and senior designers helped me to get through this problem. They opened perspective to how to look at things. Considering any user as novice in using product and then framing questions can help. Also step by step we can update questions' experty level, that way we can get answers we were looking for.
My little technical background and knowledge helped other designers to understan and expolre how inspect element can be used for design purpose. I walked them through some tricks with colors, psuedo element, etc
• Learnt five values of Atlassian.
• Learnt about different products of Atlassian, their purpose and how it's interconnected.
• Atlassian's work culture, communities and heirarchy
• Design Hub, Design principle, AUI and DS tokens, Atlassian Design System
• Each designer has their own method of working.
• Play as a team - collaboration with not only designers but engineers can help us succeed.
• No input or feedback is wrong, you have to decide what would you like to take along.
• Some features need content first approach and some features need functionality first approach.
