Issuu on Google+

User Experience Design Portfolio Samples

Dianne Davis info@fishbone-interactive.com

About Me I’m a freelance user experience consultant working from Toronto, Canada. I am an empathetic designer able to tune in to users’ needs and business goals. Over the course of my 14 year career in UX, I have worked for a variety of industries including automotive, education, telecommunications, health-care and others. My clients have included Fortune 500 companies as well as small startups and everything in between. I’m as comfortable working in complicated domains with very intricate work flows as I am on consumer web sites.

This portfolio contains the following sample documents from 3 of my case studies: • Site map

• Redesign Priorities

• Content Inventory

• Wireframes

• Needs Analysis

• Usability Report

• Task Analysis Much of my user experience work is confidential and is protected by non-disclosure agreements. As a result, the work shown here is just a sample representation of the types of deliverables I provide my clients, rather than an exhaustive library of everything I have done for each project.

Luxury Automobile Site Redesign

Case Study

Luxury Automobile Site Redesign PROJECT:

Luxury Automotive Website Redesign

SERVICE:

Information Architecture, Interaction Design

DELIVERABLES:

Content Inventory, Competitive Analysis, Site Map, Wireframes

PROCESS:

Devlin hired Fishbone Interactive to do the information architecture and interaction design for the redesign of the site. To establish the main priorities of the site redesign, I conducted a content analysis of the existing site and did a competitive analysis of the four sites that received the highest overall scores on the 'Overall Satisfaction Index' in J.D. Power's Canadian Automotive Manufacturer Website Evaluation Study. Based on these analyses and discussions with Devlin and the client, I identified the following four main priorities for the site redesign:

-

While changes to each of these priority areas improved the usability of the site, revisions to the global navigation were the most significant. To focus the site content, I reduced the number of global navigation categories, focusing on high-level categories and reorganizing and renaming categories to better convey their content. In addition, I made each vehicle visible and accessible in the global navigation so that users would be able to access each one of them from every page on the site.

RESULT:

Global navigation Home page structure Vehicle page structure Revisions to Build & Price Page

Site moved from 23rd to 1st place on the J.D. Power Overall Satisfaction Rating for Automotive web sites.

“The user experience that Dianne created for the redesign made a huge impact on the website’s success, even winning the highest ranking in customer satisfaction in the J.D. Power Canadian Automotive Manufacturer’s Web Site Evaluation Study after launching. I would welcome the opportunity to work with her again.” - Kate Stewart Former Director of Strategy

Content Inventory

Redesign Priorities

Sitemap

Wireframes Model: Build & Price (1.2.10)

COMPANY SEDANS YY XX XX XX IS

Home | News

| Buying | Owners | Find a Dealer

SPORTS COUPE

SPORT UTILITY

HYBRID

FUTURE VEHICLES

XX

XX XX XX

XX XX XX

XX 100

2007 YY 100 RWD Overview

YY 100 AWD

YY 100 RWD

1

All Models

| LOGIN

Certified Pre-Owned Vehicles

200

YY 100 RWD

Build and Price Your YY 100 RWD:

Exterior 2

Select Year:

2007

Interior Performance & Safety

Reset

Select in any order: 3

Colour

4

Help

Option Package

Features & Specs Standard Vehicle without Options

Vehicle

Vehicle Accessories Warranty

Model Red X

5

Larger image

Brochures GALLERY BUILD BUILD & & PRICE PRICE

Interior

FIND A DEALER

Leather:

Moonroof Package

$ 2,250.00

Sport Package

$ 4,800.00

Luxury Package

$ 5,650.00

Luxury with Navigation Package $10,800.00

Vehicle Accessories Larger image

Cloth:

Interior

Premium Leather:

$ 5,650

6

Cargo Box

$ 104.00

Cargo Net

$ 56.00

Allow Wheels - 18" G Spyder rear $ 903.00

Black - Premium Leather Larger image = Unavailable with selected combinations

Save Vehicle

7

MSRP:

$49,000

Option Package:

$ 5,650

Vehicle Accessories:

$ 1007

Total Price

$54,807

Next Steps:

Estimate Payments

Print Vehicle

Apply for Credit

Club | Help | Legal | Privacy | Contact Us | Francais

NOTES 1 1. Selecting another model, takes user to 'Build & Price' page for selected model. TBD: Can page retain user's selections (e.g., selected colour and option

package, etc.,)? 2 2. 'Select Year' option available when more than one model year is available. 3 3. As in current site, rolling over items shows which combinations are available (i.e., locks appear, items are greyed out). User must click items to make a

selection. 4 4. 'Standard Vehicle without Options' is default option package when user enters the page. (Note: In above page, user has already made selections) 5 5. All option packages need to be seen without scrolling. Only the option package title is to be seen to conserve space, visually simplify area, and most

importantly to allow users to easily determine, at a glance, how their colour and interior selections (e.g., colour, interior) affect the available option packages (i.e., greyed out; lock appears) and vice versa. Users can click the name of an option package to reveal its contents (e.g., pop-up window containing descriptions of all option packages or a tool tip). Cost for each option package must be right aligned so that users can quickly scan to compare prices. 6. Vehicle accessories are displayed in a traditional scrolling box. Cost for each accessory must be right aligned to allow easy scanning. 6 7. When an option package or vehicle accessories are selected, the appropriate price fields below change to reflect new price. In addition to numbers in 7 fields changing, the effected fields are highlighted. NOTE: Design must allow both price information and selections (i.e., colour, etc) to be seen on the screen at the same time (i.e., price should not be below the fold), to ensure that users can easily see how their selections effect price.

23 of 35

Online Ad Management Platform

Case Study

Online Ad Management Platform PROJECT:

Creation of a new online ad management platform for a U.S. based company to centralise the management of advertising operations such as sales, campaign management, reconciliation and billing across large networks of owned and affiliated web sites.

SERVICE:

Task Analysis, Needs Assessment, Information Architecture, Interaction Design

DELIVERABLES: Content Inventory, Site Map, Over 200 Wireframes CHALLENGE:

SOLUTION:

Merging the functionality of five separate Windows programs as well as an existing web application into a single online application to be used by a variety of user groups including sales, ad campaign managers, and billing. Application also had to be adaptable for use by external companies purchasing the platform. I worked with the various user groups (e.g., sales, campaign managers, etc.,) to determine their day-to-day tasks within the existing 5 Windows applications as well as the existing online application. In addition to this task analyses, I conducted a needs analysis to determine users’ needs and wants in the new application. These analyses helped me establish the following goals for the wireframes:

- Layer information so users can unfold it as needed

- Remove extraneous information from screen - I mprove flow so that a minimum of clicks are required to access information

As I created the wireframes for this new online management system, I regularly checked in with users to determine if the new screens allowed for an efficient task flow and provided them with the timely information they needed to make decisions. The project was conducted at a distance over an 18 month period, involving multiple onsite visits as well as Web-Ex team meetings.

"Dianne is incredibly easy to work and communicate with, and she ramps herself up on projects very quickly.  She became familiar with a very nonstandard and highly technical business and was able to grasp the needs and frustrations of several key departments in no time at all!  Her designs were creative and functional, thoroughly addressing all requirements of the project." - Helen Splagounias Sr. Project Manager, Burst Media

Needs Assessment

Task Analysis

Wireframes

Wireframes *Sales Agents' Dashboard Widgets

Sales Rep Revenue - 'Sales Rep Revenue' link in widget title bar takes user to 'Sales Revenue' page (i.e., Sales > Sales Revenue), refreshing home page.

Campaigns:

Network

Z Network

Region

Inside Sales

ending between:

and:

01/10/2007

Employee All

- Individual 'Sales Rep' links take users to 'Sales Revenue' page anchored to the selected employee.

31/10/2007

DD/MM/YYYY:

DD/MM/YYYY:

Show For campaigns whose segments end between 10/01/07 and 10/31/07 Sales Rep

Contracted Delivered % Delivered Quota Quota % Quota % Revenue Revenue (68% Exp.) (Contracted) (Delivered) 220,243 $42,566 19% 157,824 140% 27% 35,697 $13,145 37% 35,520 101% 37%

P. Crockett B. Hermann C. Norris

256,690

$59,806

23%

144,000

178%

P. Shaak

47,204

$25,525

54%

72,000

66%

K. Sullivan

40,760

$29,452

72%

50,880

80%

58%

0

$0

0%

0

0%

58%

600,594

170,494

0

460,224

1

0

C. Ryan

Total

between: 01/10/2007

42% 35%

Campaigns ending: All campaigns whose segments end with specified dates Campaigns running: All campaigns whose segments run within specified dates regardless of end date

Campaign Delivery: Advertisers Network Z Network

Employee John Smith

Show

- Clicking the 'Campaign Delivery: Advertisers' link in the widget title bar takes user to the 'Advertiser Campaigns' screen (i.e., Campaigns > Campaign Reports > 'Advertiser Campaigns'), refreshing the /home page.

Z Network - J. Smith: Advertiser Campaign Delivery Delivery

- 'Employee' drop-down contains all employees from user's department (e.g., Sales vs. CDs) and defaults to user.

100% 80%

- Management will have an additional 'Department' drop-down (e.g., Sales, CDs) placed below 'Network' drop-down.

60% 40%

- Hovering over an advertiser bar reveals the number of campaign groups, as well as delivery percentages.

20% 0% -20% -40% -60%

Xtend Global Media 6 Campaign Groups Delivery 25/10/07: -31% Delivery 24/10/07: -45%

- Clicking an advertiser bar takes user to the 'Advertiser Campaigns' screen (i.e., Campaigns > Campaign Reports > 'Advertiser Campaigns'), anchored to the selected advertiser, refreshing the dashboard/home page.

*Widgets may also apply to CDs

29 of 141

Medical Ambulatory Referral System

Case Study

Medical Ambulatory Referral System PROJECT:

Usability testing of the Ambulatory Referral Management System (ARMS), an online prototype, for the Hospital for Sick Children.

The ARMS prototype was to replace the paper based referral system for the acceptance and management of referrals from community pediatricians and other health care professionals. ARMS was to allow physicians, nurses and clerks to review, triage and process referrals and external physicians to submit referrals to the hospital. Two phases of evaluation, an expert review and one-on-one user testing on a series of task oriented usage scenarios (e.g., book patient, defer patient), were undertaken with clerks, nurses and physicians from the Neurology, Hematology, and Orthaepedic clinics.

SERVICE:

Expert review, one-on-one user testing

DELIVERABLES:

Expert Review Report, Usability Report (Findings and Recommend ations) and presentation

CHALLENGE:

- Varied work flows in each department - Complex system with specialized domain knowledge - Different user groups (e.g., Physicians, Clerks) with different goals, performing very different tasks

SOLUTION:

Dianne’s attention to critical details and her insightful suggestions for improving the usability of the applications resulted in important modifications to the design of both programs, and helped to ensure their success. Dianne was a valuable member of our team, and communicated effectively with both the developers and end-users. I highly recommend including her in any project where user interface design is critical (and it always is!). “

To deal with the complexity of this prototype and the domain knowledge - Gordon Tait, PhD. required, I used a partnered usability testing approach. I collaborated Former Director of Medical Informatics, with an internal project manager, a nurse at the hospital familiar with Hospital for Sick Children the referral process, to run the one-on-one usability test sessions. This collaborative approach helped us identify gaps in the prototype’s online work flow. While testing identified some usability issues (placement of buttons, clarity of text), the majority of the findings related to gaps when the system did not mirror or capture the fine grained details of users’, workflow particularly that of the clerks. My findings and recommendations were used by developers to improve the work flow of the application so that it mirrored the various user groups’ work flow.

Usability Report

What My Colleagues Say design work blends science “ Dianne's and intuition, research and creativity.

is incredibly easy to work and communicate “ Dianne with, and she ramps herself up on projects very quickly.  She became familiar with a very nonstandard and highly technical business and was able to grasp the needs and frustration of several key departments in no time at all!  Her designs were creative and functional, thoroughly addressing all requirements of the project. - Helen Splagounias Sr. Project Manager, Burst Media

She's comfortable with complex domains, producing clever solutions to usability problems, effective information architectures, and winning user experiences.

- Avi Soudack, Brightroom

usability assessments “ Dianne's are thorough and insightful, greatly assisting designers in how to best improve interfaces.

enjoyed working with Dianne. “ ISheveryhasmuch an intuitive sense of what works on the web, backed up by years of experience and a focus on usability. The user experience that Dianne created for the redesign made a huge impact on the website’s success even winning the highest ranking in customer satisfaction in the J.D. Power Canadian Automotive Manufacturer’s Web Site Evaluation Study after launching. I would welcome the opportunity to work with her again.

- Kate Stewart Former Director of Strategy Devlin

attention to critical “ Dianne's details and her insightful suggestions for improving the usability of the applications resulted in important modifications to the design of both programs, and helped to ensure their success. Dianne was a valuable member of our team, and communicated effectively with both the developers and end-users. I highly recommend including her in any project where user interface design is critical (and it always is!).

- Dr. Alison Smiley, PhD Human Factors North and insightful, “ Professional Dianne Davis is our expert of choice for usability testing and interaction design. Her findings uncover why end users stumble and her design recommendations shift online behaviour toward organizational goals - which is just as important as ease of use! - Diane Mckerlie, Design Strategy

- Gordon Tait, PhD Former Director of Medical Informatics Hospital for Sick Children

Selected Clients Automotive

Human Factors

Shipping

• • • •

• • • • • • •

• Borderfree.com* • Canada Post* • Federal Express Canada*

Bodyshopmall.com* General Motors Canada* Luxury Automobile Manufacturer* Nissan Canada*

Education • Bell Learning Solutions • Learning Designs Online • TVOntario

Financial/Insurance • Clarica Life Insurance* • Toronto Stock Exchange*

Food Products • Nestle* • Popsicle*

Greater Toronto Airports Authority* Human Factors North IBI* Maptuit Midwest Research Institute* Ministry of Transportation (Ontario)* Transport Canada*

Software • Deltaware* • Sitraka (Now Quest Software)*

Telecommunications/Media • • • • • • • • • • • • •

Bell Canada* Brightroom Burst Media* Canadian Broadcasting Corporation* Design Strategy Devlin Integrated Media Globe & Mail* Job Shark* Maclaren McCann Interactive Marble Media The Marketing Store Quarry Integrated Communications Russell Branding

*Work completed as a sub-contractor

Dianne Davis info@fishbone-interactive.com


Dianne Davis' User Experience Portfolio Samples