Alp Akdogan
UX / UI Designer

BeFunctional Health eCommerce Store

UX UI eCommerce

Overview

Functional pathology tests are used to investigate functional, biochemical, nutritional, metabolic and hormonal status. They balance alternative approaches and assist practitioners in the diagnosis, treatment and management of patients seeking a holistic approach to health.

The Goal
To Build an eCommerce website for users to purchase self-collect food allergy and hormonal testing kits.

There has been a large decrease in the number of our patients visiting doctor clinics. We want to make sure that users are able to get there routine allergy and hormonal testing done from the comfort of there own home, a contact-less process.

My Role
UX UI Designer. I was involved in all phases of the project, from research, designing, developing and testing. I worked closely with an external agency to develop a custom CMS that integrates into our patient database, and also delivering the final responsive eCommerce website.

Responsibilities
User Research, UI Design, Prototyping, Testing, Front-End Development

Research
Some insights from the analysis

Some insights from the analysis

Competitor Analysis

The first step in the research process was to see what the competitors in the market were doing? what works for them? what doesn't?

Some interesting insights came about through this, showing that only 2/4 of our main competitors have an eCommerce store for online purchasing. Only 1/4 has a 'My Account' option for users to log in and see the test results.

This information allowed me to make some initial assumptions in what can we do to deliver a better solution to users.

Define
Some interesting interview answers

Some interesting interview answers

User Interviews

I interviewed 10 users between the ages of 18-50, the goal was to gather quantitative and qualitative information, This will allow me to create an accurate Persona and Empathy Map of the ideal user.

Some examples of questions asked:

  • Do you have a local GP?

  • How convenient is it for you to see your doctor?

  • In the past 12 months how often have you seen your GP?

  • Have you had a allergy or hormonal test before?

  • How often do you get your tests done?

  • Do you prefer face to face consultations or online/phone?

BeFunctional Health eCommerce

Persona

With the insights from the interviews, two major personas were prepared in order to frame the general user types.

The personas' showed typical users to have a busy lifestyle, the hustle and bustle of day to day commitments such as work and family could be making it difficult for people to book and visit their local GP.

Some examples from the Empathy Map

Some examples from the Empathy Map

Empathy Map

The empathy map created helped to understand the users' needs and develop deeper & unexpected insights.

Synthesis

Many assumptions can be made here. But Its definitely evident that majority of users don't like the wait times at clinics, this seems to be the main cause in decreased GP visits in the past 12 months. This could be due to many overarching factors such as luck of funding in healthcare, not enough hospitals and clinics opening in populating areas.

Recommendations

To tackle the problem the website needs to allow the users to gather the required testing information easily, and purchase the product with as little clicks as possible. less is more approach will go a long way here.

  • I recommend having the testing kits (products) accessible from the home page, then add to cart.

  • Practitioner access regarding test information is also recommended, not just for patients.

  • Checkout page with account creation, patient details, referral and payment confirmation.

Usability testing will allow for validation and further enhancements after the prototype has been created.

Our eCommerce store will work hard to solve this current problem and bring the health industry to an online platform.

Ideation
Some examples I jotted down

Some examples I jotted down

User Stories

As a 'user' , I want a 'feature', so that I can 'goal'

After insights were gained I began to ideate my findings.
By jotting user stories, I was able to come up with features that would be essential to users and enhance their experience. I recorded details about the feature such as requirements, priority & value added.

BeFunctional Health eCommerce

User Flow

Following on from the the user stories I created a few user flows. This allows me to identify the path in which we want users to move in order to achieve their goal quickly, with the best experience.

It also allows me to scope out potentially how many screens we will need to create within the website. It's always great to brainstorm this flow with the internal team through design workshops, as there are always opportunities in which we can reduce the number of clicks the user does to reach the end goal.

BeFunctional Health eCommerce

Information Architecture

Once I finalised the most ideal user flows, the structure of the website that is the most logical to the users and their navigation was defined.

I identified the websites target audience is mainly patients, but still needs to be accessible to practitioners (naturopaths) if they wish to gather information about a clinical test.

Paper Prototype - Ideal user scenario purchasing a 'Food Print Test'

Paper Prototype - Ideal user scenario purchasing a 'Food Print Test'

Sketches & Paper Prototype

Paper prototypes helped to visualise early the layout and content. I sketched out screens and figured out the basic interactions between them.

Mid Fidelity Prototype - Ideal user scenario purchasing a 'Food Print Test'

Mid Fidelity Prototype - Ideal user scenario purchasing a 'Food Print Test'

Mid Fidelity Wireframes & Prototype

During this stage, my sketches were developed to mid-fidelity wireframes with more defined layouts and interaction.

The sketches were improved in Adobe XD, the marketing team provided basic copy for the pages, and I started bringing the design elements to life with a second prototype.

Design
UI Style Guide Example

UI Style Guide Example

Design System

To start the UI Design, Light colours and a fine rounded font was chosen to convey the mood of a holistic healthy lifestyle.

I created a web style guide followed by a UI component kit to round off the design system for Befunctional Labs.

An extremely important process when handing your designs over to the development team, as it allows them to more easily create stylesheets from the components.

UI Design

Once I tested out all usability mistakes from the mid-fidelity prototype, I started designing the final screens in Adobe XD.

The visual style was a mixture of corporate and family oriented. A light coloured theme was used throughout the site with the use of white being a heavy focus.

Checkout Screens UI

Checkout Screens UI

Test

Initial development & Staging site

Once I had all the UI completed, I worked with an external web development agency to build the website along with a custom CMS that allows for changes and updates to the website without the need of any HTML or CSS coding.

Heat map from the 'Food Printing Testing (IgG) page

Heat map from the 'Food Printing Testing (IgG) page

User Testing Unmoderated
- Heat Mapping

Before doing the launch of the website, I used the developed staging version of the site to do my final round of user testing in order to reveal possible usability problems.

I used https://www.usertesting.com/ for unmoderated testing with heat mapping and users completing tasks I have set in their own time.

Key Findings and Results

  • Users were able to complete the tasks of selecting a hormone test and reaching the checkout page.

  • The product search function was commonly used to filter the same test groups before reaching the designated product page.

  • Most users preferred to browse the entire website and click "Learn More" to view all the tests we provide before making a final decision.

  • Errors were mainly UI due to web development and an inactive CTA button on the home page.

Launched website - https://www.befunctional.com.au/

What I have learned from this project

The BeFunctional eCommerce website was a huge success, it increased Befunctional Labs yearly revenue from $2m to $3.5m, an increase of 75%.

The biggest challenge I faced with this project was the lack of test participants, even though I managed gather 10 users for initial interviews, this took far longer than anticipated to complete due to many reschedules and cancelations. I wanted to do another test with these users in Staging but the timeframe I had it was just not possible, so I chose online unmoderated testing as an alternative.

Apart from this I enjoyed this project, I also helped me learn how important allergy and hormone testing are.