Project Title 

NowSecure Style Guide

Project Description 

As a full-time product design lead turned head of design I managed the company’s style guide which housed components that lived across all products. I rebuilt many components to be responsive and implemented an SVG icon system.

2015

 

It was crucial that these components be flexible enough to perform in non-ideal situations, such as using one component inside of another. 

I inherited the NowSecure style guide when hired on as a product design lead. Through initial testing I discovered the existing UI components were not responsive, even though the products needed to be, and showing cross-browser inconsistencies. There were also situations brought to light frequently where the components were not performing as intended in development; one specific example of this was when developers attempted to use tables within tabbed navigation. 

Among the first tasks I assigned to myself was rebuilding the UI that was causing the greatest trouble in production. This included redesigning and building responsive navigations, tables, and button animations throughout. The resulting tables were not only responsive but restructured data on mobile to be easier to view at that limited screen size. Products linked directly to the style guide style sheet so thorough testing before implementation was critical. I wrote a bit more about this testing process and style guide experiments here

The most significant contribution to follow was updating the 320 custom icons into an SVG sprite icon system. I have written more about how I go about icon systems here

I also established a browser and device matrix for the products that then enabled style guide testing to have more more direction and defined goals. 

Requirements 

Responsive UI, easy to access samples, educational language and approach, documentation (Jade, HTML, Sass, and CSS), stay within established brand, testing procedure, no dependencies