The Project
I created the company’s first MVP design system to help the product feel more stable, future-proof it and keep design debt to a minimum.
Role
I took the initiative, drove the implementation plan, created all components from scratch, and partnered with the front-end architect to ensure each component was built to spec.
Existing Structure
AllyO was already young and successful, but to get name recognition, they had to grow fast and earn a place in the market — which they did. They had been using a placeholder design system, however the components weren’t dynamic and there were no nested components or system text styles or colors. Designs operated on a copy-and-paste component process, instead of using one component and dynamically updating text or system color for faster iteration.
Investing time and resources into a design system right off the bat usually isn’t feasible, but we were growing and the design process was becoming more difficult than it needed to be.
Placeholder design system:
Why a New Design System
We were experiencing rapid growth, and a few fundamental parts of the product were quickly accruing design debt. Features we shipped made our customers happy but weren’t meeting usability standards, and we were starting to encounter accessibility issues. We were also starting to question whether a design pattern should be updated every time a feature was updated, which was impacting consistency and creating a lot of friction.
Scalability
An intrinsic characteristic of a good design system is scalability. We didn't want to change a design pattern every time we released a feature, so a good design system would provide us with the ability to scale a pattern as features matured without the need to reinvent it each time.
The Plan
1. Get buy-in from stakeholders and co-founders
2. Review the platform with the front-end architect
3. Create a UI inventory
4. Prioritize components for the MVP
5. Build components
6. Implement quality checkpoints to make sure components are built to spec
The Buy-In
Re-allocating valuable resources in a startup environment can be a hard sell, and building a design system would require a lot of engineering and design effort. I put together a presentation to not only educate the company on what a design system was, but also to explain the actual benefits, including:
• Consistent design language
• Higher UI quality
• Less tech debt
• Faster dev communication
• Faster design process with less time spent on visuals
• A focus on UX
My presentation was successful, and I moved to sync with our front-end architect to scope the engineering effort and understand how the front-end would be structured. Engineering recommended we use Material Design components and adjust the CSS/JavaScript to reflect our brand.
UI Inventory
The way I approached creating our UI inventory was two-fold:
• First I went through every single page to make a list of all the components
• Then I went through the hero flow for each module to make sure those components were built
I then used the Atomic Design framework to start working on the components.
Accessibility Issues
Some of the colors we were using for backgrounds weren’t dark enough for white text to be accessible, so this was a big opportunity to improve our CTAs and other key components.
New System Colors/Text Styles
Components - MVP
The Devil's in the Details
All of our components had a border radius and we were using the rounded icon subset from the Material Design icon library. However, not all the icon corners in that subset were rounded, so I ended up editing them to ensure the visual weight between icons was balanced and that they fit with our design language.
Before:
After:
A New Experience
Final thoughts
Even though design systems can be a hard sell to a young company, the benefits really can’t be understated. At first it may seem purely aesthetic, but when you understand how it helps in other ways, like reducing design debt, it becomes an effort worth taking on. Having a clean, modern, and consistent experience also increases the perceived value of the product, which in turn increases user trust and engagement. And when you consider the already saturated tech industry where everyone is trying to get ahead, a seamless and delightful experience only increases the NPS, making it easier for your product to compete.
