Post Image

The Future of Design Systems

Ryan Clark
By Ryan Clark on 20th February, 2018 Updated on 22nd April, 2020

    With many product teams establishing core design systems, it’s only natural that these systems will change and evolve as the industry does. We talked with Alex (Design Team Lead) and Venn (Senior Designer) at Atlassian to hear first-hand how they have grown the Atlassian Design Guidelines (ADG) and where they see the industry going in the future.

    Breaking Down Silos

    Atlassian Design System Guidelines

    Atassian Design System connects Brand, Marketing and Product teams

    Atlassian’s Design System team combines many core disciplines—design, development, content, illustration. Alex and Venn believe that the interconnected relationships between them will be at forefront of the industry’s future.

    So much of the nuance in a design system can be found in the fuzzy line between those disciplines, and the ADG team sees those silos being eliminated in the future. Tooling like Airbnb’s React > Sketch Tool and UXPin’s Design from Code are already helping designers use real-life components for their mockups. This underlies a core shift to encourage designers to think more like developers, and understand how components are built along with the props available to customize and work with them.

    This shared knowledge also has a pragmatic goal of creating a single source of truth that can be consumed by multiple disciplines. This allows teams of designers, developers, and other roles to not only share a single context, but operate as a single unit—sharing roadmaps, backlogs, sprints, and standups. On a more macro-level this single source of truth also allows for transparency between the core team creating the system and ancillary teams creating the products themselves.

    This symbiotic relationship also benefits new designers, writers and developers on-boarding into Atlassian, which currently can take weeks. “We want to see new employees be able to use ADG and ship product in days and not weeks” says Alex. This has the potential to drastically impact the velocity of product teams consuming the core design system, helping both them and the business.

    It also helps create rails for innovation. With a base system in place, ADG can effectively get new team-members up to speed quickly on foundational elements, while allowing for creativity to be focused in other areas. When approaching any design problem teams constantly juggle two questions, “Do we actually need this?” and “How should the solution work?” Historically the question of looks gets far more attention from designers, but with a design system providing the core styling for UI elements, their focus can be turned elsewhere. Instead of rethinking the whole system each time, innovation can happen in the places where that innovation has the biggest impact.

    Designing for Experiences

    Atlassian Design System Product guidelines

    Atlassian Design System – Product

    As design systems like ADG canonize UI elements, some of the most exciting value lies in allowing teams to dig deeper into the experience of the product. The team at Atlassian hopes that ADG will foster an expectation that their products always provide thoughtful and consistent user experiences. “It’s about tapping into the emotional state of the user, and thinking about the whole Atlassian experience—that’s our silver bullet,” Alex explains.

    With this goal in mind, the ADG team is helping product teams transition from solving visual problems to product problems. Instead of thinking “What should this form look like?” a designer using ADG can ask deeper questions like “How do I make this form flow the best experience it can be?” or “Is this form even necessary?” This change of mindset gets to the core value of any system, helping teams move from surface-level design problems to the deeper emotional and business needs of their customers.

    Another interesting benefit of systems pushing into experiences is that it ultimately helps them interact with another closely-related team: branding. With a base system in place, ADG has been able to focus on how to responsibly bring the experience of the brand into the product, and extend it thoughtfully into product interactions. This will only continue in the future as the system becomes more mature and every interaction can be reviewed in the light of its relation to the overall brand.

    Emotion and Empathy

    As design teams like Atlassian’s start moving closer and closer to user problems, a foundation of empathy becomes even more important. Currently, the team sees some tactical areas of growth that will help build empathy on their team, not only for each other, but for their end-users as well.

    One of these tactics is team rotations. Recently, a designer from a product team rotated onto the Design System team to understand how product design is reflected in the system. Instead of only seeing the product through their specific team’s lense, they were able to see how the product is shaped on a global level—an insight specific to the ADG team. “It allows people who are at the forefront of user’s feedback to come into Platform, and help us design the system and make it much more robust. Because it’s that product feedback that doesn’t always make its way to the platform team.” Not only does this help bring fresh eyes to the system, but it also creates evangelists inside adjacent product teams that understand how to best leverage the system in their given contexts. Alex also sees room for this to grow to other roles and responsibilities in the future.

    Another tactical focus for the future of ADG is closing design feedback loops, moving closer to the product through analytics and in turn, closer to the users themselves. Moving closer to the product exposes process and implementation problems—a crucial insight into how components should be built and maintained. “If we can close that feedback loop with user-research and metrics, then we can identify those components and patterns that are underperforming,” Venn states. As a result of that fine-tuning, teams gain a quick turnaround on revisions and iterations to address those needs—allowing products like Jira and Confluence to rapidly address their user’s feedback.

    With that same empathetic foundation, the team also hopes to get closer to their users, tackling a hot-button topic in systems right now: accessibility. “As Designers we have a responsibility to ensure that our products can be used by everyone.” The design system should help ensure the same thoughtful experience Atlassian strives for in each product is extended to every user without discrimination. And with a growing foundation in place, the product can easily execute on this core value in the future.

    A Bright Future

    The future of design systems at Atlassian (and across the industry) is a bright one. There are plenty of opportunities for the system itself to organically grow, but even more exciting are the myriad of ways the system will help the team to really refine the experience of the product, not just its individual components. Although it’s made up of dozens of components and variables and documents, the goal of ADG is singular: to create a thoughtful and delightful experience for all of their customers. As users of many Atlassian products, we’re happy to see the team executing this vision to perfection, and excited to see where it takes them in the future.

     

    Interested in being a designer at Atlassian? To see available positions, check out Atlassian Design Careers.

    Still hungry for the design?

    UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

    Start your free trial

    These e-Books might interest you