Design system - Republic Wireless

 

Design system - Republic Wireless

UI audit and visual language for Republic’s marketing website.

Design-systems-Republic.png

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.
 

My Role

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

Building blocks

I inspected the elements live on the website, and translated them visual assets in Adobe XD .

inspect-republic-1.gif
Building-blocks.png

Baseline grid and typography

I documented the grid system and typography.

 Several iterations of visual styles I iterated in Sketch.

Colors

New color guide includes usage examples for the web UI and illustration.

Web Accessibility

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.

web-access-rw

Final result

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.

design-system-rw.gif
 
 
 

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.