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.

Let’s understand first Bitbucket

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.

What were my responsibilities?

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.

The Design Process
Understanding current stage of Atlassian’s design process

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.

Timeline of Internship
Working with Design
What are the tokens and How do these tokens work?

Atlassian design team created Atlassian Design Tokens (ADT) which now comes with both, light and dark color variants. You can find open documentation on 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

Understanding the token's naming conventions, values and light & dark hex color values

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

Performing AA, AAA tests

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

Working with Engineer
How were thing from the development side

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

How to share new assigned design tokens with engineer

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.

Components and pages I worked on
1. Page Headers
Note: All Images used are not readable cause details were not allowed to disclose as a part of NDA. These images are just for showcase purpose to give work idea.
2. Git command field
3. Markdown preview
4. Right hand side sheet (panel)
5. Left hand side sheet (Side navigation panle)
6. "Welcome to Bibucket" page
Critique session with DC team
Critque session

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.

Feedback from the session

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.

Finalizing design

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

User Interview
Shadowing designer and being silent observer

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.

Insights and affinity mapping

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.

Confusion with tokens

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.

Technical issues with new variables

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.

Leaving behind biases for user interviews

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.

Challenges for my designer colleagues

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

Learnings and Key Takeaways
About Atlassian

• 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

Thoughtful Takeaways

• 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.

Thanks to my support system
<< Back to home page
Got a design dilemma?
Don't worry, I specialize in
turning 'uh-oh' into 'ah-ha!'
Let's chat!
Contact me for full time job roles, freelance work, or just to say hello.
I promise, I have zero inbox rule, so definitely you will hear back from me.