The UI design process, step 2: Design Phase

Here we develop design directions and work on mockups and prototypes, which become more complete over time. We'll customize the process to fit your needs.

Initial prototypes There are countless ways to design a product. We start with initial concepts, ideally from a Group Design Workshop. We start with sketches or wireframes to develop ideas, and develop interactive prototypes. Clicking through a simple prototype gives you a better idea of how it works than looking at a static image.

The visual designer starts to develop ideas about typography, color, layout and graphics once the basics of the interaction model are accepted.

A recent client found that the interactive HTML prototype helped the development team see how the product would work. It was the basis for usability testing and was part of the design spec.

Site map We create a site map that outlines the software. This is a good way to review the structure before we invest time in design. Flow diagrams and feature lists made with Post-It notes help to understand how idea and featuress relate.

Review and refine Design reviews give you the opportunity to bring up questions about the prototypes. The number of design-review-refine cycles is based on your schedule and the complexity of the product.

Combine UI and visual design By this time, the visual design has progressed so we can combine it with the interactions and navigation. We now have a unified model to develop and test.

Usability testing There's nothing like watching real users work on your product. It's sometimes very humbling. We can run studies on anything from paper prototypes to finished software.

Here's a video showing what you'll see in the observer room during a usability study. The Morae software transmits the screen and the sound and highlights the mouse movement.

A usability-testing client found that the qualitative results from the study matched the quantitative data in their site traffic analysis. Together, the two forms of information helped them make changes to their Web site. They reported an improvement in the user experience after taking most of the recommendations in our Usability Report.

Completing the design. Once we've met your requirements, we finish the design and write a spec at the appropriate level of detail as part of the Delivery Phase.

top of page

The design process

1. Overview
2. Discovery phase
3. Design phase
4. Delivery phase