Design system - Republic Wireless
UI style guide - Republic Wireless
UI audit and visual language for Republic’s marketing website.
How it began
In October 2017, the Republic Wireless web team redesigned their website to align with their new positioning as a people-first wireless service. As a designer in this effort, I noticed we did not have a pattern library for reusable elements for web design. Older pages had no styleguide or documentation, so sometimes brand new UI elements would be created simply because we did not know it already existed. I started to see that designers could benefit from some form of design system moving forward for new pages.
As visual designer, I gathered the UI elements into design elements to re-use in Adobe XD.
Design system Contributors
Ben Harris, Chelsea Brown, Les James, Chris Cunningham
I inspected the elements live on the website, and translated them visual assets in Adobe XD .
Baseline grid and typography
I documented the grid system and typography.
New color guide includes usage examples for the web UI and illustration.
To help designers understand basic web accessibility guidelines for visual design, I made sure the contrast guidelines from w3.org were in an our text color usage guidelines moving forward.
To demonstrate how the design system could be used for both design and development, I prototyped a simple navigation with Launchpad by Anima app. I shared this with our front-end developers for future consideration for a future hosted design system.
REsults and Learnings
I think this audit helped the design team understand the practicality of re-using elements on the website, as we doubled the design team it became increasingly difficult to just rely on word of mouth for training designers on current elements. This opened our eyes to see how the brand standards had been implemented over the years, and will now help guide future standards.