Based on the findings from the user interviews, I developed a user persona to prioritize design efforts on solving the users' problem and make the design less subjective.
In order to solve the problem from the users' perspective, I devise a problem statement which describes the current unsolved needs of the user which was identified from my research analysis.
Problem Statement: Dwight needs to know what shoes are suitable for him in order to make an informed decision on purchasing shoes.
For an e-commerce website, the way information is displayed is very important because an ineffective information architecture may deter users from continuing using the website when they are unable to find the items they want. This in turn would cause a decrease in cart conversion rate. I used 3 different sorting tools to help determine how products on a sporting good e-commerce website should be categorized.
Open Card Sorting
First of all, I conducted an open card sort test with 18 participants. Participants may freely organize the 75 sport products into groups which they think the product belongs together and add a label for that category. From the results, I used the participant-centric analysis tool to find the 3 different individual responses that agree most strongly amongst other participants.
After comparing the 3 most popular sorting strategies, I imported the data into google sheet to further find common terms for each individual product. However, there are still some items that I could not find common consensus among the participants. For example, the item "Manchester United Home Shirt 2016 2017 Junior Boys" was categorized under Football, Men's Apparel and Junior Clothing by the 3 sorting strategies. Therefore, I proceeded with a closed card sort test to try and clear up any ambiguity in terms of category label.
Closed Card Sorting
Next, there were 17 participants involved in this test and 14 products which have unclear terms are left for them to sort. In this test, there are fixed categories with labels available and participants are required to put the product under the category which they think fits most suitably. Using the popular placement matrix, we can tell the percentage of participants who sorted each card into the corresponding category. I picked the category with the highest percentage for each product and then proceed with tree testing to validate if the results gathered from both card sorts help create a clear information architecture.
Tree testing
Finally, there are 19 participants in this test and they were given 8 tasks to complete. Each task required them to find an item from the proposed category. Out of all the participants, only 2 participants faced any failures in completing the task. Participants were generally able to locate their item easily, which shows that the items were placed in the category which they expected. Hence, validating that the previous test was successful in creating a clear information architecture for the products. The image below shows the proposed information architecture.
So I begin ideating about the design by drawing up a high-level user flow so as to identify the tasks and components that users might expect on each page and discover potential problems in the flow. I realized that based on the users mentality when they are shopping online, there are different user flows to indicate what a happy path might look like for them.
The user flow above shows the happy path for users who knows the specific item they have in mind and intends to use the search bar to immediately find where their product is located. Efficiency of locating the product is the key.
The user flow above shows the happy path for users who are just browsing through the website for products that are interested in but do not have a specific model or brand they want to buy. The important point in this user flow to display lots of information that are relevant to the products the users are looking at while not overwhelming them.
For this final user flow, I intend to create a shopping assistant that are able to help users who are beginners in sports and require assistance in understanding what products suit their athletic needs as well as satisfying other cosmetic considerations that they might have.
Sketching
After designing the user flow, I drew out sketches to help visualize how I would want to layout my pages and the components needed in each page. The sketches above shows what I envisioned the shopping assistant to look like. With these wireframes done, I proceeded with creating the initial prototype and conducted usability testing.
Usability testing
There were a total of 5 participants for the test and they were given two tasks to complete. During the test, users highlighted places that can be improved on the initial prototype and through observing the users interaction, I was also able to see different ways I could design the website to be more intuitive for the user to navigate.
Tasks:
- Search for a pair of Size 9 Black Running Shoes
- You do not know what type of shoes are suitable for you. Try out the shopping assistant
On the product discovery page, many were unaware that the some filters could be click. For example, the type of shows highlighted in the red box did not look like selectable elements to the users.
On the product description page, some participants highlighted that some details are lacking in the page (E.G Shipping & Returns). In addition, they are unable to select quantity for the product item if they choose to purchase more than one. Furthermore, many highlighted that the price tag should be placed in a more prominent position. Users commented that the it was not where they would expect to see the price tag would be placed at and the price tag size was too small to capture their attention.
For the shopping assistant, users did not know there were more cards to be swiped as there was not any affordance shown. They also had trouble remembering what is the meaning of each direction of swiping. Ultimately, the swiping gesture was not intuitive on the desktop as some users struggled to figure out how to swipe on the desktop. Many was only able to complete the second task with some prompts and the actions that they took were not anticipated.
The success rate for task 1 was 100% while the success rate for task 2 was only 20%. Building from the data gathered in the usability test, I made improvements on the design for the 2nd iteration. Additionally, I decided to completely revamp how the shopping assistant function is going to work in the 2nd prototype which you can interact with by clicking on the button below.
View prototype
