User Experience Design Portfolio Samples
Dianne Davis email@example.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
• 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
Luxury Automobile Site Redesign PROJECT:
Luxury Automotive Website Redesign
Information Architecture, Interaction Design
Content Inventory, Competitive Analysis, Site Map, Wireframes
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.
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
Wireframes Model: Build & Price (1.2.10)
COMPANY SEDANS YY XX XX XX IS
Home | News
| Buying | Owners | Find a Dealer
XX XX XX
XX XX XX
2007 YY 100 RWD Overview
YY 100 AWD
YY 100 RWD
Certified Pre-Owned Vehicles
YY 100 RWD
Build and Price Your YY 100 RWD:
Interior Performance & Safety
Select in any order: 3
Features & Specs Standard Vehicle without Options
Vehicle Accessories Warranty
Model Red X
Brochures GALLERY BUILD BUILD & & PRICE PRICE
FIND A DEALER
Luxury with Navigation Package $10,800.00
Vehicle Accessories Larger image
Allow Wheels - 18" G Spyder rear $ 903.00
Black - Premium Leather Larger image = Unavailable with selected combinations
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 ﬁelds below change to reﬂect new price. In addition to numbers in 7 ﬁelds changing, the effected ﬁelds 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
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.
Task Analysis, Needs Assessment, Information Architecture, Interaction Design
DELIVERABLES: Content Inventory, Site Map, Over 200 Wireframes CHALLENGE:
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
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.
- Individual 'Sales Rep' links take users to 'Sales Revenue' page anchored to the selected employee.
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
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
- 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.
- Management will have an additional 'Department' drop-down (e.g., Sales, CDs) placed below 'Network' drop-down.
- 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
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.
Expert review, one-on-one user testing
Expert Review Report, Usability Report (Findings and Recommend ations) and presentation
- 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
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.
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
• • • •
• • • • • • •
• 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 firstname.lastname@example.org