Design Guidelines Website

Project Overview

This project involved the creation of a design guidelines website for an IT organization developing internal business applications. The goal of the website was to establish consistency standards across many web applications developed by the organization. Creating the site required the establishment of a style guide, an icon library and a design pattern library. The site also included design best practices, design guidelines, and templates to aid designers in the research and design process.

Role and Deliverables

I was the lead UX Designer and Researcher for this project. I worked closely with and oversaw the work of other UX Designers to create this site. My activities included:

  • Industry Research
  • Content Author
  • Information Architecture Design
  • Wireframes

Icon Library

In an attempt to standardize our the interface design across applications, management purchased an icon set. The icon library was created to facilitate and ease the process of searching for and downloading icons. Before the creation of the icon library, developers had to navigate through multiple file folders to find the icon they wanted. With the guidelines site, a user can scroll through the icon set, choose the desired icon, select the size and color and easily download. The site also made icons available as SVGs. The guidelines site streamlined the process of searching for and selecting an icon.

Design Guidelines

The site also contains design guidelines ranging from design patterns, ergonomics research, and general design principles. These assets are intended to help guide those who are designing an application but have little to no design experience. This page shows recommendations for designing buttons.

Templates

The guideline site also contains design aides and templates that can be used in various stages of the project lifecycle. Some of the assets include: interview guides, example interview scripts, usability testing guides, and best practices for designing information architecture. This is an example of a persona template.

Next Project

Software Assessment Tool

A web application used to conduct evaluations of software development teams.

See Project