✌️

— PROJECT NAME

Aviary Design System


— ROLE

Product Designer


— DATE

2021-2023


Credits:

Ian Clarke / Engineering Lead

Cath Aylward / UX Engineer

Alex Lim / UX Engineer

At Fullscript, I had the exciting opportunity to take charge of Aviary – Fullscript's design system. My main goal was to transform it from a fragmented UI Kit and Storybook into a powerful source of truth that would benefit everyone involved in the product development process. 


Throughout my time there, I worked hard to create a more cohesive and efficient system for designers, developers, and product managers to collaborate on. I documented every step of the way, so join me on this journey to learn more about how I achieved this transformation and the impact it had on Fullscript's product design and development.

I. Introduction



Fullscript is a technology company that provides an online platform for healthcare practitioners to prescribe natural health products to their patients. Aviary is Fullscript's design system, which is used by designers, developers, and product managers to create and maintain a consistent visual language and experience across all Fullscript products.


The goal of this case study is to illustrate the evolution of Aviary from a disintegrated UI Kit and Storybook into a powerful source of truth that positively impacted Fullscript's end-users, healthcare practitioners and patients.

II. Problem


Before the transformation, Aviary’s UI Kit and Storybook were fragmented, making it challenging for stakeholders to collaborate effectively. There was a lot of misunderstanding about which component was correct – in code or design. There was no documentation and guidelines. Designers and developers often had to rely on outdated design assets, which resulted in inconsistencies in the final product. It led to confusion and delays, which ultimately affected Fullscript’s end-users.

III. Process


Our team (consisting of an Engineering Lead, two UX Engineers and a Product Designer) took several steps to improve the design system with the end users in mind. I began by conducting a comprehensive audit of the UI Kit and Storybook, identifying areas that required improvement. Based on these findings we created a roadmap for building a more cohesive and efficient system. The audit showed me that Aviary was in a Surviving the Teenage Years stage of maturity. This meant that while actively evolving the system, we still had a lot of foundational and maintenance work to do to allow for sustainable future growth.


The first project I started was establishing Design System Foundations, which had to contain core design decisions and pillars that Aviary stands on: Accessibility, Colour, Typography, Iconography, Shadows, Grid and Spacing.

Once that was established, I started documenting all the patterns and behaviours of Aviary components. Creating comprehensive documentation and guidelines was essential for our new standardized approach to building product features. The documentation provided a clear and concise understanding of how to use the design system, UI Kit, and components in code. Here's how we approached creating documentation and guidelines:

The documentation and guidelines we created had a significant impact on the way designers and developers worked together. Designers were able to design with more confidence, knowing they were following established design principles and guidelines. And developers implemented components more quickly with greater accuracy and, when in doubt, could reference the same documentation that designers used.



Another one of the solutions implemented was the creation of design tokens. Our team defined and documented a set of design tokens for typography, colour, spacing, and other design elements. These tokens were then used to ensure consistency across all Fullscript products, making it easier for designers and developers to create and maintain a consistent visual language that would be familiar and user-friendly. This project set a foundation for scaling the system further and increased satisfaction with Aviary among designers and developers.

The other solution we worked on was a redesign of Empty States. We identified that Empty States were a crucial part of the onboarding experience that needed to be designed with as much care as other product features since they are the beginning of the user’s journey and significantly impact user retention.


After collaborating with the Onboarding Product Designer and the UX writer, I created a set of improved empty state components and guidelines, which we incorporated into the UI Kit and Storybook. The inconsistency on the platform was huge, because of custom CSS applied to many instances of this component. It meant that the problem couldn’t be solved just on the design system side, so we initiated an open project for developers to take on every empty state and update it to the redesigned component.


One empty state at a time, our platform became more consistent and user-centered, providing users with predictable behavior and actionable steps to continue learning and engaging with the platform. It helped ensure that practitioners and patients would not be confused or frustrated when encountering empty states.

Finally, our team worked on page layout patterns for the Practitioner segment of users. Working with our Information Architect I identified several page purposes across the Fullscript platform, such as discovery, product details and settings pages. Together we analyzed what kind of information practitioners seek on each page type.


Once we pinpointed the key page purposes, I created a series of page layout templates. These templates were designed to act as a starting point for designers and developers at the outset of each project, streamlining the process of creating an initial mockup of the page. To ensure their usability, I tested the templates with other designers by asking them to recreate a specific page. The results demonstrated that templates significantly increased the speed and consistency of design work.


IV. Results


The transformation of the Aviary UI Kit and Storybook had several positive outcomes.

1. It led to a more efficient and effective collaboration between stakeholders, eliminating misunderstandings and confusion over the correct components to use.

2. The centralization of design assets and documentation, along with clear guidelines, ensured that designers and developers were always working with the most up-to-date and relevant information, leading to fewer inconsistencies in the final product.

3. The collaborative environment facilitated better communication and collaboration between designers and developers, which led to a more streamlined and efficient product development process.


All of these positive outcomes ultimately led to a better experience for Fullscript's practitioners and patients, as they were able to use a more consistent and polished product and experience less cognitive load during their journey.