UX & UI redesign for e-commerce - Welldium

Project summary

Improving the core functionalities of an e-commerce platform for supplement recommendation, executed within the development budget constraints and limitations of WooCommerce. The redesign resulted in doubling the monthly revenue.

My contributions

In this project I was responsible for the process from ideation and scoping to implementation. To begin with, using Hotjar I identified the most problematic areas within the creation of the supplement’s recommendation, sharing of the recommendation and purchase of the items from the recommendation list. Based on the analysis I created alternative designs for desktop and mobile. By involving the stakeholders in the review and co-creation session final designs were established. In parallel to the design review I recruited external developers to implement the changes. I was in charge of managing the progress and testing as well as deploying the finalized changes as well as motitoring the changes in production.

Problem identification

Background information

The e-commerce platform - Welldium has 2 types of users:
1. Health Practitioners, who manage the recommendation lists of supplements and share them with their clients (Patients)
2. Patients, who receive a recommendation from a Practitioner and purchase the recommended items.
The MVP of the platform was developed in WooCommerce and the main functionalities delivered by customizing existing plugins. Hence, the possibilities of design changes are constrained by the chosen solutions.

Problem

Despite the increasing number of Practitioner’s profiles they were not creating recommendations. The recommendations, which were creates often were not shared with the clients. Finally, the Patients, who received the recommendation often did not make a purchase. My task was to identify how we can optimize the process form creating the recommendation through sharing and product purchase.

Research

In order to understand the user behaviour I analysed the user interaction with the platform using web analytics tool - Hotjar, which I integrated with the platform. I analysed the recordings of user sessions to identify the churn points. My conclusion was the following:
- Practitioners use desktop devices to visit Welldium, whereas Patients use mobile
- Lack of visual hierarchy between items on the page, hence confusing and counterintuitive navigation
- Confusing button labels and lack of visual recognition elements e.g. icons
- Lack of CTAs, which prompt the user to perform primary actions such as ‘create new recommendation’, ‘recommendation sharing’ for practitioners and ‘purchase all’ for the Patients

Design & Specs

The main objective of the design was to eliminate the churn points identified in through the research as well as stay within the constraints of the WooCommerce. I have used best practices such as 10 Usability Heuristics for User Interface Design by Jakob Nielsen.
Step 1: Created a few design options to choose form
Step 2: Co-creation and review session with the stakeholders
Step 3: Implementation of the design changes based on the stakeholders input
Step 4: Review session for improved designs
Step 5: Final design
Step 6: Specs for the developers

**⬆️Old (left) vs new design (right) with specs**

**⬆️New design of the recommendation list: Clear Button hierarchy, Icons fore items recognition, Main CTA ‘+ New Recommendation’ visible.**

Implementation and monitoring

The last phase of the project was implementation of the designs by an external development house. Once released on production I have been tracking the performance of the changes. The revenue of the platform doubled, despite the paused growth activities. Besides more recommendation lists creations and shares we have noticed the biggest change with Patients behaviour. Instead of browsing the produces and abounding the basket Patients began selecting ‘Add all to cart’ button and proceeding to check out.