• Date: 04.2014 - 08.2015
• Platform: Web
• My Role: Design Pattern, Icon Library, Visual Design

Overview

Designing a one stop UX resource for designers, developers, product team and marketing department.

Objective

Create a UX Design System to have all design patterns and assets at one single place.

Tools

User Interviews, creating FontIcons, Visual Design.

Steps

Understand all the design needs of developers, designers, product and marketing folks and creating a one stop intranet application for internal access.

UX Process

The whole project took 3 months.
• First thing I did, after I conceived the idea of single UX resource system, was to gather all the icons, graphics and the design patterns we created over the years.
• Created an HTML, JQuery based WYSWYG editor for reusable design and code.
• Added our UX Strategy.
• Added our Style guide.
• Created and included a searchable Icon library which creates code to include.
• Added design pattern for Login, image gallery, top navigation, etc.
• Included assets for any team to create a new project with consistent look and feel.

With the team we created a UX Strategy, which had four main pillars. Be focused on customer. Be data driven. Be consistent and Lead by design.

The login screen was being used at 40 different places in 10 different applications, so I created a single login design with code which can be re-used.

I also created a reusable template to create a new web project with our standard UI layout.

Another item was bootstrap based Photo gallery which we created a common design pattern so it can be re-used in all places.

Another big item was Popups in the UI there was 144 different places where popups were used. I created four different types of popup one for each, success, error, warning, information, and question.

We had 100's of icons lying around in the form of Pngs, and image sprite, I worked with the designer to create a FontIcon library.

Created a FontIcon using a font icon creator to compile the complete icon library.

Created a handy manual for developers to create icons based on the FontIcon rather than a PNG.

Created a searchable Icon library in the Design system.