Task Analysis & Storyboards · Task Analysis & Storyboards: AliExpress.com 6 Creating an Account:...

Task Analysis & Storyboards

AliExpress.com

http://www.aliexpress.com/ Brian Kinsley & Student X (name omitted for privacy) Usability Specialists

http://www.aliexpress.com/

Task Analysis & Storyboards: AliExpress.com 2

TABLE OF CONTENTS

EXECUTIVE SUMMARY 3

PROCESSES 4 Creating an Account: Task Analysis 4 Creating an Account: Interface Changes 6 Creating an Account: Storyboard 7 Search for an Item and Add to Cart: Task Analysis 9 Search for Item and Add to Cart: Interface Changes 10 Search for Item and Add to Cart: Storyboard 11 Purchasing an Item: Task Analysis 12 Purchasing an Item: Interface Changes 14 Purchasing an Item: Storyboard 15 Submitting a Report: Task Analysis 18 Submit a report: Interface Changes 20 Submit a report: Storyboard 21 Edit Member Profile: Task Analysis 25 Edit Member Profile: Interface Changes 26 Edit Member Profile: Storyboard 27 Initiating Chat for Resolution: Task Analysis 33 Initiating Chat for Resolution: Interface Changes 34 Initiating Chat for Resolution: Storyboard 35


EXECUTIVE SUMMARY Task analyses were conducted for the AliExpress.com website. For these analyses, multiple page processes covering several different tasks throughout AliExpress.com were deconstructed to identify areas where streamlining and optimization could occur. Storyboards were also created to accompany and demonstrate the reconstructed tasks.

Supporting these task analyses and storyboards were the results of user testing, which has allowed enhancements to the processes and interfaces.

The improvements in the multiple page processes included:

● Minimizing the number of steps involved throughout various tasks. The number of steps was reduced in every task outlined. The most significant changes were in redesigning the interfaces.

● Removing repetition in supporting user help functions. Results revealed numerous redundancies when users reached out for customer support. Removing these redundancies will lower user frustration, and increase time spent on AliExpress.com

● Updating form alignment and labeling throughout various tasks. Some labels were updated to clarify or simplify a task. There have also been several alignment updates and demonstrated in each section where it is noted.

● Elimination of ‘new tab’ generation as initial action. When navigating the site, each click now redirects the current browser window to the desired page, instead of opening a new tab for every navigational decision a user may choose. This declutters the browser window and reduces the number of open tabs.

Following the multipage processes, 16 single page wireframes called storyboards were created to show the interface redesigns for numerous forms including the home page. The goal in creating the storyboards was to establish a consistent interface design while simplifying tasks throughout AliExpress.com.


PROCESSES

Creating an Account: Task Analysis

There are currently three paths users can take to create an account. Current Path 1:

1. Click ‘Join Free’ on homepage 2. Enter email address 3. Fill in form fields:

a. Type email address in textbox provided b. Enter your name into the ‘Name’ field c. Type your created password into the textbox provided d. Confirm and re-type your password, in the textbox provided e. Enter the captcha code in the provided textbox

f. Click ‘Create Your Account’ Redesigned Path 1: Creating an Account Main Path:

1. Click ‘Join’ in the global navigation on the main page 2. Enter your email in the textbox provided 3. Create and enter a password in the textbox provided

a. Click the ‘Show Password’ checkbox, if you desire to view your password as you enter it into the textbox provided

2. Confirm and type your created password into the textbox provided 3. Input your zip code in the textbox provided 4. Click the ‘I’m a Pro customer’ checkbox, if you are making purchases for your

business 5. Click the ‘ Register’ button to complete and close the registration form 6. If you desire, you can now subscribe to various AliExpress emails 7. Click any checkbox, in front of the email subscription description of your choosing 8. Click the ‘Subscribe’ button to save your email preferences and close the

registration shadowbox 9. Click the ‘X’ in the upper right corner of the shadowbox to close

Current Path 2: 1. Click ‘Buy Now’ while not signed in 2. Click “Join free now’ link 3. Fill in form fields as indicated

a. Type email address into supplied textbox b. Enter your first and last name into the provided boxes c. Create a password and enter in into the supplied text field d. Retype your created password into the ‘Confirm you password’ field


4. Enter the captcha code into the box above the captcha code 5. Click ‘Create Your Account’

No Changes Necessary to Task Steps

Current Path 3: 1. Follow Alternate Path 1, through Step 2 2. Click ‘Sign up using Facebook’ 3. Enter your Facebook associated email address in the box provided 4. Enter the corresponding password, in the box provided 5. Click ‘Log In 6. When prompted, click ‘Continue as Brian’ 7. Under the ‘Bind your Existing Account’ tab, enter your AliExpress password in the

provided textbox 8. Click ‘Sign in’ 9. Under the ‘Create New AliExpress Account’ tab, enter a password into the text box

provided 10. Reenter the password from the previous step

11. Click ‘Create My Account’

No Changes Necessary to Task Steps


Creating an Account: Interface Changes

● Removed the process of email verification to allow faster entry to the website. This

step isn’t necessary at this stage, some users may not have access to the required email at the time of their registration.

● Implemented a registration shadowbox, which is universally available throughout the site, even while not logged in or yet registered. This allows users the ability to remain on the page they were on initially, when the registration request was activated.

● Providing a checkable list of email subscriptions increases exposure and interaction

between the site and users, increasing conversion opportunities. ● Requiring a ‘Zip Code’ field at registration facilitates the generation of ‘City’, ‘State’

and ‘Country/ Province’ fields when implementing future tasks. Additionally, demographic information gained during registration increases targeted ad opportunities.

● ‘Show Password’ was added the registration form, allowing users the ability to

visually confirm their password. Visually and cognitively impaired will encounter less password associated registration difficulties.

● Additional changes to alignment and labeling shown in storyboards.


Creating an Account: Storyboard


Search for an Item and Add to Cart: Task Analysis

Current Path 1: 1. Click in Search Box next to All Categories 2. Type in name of item to search 3. Click the Search Icon, or hit enter key 4. Scroll down viewing multiple items 5. Click item desired to purchase 6. Enter in Quantity 7. Click Add to Cart 8. Click Continue Shopping

Redesigned Path 1: 1. Click in Search Box next to All Categories 2. Type in name of item to search 3. Click the Search Icon, or hit enter key 4. Scroll down viewing multiple items 5. Click Add to Cart button located next to image of item to purchase

Current Path 2: 1. Click Category from dropdown menu within Search Box 2. Hover over Sub-Category from left side navigation menu 3. Choose from menu option 4. Scroll down viewing multiple items 5. Click item to purchase 6. Choose Color if applicable 7. Enter in Quantity 8. Click Add to Cart 9. Click Continue Shopping

Redesigned Path 2: 1. Click Category from dropdown menu within Search Box 2. Click Search Icon 3. Choose from menu option 4. Scroll down viewing multiple items

5. Click Add to Cart button located next to image of item to purchase


Search for Item and Add to Cart: Interface Changes

● Streamline searching for an item by category by omitting sub-category search

options.

● Update item listing interface to include an Add to Cart button next to each item.

● Removing additional unnecessary clicks before adding to cart and allowing users to continue shopping with ease.



Search for Item and Add to Cart: Storyboard


Purchasing an Item: Task Analysis

Current Path 1: 1. Find, then click on desired product 2. Select any desired options necessary for order; color, size, quantity, ect.

a. Select color from samples provided b. Input desired quantity by clicking on the ‘+’ or ‘-’ buttons OR click within the box provided and input your desired quantity

2. Click ‘’Add to Cart” 3. To purchase an item immediately, click ‘View Shopping Cart’ 4. After examining the order details for accuracy, click ‘Buy All’ 5. Enter your name into the ‘Contact Name’ field provided 6. Select your Country/ Region from the dropdown menu provided 7. Enter your street address into the field provided 8. Select your state/ region/ province from the dropdown menu provided 9. Enter your city’s name into the field provided 10. Input your zip/ postal code into the field provided 11. Enter your phone number in the field provided 12. Click ‘Save and ship to this address’ 13. Select your shipping information 14. Within the ‘Review and confirm your item(s)’ window, input the desired number of

items in the ‘piece’ text box provided 15. Select your preferred shipping method within the dropdown menu labeled

‘AliExpress Standard Shipping’ 16. Fill in required information within the ‘Payment method’ section.

a. Input your card number into the field provided b. Enter the 2-digit month and 2-digit year in the boxes provided c. Enter your card’s security code into the field provided d. Enter the cardholder name into the space provided e. Click the ‘Done’ button

2. If you have ‘AliExpress Coupons’ you click the checkbox labeled ‘Apply AliExpress Coupon’, choose your coupon form the provided dropdown menu

3. To finalize your order, click ‘Confirm & Pay’

Redesigned Path 1: 1. Find, then click on desired product 2. Select any desired options necessary for order; color, size, quantity, etc. a. Select color from samples provided b. Input desired quantity by clicking on the ‘+’ or ‘-’ buttons OR click within the box provided and input your desired quantity 2. Click ‘’Add to Cart” 3. To purchase an item immediately, click ‘View Shopping Cart’ 4. After examining the order details for accuracy, click ‘Buy All’ 5. Check the checkbox verifying your name OR click link to change 6. Input your street address in the box provided


7. Input your zip code 8. Click ‘Save and ship to this address 9. Select your shipping information 10. Within the ‘Review and confirm your item(s)’ window, input the desired number of

items in the ‘piece’ text box provided 11. Select your preferred shipping method within the dropdown menu labeled

‘AliExpress Standard Shipping’ 12. Fill in required information within the ‘Payment method’ section

a. Input your card number into the field provided b. Enter the 2-digit month and 2-digit year in the boxes provided c. Enter your card’s security code into the field provided d. Enter the cardholder name into the space provided e. Click the ‘Done’ button

2. If you have ‘AliExpress Coupons’ you click the checkbox labeled ‘Apply AliExpress Coupon’, choose your coupon form the provided dropdown menu

3. To finalize your order, click ‘Confirm & Pay’

Current Path 2:

1. Click ‘Buy Now’ 2. Go to Main Path, Step 8

Current Path 3:

1. Follow Main Path through Step 4, click ‘Buy from this seller’

2. Go to main Path, Step 8


Purchasing an Item: Interface Changes

● Removal of several redundant form field declutters the form and improves

readability and scannability.


● Utilize AJAX functionality to auto-fill fields with information from setting up an account.


Purchasing an Item: Storyboard


Submitting a Report: Task Analysis

Current Path 1: 1. Hover over Help 2. Click Disputes & Reports 3. Login or Create account

a. Login i. Enter Email address ii. Enter Password iii.

b. Create Account – See task 1 4. Click ‘Submit a Report’ 5. Click ‘Submit a Repor’t in the appropriate section 6. Choose Radio button for the type of report 7. Type in Product URL

a. If you do not have this go to main site i. Find item ii. Click on item iii. Highlight URL iv. Right Click v. Click Copy

b. Paste URL into Product URL Section 8. Enter in reason you are creating this report 9. If you have supporting evidence

a. Click Browse next to Upload evidence. (Utilized Windows Operating System)

b. Choose file to submit 10. Click Box agreeing to terms and conditions 11. Click ‘Submit a Complaint’

Redesign Path 1:

1. Click on Help 2. Underneath Disputes and Reports Section

a. Choose appropriate category via radio button b. Choose Radio button for the type of report c. Click button labeled Submit a Report

3. Type in Product URL a. If you do not have this go to main site

i. Find item ii. Click on item iii. Highlight URL iv. Right Click v. Click Copy

b. Paste URL into Product URL Section 4. Enter in descriptive reason for creating this report. 5. If you have supporting evidence


a. Click Browse next to Upload evidence. b. Choose file to submit

6. Check the box agreeing to terms and conditions

7. Click button labeled Submit a Complaint


Submit a report: Interface Changes

● Updated format from drop down menus that appear after option is selected. To radio buttons allowing user to see all options at once to make the best choice for their need.


● Combining Customer Service and Support Screen with the Disputes and Reports screen to allow users easier navigation when help is required.


Submit a report: Storyboard


Edit Member Profile: Task Analysis

Current Path 1: 1. Sign-in uses the previously established method for signing-in (Task #1) 2. Click on the ‘My AliExpress’ navigation link, on the far right of the horizontal

navigation bar 3. Click ‘Account Settings’ 4. Click ‘Edit Settings’ in the local navigation on the left side of the page 5. Click ‘Edit Member Profile’ 6. Click ‘Edit’

a. Enter information into provided text boxes and/or make corrections as necessary

7. Click ‘Submit’ Redesign Path 1:

1. Click ‘Account Settings’ in the ‘My AliExpress’ dropdown menu 2. Click ‘Edit Settings’ 3. Click ‘Edit Member Profile’ 4. Make necessary changes/ corrections within text boxes provided

5. Click ‘Save & Return to Account Settings’

Steps for changing your profile picture:

1. Hovering over your name or profile icon will bring up a lightbox, indicating to ‘Click here to make changes’

2. Input any desired changes within the provided textboxes 3. Click ‘Save’ 4. To change your provided profile icon to a picture; click the current profile icon,

which will change appearance to ‘change photo’ square, click the square 5. Click ‘Upload Photo’ 6. Select your desired photo, from your computer 7. Click ‘Open’ (performed on a Mac OS) 8. Using the provided dotted-box, resize and move to your liking 9. Click the checkbox to certify your authority to use said photo 10. Click “Submit’


Edit Member Profile: Interface Changes

● Including ‘Account Setting’ in the ‘My AliExpess’ dropdown menu eliminates repetitious pages and hunting for sub-menu labels within navigation bars.

● The ‘Submit’ button was removed from the ‘Edit Member Profile’ page and was replaced with a ‘Save & Return to Account Settings’ button. Instead of being forced out of the site with a confirmation screen, users are able to quickly navigate back to their desired section of the site.



Edit Member Profile: Storyboard


Initiating Chat for Resolution: Task Analysis

Current Path 1: 1. Hover over ‘Help’ 2. Click Customer Service 3. Scroll to bottom of page 4. Click ‘Chat Now’ 5. Select Category from Drop Down Menu 6. Select Sub Category from Drop Down Menu

7. Select Question from Drop Down Menu choose path A, or B

a. Click ‘View More’ link i. Scroll to bottom of page ii. Click ‘Chat Now’

1. Sign In or create account a. Enter email address b. Enter password

2. Click Sign In

3. If creating account go to task 1

a. Click ‘Chat Now’ 4. Chat window will open, and you can now chat with an agent.

Redesign Path 1:

1. Click on Help 2. Underneath Customer Service Section 3. Click ‘Chat Now’ 4. Chat Window Opens - asks for the following information to direct user to

appropriate agent. a. Select Category

b. Sub - Category

5. Agent available for Chat


Initiating Chat for Resolution: Interface Changes

● Update format of drop down menus that appear after option is selected. To listing both drop down menus allowing user to see all options available.


● Removal of the Step by Step instructions on how to perform a task from this process which eliminates additional clicks and screens from this task. It is recommended to keep those instructions in a “Self-Help” section of AliExpress.com.


Initiating Chat for Resolution: Storyboard

Task Analysis & Storyboards · Task Analysis & Storyboards: AliExpress.com 6 Creating an Account:...

Documents

Transcript of Task Analysis & Storyboards · Task Analysis & Storyboards: AliExpress.com 6 Creating an Account:...