Created flexible design libraries and templates that improved the design team’s workflow efficiencies to same day turnaround times, set consistent UI standards and introduced real time design collaboration.
Role: Product Designer
Built better and faster products by creating the CaaStle
Design System
Overview
Problem Statement
Without a design system, CaaStle’s clothing rental platform sites sustain inconsistency resulting in design and user experience debt. Because design workflows are time consuming without a design system, there is less time for the design team to dedicate towards innovation.
Design Process
Collaborated closely with the design team leaders on high level decisions on how to structure the design system and templates in Figma for different client types. We also developed a plan for managing existing inconsistencies and socialized the design system with our creative partners.
Solution
I helped create 3 extensive design template files in Figma based on our company’s client types.
Results
The design system was able to cut the design team’s turn around time for client implementations from one week to half an hour. It set new consistent standards of UI across new platform designs. The new design system also introduced real time design collaboration in Figma during product team meetings.
Challenges & Learnings
I learned that a design system is a living product that requires continuous iteration, for example, updating templates to adopt new Figma technologies. I also learned that socializing the design system with stakeholders creates buy-in for further investment.
Key Contributions
I co-led this design system project along with another designer. I led efforts on file organization, project timeline creation, and socialization. I recreated the platform’s existing design patterns in Figma.
Working without a design system causes UX and design debt
Inconsistencies dilute brand and increase user’s cognitive load
CaaStle’s current platform sites currently have inconsistencies throughout the UX. For example, there are many different types of button designs that have different capitalization treatments, colors, and corner radii that dilute the brand’s identity and can also confuse users and add cognitive load as they navigate the site.
Time consuming design workflows leave little time for innovation
Designing for client implementations is time consuming without templates and creates redundant work and room for inconsistencies from the design team. These time consuming workflows leave little time for the product design team to focus on innovation and iteration.
Building a design system from existing sites
Structuring design templates around client types
Our team spent much of our time strategizing collaboratively on making high level decisions. Our first was to create separate template files based on client types rather than having one file for all in order to maintain reasonable file sizes. We also felt the differences between our client types and their UX flows were significant enough to warrant their own files.
Leveraging text and color styles for flexible component libraries
We decided to create files that house both templates and component libraries rather than publishing a standalone component library in Figma. We decided to do this because CaaStle works with many different fashion brands and retailer clients who have their own unique fonts, colors, and pictures. By leveraging shared styles and components within a file allowed for flexibility and customization without having to manage multiple published libraries.
Organizing, documenting, and socializing the design system
I helped lead the organization of the design system by studying and implementing best practices for file structure. I also designed a system of labels for our design team to use to label our user flows and mockups so that the we as well as our non-design stakeholders could easily find a particular screen. We decided to include documentation within the Figma file on how to use templates so it could be easily visualized and accessed by designers. We decided design guidelines would be best held in an external document following best practices of large scale design systems and keeping the document separate for advanced designer/dev users. We socialized the design system by presenting the project to our PM’s and training our creative partners on how to use it.
Managing inconsistencies by implementing new standards
We built the design system by first taking inventory of the platform’s existing designs and recreating them in Figma making sure to leverage auto-layout and the 8px grid. Because the designs that are live have inconsistencies throughout the UX, we decided to recreate designs by creating a standard for what components should ideally be without changing the existing visual language too drastically. For example, we found many different buttons that had different colors, widths, and capitalization styles. We built the component in our design system to match the dominant case button and gave it ideal attributes. This way when new features are launched components presented to dev are now consistent.
Design System Overview
Component libraries and variants
We created a component library within our templates that houses both variants and standalone components linked throughout all mock-ups. All components are linked to design tokens and are organized visually by category. We structured components so that they have variants for all the different UX use cases we have. An example is the different sizes, states, and types of dropdowns we use.
Flexible design tokens for different clients
Because CaaStle works with diverse retailers and fashion brand clients every mockup is linked and connected to Figma shared styles and assets or what we call, “design tokens,” which allow designers to implement new clients by changing a few design tokens instantly rather than spending time recreating each individual mockups.
Organizing for design, dev and stakeholder use cases
The goal of organizing our design system files was to ensure users of the design system (designers and stakeholders) had a system of labels to clearly understand the organization of screens within our templates. We included documentation on how to navigate and use the design system files and we also published our labels into to a library and continue to use these labels to layout and organize our mock-ups.
Results
New Benefits
The design system was able to cut the design team’s turn around time from a week to half an hour. We also were able to create new consistent standards of UI for all future designs being integrated into the platform. The new design system also introduced real time design collaboration in Figma during product team meetings allowing us to create designs on the fly.
Challenges & Learnings
I learned that a design system is a living product that requires continuous iteration, for example, updating templates to adopt new Figma technologies. I also learned that socializing the design system with stakeholders creates buy-in for further investment. I tried to champion dev coding for our design system to which our PM’s said that they don’t have enough cycles to invest in it. Overtime, dev has expressed a need for a design system and we are slowly beginning to integrate with their coding.
Key Contributions
I co-led the design system project and took the lead on file and screen organization as well as documentation. I recreated screens leveraging Figma’s auto layout features for consistency and making sure to follow the 8px grid.
Increased customer engagement by 24% and order placements by 109% with Haverdash Closeting
Identified and socialized a redesign opportunity of a clothing rental subscription’s closeting experience.
E-Commerce, Mobile Apps, Web