JiSun Hong
Product Designer
Made with

InSpirave

Usability Testing an E-commerce platform

Role

UX Researcher

Team

Four Researchers

Tools

Photoshop, Keynote

Duration

2 Months

Overview

InSpirAVE is an online application designed to help users save more, and save faster. It is an e-commerce platform that inspires and empowers users to save money for big purchase goals. The technology of InSpirAVE amplifies savings from merchants and banks and offers features to connect friends and family to contribute to the big purchases. This startup was in need to increase its customer base and wanted to learn about usability issues with its platform.

View the presentation here
View the complete report here

How can InSpirave improve the user experience of their website and app?
InSpirave

Recruiting Participants


Our goal was to analyze the usability of InSpirave's website and application. We decided to conduct moderated user testing. The CEO of InSpirave, Om Kundu provided us with information about our target audience.

These were the factors we had to keep in mind:

  • Age range between 18 - 36

  • Students from higher education or working professionals

  • Must be interested in saving money to buy specific products

We recruited a total of 8 participants for the user test.

In order to understand our participants better, we created a pre-test questionnaire. This was to ensure we have the right group of people for our study.

User Tasks

We created user tasks based on the client's request: One task focused on InSpirave's website and three focused on the application. We created a realistic scenario for the users to follow.

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

  • Task 1: For webpage - Explore the website and learn about what InSpirAVE is and the features this application offers.

  • 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.

  • 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.

  • 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.

Post-Task Questionnaire & Affect Grid

We created a post-test questionnaire to receive feedback after the user testing session. We also provided the participants with an affect grid to complete after the user test to assess their emotional effect. The grid had dimensions of pleasant feeling - unpleasant feeling and high energy - low energy.

These were the post-task questions asked:

  • Did you find anything frustrating about the website/application? If so, what?

  • What did you like about the website/application?

  • If you had a magic want, how would you improve this website/application?

  • How was your overall experience with the interface?

User Test Findings

After completing the user tests, questionnaires, and affect grid, we were able to analyze them thoroughly. It was surprising how most of the people were either frustrated or had unpleasant feelings after using the application. We came across these major problems that could need improvement overall:

  • Lack of information about InSpirave on the website's homepage

  • Confusing wording & elements that can be improved

  • Improper labeling in different parts of the application

Recommendations were provided with accompanying screenshots and mockups to reflect the users' feedback on the tasks that proved difficult or confusing due to these issues. 

InSpirave

Recommendation 1 - Add screenshots of the app to the homepage to supplement the information currently provided and revise the wording to improve users' understanding of how InSpirave works.

Problem: Users were given the task to explore the InSpirave website and learn about what they are and the features that the application offers. 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 those three icons of Wish, Plan, and Achieve and the carousel just below them. They were confused about how InSpirave truly worked. Furthermore, users would scroll down to the video, and half of the users would not finish watching the video.

InSpirave

Recommendation: At the end of the task, 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 they choose to reword those areas under "How InSpirave Works" the statements should not just reflect their overall mission, but should also inform the user on how all these wonderful things are possible within the app.

InSpirave

Recommendation 2 - Redesign the area above the progress bar by rearranging the amounts located at each end and emphasize the current amount saves out of the total goal amount.

Problem: Although users found the gamification of the progress bar 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.

InSpirave

Recommendation: We suggested a simple redesign to the top of the progress bar where the starting, current, and end amounts are. 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 showing the current amount saved "out of" the end goal amount. This way, the user can easily view and comprehend the exact amount they have saved in relation to the total goal amount.

InSpirave

Recommendation 3 - Add ratings and reviews of every product on the product listing page to differentiate between them and add a detailed description of the product in the 'Product Details' pop-up

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.

InSpirave

Recommendation: To avoid this confusion, we suggested adding 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 adding 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.

InSpirave

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: During user testing, a user mentioned "The term "Friend Requests" sounds like a Facebook element, which is confusing." 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.

InSpirave

Recommendation: We suggested renaming "Friend Requests" 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, we suggested adding an "Alert" icon in the navigation bar to notify the user if someone sends them a contribution request.

Reflection

This project gave me a great experience about what it feels like working with a real client. It also helped me hone my skills as a researcher. This project made me realize how important a users experience is and their feedback is so very valuable. It is critical to listen and understand what the user is saying and take every little bit into consideration, doesn't matter how big or small. I throughly enjoyed working with the team, trying to find the best solution possible. 

The team put together a report and gave a 10-minute presentation to the client. The presentation was focused on main problems and recommendations, which led to a long discussion about what was possible. The client did mention they will read through the report thoroughly and make changes where they think are relevant.