This Uncommon design system was built to meet our business needs of keeping our UI usable, desirable and easy to build while I was at Uncommon. For the full project, please click here .
While simplicity, readability, and load time are paramount, I also wanted to create a visual language that matched the professionalism of the business, as well as a theme that would boost the usability and inherent value of the product.
Based on Uncommon's original brand guidelines, which were vibrant and playful, I decided to create a visual language that emphasizes accuracy, trust, and transparency.
During the process of experimentation, I tested different styles of the product and library of components and patterns to create a foundation that would guide the design choices for the rest of the system.
There is a heavy reliance on white, black, and gray, as it is important for the design to be readable even when the UI is dense.
Colors like blue, yellow, red, and green were used to convey meaning, such as primary action, success, warning, and error.
Several colors were taken from the old branding guidelines to retain the essence of the brand 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 fun familiarity for our internal team.
Roboto is a sans serif typeface characterized by its geometric shapes and mechanical skeletons, which make it easy to read. When highly crowded, it maintains a natural rhythm, which gives us more room to add sophistication to our UI.
If a fallback is required, common default fonts, like Helvetica on Mac OS or Arial on Windows, will work well since they are similar in design.
While I frequently checked in with our head of front-end engineering and product manager throughout the process to ensure patterns and components were feasible and aligned with our objectives, I was often the final decision maker instead of going through an official approval process.
Since I was a solo designer, my intention was to carefully balance our priorities and resources in order to deliver the best customer experience in the time we had. This is the system I came up with and felt was satisfactory to our needs.
__________
© 2021 Van Wang • All rights reserved.