Case Study
Implementing a Design System in Figma for streamlined workflows and consistency
ARTA Shipping, 2018 - 2021 – Supply Chain/Logistics Startup (B2B2C, SaaS)
Problem Statement
With a pivot to a subscription based business model came a growth in ARTA’s customer base, service offerings and web app functionality. The product development process had to keep pace.
With a growth in the size of the product team and its output, it became more pertinent than ever to streamline design workflows, promote consistency, and facilitate collaboration. This was in service of speedy product development and, most importantly, customer satisfaction.
Solution
I researched, devised, implemented and helped maintain a Figma design system for the product team and wider company.
My role:
Lead Designer – Research, creation and implementation of a Figma design system
Team credits:
Joselyn Mujica - Product Management
Shawn Adams- Engineering
Andrijana Mrkela - Design support (contract)
Background & Research
Having recently defined new brand guidelines the timing was right to create and document a new UX/UI design system.
I took advantage of the opportunity to switch the product team over to Figma, to streamline our workflow
I had historically been utilizing a combination of Sketch and Invision to create design deliverables and prototypes, but I used this inflection point as an opportunity to switch the team over to using Figma. I was excited about its ability to manage design libraries and high fidelity prototyping in one space and have never looked back. The figjam feature also provided a much needed team collaboration space while working remotely from each other throughout 2020 and 2021.
Design Outcomes
Inspired by atomic design methodology I set out to distill our product UI into a series of elements that could be quickly and easily referenced, combined and reused to aid the product development process.
This included setting up baseline styling for things like typography, colors, buttons, input fields, icons etc. as well as overhauling and improving the information architecture of the main consumer product. As a team we conducted a UX copy audit throughout the product system including onboarding flows and system emails and new grid systems were defined so the UI performed smoothly across responsive breakpoints.
As a result we recorded an uptick in the quality and velocity of product output, and found that we quickly increased the potency of our design and development sprints.
A sample of UI components from the design system
Dashboard information architecture, UI and pre defined grid systems for different breakpoints across mobile and web
UI color values including a “traffic light” system messaging palette