This design system was built to meet our business needs of keeping our UI usable, desirable and easy to build while I was at Uncommon.
To view the full project, please click here.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of Uncommon.
I was the Lead Product Designer at Uncommon from 6/2017 to 2/2019. I was a solo designer responsible for redesigning the entire product, and one of my first jobs was to create and document the design system.
I collaborated with our front-end engineers and product manager to ensure quality and feasibility.
Simplicity, readability and load time are all paramount, but I also wanted to create a simple visual language that matched the professionalism of the business, and a core theme that boost the usability and desirability of the product through the entire user experience.
Influenced by Uncommon's original brand guidelines, which was very vibrant and playful, we decided to establish our visual language that emphasizes on accuracy, trust and transparency.
To find the right system, I experimented with the product, stress testing different styles and library of components and patterns to establish a foundation that will come to guide the design choices for the rest of the system.
The system is predominantly white, black and gray, because it’s important the design remain readable even when the UI gets dense.
Brighter colors like blue, yellow, red and green were used to convey meaning, such as primary action, succes, warning, and error.
A few of the colors were inherited from the old branding guidelines to retain essence of the brand that Uncommon has already built with its previous customers. I also kept purple as a legacy color in our internal tools, to keep an air of familiarity for our internal team.
A Typeface To Match
Uncommon uses exclusively Roboto, a simple yet modern sans serif typeface known for its mechanical skeletons and geometric forms, which are great for readability.
Even when clustered closer together, Roboto tend to not lose its natural reading rhythm. This is important, to give us more room for sophistication in our UI.
In the event of a fallback, common default fonts, like Helvetica on Mac OS or Arial on Windows, will fit nicely as replacements due to their similarities in design.
Throughout the process, I often check in with our head of front-end engineering and product manager to make sure patterns and components were feasible and aligned with our goals. But instead of an official approval process, I was often the final decision maker.
Getting Things Done Rather Than Perfect
This is not the end. My goal here was not to create the most sophisticated or the prettiest system, but to design a system that best met our needs. I did of course set out to create delightful products, but only to enhance the UX.
After weeks of exploration, reviews and iterations, this is the style we arrived at and were happy with.