MY ROLE
Lead Prod. Designer
Visual Designer
Evangelist
TOOLS
Figma
Notion
Storybook
Jira
TIMELINE
Ongoing program
Started April 2023
75% time allotment
TEAM
1 Lead Designer
1 Lead Engineer
1 PM
1 Senior Dev
Overview
This case study showcases the state of the Laika application prior to the rebrand to Thoropass, the design system launch, and the application redesign spearheaded by the direction I provided to address key user paint points, WCAG accessibility, and scaleability for the future.
About Thoropass
Thoropass was born as Laika in 2019 after years of seeing how compliance was both a good, essential thing but also an unnecessary blocker to innovation. Their sole mission became fixing that common problem.
Problem
Thoropass had a makeshift component library that did not have an owner, which led to numerous challenges for each pod/squad: designers and engineers would simply copy component/code or copy the look by creating a new new component for their project, which removed the connective tissue of a shared library.
Core Issues:
-
Figma library was disorganized and did not have clear usage instructions
-
Engineering library was not connected to design library and was also very disorganized with no clear ownership defined; all teams we're simply copying and pasting for elements
-
Design and Engineering were silo'd in this process
-
Massive accrual of design and technical debt created
Solution
Our leaders dedicated resources to build a new squad to facilitate the creation of this new design system and program — we named it Rozú, named after the company's very first engineering hire, Ronald Zúñiga. With that commitment, I went to work designing the core elements that the design and engineering partners would need: styles, buttons, input fields, etc. I, along with the Shared Services (SS) team, would define the process to build and implement, how component requests would be prioritized, and how the components would be shared across the platform.
Key Solutions:
-
Create a dedicated team, named SS would tackle system-wide features (SSO, New Navigation, etc.) as well as the creation, implementation, governance, and management of a Design System
-
Create new cross-functional team collaboration ceremonies between design, product management, and engineering
-
Secure licenses for tools needed to execute a design system: Figma and Storybook
-
Design, define, guide components for Thoropass' UI v2
-
Dedicate story points per sprint towards tackling technical debt from previous component library
Deliverables
Working as a solo designer for the design system, I brought Thoropass' UI v2 vision to life, creating a WCAG AA-rated experience to an application that was not passing at the A-level when I joined.
I made the Thoropass founders dream of a more modern, clear, easier to use experience to the product organization and their platform through library creation, component documentation (overviews, usage rules, anatomy, and accessibility), process definition and documentation (workflows, swim-lanes, request lifecycle, etc.).
60+
Components designed
and built
3
Page templates created and built for full-page re-designs in a single sprint
7
Teams utilizing the Rozú Design System
Impact
The Rozú Design System is supporting seven product squads at Thoropass and has been so versitile that it has supported designs for large data sets/tables for managing users, to integrated AI document-ingestion and summarization features, to dashboards and task management.
Components are now connected in a way that allows the design organization the freedom to explore new and improved component designs that can be implemented system-wide by one engineer in 1-2 story points — greatly reducing the efforts needed to make large scale usability and design changes.
-
We reduced the effort of UI development time by 40-60% for projects
-
All input fields, buttons, alerts, notifications (any component with text) now meets WCAG AA rating
-
Contribution model for components was updated to include processes allowing components to be design, approved, built, and launched by non-SS squads; a council (2 designers, 2 PMs, 4 engineers) consisting of membership from all squads was created, I named it The Fellowship of the Rozú.
Research
01 — Gathering Feedback
To understand where the issues with the existing component library, I started by interviewing the users of the system: designers, engineers, and product managers. This experience accomplished three key factors: 1) better understanding the Laika/Thoropass web application, 2) how different all of the team's workflows and process for building had become — very silo'd, and 3) how fragmented the components had become between each team.
02 — Empathy Building
To further my understanding of the library usage, I was granted access to the old Figma and code libraries to explore what was built and how fragmented the components had become. This experience helped me understand where the breakdown was occurring during the build phase for each of the pods/squads at Thoropass.
03 — Findings
From this experience, I had two core takeaways why the Thoropass app had so many system-wide user interface discrepancies:
-
Designers did not have a central creative voice providing guidance for consistency across the Figma library, so most designers were creating their own button (or drop down menu) and then just copy/pasting it into the existing library, never to be used again.
-
Engineers would simply find a button they wanted to use in a different location in the app, copy the code, and apply to their project via pasting code, thus removing any connective tissue
Design
04 — The Team & Tools
The Shared Services (SS) team was created with members being pulled from various teams across the product organization, ensuring expertise across front-end, back-end, design, and product management were covered.
-
Team compromised of 1 Lead Engineer, 1 Lead Designer (me), 1 Engineering Manager, 1 Product Manager, 1 Staff Engineer, 2 Senior Full Stack Engineers, 1 mid-level Engineer
-
Figma and Storybook were already in use, but we created a brand new Figma library and system and we created a new Storybook environment to create a clean, un-cluttered, fresh start
05 — Implementation
The SS team would create multiple processes to ensure design and code consistency remained as the company continued on its growth plan:
-
Component Design Validation & Review: a sub-process where designers would be allowed to open branches within the library Figma files to create or update a component, which would then be presented to the The Fellowship council for approval into the Rozú Design System
-
Rozú Code Releases Certification: a sub-program led by SS Lead Engineer to ensure the pod/squad that wanted to contribute a new component would be able to push releases to the design system
These micro-processes within the core program led to a shared contribution model where no singluar team was in a waiting period for new components to be designed and built.
06 — Assets, Documents, etc.
-
Figma Library with typography, styles, components, guidelines (development, usage, anatomy, accessibility), branches for ideation/testing
-
Storybook Code Library
-
Notion team site with defined processes, team and council membership, meeting agendas and notes, how-to guides for component/contribution submissions, and membership criteria
Reflection
07 — Impact
The launch of the Rozú Design System launched and was fully adopted by all product squads within the quarter. It took a month or two, but after a couple program retrospectives the process really starting humming for all teams.
We started working through prioritization with each team to determine which needs could be met based on the engineering level-of-effort required. We operated with this process and structure for a year and through those retrospectives, we continued to learn and understand the needs of our users.
08 — Year Two
Because a design system program is a living product, I continued to have regular feedback sessions with the designers and engineers along with our monthly Rozú retrospectives once a month. Through these channels, we started to understand some pain points we were beginning to feel on the SS team.
In year two, I redefined the contribution model to allow all teams the ability to build, thus tearing down the proverbial wall of waiting for a build from the SS team. This new model along with the previously mention Rozú council, the SS team was demoted from primary builders to another product feature team within the product org.
