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
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.
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 site, 3 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.
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.
*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.
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.
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.
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.
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.
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:
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 2)
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.
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.
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:
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
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
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
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.
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.
Definitions of use of terminologies like 'Best Sellers' and 'Top Brands' were also streamlined singularly for consistency.
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.
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.
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.
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.
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.
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.
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.
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.
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
HealthCo
Project Lead
UX Research
UI Design
Prototyping
User Testing
Design Systems
Justin Noah Chua
Magdalene Chai
Siva Shankeran
Sneha Mathew
4 Weeks