Justin Noah
UX Designer

As a team of 4 UX designers, we spent 4 weeks working remotely with our client Amrita to conduct qualitative and quantitative research on health and wellness purchasing habits on e-commerce platforms, to help understand and gain insights on our users' motivations and needs, and designed a seamless and responsive multivendor e-commerce website for their marketplace.My Role in the ProjectUX Research • UI Design • Prototyping • Usability Testing • Design System

As a team of 4 UX designers, we spent 4 weeks working remotely with our client Amrita to conduct qualitative and quantitative research on health and wellness purchasing habits on e-commerce platforms, to help understand and gain insights on our users' motivations and needs, and designed a seamless and responsive multivendor e-commerce website for their marketplace.

My Role in the Project
UX Research • UI Design • Prototyping • Usability Testing • Design System

HealthCo


Health Co is an offline and online shop in Brisbane, Australia selling a wide range of high quality health and wellness products across various user needs to enable consumers to live their best life. The focus is on providing the best prices for quality products.

View Hi-Fid Mobile Prototype >

Project Scope

The Problem


The HealthCo e-commerce site targeted users aged 22-50 who has an active habit of purchasing affordable health and supplements. In seeking for improvements in the general user interface and functionalities of the site3 project objectives were identified:

1) Identify and evaluate usability issues and pain points that users are facing with their shopping experience on the web platform

2) Validate the assumptions on the improved prototype via usability testing

3) Research and propose an improved user flow in order to reduce bounce from-and-to the site and increase conversion rates from-and-to the site.

Research Scope


The HealthCo brief's project brief was then centralised on designing for a better shopping experience for users to easily find and purchase their desired products.

We then based our research based on the following research aims:

1) To find out users’ pain points with their shopping experience on the web platform

2) To research and propose an improved user flow

3) To come up with a customer journey to find out the opportunities in redesigning the website

4) To identify any copy issues in the web platform.

The Goal

HMW enhance the shopping experience on HealthCo's website so that users can purchase suitable products for their needs?

*It should be noted that because of limitations of time and resources, that the amount of users that the team has tested with remains as a small group of the targeted audience which aligns with the desired personas of the application.

Research

Qualitative/Quantitative Research

We started the project with a combination of Qualitative & Quantitative research methods: Competitive Analyses, User Interviews, Card Sorts, Competitor Walkthrough, Usability Testing, Site Performance Rating.

Competitors' Analyses

We conducted a series of competitors' analyses with direct competitors like iHerb, GNC and Amazon: in particular, referencing selected functionalities which we brought into the prototype to test with users within iterations of the designs.

Mapping Existing User Flow

We’ve also mapped out an existing user flow that the current site has, which runs along the main user flow with secondary flows that occur through the process.

In particular, we decided to focus on the user flow from where they first interface with the site, to right after they add the product to cart. This is considered so as to have the maximal impact in terms of the project reach given its 4-week limit.

Screener for User Research


In drafting out our research plans, we ran a screener which was able to survey and recruit a total of 125 responses. (The demographic breakdown can be observed in the following image.)

The team then reviewed and shortlisted 26 participants.

Within Design Iteration 1, 5 users were interviewed through the following methods: User Interviews, Card Sorts, Competitor Walkthrough, HealthCo Usability Tests. As for Design Iteration 2, 5 other users were interviewed via User Interviews and Usability Tests.

The rhetoric for our chosen methods and approaches is explained in the next few images.

Competitor Walkthrough

Through our user research, we've also managed to conduct competitor walkthroughs with interviewees, specifically on their experience using iHerb's e-commerce platform. These insights being thematic on user behaviour, happiness in experience, and user frustrations, were highlighted:

Analysis

1) Sorting the Data

We gathered all the data from the qualitative research methods onto Miro, synthesised the data and saw the key insights from the patterns in our research.

***NOTE: It should be noted that the team worked with the initial prototype from the client in developing design iteration, that was tested, analysed, redesigned before going into iteration 2, which then culminated in the final designs.

Affinity Mapping of User Interviews (Iteration 1)

Affinity Mapping of User Interviews (Iteration 1)

Affinity Mapping of User Interviews (Iteration 2)

Affinity Mapping of User Interviews (Iteration 2)

User Analyses + Triangulation of Data

In the phase of user research, from our data gathered, we were able to identify key behaviours, motivations, and how to best enhance the users shopping experiences with their preferred modes of engagement.

User Personas

From the data that we've gathered, we were also able to break our findings that aligned with 2 key personas, Karev, and Jenny. Their specific user flows were also outlined, with the key difference being Jenny as an extreme user that adds items to cart directly without much need to read up on the product details, whilst Karev is one to do extensive research and reads up on product details before committing to a purchase.

Customer Journey and Opportunities for Designing

Through the user research process, we were also able to identify key phases within the shopping experience of a user, in particular, from exploring the website, to browsing their interested products, and finally ending with checking out products' listings. Through such, we were able to uncover opportunities for designing within each of these phases.

The opportunities for each of the phases are:

The opportunities for each of the phases are:

Opportunities When:
Exploring the Website

  • Users like having the star ratings on the product cards

  • Wishlist term is confusing

  • Include ‘Muscle Gain’ as another goal

  • Remove ‘Social’ section

  • Having ‘Blog’ at the end of the page

  • Have navbar include ‘About Us’, ‘Blog’, ‘Contact Us’ + everything else that already exists

Opportunities When:
Browsing Interested Products

  • Consider adding ‘Sort by Bestsellers’, ‘Price - Low to High’, ‘Price - High to Low’, ‘Sort by A-Z’, ‘Sort by Z-A’

  • Clearance has to be defined; clarify if the product is nearing expiry date

  • Include filters for ‘Clearance’ and ‘Super Deals’

  • Highlight the discount on cards

Opportunities When:
Checking out Product Listings

  • Consider having verified reviews

  • Users would like to have option to enlarge product images; auto-magnifying feature

  • Display product details in tabs

  • Adding Review.io as review partner

Other Key Insights (Iterations 1 & 2)

A) Streamlining the use of Colours with Psychology to influence different Active States

Throughout the iterations, we made constant efforts to only use the brand's striking red hue to indicate buttons, or to indicate texts belonging to a higher level of importance. The conscious choice to associate buttons with striking colours makes it more visible and accessible to users.

B) Clear hierarchy of Information, both via Information Architecture and Page Sequencing

All users interviewed felt that the information architecture of the site was unclear, with inconsistent visual design from the original site. We took that into consideration when sequencing the site's information architecture, which was rearranged based on the card sorts' results.

C) Optimisation of Real Estate and Copy, for Clear UI that is indicative of Functions

Certain functionalities like the "Blog" feature, was viewed as non-essential to a majority of the users, as they wanted to focus on purchases. Other considerations include:

a. Clear indication of Product Ratings within limited real estate in product cards
b. Collapsible tabs within the product details on the product information page
c. Copywriting on the entire site to be streamlined to be more friendly and inclusive.

D) Aligning the Website's Structure and Design Exactly to Users' Needs

80% of users surveyed would consider the option of bundle blocks, if they are similar products to what they are purchasing. 'Similar Products' was also revised to 'Recommended for you' to personalise products recommended to users. All of the users interviewed would like a more goal options within the 'Shop by Goal' option, in particular specifying the 'Muscle Gain' goal.

E) Simulating the Physical Shopping Experience with Increased Credibility

Users desired the option of having multiple product photos to be added on the site to capture all sides of the product, in order to a. simulate an actual shopping experience being able to view all sides of the product, b. having increased legitimacy and general trust with the site, c. match the nutritional information with that stated on the site to ensure its accuracy and trustworthiness.

F) Directed Sorting and Filtering, Increased Level of Product Details

Clearance and Super Deals were added as additional filters – a key mode of narrowing desired purchases identified by all users. In addition, products are also able to be sorted by Best Selling, Alphabetical Order, and Pricings in both ways.

All users look for expiry date of the product to determine the quantity of their purchase, i.e. if the product lasts for a long time, they are able to purchase them in larger quantities. Product pages are thus added with Expiry Dates, Ratings, Review Counts, along with improved colour contrast to 'Add to Cart' button.

Design

Homepage (1/4)


All users interviewed were confused about the information architecture of the website, stating that the layout was messy with inconsistent visual design, confusing copy and irrelevant ads, with sections like 'Shop by Goal' being scrolled past without any mentions. The image shows a breakdown of the redesigns in our iteration after careful considerations of the user feedback.

Homepage (2 & 3/4)


Definitions of use of terminologies like 'Best Sellers' and 'Top Brands' were also streamlined singularly for consistency.

Homepage (4/4)


Users also expressed that the 'Blog' and 'Social' section should come up later in the experience of the site, and was hence prioritised less. All users also expressed interests in seeing more goal options like 'Muscle Gain'. 'Wishlist' was also a term confusing to users, and was renamed to 'Favourites' for clarity.

Search Results Page (1/2)


Majority of the users mentioned that it would be ideal to see the product rating with the search results. 40% of users also tried to sort their search results by either 'Price' or 'Best Selling' options. These were later streamlined in the designs with the product card and the additional sort functions.

Search Results Page (2/2)


Users also expressed interests in other filter types, for instance 'Clearance' and 'Super Deals', pages that existed within the original site that would be best assimilated into the filter functions.

Product Page (1/3)


Majority of the users have also mentioned that they would like to see more images of the product, the ingredients label in particular, and to look for the expiry dates and other details (e.g. size, flavour, etc.) of products to determine their quantity of purchase. Users also liked that the product details were surfaced as tabs. These were then reflected in the prototype, as shown in the following image.

Product Page (2/3)


We've also reconsidered other copywriting, for instance revising 'Similar Products' to 'Recommended For You', to personalise products recommended to users via machine learning, and the addition of 'Recently Viewed', referencing off iHerb (competitor's) product page.

Product Page (3/3)


Whilst all users felt that reviews were important, they were worried about the credibility of such. We thus added a 'Verified by Reviews.io' disclaimer to build on its legitimacy. In addition, we've added 'Manufactured Date' with 'Expiry Date', as well as a function that enlarges the product images when hovered.

Summary

Usability Testing

With the hi-fi prototype and given the project limitations, we conducted a series of 2 usability testings comprising a total of 10 users to get feedback and to improve in multiple iterations. We started at a mid-fi level because of the fidelity of the assets that were handed to us from the client.

We implemented the quick changes and proposed the remaining feedback to our client for consideration and future implementation.

We also tested intensely at every step of the design iteration, to better help understand users' needs and frustrations along the way. We ended up testing the final iteration with Maze.co. The results are shown in the following images.

View Hi-Fid Mobile Prototype >

Implemented

  • Multiple competitors' analyses to gauge and map over functionalities

  • Clarified our assumptions with behavioural and attitudinal data of users using existing health and wellness websites

  • Validated order of sections on websites via card sorts in accordance to users’ ideal user flow.

  • Conducted qualitative research via user interviews to establish personas, user flows and customer flow.

  • Streamlined UI design across 90% of the application with primary focus improving user experience via insights from usability tests

  • Addressed unclear copywriting issues within the app, and redirected new copy to be more user friendly

  • Developed a clickable prototype that has been tested in usability tests for clear navigability of site functions.


Future Recommendations

  • Have personalised content that caters to each different category of users, such as the product banners on the Home Page

  • Site manager to include product images from all perspectives to build credibility of products’ legitimacy

  • Under ‘About Us’, add in partners that HealthCo works with so as to build a reputable and trustable name

  • ‘Recommended Products’ to be based on users' shopping/
    search behaviour to cater recommended products specifically to them

  • ‘Manufacturing Date’ on Product page can be tested in future user interviews

  • For newsletter subscriptions, users would like to be able to manage their preferences to receive relevant content

1-Min Video Walkthrough of HealthCo

Client

HealthCo

My Role

Project Lead
UX Research
UI Design
Prototyping
User Testing
Design Systems

The Team

Justin Noah Chua
Magdalene Chai
Siva Shankeran
Sneha Mathew

Duration

4 Weeks