Style Guide Redesign

NOTE: I am unable to show screenshots of my work publically. Please contact me if you would like to see screenshots.

Project Background

The style guide that we used for our Commercial Insurance internal applications had not been updated for at least 2-3 years. As a designer, there were many pain points I encountered with the current style guide. For example, components were not well defined, colors and typography were not specified, and it was difficult to navigate. As an innovation project, I decided that I wanted to redesign the style guide so that it could be more useful for designers and developers alike.

The Process

Clean-Up of Components

The first step in the process consisted of combing through our current style guide and deciding which styles were out of date and/or not needed on our style guide anymore. This helped to refine our current styles and make room for new styles that had been defined over the years but never documented.

Competitive Research

I began researching other style guides in order to help brainstorm ideas for the layout of our new style guide. I looked at the style guides of ten other companies and took notes on things such as: overall layout, features, and component guide. Using this, I was able to make a list of features that we wanted to utilize on our style guide. Some of these things included: a “Copy Code” button for the developers to easily copy code for a component, and a library of icons that would allow easy access for designers and developers to find and download icons.

User Interviews

After doing some initial competive research, I wanted to interview some current users of the style guide in order to discover any other pain points users were facing. I interviewed both designers and developers and found that most of the pain points that they encountered were pain points I had already considered in my initial research.

Wireframing

The next step was to create wireframes of my ideas for the redesign. After creating wireframes, I presented my ideas to our development team to make sure things were feasible from a technical perspective, before handing the wireframes off to them. I also compiled a document of all the content needed for the style guide to make for easy handoff.

Development

During the development phase, I was able to assist the developers with some CSS work, in order to allow them to spend more time coding the more complex pieces of the application.

Results

Many of my coworkers, both designers and developers, were able to benefit from this new style guide. For me, it was able to increase my efficiency when it came to creating wireframes, which led to a faster handoff of wireframes to developers.