Task Analysis & Storyboard

Transcription

1 June 10 Task Analysis & Storyboard Ford James Rose User Experience Design Consultant

2 Task Analysis & Storyboard: 2 of 34 Table of Contents EXECUTIVE SUMMARY PROCESSES Build & Price: Task Analysis Build & Price: Interface Changes 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 (Step 6) Build & Price: Summary Page (Step 7) Estimate Your Payments: Task Analysis Estimate Your Payments: Interface Changes Estimate Your Payments: Choose Vehicle Page (Step 1) Estimate Your Payments: Finance Options (Step 2) Search Dealer Inventory: Task Analysis Search Dealer Inventory: Interface Changes Search Dealer Inventory: Choose A Vehicle (Step 1) Search Dealer Inventory: Select Your Options/ Results (Step 2) Search Dealer Inventory: Reserver Your Vehicle NOW! (Step 3) Brochure By Mail: Task Analysis Brochure By Mail: Interface Changes Brochure By Mail: Brochures (Step 1) Online Credit Application: Task Analysis Online Credit Application: Interface Changes Online Credit Application: Individual Application (Step 1) Online Credit Application: Joint Application (Step 1) Apply For A Job: Task Analysis Apply For A Job: Interface Changes Apply For A Job: Search For A Job Apply For A Job: Search Results Apply For A Job: View Job Details Apply For A Job: 1 st Step In Application Process (Step 1) Apply For A Job: 2 nd Step In Application Process (Step 2) Apply For A Job: 3 rd Step In Application Process (Step 3)

3 Task Analysis & Storyboard: 3 of 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.

4 Task Analysis & Storyboard: 4 of 34 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 area 4. Enter zip code 5. Press Continue button 6. Choose model (some vehicles will have choose style first) 7. Select vehicle package 8. A. Press Continue button B. May choose Exterior in navigation to move forward 9. Choose exterior color 10. Choose extra exterior items 11. A. Press Continue button B. May Choose Interior in navigation to move forward 12. Choose interior color 13. Choose extra interior items 14. A. Press Continue button B. May choose Accessories in navigation to move forward 15. Choose available accessories for vehicle 16. A. Press Continue button B. May choose Summary in navigation to move forward 17. 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 chosen 3. Choose model type [Step 1 page] 4. Click the Transmission tab to move forward 5. Select transmission option [Step 2 page] 6. Click the Packages tab for next choices 7. Choose package option [Step 3 page]

5 Task Analysis & Storyboard: 5 of 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 continue 12. Choose fabric style and interior options [Step 5 page] 13. Click the Accessories tab to move forward 14. Choose any accessories designated for specific vehicle [Step 6 page] 15. Click the Summary tab for complete recap of all choices 16. 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 singleconsistent 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.

6 Task Analysis & Storyboard: 6 of 34 Build & Price: Model Page (Step 1)

7 Task Analysis & Storyboard: 7 of 34 Build & Price: Transmission Page (Step 2)

8 Task Analysis & Storyboard: 8 of 34 Build & Price: Packages Page (Step 3)

9 Task Analysis & Storyboard: 9 of 34 Build & Price: Exterior Page (Step 4)

10 Task Analysis & Storyboard: 10 of 34 Build & Price: Interior Page (Step 5)

11 Task Analysis & Storyboard: 11 of 34 Build & Price: Accessories Page (Step 6)

12 Task Analysis & Storyboard: 12 of 34 Build & Price: Summary Page (Step 7)

13 Task Analysis & Storyboard: 13 of 34 Estimate Your Payments: Task Analysis 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 page 3. 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. Labeled page with a specific step number, helping the user to move forward (or back, if need be) in the process. Added photo of vehicle and labeled the photo with year, make, and model.

14 Task Analysis & Storyboard: 14 of 34 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

15 Task Analysis & Storyboard: 15 of 34 Estimate Your Payments: Choose Your Vehicle (Step 1)

16 Task Analysis & Storyboard: 16 of 34 Estimate Your Payments: Finance Options (Step 2)

17 Task Analysis & Storyboard: 17 of 34 Search Dealer Inventory: Task Analysis 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 page 3. Click the Let Us Find Your Vehicle button 4. Choose model 5. Choose exterior color 6. Choose interior color 7. Choose Preferences (Selected drive type, [e.g. FWD, 4WD, or FWD] ) 8. Choose Option Upgrades 8. User fills out contact information form 9. Click Let Us Find Your Vehicle button 10. 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 page 3. Enter zip code 4. Click Search Dealer Inventory button 5. User must close pop-up window that instructs user to choose features to nearest dealership 6. Select Model 7. Choose exterior color 8. Selected drive (e.g. FWD, 4WD, or FWD) 9. Select engine (size) 10. Select transmission 11. Select interior color 12. 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 model 5. Select Transmission

18 Task Analysis & Storyboard: 18 of Select drive 7. Select engine 8. Select exterior color 9. Select interior color 10. User can search between the 5 closest dealerships and/or clear all selections and start fresh 11. 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. Labeled page with a specific step number, helping the user to move forward (or back, if need be) in the process.

19 Task Analysis & Storyboard: 19 of 34 Search Dealer Inventory: Choose vehicle (Step 1)

20 Task Analysis & Storyboard: 20 of 34 Search Dealer Inventory: Select Options and Results (Step 2)

21 Task Analysis & Storyboard: 21 of 34 Search Dealer Inventory: Reserve Your Vehicle NOW! (Step 3)

22 Task Analysis & Storyboard: 22 of 34 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 page 1. Select vehicle from dropdown menu 2. 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 page 1. 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).

23 Task Analysis & Storyboard: 23 of 34 Brochure By Mail: Brochures (Step 1)

24 Task Analysis & Storyboard: 24 of 34 Online Credit Application: Task Analysis 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 Application 1. Choose Finance Option 2. Choose Individual Application. 3. Fill in Personal Information fields 4. 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 conditions 10. Click Submit my Application No Changes Necessary to Task Steps (Changes Occur in Step 1 Interface) Current Path 2: Joint Application 1. Choose Finance Option 2. Choose Joint Application 3. Fill in Personal Information fields for Primary Applicant 4. Fill in Income and Employment fields for Primary Applicant 5. Fill in Personal Information fields for Secondary Applicant 6. 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 conditions 12. 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

25 Task Analysis & Storyboard: 25 of 34 Online Credit Application: Individual Application (Step 1)

26 Task Analysis & Storyboard: 26 of 34 Online Credit Application: Joint Application (Step 2)

27 Task Analysis & Storyboard: 27 of 34 Apply For A Job: Task Analysis Current Path: Apply For A Job 1. Choose a Career area 2. Choose an Experience level 3. Click Next 4. Browse Jobs 5. Click Add to Job Folio (up to three jobs can be added to Job Folio) 6. Click next 7. Enter address 8. Pick a password 9. Confirm password 10. Come up with a secret question 11. Enter your answer to secret question 12. Click next 13. 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 textarea 25. Click next 26. 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 area 2. Choose an Experience level 3. Click Next 4. Browse Jobs 5. View Job 6. Click Apply 7. Enter Personal Info and Resume [Step 1] 8. Click Next 9. Enter Travel and Relocation info [Step 2] 10. Click Next 11. Review application, edit if necessary. [Step 3] 12. Click Submit my application

28 Task Analysis & Storyboard: 28 of 34 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.

29 Task Analysis & Storyboard: 29 of 34 Apply For A Job: Search For Jobs (Step 1)

30 Task Analysis & Storyboard: 30 of 34 Apply For A Job: Search Results (Step 2)

31 Task Analysis & Storyboard: 31 of 34 Apply For A Job: View Job Details (Step 3)

32 Task Analysis & Storyboard: 32 of 34 Apply For A Job: 1 st Step in Application Process (Step 4)

33 Task Analysis & Storyboard: 33 of 34 Apply For A Job: 2 nd Step in Application Process (Step 5)

34 Task Analysis & Storyboard: 34 of 34 Apply For A Job: 3 rd Step in Application Process (Step 6)