1. +
GUI Design: Process &
Examples
Kimberly Cooper
GUI Designer
3/22/12

2. +
Product Specification Document
 Created by engineering and product managers to define the
scope and requirements of the project
 Shareholder review, buy-in and approval

3. +
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

4. +
Design Document

5. +
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.

6. +
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

7. +
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

8. +
Physical Prototype
 Painted SLA of product would be created and screen placed for
visual approval.
 Photography taken to create preliminary marketing materials.

9. +
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

10. +
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

11. +
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.

12. +
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