The Design Process

In my experience, I have found that the most successful way to achieve a superior design is to go through the correct process. The process I use is based in user-centered design – the user is defined and their needs are made clear, the goals of the client are examined and itemized, and both the client and the end user help to influence the final outcome throughout the process. An informed client is a happy client. The process looks more complex than just diving in to the project, however this method helps to weed out issues sooner – saving time fixing design or interaction problems later.

The Process Overview

The Initial Meeting

Once a project is contracted, I meet with the client to assess their needs, gather information on who are the primary and secondary audiences/users, collect any materials and content that may need to be considered in the project, and set expectations for the first round of sketches.

Research & Reconnaissance

placeholder

Even if a client has the information on their primary and secondary audiences, I begin by doing additional research on the user to help to give a full understanding of the needs of who the end project needs to satisfy. From this research I develop personas for a handful of target users to stand in for the user during the design process.

Next I will develop a rough information architecture (IA) for the project. Depending on the scope of the project, this could be as simple as a bubble flow chart, but can get as complex as a card or post-it sorting activity to assist in functionality and flow of the end project. On larger-scale projects the IA will be developed into a refined document.

The Ideation Phase

placeholder

I start the Ideation Phase by creating several paper and pencil sketches of different design concepts. Depending on the project, these can number in the dozens to the hundreds. From there, I narrow down the best concepts for the project based on the needs of the client and the needs of the user. These sketches are then scanned and submitted to the client for review and feedback.

The Iteration Phase

placeholder

After the client review, depending on feedback, either I create new sketches that incorporate client suggestions or repeat the previous step to develop more ideas. These pencil wireframe sketches will continue to be refined until the client is content with the proposed concepts. Additionally, an Information Architecture will be created to help conceptualize the flow of the project, be it a website or mobile application. Similarly, a motion graphic or video will be storyboarded.

Low-Fidelity Mock-Ups

placeholder

Once a design concept has been approved, I create a low-fidelity digital design. This design will be basic, typically lacking color, images, and content, focused on showing how the design will fill the space and how basic interaction might work. If the project involves high amounts of interactivity like a kiosk, website, or mobile app, the low-fidelity mock-up will be brought into a prototyping program and basic interactions will be created to give a better impression of the proposed final interaction and to elicit feedback on that interaction at an early stage in the process. This helps to refine the project before any coding has taken place. This is refined until the client is happy with the design and the designer feels that it accommodates the needs of the users, as represented by the personas, or through user feedback in user testing. This prototype can be tested with users to get initial feedback on usability.

Color Combinations & Typography

placeholder

After receiving the client approval of the low-fidelity design, I create a color chart and/or a mood board, typically involving a list of words and emotions that the client and designer want to incorporate in the final design. This process helps to develop color schemes and typeface combinations that will work best for this design. This step is made easier or removed if the design is simply an addition to current branding standards.

Medium-Fidelity Mock-Ups

placeholder

Like the low-fidelity mock-up, a medium-fidelity mock-up is still a simple version of the intended final design, but begins to use the color palate, typography choices, images and copy (if provided). If the final piece is interactive, a prototype simulating the intended interactions will be created in a prototyping program. This prototype can be tested with users to get additional feedback on usability. Ideally, you would not test with a user group who has tested with an earlier prototype.

High-Fidelity Mock-Ups

placeholder

Incorporating feedback from the medium-fidelity design, a high-fidelity design is created. The high-fidelity design is the intended outcome for the final product, both aesthetically and interactively. This prototype can be tested with users to get additional feedback on usability. Ideally, you would not test with a user group who has tested with an earlier prototype.

Front-End Production

placeholder

When the high-fidelity design is approved the project moves on to the final stages. For a website that means coding the layout for each page, styling using CSS, and adding content. For print design it means preparing the final design for print. For an animation and motion graphics it means creating and compiling all of the assets, animating, and producing the final product.

Back-End Development

If the project needs advanced interactions, is database driven, or is a mobile app, the project will need to go through back-end development, making all of the proposed interactions from the prototype fully functional. The high-fidelity prototype becomes a visual for a developer to ensure the interactions are completed as intended in the design.

Alpha Testing

Then the project goes in to first review, otherwise known as alpha-testing. This is typically completed by the designer or a small group to work out any bugs that may arise, such as browser-compatibility, printing errors, tweaking animations, continuity issues, etc.

Beta Testing

The last step is final testing, in which the client is fully involved in making sure the project is complete. This is called beta-testing. However, by this point, the changes are often small and typically only includes content tweaks. At this point the project can be retested with a user group to confirm the project meets the needs of the user, or to get additional feedback for slight refinements.

Project Launch

Once the project is complete and all parties involved are satisfied, the project is finalized.

Process Documentation

Bongo Logo Animation

Motion
Process Document

Craigslist Redesign

UX
Process Document

Amy Trager, CPO

Website
Process Document

Legal Visual Services

Website
Process Document

Evaluation of Tool: Rubric

UX
Process Document

JLL Animated Typography

Motion
Process Document

Enable-IT Project

UX
Process Document

Shiny Video

Motion
Process Document

Play-IT Project

UX
Process Document

Sweet Water Deli

Website
Process Document

JLL Animated Typography

Motion
Process Document

MobiCog App

UX
Process Document

Elizabeth Johnson Video

Motion
Process Document

Starbucks Service Recommendations

UX
Process Document

JLL Animated Typography

Motion
Process Document

Starbucks Service Review

UX
Process Document

Motion Tracking Test

Motion
Process Document

PHP Form: Overview & Evaluation

UX
Process Document

Two Button Games Intro

Motion
Process Document

PHP Form: User Testing

UX
Process Document

Twisted Reality Packaging

Motion
Process Document

PHP Form: Creation & Prototyping

UX
Process Document

Two Stroke Engine

Motion
Process Document

Activities4Us: Evaluation

UX
Process Document

Mercury

Motion
Process Document

Activities4Us: Prototyping & Testing

UX
Process Document

Adolescent Films Intro

Motion
Process Document

Activities4Us: Design, Low- & High-Fidelity

UX
Process Document

Activities4Us: Research & Personas

UX
Process Document

First Network Intro

Motion
Process Document

Caloric Budget: Evaluation & Promotion

UX
Process Document

Caloric Budget: Prototyping & User Testing

UX
Process Document

Caloric Budget: Design, Low- & High-Fidelity

UX
Process Document

Caloric Budget: Research & Personas

UX
Process Document

HotelRate: IA & Prototype

UX
Process Document

A Story Told Album Art

Print
Process Document