InSpirAVE

User Test Of An E-Commerce Platform

Overview

About The Project

Overview: This was a live client based project wherein we prepared a User Test Report for an e-commerce platform called InSpirAVE. It is an online application designed to help users save more, faster for what matters. Our aim was to help the client in identifying potential usability concerns and provide them with recommendations that would in-turn enhance the experience of the application. Eventually, the website was re-designed based on some of the feedback provided by our team.

My Role: I was part of a team alongside Alex Srp, JiSun Hong, and Christine Sun. I was primarily responsible for brainstorming on the user tasks, conducting user tests, analyzing the collected data, coming up with key recommendations, designing the final report and delivering a presentation to the client.

Discipline: UI/UX Design, User Research, Usability Testing

Design Tools: Photoshop, Keynote

Research Methods: Surveys, Interviews, User Testing

Duration: Fall 2017, 7 weeks

View The Complete Usability Report

Challenge

Help InSpirAVE in identifying potential usability concerns and provide them with recommendations in order to enhance the user experience of their website/application.

Our Approach To Solve This Problem

Methodology

Our Approach To Conduct The Usability Review

In order to analyze the usability, efficiency, and effectiveness of InSpirAve’s website and application, moderated user testing technique was used. It helped us in analyzing the user’s action which in-turn gave us invaluable insights related to the usability issue in the website and the application. A total of 8 user tests were conducted them.

Participants

Our team was given a general idea of the target audience by the InSpirAve’s team in the first meeting by Mr. Om Kundu, CEO of InSpirAVE. Based on that we recruited a total of 8 participants for the user test.

Factors that we had to consider while recruiting the participants -

  • Age Range - 18 to 36 years old
  • Either student pursuing higher education and working part-time or working professionals.
  • Users should be interested in saving money to buy specific products that are not easily obtainable.

Demographics

With the motive of understanding our recruited user groups, we created a pre-test questionnaire. The main aim of the questionnaire was to gain deep insights into the user’s planned/unplanned purchasing habits.

Task Scenario and User Tasks

Based on the client’s requirement, participants were asked to perform four task. Out of the four tasks, one was specifically for the InSpirAve’s website and three focused on the application. The participants were given a scenario which made the task more realistic and engaging.

Scenario
You are a designer working at an agency. You hope to invest in a laptop in the near future. Money management is not your forte and you are looking for a tool to help save up for a MacBook.

User Tasks

  1. Task 1: For webpage - Explore the website and learn about what InSpirAVE is and the features this application offers.
  2. Task 2: For App - Search for an Apple MacBook Air 13.3-inches laptop and add it as your aspiration. Create a plan for the item selected. You plan to achieve the goal by your friend’s wedding which is in late March, with a down payment of $100, recurring monthly at $150.
  3. Task 3: For App - You told your sibling about saving up to buy a MacBook. Your sibling wants to contribute. Find a way to get them involved in your savings plan.
  4. Task 4: For App - Your friend invited you to contribute in saving up for a new TV. Use InSpirAVE to help achieve their goal by contributing $100.

Affect Grid and Post-Task Questionnaire

Our team created a post-task questionnaire which helped us in getting the user’s overall feedback after using InSpirAve’s website and application. An affect grid was also printed out for users to fill out after the user test in order to assess the affect along the dimensions of pleasant feeling - unpleasant feeling and high energy - low energy.

Post-Task Questionnaire Script

  1. Did you find anything frustrating about the website/application? If so, what?
  2. What did you like about the website/application?
  3. If you had a magic wand, how would you improve this website/application?
  4. How was your overall experience with the interface?

Client Check-In Meeting

Before starting the user research we had a check-in meeting with the InSpirAve's team in order to get their inputs on our task scenario and user tasks. This assured us that we were heading in the right direction.

User Test Findings & Recommendations

Don't 'Validate' Designs; User Test Them

The Big Picture Finding

After finishing the user tests, our users filled out the affect grid and the results were surprising. Half of the users got an unpleasant feeling and were either frustrated with the interface or were bored while using it.

The results of the affect grid called for an in-depth analysis of the collected data and based on the repetitive trends we came across four major problems that needed to be fixed in order to improve the usability, efficiency, and effectiveness of InSpirAve’s website and application.

  • Lack of information on the website’s homepage
  • Confusing elements in the application
  • Improper labeling in the application
  • Inappropriate wording in the application

Recommendation for each identified problem was put forth by our team, each of which was accompanied by screenshots of the problem area and mockups of the recommendation.

Recommendation 1 - Add Screenshots Of The App On The Homepage And Revise The Wording To Improve Users’ Understanding Of How InSpirAVE Works.

Problem - While users browsed the homepage in its entirety as well as the About and FAQ pages, many were drawn to the bits of information on the homepage under the heading “How InSpirAVE Works”. Users kept returning to these three icons of Wish, Plan, and Achieve and the carousel just below them. None of the users were able to get a clear understanding of how the application works. Furthermore, Users would scroll down to the video, and 3 out of the 4 users that started watching the video stopped it shortly after pressing play, deterred upon seeing the video’s length.

"I guess I don't really know what the app is. I understood what it does, but not how it does." - Participant of User Testing

"I could watch this video, but realistically, if I'm just going to a website I'm not going to watch it." - Participant of User Testing

Recommendation - After moving on to the other three tasks that were on the application, users reflected back to the homepage and suggested incorporating screenshots of the app to provide visual information of how the application works. A suggestion would be to move the video further down the page and implement the screenshots just below the carousel. A higher-level suggestion would consider rewording the statements under Wish, Plan, and Achieve in addition to the added screenshots. If you choose to reword those areas under “How InSpirAVE Works,” the statements should not just reflect InSpirAVE’s overall mission but should inform the user on how all these wonderful things are possible within the app.

As an inspiration, we suggested the InSpirAve’s team to have a look at the investing application Acorns’s website where they provide a three-step process to how their application works.

Recommendation 2 - Redesign The Area Above The Progress Bar And Emphasize On The Current Amount Saved Out Of The Total Goal Amount.

Problem - Although users found the gamification of the progress bar on the ‘Progress’ page to be highly enjoyable, their eyes would quickly be drawn to the number above the green portion of the progress bar and many were slightly shocked and confused upon seeing the “$0.00” sign at the upper left corner. It was quickly figured out that the $0.00 serves as the starting point of the progress bar. Even though it was a fleeting moment of confusion, users were first thrown off by the placement of the amounts along the bar.

"It seemed like I had zero balance in my account." - Participant of User Testing

Recommendation - We suggested a simple redesign of the progress bar. Moving the $0.00 (starting point) and $919 (ending point) to the ends of the bar would help to communicate the user's progress toward their goal in a better way. We also suggested them to show the current amount saved “out of” the end goal amount, in this case, the user currently has $250 out of $919 saved up. This way, the user can easily view and comprehend the exact amount they have saved in relation to the total goal amount.

Recommendation 3 - Add Ratings And Reviews Of Every Product On The Product Listing Page And Provide A Detailed Description Of The Product.

Problem - When the users search for a product that they aspire, they get multiple options from the same seller which makes it confusing for them to choose and differentiate. For Example - when the users searched for an Apple MacBook Air 13.3-inches laptop, they got multiple options that were being sold by Amazon. Additionally, when the users click the ‘Product Details’ call to action on the same page, a box appears which shows a brief detail of the product which is not sufficient for the users when they are shopping online.

"When I search for a product, I get multiple options from the same seller. How are they different? It looks like there is a duplicate listing of the same product as the specifications are also the same." - Participant of User Testing

Recommendation - To avoid this confusion, we suggested the InSpirAVE team to add the product ratings and customer reviews as stated on the respective seller’s website. This will help the users in identifying the difference between products when one seller is selling multiple options for that particular product. This will also give them additional criteria to consider while choosing the product that they want to add to their plan list. We also suggested them to add a detailed description of the product in the ‘Product Details’ pop-up as often users want to read a detailed description of the product they are buying online.

Recommendation 4 - Rename ‘Friend Requests’ Label To ‘Fund a Friend’ Or ‘Contribute To A Friend’ And Add A Signifier To Notify When A Contribution Invite Is Pending.

Problem - The users were given another task where they had to contribute to a friend’s aspiration. As per the actual user flow, the users had to click on the ‘Friend Requests’ call to action to move forward and contribute to a friend’s aspiration but it was noted that the user had to use hit and trial method to proceed further. The users have a mental model that the term ‘Friend Requests’ is related to social media. Furthermore, it was also noted that the users don’t get any notifications when someone invites them to contribute to their aspiration.

"The term 'Friend Request' sounds like a Facebook element, which is confusing." - Participant of User Testing

Recommendation - We suggested the InSpirAVE team to rename ‘Friend Requests’ label to ‘Fund a Friend’ or ‘Contribute to a Friend’, as these labels are easily understandable and contextualize the intent of the function. The only problematic part of the original label is the word ‘Requests’ whereas the term ‘Friend’ is appropriate but it will be better if the label is reworded. In addition to this, we also recommended the InSpirAVE team to add good signifiers such as an ‘Alert’ icon in the navigation bar to notify the user if someone sends them a contribution request.

Takeaways

What I learned

Due to the time constraints of this project, our group was not able to help InSpirAVE in implementing all of the proposed recommendations and user test them. Instead, we focused our efforts on brainstorming workable solutions to the problem based off of our user research.

This project was invaluable to me as it helped me to grow quickly as a researcher. I was able to overcome many obstacles, change my perspective on the project and gain a deeper understanding of user experience. The most important thing I learned was to consider every factor in a user's experience. Every moment shapes a user's overall satisfaction, so it is crucial to identify with how they are feeling, what is their mental model, and what their intentions are.

View The Complete Usability Report

The final report was delivered to the client with a 10-minute presentation wherein our group explained to the client the main problem areas that were hampering the usability of the website and we discussed the above-discussed recommendations to fix them.

View The Presentation Slidedeck