Liquid - Design System

Park Street Imports

Creation of the first design system for Park Street Imports to support both its Client facing platform as well as the Internal platforms teams use to manage clients.

Team

2 Designers

‍

Process

‍

Discovery

Research

Got a Masters in Reading. (Medium, Books, Resources & Design System Documentations)
‍
Talked to mentors about best practices and to seek examples I could ask questions on.
‍
Reviewed multiple design system Sketch libraries. (Material, Atlassian, Apple, Lightning, Flapjack)

Inventory & Audit

Inspected every single page, action possible in all of Park Streets Platforms (3 Excluding Mobile)
‍
Documented every single color, font, CTA, component, icon, card everything that made up the pages.
‍
Identified when they repeated and started grouping them in sheets as well as recorded their naming in the code.

Image of Google Sheet containing the audit of existing components and styles.

‍

Library Development

Naming Convention (Created in Click Up)

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
Atoms
Components
Organisms
Templates

File Organization

The sketch library was organized in the same fashion as the naming convention. As well as the organization of the system 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 following a kanban approach to track it's completion.

Image of completed items in click up.

We defined our Park Street 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

Buttons created and organized by their variants.

‍

Validation

Testing & Iterations

We validated that the library was functional by creating templates and comparing them to our existing designs.

Comparison of Old list view vs New list view.

Comparison of Old details page vs New details page.

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

‍

Implementation

Documentation

Created in Zeroheights with the prospect of eventually having the code and design artifacts in sync and managed by both Design & Development.

Beta Test

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

Adoption

I focused on 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 in its success, focusing a lot of effort behind the benefits of Liquid 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

All design journeys would be completed with updates if needed to Liquid’s Design Library.
Meetings between design, product & development to discuss updates needed and to align all teams.

‍

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