Kimberly Cooper Design Process

Post on 27-Jun-2015

178 views 1 download

Tags:

transcript

+

GUI Design: Process & ExamplesKimberly CooperGUI Designer3/22/12

+Product Specification Document

Created by engineering and product managers to define the scope and requirements of the project

Shareholder review, buy-in and approval

+Design Document

Created by GUI designer, Product Manager and Usability Expert. Includes initial wireframe layouts and screen/page descriptions

Management review, buy-in and approval

Revise Document

+Design Document

+Preliminary GUI Design

This phase will generate various design approaches. This is intended to look as close as possible to what the product could be.

+Paper Prototype

The purpose of the paper prototype is to create a visual representation of the eventual GUI. These prototypes will be used for User Testing.

User Testing

Revisions

+Hardware Preview

Meet with engineering to see a preview of the actual hardware. Several designs would be presented and loaded onto the prototype screen to choose the most successful outcome

+Physical Prototype

Painted SLA of product would be created and screen placed for visual approval.

Photography taken to create preliminary marketing materials.

+Flash and/or Coded Wireframe

This is a wireframe of the GUI, made to operate, as would the final product. There are only the barest elements of graphics used—often simple boxes with text.

User Testing

Revisions

+Final graphics

Final pixel-to-pixel versions of all screens, graphics elements and all other visual content.

Work with Engineering to implement screens on working prototype.

User Testing

Revisions

+Final Prototype, off-tool prototype or pre-production sample The final product

would arrive, I would photograph it and all marketing collateral would be created.

+Flash Demo

Normally I would create a Flash movie to be put on the company website that lets the user learn about and virtually use the product.

See a variety of demos on this page to get an idea: Demo