Case Study | SecurityMetrics Style Guide
Geoff Tribe | UX Designer
tribe.geoff@gmail.com
SecurityMetrics — Style Guide and General Re-design
2018, SecurityMetrics, UX Intern
Problem:
With increased demand in product and limited design resources, SecurityMetrics realized that they did not have enough bandwidth for both product development and a style guide. I was hired to create the style guide an develop processes, instate procedures, and discover tools to expedite the process.
Previous to my hiring, the design team at SecurityMetrics was fairly small and sharing design and process was not too common. The following was how I solved that problem.
Style Guide
I started by taking what we had already designed and listed callouts, dimensions and layouts.
Layout examples:
I collaborated with designers, developers and product managers to establish exact style perimeters.
Copy Examples:
UI Copy based on Material Design language guidelines.
Libraries:
Using plug-ins and Google Drive, I made a Library for Icons and Elements. This helped with rapid wire-framing and maintaining our style.
Site Map Diagram:
Building a product map with navigation and product ownership.
Exposure to the Style Guide and Design Changes
With every step of updating our style guide I would hold a meeting with the design team and confirm various design elements. I’d show what I have been working on and the team would approve final designs.
Bi-monthly I would send an email to the product team and development team to update them on our style guide progress. This opened the door for conversations about why we did what we did and a chance to explain our design.
Conclusion
While the style guide is a work in progress, it has helped us with our process, wire-framing and high fidelity designs. Dedicating 8 weeks to the style guide to create an efficient tool was worth it. By being heavily involved with developing the style guide, I now know SecurityMetrics’ products well and have been able to contribute both design and feedback.
