Curate
Creating a scalable design system
I led the end-to-end process of building a design system from the ground up. The project included: defining design principles and UX patterns, creating design tokens, improve dev <> design communication, create consistency, and overall give the software a much needed renovation.
Method
Design Systems, User Research,
Audit, Market Research, Visual Design, Design Direction, Responsive Design
Team
Brendan C. (Lead Engineer)
Nick K. (VP of Engineering)
Michelle L. (UX Designer)
Role & Duration
UX Designer
September 2023 – April 2024
Tools
Figma, Confluence, Trello, ProductBoard
The design system at Curate was practically non existent.
Which, naturally, lead to inconsistencies between dev and design and slow workflows.
DISCOVERY
I began by auditing the entire software and recorded UX patterns and components required to create a new design system. I also noted new components to add in.
Curate's old user interface
Software Audit
A deep dive into the current components to identify areas of improvement. This is a summary of some of the top encountered issues.
Talking with Curate customers & reviewing past customer calls
During our customer feedback calls, we spoke about their visual and functional experiences with Curate. We also spoke with our customer-facing team members to identify other areas of frustration or confusion. Note: customer names and companies are altered for privacy.
Here's what they had to say:
“Everything takes up so much space.”
– Michael from Everything Florals
“It takes me so many clicks just to access an event.”
– Stanley from Lily Ford
“Using Curate on mobile is impossible.”
– Alice from Alice's Culinary Experiences
“Honestly, it is ugly and clunky compared to other apps.”
– Jill from Jill's Florals
The drawbacks of the current "design system"
01
Below current design standards and patterns
Out-dated design, multiple CTA's on a page, misaligned elements, inconsistent sizing + spacing, and overly large UI (many users decreased zoom on browsers).
02
Sloppy and confusing UX
Clunky flows with lots of clicks, lack of intuitiveness, and many tasks took longer than users expected. Unclear error states.
03
Not mobile friendly
Many users needed to use Curate on the go, but many elements on mobile would cut off and some pages were inaccessible.
04
Many design components were different than the components used by our devs. Lack of communication with devs.
05
Unusable Figma components
Yes. The detach instance button was used on every single component. The previous Figma components had no states in mind and was simply not functional.
06
Not scalable to newer projects
With more complex problems, came improved solutions. The current design limited our design team.
RESEARCH & CROSS-FUNCTIONAL COLLABORATION
Learning about design systems and collaborating with engineering
I've never built a design system, so I needed to learn how to structure it, create reusable and scalable components, and provide proper documentation.
Research on design systems
I utilized resources from companies like Google, Microsoft, Atlassian, Salesforce, and MailChimp. I looked at the components created, component structure, and took note of patterns between different design systems. During this step I also worked with Michelle to bounce ideas off of each other and start writing out a plan of action.
Examples of public design systems that were used as guidelines. (Top to bottom: Google, Salesforce, Atlassian)
Communications with engineering
To create better synergy between the engineering and product teams, I included them early in the process.
In the meeting with the product and engineering team, we discussed:
1. Why the design system needs to be updated and built correctly
2. Upcoming steps + the game plan
3. Any concerns / ways we can better collaborate to create a system usable for both engineering and product teams
Throughout the project, I stayed in communication with Brendan. I gained insight on their component organization, token names, and limitations. Also, since the engineering team uses Vuetify, I learned whether or not certain components could be adjusted.
BUILDING THE DESIGN SYSTEM
Defining tokens and creating scalable components
Establishing the type face
We were using Inter for header and body text, but felt that it was missing a little character. Since Curate is a product for event planning creatives, we wanted to select a typeface combination that was clean and fun.
After playing around with different type faces and multiple consults with the CEO, we decided on Hanken Grotesk for the title and kept Inter for the body. I then worked on the type scale and created text styles using Figma’s variables.
Organization of type scale
Refreshing the color palette
With the current “design system” there weren’t enough colors to choose from. There was one gray, two blues, and just white and black. Overall, the colors felt muted. For a more extensive color palette, I added more variations of grays and opted for brighter color selections.
The base colors maps the HEX codes with engineering variable names. Next, the color tokens map the engineering variable names with descriptions —this creates usage consistency among components. Figma’s color variables helped determine if more shades needed to be added or if any colors were unnecessary.
Organization of color tokens
Creating base components
Using the software audit, I compiled a list of components to be designed. I started with the base components that didn’t require other components to exist in order to be built.
I kept in mind the following:
• States (rest, active, disabled, error, hover, focused)
• Sizes and design of components are usable and scalable for nested components
• Naming conventions are clear and standardized for engineering
Throughout the process, I kept our other designer, Michelle, in the loop and continued to get feedback from her on the component structures and designs. We did a lot of brainstorming together specifically on the designs for tables and site navigation.
Examples of the Button and Snackbar components showing the different component variants and scalability using properties.
Creating nested components
Building scalable and usable base components were required to successfully build nested components. Using base components together made it easier to build out elements like modals, selects, and tables – making the design process more efficient and consistent.
Example of Modal components that utilize base components such as: inputs, selects, dividers, and buttons.
A preview of the design system
Generating written documentation of the new design system
I used Confluence to provide written documentation of the components. This way, design peers can understand how to use and contribute to the design system. I also worked closely with Brendan to ensure documentation was clear for the engineering team. The documentation included information on component usage, user experience guidelines with responsiveness, and component anatomy.
PRIORITIZATION
Getting stakeholder buy-in
Buy-in from the Head of Product and VP of Engineering
With the support of Michelle (UX designer), Stephanie and Brooklyn (Product Managers), I conducted the meeting with our Head of Product and VP on Engineering. As this would be a high-leverage investment (M-L T-shirt size), I highlighted the benefits for both product and engineering.
Benefits for designers
• Streamline design workflows and encourage efficiency
• More consistency with executed designs
• Minimize guess work and creation of entirely new components for every feature
Benefits for engineers
• Minimize guess work and the creation of one-off components
• Clean up the code base
• Improve engineering efficiency
The meeting was a success and with the support of the Jimmie, the Head of Product, and Nick K, the VP of Engineering, it was time to get buy-in from the CEO.
Buy-in from the CEO
The most difficult part was convincing our CEO of the design system's value and this took multiple conversations. Since the design system is not a new product feature, its priority changed multiple times. As we introduced more features, it was apparent that the current 'design system' limited design and engineering teams – thus, I advocated even stronger for its implementation.
I started the meeting off with walking our CEO through internal and external benefits, magic of Figma components, and proposed new look of Curate.
After many conversations advocating for the design system, it finally became a high priority item for the Q1 roadmap.
FINAL LOOK
The new design of Curate
New vs. Old
After putting together the design tokens, scalable components, written documentation, and getting stakeholders on board, it was time to do a side by side of every Curate page and action next to the updated designs. These updated designs not only had the new components, but was designed with our 4pt grid system and with mobile in mind. During this step, I communicated with Brendan to ensure that design expectations were clear and also break up the project into smaller chunks for scope.
Preview of some old vs. new screens of Curate
Providing feedback
As Brendan checked off components and pages off his list, I would then test it in the staging environment to do quality assurance and affirm that the user experience and designs in the environment are in line with the Figma designs. For things that might've been missed or needed adjusting I created a 'tweaks' page for it to be re-visited. Doing this created better synergy between engineering and design.
CHALLENGES
Challenges during this project
Balancing prioritized projects with the design system
The design system began out of personal interest, as I observed the frustrations from users, engineers, and us designers. I noticed the technical and creative limitations we faced while designing newer, complex workflows because of the substandard design system. Because of this, I dedicated many extra hours outside of work to balance prioritized projects with the design system.
Gaining buy-in and explaining its internal an external value
With leadership prioritizing tangible features, it was definitely a long process of design system education, showcasing its value for external users and internally using data, side-by-side comparisons, and product analysis from companies with established design systems.
Working within constraints
The design system was broken up into phases with easier changes prioritized and deployed first. Changes with larger T-shirt sizes such as slide-outs, responsive table designs, and settings were saved for later phases. This did leave us in an awkward phase since some changes were required for future features and temporarily created an inconsistent user experience. We also saw that these later phases started to get de-prioritized with other features taking priority, which was difficult to navigate and get re-prioritized.
IMPACT
The impact of the new design system
Impact on Users
“So much cleaner”
The design looks more cleaned up and less clunky.
“Features and pages are less hidden”
Easier to find features because they used to be hidden in random dropdowns and pages.
Impact on Engineering
Quicker turnaround time
Building the front-end of designs became easier and quicker.
Clearer expectations
Easier to understand Figma designs and expectations for different states, less confusion.
Impact on Design
Efficient design workflows
No longer need to create one-off components / detach them. Now we use the component library.
Consistency within designs → less guess work
Colors, font sizes, spacing between elements, and overall components are consistent. No more guessing for sizes.
Sets us up for future features
The old design system restricted us in many ways. Now we can explore better solutions for new features.
More focus on problem solving and research
Less time taken up for designing opened up more time for discovery, research, and exploration.
LEARNINGS
A reflection on what I learned
01
How to structure and build a design system.
The project helped me learn about making components, variants, auto-layout, and variables. I learned how to create scalable components on Figma using variants and component properties. I learned how to use grids, constraints, and variables to create responsive designs and align with the four point grid system. And it has sparked a newfound interest in design systems.
02
The importance of flexibility as priorities shifted.
As I worked on this project in tandem with other features, many priorities shifted, other features took longer than expected, or new business deals arose. Unfortunately, the design system kept being prioritized and deprioritized. Throughout this, I learned to be flexible with changing business priorities and manage my time to accommodate.
03
Convincing stakeholders is scary, but rewarding. Be an advocate for design and be patient.
There was a lot back and forth and adjustments made to convince stakeholders of the design system's value. I recognized both external and internal frustrations and knew the design system would be a game changer. Despite the project constantly being reprioritized, I continued to be confident in advocating for this project. After many meetings and adjustments to the design system, I was finally able to get the CEO excited and on board :)
More case studies
USER RESEARCH
UX DESIGN
User Onboarding Flow
Curate | Rebuilding the onboarding flow to increasing activation and retention and encourage users to see product value from day one.
USER RESEARCH
IA
UX DESIGN
PROTOTYPING
PixlProgress: A Video Game Tracker
Personal Project | From initial ideas to an immersive design, explore my process to designing an intuitive video game tracker.