Bettercloud Live Styleguide

Web-based SASS application for cloud security and policies.


Website: Bettercloud Live Styleguide
Date: 2014
Role: Usability Research, Documentation, UX Design, Frontend Development
Technologies: Adobe Illustrator, Wordpress, HTML, CSS, Bootstrap, GIT, Atlassian

Bettercloud was in the process of a redesign of their app to create a modular, cohesive, and modern look. The redesign would be a huge project and needed extensive planning.

The first phase of the redesign would be to create a new look and feel for the product. I worked with the marketing team and the UX team to create a new theme and design. We decided to use a Bootstrap framework and I was was responsible for converting the high-fidelity mockups.


Creating a live styleguide for the new app redesign that would provide detailed instructions on interactions and styles that could also be easily be updated and modified by other members of the team.


  • Working with the leadership, UX, and marketing team to create new styles and designs that would be implemented into the app for the redesign.
  • Converting the high-fidelity design to HTML and CSS using the Bootstrap framework to the new app redesign look and feel.
  • Breaking down the styles into modules and clickable prototypes that would be easy to follow and consistent with interactions that already occured inside the app.
  • Implementing the live styleguide into a custom Wordpress theme that could be easily modified by other members of the team.