Atlassian mobile design system
In 2018—after nearly 16 years of building widely successful web products—Atlassian began to look into how it could make its team collaboration software products functional on mobile platforms.
The company was in a unique situation. They could only rapidly scale up mobile teams if they pulled resources from the existing, profitable web products. And investing in building out mobile teams meant high costs with no promise of returns. Instead, they organized a platform group to help bootstrap mobile efforts across the company, calling it Mobile Core. That's why Atlassian hired me as a lead designer.
After joining Atlassian, I partnered with a dozen engineers and two product managers to identify and align our core team mission. Through conversations with product teams across the company, we landed on three of Atlassian's most popular products: Jira, Confluence, and Stride (a now-defunct Slack competitor).
Due to high expectations and minimal resources, individual mobile product teams managed their apps, which meant they each built in isolation from the others. Through conversations with these teams, I found they were not using similar design styles or language, sharing analytics or tracking methods, or regularly talking to each other. And because mobile product teams were putting pressure on Mobile Core to build comprehensive features for them one at a time, there was a minimal investment in actual platform building.
After identifying the issue, one of the first things I did was advocate and get stakeholder support to build a more robust, complete system of design guidelines and components for mobile teams across Atlassian. Alongside a tight-knit group of two other mobile designers, I defined our goal as building standards that enable product teams to continue building with velocity and a shared design language around mobile.
The mobile core team began this effort by constructing a mobile design library from scratch—47 atomic components and patterns—for product teams to leverage and adapt.
By sharing similar components and patterns, we wanted teams to integrate tests into their products with variants, then report back to the platform to improve or otherwise tweak the platform pattern, benefiting all products.
My team designed everything from typography and color to buttons, flags (or toasts), banners, dialogs, illustration guidelines, list views, switches, badges, and more over a few months. Our team looked across platform conventions from Apple's HIG and Material design and built on top of the current Atlassian Design Guidelines (ADG) suite.
The most difficult challenge for the task was taking patterns from ADG that were never intended to work on mobile and evolving them without straying too far from the existing Atlassian style and tone.
To solve this problem, I approached each component carefully, considering how the web team determined standards for their guidelines while also looking at mobile conventions and optimal user experience.
We wanted to ensure that Atlassian customers could have an as seamless-as-possible experience when, for example, logging out of their computer for the day at work but needing to check one last thing on their walk from the office to their car or train.
Atlassian design system tools
In addition to working on mobile platform initiatives, I've helped kickstart internal design tool efforts at Atlassian.
Early on, I found myself and my close peers needing help to design efficiently with a consistent quality bar.
The design system we had in place relied on Sketch libraries (in a shared Dropbox folder) to help designers use shared resources such as component libraries, color palettes, and icon sets.
We encountered two major problems as a result:
- Dropbox presented several issues with access privileges and accidental, late-night overwrites of critical files.
- Navigating symbol libraries in Sketch is difficult and often more time-consuming than tracking down the library files manually in Dropbox would take.
To remedy both of these problems, I began developing tools for Atlassian designers to use.
I built a suite of proprietary tools to improve the workflow of designers across the company rapidly. Designers could type a key command and get access to a rich library of shared icons or a custom color picker with the Atlassian color palette with accompanying guidelines.
Update: the work here evolved into a new, public-facing set of tools for Atlassian designers and external partners: the Atlassian Vendor Sketch plugin.
