ZOIE HEALTH

Project Type: Responsive Web Design
Roles: Product Designer / Visual Designer

Industry: Healthcare

Making digital healthcare easier and affordable.

    Overview

    Zoie Health is a South Africa based women's health & wellness digital clinic that offers easier, more affordable & more loving care for family planning, fertility and maternity.

     

    Designing for healthcare and fintech has been one of my interests as a designer. I shared a tweet about this sometime, and this action initiated the amazing work I got to do for Zoie Health.

     

    View Website

    Background

    Zoie Health’s first website was built off a WordPress theme and was not so functional. They needed a fresh look for a relaunch.

     

    This project kicked off with the co-founder reaching out and a meeting was scheduled. I did a background research on Zoie Health. I was interested in doing work that solves problems, and I learned it was a women-led startup. Particularly, one providing services that helps to solve health related issues.

     

    In the chat I had with the co-founder Thato, we were able to align on some of the deliverables Zoie Health needed and insights I shared led to identifying some other problems.

    The Process

    The design process for the Zoie Health website started off by having a discussion with the stakeholders from which a document detailing the main objectives of the redesign was created.

     

    It was important to understand their perspectives so as to focus still on the business goals. Although, the team knew a redesign was needed, I advised on how to go about bringing the new interfaces to life would be.

     

    Coincidentally, I had the meeting with the stakeholders at a hospital which I had gone to for medical consultation. Imagine if there had been a digital service I could access from the comfort of my home.

    How Might We
    Design Process

    Gathering Insights and Research

    I assessed the current Zoie Health website, reviewing feedback from users regarding the current experience the website had and how easy/difficult it could be for them to access the services provided. In addition to these, the team had specific content that had to be updated on the new website.

     

    Keeping all these in mind, I decided to compare Zoie Health’s visual offering with that of similar women healthcare products. The competitors I evaluated are Flo, Maven Clinic, The Pill Club, Clue and Peanut.

     

    I created a moodboard to work with based off the findings I got from reviewing other websites that are similar to Zoie Health.

    Competitors

    Simplifying User Flows

    The old Zoie Health website had quite a number of pages and repetitive information. During the defining stage, it was discovered that the features that were to be prioritised require pages that were better concise. While brainstorming, I concluded on reworking the user flow to minimize clicks and improve the navigation experience for the users.

    User flow old
    User flow new

    Design and Prototypes

    The tool of choice for the website redesign was Figma. The wireframes I came up with had four other pages asides the landing page. The pages were About Us, Contact Us, Resources and Our Services.

     

    The focus on the new designs was how best to inform users about Zoie Health and the services offered. Bringing in the user's emotion into this process, Don Norman's Three Levels of Design proposes three different — yet interconnected — levels that create emotions and bring up certain feelings in interfaces. There are levels are:

    • Behavioral: General understanding of a product and clarity creates positive feelings. The old website did not provide full information, was not making navigation easy and services more accessible.
    • Visceral: The visual language that appeals to a certain user group. Females gravitate towards colourful visuals and images that reflects who they are.
    • Reflective: This layer connects everything together — the they embodiment of the product which then impacts users' everyday life and also the emotions that are associated with it.
    Wireframes

    The Landing Page

    I chose to retain most of the branding assets from the old site, as the users are already familiar with how Zoie Health looks. Also, the team had recently done an identity refresh. So I created a color palette from the basic brand colours to work with.

     

    Building off the wireframes I had created, the new website was designed and prototyped. I had another review session with the Zoie team, and minimal edits were made for what is now the final website.

     

    The new landing page contains information about the Zoie Health mobile app, as well as a way for the users to download from either the App Store or Play Store. More information about how Zoie Health works can be seen on the new landing page as well. Then the basic services which they offer. A slider for blog posts makes it easy for users to access articles that have been published about health conditions, like menopause or even contraceptives.

    User Flow

    About Us and Our Services

    The About Us page got an update which helps to tell the Zoie Health brand story better. There is a new section for Our Story, Our Vision and a showcase of the team members.

    This addition helps to show the personality of the team and Zoie Health’s values, so that users can see the company is user focused and to understand why they are providing the services they work hard to provide.

    About Us

    Our Services page was redesigned to contain information about services Zoie Health offers. Clicking on the “Get Started” button prompts the users to still download the app where they can access any of the services available.

     

    Each service offered is highlighted and information about their options and benefits can be seen by the customers.

    Our Services

    Other Visuals

    Asides from the user interface redesign, I also created social media templates for the Zoie Health app launch. The templates include Instagram post and Insta story templates. My aim for the templates was a visual look that is both informative and clean.

     

    The app launch also required a motion video announcement. The motion was brought to life with After Effects. The video has been viewed over 4,000 times and initiated 100+ signups within the first day of the app launch.

    Zoie Health

    The Results

    Working on the Zoie Health redesign and app launch was a great designing and learning experience. I was able to combine my research and visual skills to help give a fresh look to the Zoie Health brand. I leveraged on the needs of the stakeholders, while focusing on an experience users would love.

     

    Zoie Health users are finding it much easy to access services on the website and to download the mobile app, and the social media page has a better visual look. The mobile app has recorded over a thousand downloads and user sign up rate went up by 100%.

     

    An in-depth experience would put other things like FAQs and Health Encyclopaedia into view, however the scope of the redesign was limited.