design system for StyleRow, an interior design company.

My role: Structure design system, interview stakeholders and developers, Design an document components and patterns.

Duration: 6 month.

Team: 1 designer, 2 developers, 1 PM

Project Overview

Problem: StyleRow didn’t have any documentation on styles, patterns, components, color palette or type treatment. They had some old Sketch files, Live website, and an outdated brand kit.

Why is it important: StyleRow couldn’t provide consistency between the works of different design freelancers - and it started to show in the quality of their product. They were trying to win new market segments and had to improve design quality to succeed. They also had a hard time onboarding new talent, there was nothing to work of but the live website. So it was difficult to stay consistent.

Solution: Move sketch designs to Figma, create design system that spells out type treatments, color system, patterns, components and guidelines. Incorporate tokens int oteh code repository to streamline development.

What is a Design System?

Design system is a collection of reusable components, guidelines, and best practices that help designers and developers build cohesive, consistent, and scalable products. It serves as a single source of truth for a company's design language, including visual design, interaction design, and content strategy. Design systems help teams work more efficiently, reduce design debt, and ensure brand consistency across all platforms and channels. They also enable faster prototyping and development, as well as easier maintenance and updates.

UI inventory

I started with a full UI inventory. Among many inconsistencies I have discovered custom typefaces, limited and out of date color palette, numerous variations of components. The inventory process helped me clearly see all discrepancies and inconsistencies across the site and product. It served as a foundation for the design system work. With the audit results in mind, I created a priority list for our design system minimal viable product (MVP).

What do the stakeholders think about a Design System?

I conducted rounds of interviews with product managers and the development team to understand better how did the lack of consistent design impacted their work. I also wanted to get their buy in and get them to collaborate with me on this effort. There was a lot of frustration with inconsistency, with manual work of recreating similar things, misunderstandings and wasted effort.

I wanted to involve engineering into the conversation early on through design system meetings and workshops to collect their input.

Who can I learn from?

I went on an journey through the realms of system and interface design to find inspiration. I wanted what were the best practices from the top competitors, such as Material Design, Atlassian, and Carbon. It was like a quest, gathering all the inspiration to infuse into my creative journey! 🚀🌟

Foundations

I started with a color palette. I have gathered the brand colors and added functional colors for danger, warning, success, and information states. I designed 5 states for each color - default, hover, focus, pressed, border, and surface. Leveraging the power of the Tints and Shades plugin in Figma, I formulated a dynamic palette that truly shines! 🚀

Welcome to My Font Adventure!

The next thing was typography exploration. There were way too many sizes and weights. I categorized them into three groups: Text S, M & L, 3 variations for each, and Heading S, M, L & XL. These were more concise yet diverse enough. I added brief descriptions on where these should be used. This would help unify text across use cases.

COMPONENTS & VARIENTS

Next thing I did - created variants to all of the components to cater to all of the needs and use cases. I added all the essential states: Default, Hover, Focus, Pressed, and the Disabled state.

Embracing Spacing in Style!

I documented what a suggested grid for different screen sizes should be. I took spacing units, spacing patterns, and suggestions on what to do, what not to do, and gave them the red carpet treatment! I visualized all of these and added annotation to all the visuals. ✨

Automagical Auto-Layout

I added auto-layout to all of our design components in Figma. This feature works like magic, making our components behave gracefully across various devices and layouts. Now, we can easily reuse our components without breaking a sweat!

Accessibility

The next step was to check components for accessibility - color treatments, type sizes and the combination of elements. With Stark plugin by my side, I add color contrast to ensure everyone can see the magic!

I have also designed a focus state for all interactive elements to make sure that a user with a screen reader would have an optimal experience. ♿🔮

Components Documentation

I added the final touch - documentation on all of the component groups: what to do, what not to do, best practices and the best patterns that will make your project sing!

Next steps

Since I was the only design resource working on the design system I was making time to work on it continuisly, scheduling review sessions, helping onboard devs into Figma, workshop with the team to discover new opportunities.

THE NEXT STEPS FOR THE DESIGN SYSTEM WERE:

  • Build out repository of components and store in GitHub. We landed on Tailwind CSS library.

  • Assign tokens to colors, typefaces, space units.

  • Design and built out the rest of the design system.

  • Create governance plan for new components and changes.

Before I was able to finish this work, I and the whole product team were laid off due to investors concerns about budget and revenue for StyleRow.

As I reflect back on the progress made these are the lessons I made:

  • Design systems are evergreen. They are living systems that require a dedicated team actively involved in their growth and maintenance. Facilitating adoption and cross-team buy-in is a challenge worth undertaking that ensures we all are presenting a common design language, that is familiar and consistent for any person interacting with it.

  • Accessibility is MVP. Defining accessibility requirements and getting buy-in at all levels of the organization from the beginning will directly impact those difficult feature and enhancement conversations later down the line.

The documentation for StyleRow design system is thoroughly laid out so that adoption of this system can be picked up by any team moving forward.

THANK YOU.