MyKart 2020
Design System
In 2020 I started my first UX design role at an early-stage startup, Mykart, a mobile marketplace focused on empowering small businesses. As the designer leading this project, I collaborated with the marketing and engineering while presenting regularly to stakeholders. Our team allocated eight weeks to deliver an organized library of components that would scale into MyKart's first design system.
MyKart's products (MyKart App, MyKart Seller Portal, MyKart.app) were designed and developed by fragmented teams, resulting in visual inconsistencies that would only worsen with new iterations causing an uneven brand personality and lack of trust with users.
A design system would reduce visual inconsistencies throughout products and optimize workflow for our teams. I embarked on a mission to introduce a new way of working through a unified design language.
Increase frequent communication and prevent duplicate work.
Encourage component reusability and reduce cost & time of recreating components.
Unify disjointed experiences and boost brand reputation.
Determined to find an approach that would best fit our team's needs, I researched design systems paying close attention to best practices for organization and naming conventions. Human Interface Guidelines and Atlassian were some of the design systems that stood out to me as they were clear, simple, and easily searchable. Meeting with mentors and experts strengthened our confidence and validated our theory that a design system may be the solution we needed.
Auditing existing software helped me identify which UI elements were essential to include in our design system. I gathered shared components across multiple products, including headers, buttons, input fields, icons, and forms.
We communicate through typography, so it should be one of the most important aspects of a design system - it could account for up to 90% of any given screen. I found four different fonts throughout our products, so we narrowed it down to one font and conducted A/B testing to determine readability and desirability.
Lato is simple, has clear readability at smaller sizes and offers a variety of weights. I defined our typography style prioritizing hierarchy, contrast, consistency, alignment, white space, and color.
Before typography, color is the first element a user sees on a page, it influences the way a company is perceived by the public. Blue can make a brand appear reliable and trustworthy so we kept the existing blue and added colors to create the palette. Our new color scale allowed for a flexible palette while maintaining maximum contrast for accessibility.
Icons are essential to a design system as they help users quickly navigate pages. Designing the more challenging icons first to determine rules made creating simple icons much faster. I used two colors from the color system and designed components using an 8-pixel grid for consistency.
Designing buttons and other components became more effortless after defining typography, color, icons, and rules. I applied auto-layout to buttons to maintain alignment as designs evolve.
Maintaining a design system is no easy feat - as the only designer in the company, it's been a challenge to maintain.The design system bridged the gap between design, marketing, and engineering. We immediately started to experience the impact of having a single source of truth - increasing the velocity of work, preventing duplicate work, and encouraging communication between departments.