Kc web style Guide

UI Design

Update to KC's web style guide is an initiative to re-platform the KC Hilites website and improve user experience and strengthen brand reputation.

My Role

• Design Research  • UI Design

My role in this project was to determine the color palette, typographic scheme, buttons, and a responsive grid system. Determining proper UI components was based on research, and taking into consideration the needs of KC's content and its users.​

The problem:

The last iteration of the KC Hilites website had a loose web style guide, which resulted in visual and experiential inconsistencies making users grow frustrated, thus hurting the brand's reputation. 

The Solution:

  • Guidelines are based on notable critical elements from the last website iteration, such as fonts and color schemes.

  • The typography scheme includes six different variants of headers and four types of paragraph styles.

  • Options of buttons styles determine the importance of the call to action.

  • Site structure is based on the Bootstrap grid version four giving the site a responsive grid system for extra large to extra small devices.