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.
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
During the design process for the Zoie Health website, I engaged in a collaborative discussion with stakeholders to understand their vision and objectives. This allowed me to align the design strategy with their goals and prioritize the needs of the target audience. I aimed to create a redesigned website that not only met stakeholders' expectations but also improved accessibility and convenience for individuals seeking healthcare services.
While working on the redesign, I had a serendipitous experience in a hospital environment that further emphasized the importance of digital solutions in the healthcare industry. This experience fueled my commitment to a user-centric approach, focusing on creating a seamless and intuitive user experience. The goal was to empower users to access healthcare resources and information from the comfort of their own homes, enhancing accessibility and convenience in seeking healthcare services.
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.
Simplifying User Flows
The redesign process for the Zoie Health website began with an evaluation of the existing structure and content, revealing challenges with navigation and information organization. To address these issues, I focused on streamlining the user flow and improving navigation for a more efficient experience.
During the brainstorming phase, I prioritized key features and functionalities based on user needs and business objectives. By analyzing the user flow, I aimed to minimize clicks and simplify the path to essential information. The goal was to create a website that offers a concise and intuitive navigation experience, enabling users to find the desired content quickly and easily.
To achieve this goal, I reimagined the user flow by restructuring the website's architecture and implementing a more logical organization of content. By strategically grouping related information and streamlining the navigation pathways, I aimed to create a seamless journey for users, allowing them to effortlessly find the information they needed without encountering any unnecessary hurdles.
Furthermore, I focused on improving the overall user experience by adopting a user-centric design approach. This involved conducting user research, gathering feedback, and performing usability tests to gain valuable insights into user preferences and pain points. By incorporating user feedback into the redesign process, I aimed to create a website that truly resonated with the target audience and addressed their specific needs.
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 embodiment of the product which then impacts users' everyday life and also the emotions that are associated with it.
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.
About Us and Our Services Page
To enhance user connection and trust, I implemented updates to Zoie Health's website. The “Our Story” section was introduced, offering an engaging narrative about the company's origins and mission. This showcased the team's passion and commitment to revolutionizing healthcare accessibility. Additionally, the “Our Vision” segment was incorporated, highlighting Zoie Health's aspirations to improve healthcare outcomes and empower individuals.
To personalize the brand experience, the website prominently featured the team members, showcasing their expertise and fostering a sense of connection. By humanizing the brand and demonstrating the team's dedication, users gained confidence in Zoie Health's abilities and user-centric approach. These updates aimed to establish credibility and communicate the company's values, vision, and dedicated team.
The revamp of Zoie Health's Our Services page aimed to create a seamless user experience for accessing detailed information about the services. The redesign effectively showcased the range of offerings through visually engaging presentations, concise descriptions, and compelling visuals. This approach enabled users to quickly understand each service and its potential benefits, facilitating informed decision-making.
To drive user engagement and prompt action, a prominent “Get Started” button was incorporated into the design. Clicking this button seamlessly directed users to download the Zoie Health app, granting full access to the services. By streamlining the transition between the website and the app, this process eliminated friction and increased the likelihood of continued user engagement with Zoie Health.
Motion Design and Other Visuals
In preparation for the launch of the Zoie Health app, I designed visually appealing social media templates for Instagram posts and stories. These templates effectively conveyed key information about the app and its features while maintaining a clean and visually appealing aesthetic. The goal was to strike a balance between informative content and an appealing design that would resonate with the target audience.
To further enhance the app launch experience, a captivating motion video announcement was created using After Effects. This video utilized captivating visuals, animated elements, and concise messaging to effectively communicate the app's value proposition and highlight its key functionalities. The impact of the motion video was remarkable, with over 4,000 views and more than 100 signups generated within the first day of the app launch. This immediate and positive response demonstrated the effectiveness of the motion video as a marketing tool and showcased the strong appeal and interest surrounding the Zoie Health app.
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.