The Process

Research

At the inception of our design system project, we undertook extensive research into best practices for design system creation and implementation. This included lots of reading, which involved medium posts, design books and resources, as well as other design system documentation. We consulted with mentors to gain insights and sought examples we could  understand and question. We also reviewed multiple design system Sketch libraries, including those from Material, Atlassian, Apple, Lightning, and Flapjack.

Inventory & Audit

We meticulously inspected every page and action across all Park Street's platforms (excluding mobile), documenting every color, font, CTA, component, icon, and card, identifying repetitions, grouping them into sheets, and recording their code names to ensure a thorough audit and review of our applications.

Library Development

Using the Inventory & Audit as a reference we defined the items that needed to be created and following the Atomic Design naming convention we set out to identify the naming convention for all reusable components that had been identified.

File Organization

The sketch library was organized following the same atomic design methodology and which was later used when the design system was publised in Zeroheights.

Design

The design team started creating the sketch library using the Click-up list of atoms, components, organisms, and templates that needed to be created and followed a Kanban approach to track its completion.

Buttons

We defined our buttons focusing on consistency by following the findings in the design audit and following best practices to facilitate and communicate the importance of actions with branded CTA's

Testing & Iterations

We validated that the library was functional by creating templates and comparing them to our existing designs. For the reports summary page we tested to ensure that the new template provided the user with a cleaner interface that was more focused on the records and less focused on the filters.

With the Details Page we focused on validating that the user had more visibility to the products at a first glance and that the details were consolidated in the left column.

Dev Review

• Presented - Showcased Liquid and involved development in the Design Systems Goals.
• Shared Files - Abstract Collections & Miro Boards with Logical Comments
• Planned - Agreed on deadlines for the creation of the Token Library
• Follow Ups - Defined follow ups with the Dev team responsible for the libraries development.

‍

Documentation

Once the Dev review was completed the documentation was created in Zeroheights to ensure code and design artifacts were synced and managed by both Design & Development.

Beta Test

We implemented the final library into a coded project and beta-tested it after it was released before applying it to other projects.

Adoption

I focused on the adoption of the design library, leading the charge in Q/A of tools being released with Liquid to ensure it was being followed correctly.

Evangelize

Creating excitement for Liquid was essential to its success. We focused a lot of effort on its benefits and the consistency it brings to our products.

‍

‍

Evolution of Liquid

Moving to Figma

With the design team growing we transition to Figma to further evolve our design process.

• Enabled designers to follow a more rounded design process.
• Reduced our Journey Discussion with the addition of prototyping.
• Enhanced our handoff process by removing the need to use multiple platforms (Sketch, Abstract, and Miro)

Maintenance & Updates

We implemented an SOP that required that design raise any new elements being used in projects to the Product team so that we would be able to alert the Dev team of it and have it implemented correctly for future use. The workflow is outlined below.

Learnings

Communication

• Between development & design is key.

Limitations

• Not having a dedicated team to maintain and evangelize delayed adoption.

Accessibility

• Needs to be considered early and go beyond contrast checkers.

Implementing

• Implementation must be agreed upon by all teams.

Metrics

• Improved consistency across multiple designers. 90% improvement.
• Reducing the time to handoff for design sprints. 30% reduction
• Improving the training period for new design team members. Reduced by 2 week from 4 to 2 weeks.