More than just a wireframe

My approach to user experience design is much more than just a finished wireframe. It's a process involving collaboration, discovery, creativity, inspiration, and iteration. My final documents go beyond basic screens with only the "happy path" designs. They include near pixel-perfect illustrations, detailed descriptions of behaviors and interactions, and comprehensive coverage of features and functions, including error conditions. I use elements like revision tracking to make it easier for the team to identify changes between design versions.

Due to their proprietary nature, additional portfolio samples are only available in person.

User Flows: Optimizing Ecommerce Paths

To assist the team understand the flow of different use cases in an Ecommerce flow, I created multiple versions of the same diagram that highlighted the key paths. The first image represents the new user registration flow. The second image represents the flow for a returning user who has saved credit card information. The path for the returning user is streamlined to reduce the number of clicks required for the purchase process.

Mobile Applications

iPhone Healthcare App

Medavie Blue Cross in Canada has a mobile application that allows subscribers to access information about their plan and benefits. I created detailed wireframes showing the screens and interactions. Below are examples of screens for searching for nearby providers and checking coverage benefits.

Gamification/Social Engagement Concepts

An organization that helps people track their diet and exercise wanted to create a simple and engaging mobile application for their members. I created a series of conceptual mockups that incorporated elements of gamification and community encouragement and competition.

Internet Applications

Clinical Trial Matcher

Many clinical trials have difficulty finding suitable candidates. A client wanted to create a simple and inviting matching service to help match patients with clinical trials, providing guidance to help them through the complex and unfamiliar process.

Brightcove Media Manager

Brightcove's web application enables content owners to manage and track their video content.

Before and After: Registration

A client had a registration form that just kept on scrolling. Errors aren't processed until the form is submitted and if a user abandons the form there is no record of them in the system. The redesigned concept breaks the sections into discrete and manageable navigation elements, chunking the form processing and providing incremental save points. The first step has the user enter their email and create a password, so they can be contacted if the form hasn't been completed and can pick up where they left off. Progressive disclosure of form elements also reduces screen clutter.

Beyond the "Happy Path"

Too often people only think of the "happy path" where users and the system perform as expected. Unfortunately, this is rarely the case, so I make a point of making sure my designs identify error conditions and recovery routes. Below are examples of a flow diagram showing possible error paths and wireframes showing error conditions.

Data Visualization

Finding Consensus

A client used a survey tool on an iPad to gather feedback from their customers. They would ask a small number of individuals (usually 5 to 15) within an organization the same set of questions and then review the results for three key elements: 1) Internal consensus, 2) Internal disparity, and 3) Comparison to benchmark data from all other organizations answering the same question. Below are a couple of the conceptual ideas I created to represent the information.

Prius Statistics

I've been keeping track of fuel usage in my 2004 Toyota Prius using an Excel spreadsheet I created. Every time I purchase a tank of gas, I enter the date, number of gallons, price per gallon, and how many miles I drove. I also enter local average daily temperatures. One of the more interest charts from the data shows the effect of temperature on gas mileage.

Site Design

The Ruckus Campus website was aimed at college students looking for music and entertainment content in a social environment.

Television Applications

Television-based applications have design constraints of lower resolution (at the time of these designs, TV resolution was 640x480 pixels) and limited up/down or left/right navigation with a remote control or game controller.

Before and After: Radio@AOL

An outside design firm created a design for a television-based application to play streaming radio. I was asked to review the design and had several concerns for a TV-centric product using a remote control as an input device. I created an alternative design to address these concerns.

I identified the following concerns:

• Original design was 1024x768px (too large for TV-based design at the time) with no "safe area"
• Multiple areas requiring focus would make navigating controls on the screen slow and confusing
• No clear indicators as to what area had focus
• Use of triangle as list bullet could be incorrectly identified as either "Play" or "Navigate Right" control on the remote

In my proposed design larger fonts were used. Presets were treated as a "genre" (not shown in the wireframe) which allowed for the following design/navigation improvements:

• Resized image and added safe area
• Stretch track information across full width of screen
• Eliminate need for multiple areas of focus - left/right scrolls among genres, up/down scrolls within current genre
• Provide visual cues as to what has focus
• Provide visual cues for navigation

AOL on a PlayStation 2

Around 2002, I was working with a team at AOL to get the AOL service running on a PlayStation 2. The navigation used a "carousel," where the highlighted item was fixed in the center position and the options would cycle through that position. One advantage of using a game controller for navigation was that a left/right navigation group and an up/down navigation group could both have focus at the same time. Visual cues identified which controller buttons were used to perform available actions.

AOL on Media Center PCs

AOL was also making their music and photo services available on Media Center PCs connected to televisions. The challenge was to define a unified experience across AOL services working within the constraints of a television-based interface. In the process of my research, I identified core features for each content area, investicated Media Center design standards, and defined a consistent navigation scheme and common theme. The solution simplified the navigation compared to typical PC applications and limited the available functionality on each screen to compensate for navigation and screen resolution constraints.