Task Analysis & Storyboard · deleting the continue button and creating a tab browsing experience, the user has clear directions to move through the choice steps. Another significant

Task Analysis & Storyboard Ford www.ford.com

James Rose User Experience Design Consultant

June

10

Task Analysis & Storyboard: http://fordvehicles.com 2 of 34

Table of ContentsEXECUTIVE SUMMARY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

PROCESSES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Build & Price: Task analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Build & Price: inTerface changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Build & Price: Model Page (sTeP 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Build & Price: TransMission Page (sTeP 2). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Build & Price: Packages Page (sTeP 3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Build & Price: exTerior Page (sTeP 4) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Build & Price: inTerior Page (sTeP 5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Build & Price: accessories (sTeP 6) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Build & Price: suMMary Page (sTeP 7) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 esTiMaTe your PayMenTs: Task analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 esTiMaTe your PayMenTs: inTerface changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 esTiMaTe your PayMenTs: choose Vehicle Page (sTeP 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 esTiMaTe your PayMenTs: finance oPTions (sTeP 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 search dealer inVenTory: Task analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 search dealer inVenTory: inTerface changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 search dealer inVenTory: choose a Vehicle (sTeP 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 search dealer inVenTory: selecT your oPTions/ resulTs (sTeP 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 search dealer inVenTory: reserVer your Vehicle noW! (sTeP 3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Brochure By Mail: Task analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Brochure By Mail: inTerface changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Brochure By Mail: Brochures (sTeP 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 online crediT aPPlicaTion: Task analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 online crediT aPPlicaTion: inTerface changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 online crediT aPPlicaTion: indiVidual aPPlicaTion (sTeP 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 online crediT aPPlicaTion: JoinT aPPlicaTion (sTeP 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 aPPly for a JoB: Task analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 aPPly for a JoB: inTerface changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 aPPly for a JoB: search for a JoB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 aPPly for a JoB: search resulTs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 aPPly for a JoB: VieW JoB deTails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 aPPly for a JoB: 1sT sTeP in aPPlicaTion Process (sTeP 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 aPPly for a JoB: 2nd sTeP in aPPlicaTion Process (sTeP 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 aPPly for a JoB: 3rd sTeP in aPPlicaTion Process (sTeP 3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34


Executive Summary

Task analyses were conducted for the FordVehicle.com website. For these analyses the processes were dissected to identify areas where streamlining and optimization could occur. Storyboards were also created to accompany the reconstructed tasks, showing the various screens as users move through the redesigned tasks.

The most significant improvements in the multiple page processes included:

• Clarifying the step sequence for choosing options during the Building & Pricing of vehicles . By deleting the continue button and creating a tab browsing experience, the user has clear directions to move through the choice steps. Another significant change was deleting the page, Choose Your Path. This will send the user directly to the Building & Pricing page.

• Redesigning the interfaces for the Estimate Your Payments pages process . Changed the look of the Choose Your Vehicle page to match the website’s inventory page. Also, by labeling the pages with step numbers helps the user to move forward or back, if need be, in the process.

• Combined Let Us Find It For You and Search Dealer Inventory into one path. This directs the user right to the task requested. Rearranged the Select Options to match the same order as the options in the Building & Pricing of vehicle section. Created a pop-up window for the user to either reserve their vehicle by calling the dealer or having the dealer contact user.

• Reduced the page length . For the Apply for Credit form the input widths were adjusted so they would fit on the same line as their labels. Also by arranging the inputs in a more cohesive order help reduce the page length. Visually restructured the Select a Dealer section for the user to choose a specific dealer now or one later.

• Streamlined and clarified the process for searching and applying for a job . The steps to apply for a job were unclear and users weren’t sure at what point, if at all, the job application was submitted. The revised steps and interfaces clarify this.

Beyond the task analysis, 21 single page wirefames were created to show how these tasks can be streamlined in a more efficient manner. The single page storyboards demonstrates how a consistent interfaced design, consolidating steps, and clear labeling contributes to a better user experience.


Processes

Build & Price: Task Analysis

Currently, there are 3 different links a user can choose to start the “Build & Price” a vehicle process. One link is located in the drop down menu under “Shopping Tools”. The second link is found in the bottom navigation. The third link option is available once a specific vehicle is chosen. Both the net price and current summary are dynamic and change as the user’s choices change.

Current Path: 1. A. Click “Build & Price” link from bottom navigation B. Choose vehicle type, hover over vehicle, mouse to “Build & Price” C. From the “Shopping Tools” drop down menu, hover over and choose “Build & Price”2. Choose Your Path page has user choose “Let Us Find It For You” or “Build Your Own”3. Click “Build Your Own” link area4. Enter zip code5. Press “Continue” button6. Choose model (some vehicles will have choose style first)7. Select vehicle package8. A. Press “Continue” button B. May choose “Exterior” in navigation to move forward9. Choose exterior color10. Choose extra exterior items11. A. Press “Continue” button B. May Choose “Interior” in navigation to move forward12. Choose interior color13. Choose extra interior items14. A. Press “Continue” button B. May choose “Accessories” in navigation to move forward15. Choose available accessories for vehicle16. A. Press “Continue” button B. May choose “Summary” in navigation to move forward17. User has the option to edit current summary of vehicle created. (This page has 2 different names, “Summary” and “Make It Yours” depending on which vehicle was chosen from the start)

Redesigned Path: 1. A. Click “Build & Price” link from bottom navigation B. Choose vehicle type, hover over vehicle, mouse to “Build & Price” C. From the “Shopping Tools” drop down menu, hover over and choose “Build & Price”2. All each tab will be grayed out until an option or selection has been chosen3. Choose model type [Step 1 page]4. Click the “Transmission” tab to move forward5. Select transmission option [Step 2 page]6. Click the “Packages” tab for next choices7. Choose package option [Step 3 page]


8. Click the “Exterior” tab for the next step 9. Choose paint color and exterior options [Step 4 page]10. Click the “Interior” tab to move forward 11. Click the “Interior” tab to continue12. Choose fabric style and interior options [Step 5 page]13. Click the “Accessories” tab to move forward14. Choose any accessories designated for specific vehicle [Step 6 page]15. Click the “Summary” tab for complete recap of all choices16. User can edit, find local dealer, request a brochure or find special offers [Step 7]

Build & Price: Interface Changes

• Deleted “Choose Your Path” page, thus directing user right to vehicle option model page.

• Moved “enter zip code” step to the “Summary” page.

• Created tab browsing through vehicle options and deleted the continue button giving user a single-consistent forward direction.

• Labeled each page with a specific step number, helping the user to move forward or back, if need be, in the process.

• Renamed all “Make It Yours” pages to “Summary” for consistency.

• Combined style options and model options into one page.

• Created a “Transmission” tab giving users more information and eliminating the poor visibility and poor placement of that option.


Build & Price: Model Page (Step 1)


Build & Price: Transmission Page (Step 2)


Build & Price: Packages Page (Step 3)


Build & Price: Exterior Page (Step 4)


Build & Price: Interior Page (Step 5)


Build & Price: Accessories Page (Step 6)


Build & Price: Summary Page (Step 7)


The user can reach the “Estimate Your Payments” link 2 different ways. The first link is located in the drop down menu under “Shopping Tools”. The second link is found in the bottom navigation. The user’s monthly payments are dynamic and update as the user updated their choices.

Current Path - Finance Payments: 1. A. Click “Estimate Your Payments” link from bottom navigation B. From the “Shopping Tools” drop down menu, hover over and choose “Estimate Your Payments”2. Choose vehicle from Estimate Your Payments page. This will direct user to the “Pricing” page3. Enter estimated selling price of vehicle (This has pre-filled estimate amount based on estimated retail price of vehicle. The user has the option change the amount.)4. Enter down payment amount (This has a pre-filled amount of 10%. User can change the amount)5. Enter net trade-in value (The user can look up trade-in value of their vehicle. A new window opens to external site. User must give personal information before getting appraisal.)6. Choose Terms in months (24 through 72 months.)7. Enter your own rate for APR (by percent)8. User can print page, search dealer inventory, request a quote, and apply for credit when finished

No Changes Necessary to Task Steps (Changes Occur in Interface)

Estimate Your Payments: Interface Changes (Step 1: Choose Vehicle)

• Formatted the page to look like the rest of the website’s inventory pages. • Used the full width of page for consistency with website.

• Labeled page with a specific step number, helping the user to move forward (or back, if need be) in the process.

Estimate Your Payments: Interface Changes (Step 2: Finance Options)

• Removed local navigation. Those links direct the user to pages not related to “Estimating Your Payments” and the user could not return without starting from step 1. Also, the “Pricing” link directs user to a different “Pricing” page completely.


• Added photo of vehicle and labeled the photo with year, make, and model.

Estimate Your Payments: Task Analysis


• Estimate Your Payments: Interface Changes (Step 2: Finance Options)

• Changed radial buttons to large clickable buttons.

• Created two unified fields, one for the form and one for totals giving the page balance.

• Used consistent font sizes, which brings unity to the page.

• Organized and labeled a “Final Step” encouraging the user to take the information and complete the task with various options.

All the same changes occur to the “Lease Payments” tab option


Estimate Your Payments: Choose Your Vehicle (Step 1)


Estimate Your Payments: Finance Options (Step 2)


The user can reach the “Search Dealer Inventory” link 2 different ways. The first link is located in the drop down menu under “Shopping Tools”. The second link is found in the bottom navigation. Once a vehicle is chosen the user must choose which path to follow. The first path, the user indicates which features they want , a search returns results and then the users fills out a form for a dealer to contact them. The second path, the user enters their zip code and the features requested and can see the inventory of the five closest dealerships. The results are dynamic and update as options are chosen

Current Path 1 - Let Us Find it For You: 1. A. Click “Search Dealer Inventory” link from bottom navigation B. From the “Shopping Tools” drop down menu, hover over and choose “Search Dealer Inventory”2. Choose a vehicle from Inventory Search page. This will direct the user to the Search Inventory page3. Click the “Let Us Find Your Vehicle” button4. Choose model5. Choose exterior color6. Choose interior color7. Choose Preferences (Selected drive type, [e.g. FWD, 4WD, or FWD] )8. Choose Option Upgrades8. User fills out contact information form9. Click “Let Us Find Your Vehicle” button10. A Thank You pop-up window opens and user can close or apply for Ford Credit

Current Path 2 - Search Dealer Inventory: 1. A. Click “Search Dealer Inventory” link from bottom navigation B. From the “Shopping Tools” drop down menu, hover over and choose “Search Dealer Inventory”2. Choose a vehicle from Inventory Search page. This will direct the user to the Search Invetory page3. Enter zip code4. Click “Search Dealer Inventory” button5. User must close pop-up window that instructs user to choose features to nearest dealership6. Select Model7. Choose exterior color8. Selected drive (e.g. FWD, 4WD, or FWD)9. Select engine (size)10. Select transmission11. Select interior color12. User can search between the 5 closest dealerships and/or clear all selections and start fresh

Redesigned Path: 1. A. Click “Search Dealer Inventory” link from bottom navigation B. From the “Shopping Tools” drop down menu, hover over and choose “Search Dealer Inventory”2. Choose vehicle [Step 1 page]3. Enter zip code or dealer name [Step 2 page]4. Choose model5. Select Transmission

Search Dealer Inventory: Task Analysis


6. Select drive7. Select engine8. Select exterior color9. Select interior color10. User can search between the 5 closest dealerships and/or clear all selections and start fresh11. When user clicks on a vehicle, a pop-up window appears. The user has a choice of reserving the vehicle by calling the dealer or have the dealership contact the user [Step 3 page]

Search Dealer Inventory: Interface Changes

• Combined “Let Us Find It For You” and “Search Dealer Inventory” into one path.

• Created a zip code entry on the Select Vehicle Features page and a text area for user to type in a specific dealer’s name, giving the user a choice.

• Organized “Select Options” to match the same order as “Build Your Vehicle” options.

• Enlarged the dealer switch between drop down menu.

• Created a pop-up window with “Reserver Your Vehicle Now” button and optional “Have The Dealer Contact You” fill in form.

• Increased the length of the page. Preventing scrolling through the option section.

• Able to increase the size and number of vehicles in the result sections.

• Removed the “Appraise Now” button and accompanying text.



Search Dealer Inventory: Choose vehicle (Step 1)


Search Dealer Inventory: Select Options and Results (Step 2)


Search Dealer Inventory: Reserve Your Vehicle NOW! (Step 3)


Brochure by Mail: Task Analysis

There are currently 2 paths users can take to sign up to receive a brochure by mail. Each path is based on which page the user comes from.

Current Path 1: Coming from a non-vehicle page1. Select vehicle from dropdown menu2. Click “By Mail” 3. Enter Name and Address.4. Select Radio button for when you plan to acquire new vehicle.5. Check (up to 3) preferred vehicle(s).6. Submit Form.

Current Path 2: Coming from a vehicle page1. Click “By Mail” 2. Enter Name and Address.3. Select Radio button for when you plan to acquire new vehicle.4. Check (up to 3) preferred vehicle(s).5. Submit Form.

Redesigned Path (same for both current paths)1. Enter Name and Address. [Step 1 page]2. Select Radio button for when you plan to acquire new vehicle.3. Check (up to 3) preferred Vehicle(s). 4. Submit Form.

Brochure by Mail: Interface Changes

• Moved the pop-up form that opened when “By Mail” was clicked onto the Brochures page, eliminating the step for clicking “By Mail”.

• Visually separated the steps to Receive a Brochure by Mail from the steps to Download a Brochure. (just capitalized some words).


Brochure By Mail: Brochures (Step 1)


There are currently 2 paths users can take to apply for credit. One path is for an Individual Application; the second is for a Joint Application.

Current Path 1: Individual Application1. Choose Finance Option2. Choose “Individual” Application.3. Fill in Personal Information fields4. Fill in Income and Employment fields 5. Select a Dealer or choose “I would prefer to select a dealer later”6. Click “Okay, lets review”7. Review information 8. Click ‘Edit’ if necessary, and return to previous page to make edits.9. Agree to terms and conditions10. Click “Submit my Application”

No Changes Necessary to Task Steps (Changes Occur in Step 1 Interface)

Current Path 2: Joint Application1. Choose Finance Option2. Choose ‘Joint’ Application3. Fill in Personal Information fields for Primary Applicant4. Fill in Income and Employment fields for Primary Applicant5. Fill in Personal Information fields for Secondary Applicant6. Fill in Income and Employment fields for Secondary Applicant 7. Select a Dealer or choose “I would prefer to select a dealer later”8. Click “Okay, lets review”9. Review information 10. Click ‘Edit’ if necessary, and return to previous page to make edits.11. Agree to terms and conditions12. Click “Submit my Application”

No Changes Necessary to Task Steps (Changes Occur in Step 1 Interface)

Online Credit Application: Interface Changes

• Adjusted input widths allowing them to live on the same line as their respective labels.

• Reduced the length of page by relocating some inputs fields.

• Added a checkbox under “Joint Applicant” section for the user to check, if the Joint Applicants’ address is the same as the Primary Applicants’ . Potentially reducing duplicate steps.

• Visually restructured the “Select a Dealer” section to separate the two options of selecting a dealer now or selecting one later

Online Credit Application: Task Analysis


Online Credit Application: Individual Application (Step 1)


Online Credit Application: Joint Application (Step 2)


Apply For A Job: Task Analysis

Current Path: Apply For A Job1. Choose a Career area2. Choose an Experience level3. Click Next 4. Browse Jobs5. Click “Add to Job Folio” (up to three jobs can be added to Job Folio)6. Click next7. Enter email address8. Pick a password9. Confirm password10. Come up with a secret question11. Enter your answer to secret question12. Click next13. Provide Contact Information (name, Address)14. Click next 15. Enter up to 3 degrees 16. Click next 17. Enter up to 3 previous Jobs 18. Click next 19. Enter willingness for Relocation and Travel 20. Click next 21. Enter Work/Life Experiences 22. Click next 23. Click submit 24. Paste Resumé into textarea25. Click next26. Select how you found out about their website (the Ford site...)27. Choose your Ethnicity or ‘decline to answer’28. Arrive at message center.

Redesigned Path:1. Choose a Career area2. Choose an Experience level3. Click Next 4. Browse Jobs 5. View Job6. Click “Apply”7. Enter Personal Info and Resume [Step 1]8. Click Next9. Enter Travel and Relocation info [Step 2]10. Click “Next”11. Review application, edit if necessary. [Step 3]12. Click “Submit my application”


Apply for a Job: Interface Changes

• Streamlined the process by removing the Job Folio and Sign Up Processes.

• Reconfigured job postings to search options, to assist the user in finding jobs in a clear and meaningful manner.

• Labeled the Search Results headings to match the search criterias.

• Clarified necessary steps by consolidating steps and adding step information to the application pages.


Apply For A Job: Search For Jobs (Step 1)


Apply For A Job: Search Results (Step 2)


Apply For A Job: View Job Details (Step 3)


Apply For A Job: 1st Step in Application Process (Step 4)


Apply For A Job: 2nd Step in Application Process (Step 5)


Apply For A Job: 3rd Step in Application Process (Step 6)

Documents

Task Analysis & Storyboard · deleting the continue button and creating a tab browsing experience, the user has clear directions to move through the choice steps. Another significant