top of page

Redesign Healthcare Website

Victoria Angel was designed to collect stem cells for those in need of stem cell transplants. However lately conversion rates between website visitors and donors have been low.

The Problem

We re-designed the website to be able to increase conversion rates and therefore create more donations.

Solution

Screenshot 2024-07-29 at 7.56.38 PM.png

Figma, Kanban, Illustrator, Miro

Tools Used

UX Design and Research, UI Design

The Role

Screenshot 2024-07-29 at 8.12.46 PM.png

Current Website

Users complained Confusing Primary Navigation, Lack of relevant Hero Image, Non User friendly typography & Fonts, and Not suitable Colour scheme and images

Research Goal

Find out why people are not encourage to use the online features of the website?

​What is motivating them to register in person rather than online?

​Is the Website Navigation too confusing?

​Can they not find the Registration Form on the website?

​Why are user not donating over the website?​

Interview Results

All User had difficulty in finding the Registration Form. They complained the navigation was confusing and the website seemed fake. Common issues were links and buttons were not working.

Screenshot 2024-07-29 at 8.20.31 PM.png

ProtoPersona

Kerry is a passionate 27 years old Social Worker, who wants to donate her Cord Blood Sample to a Public Bank so that it can be used to save anyone's life. This is her first pregnancy and she wants to have more information of the program before she registers for it, but the current website is not providing her the information she is looking for.

Screenshot 2024-07-29 at 8.24.09 PM.png

Storyboard for Current Website

We had to create two storyboards to show how the entire cycle of registration changes with the new concept. Here it shows how the customer first took information over the phone, then visited the website since the website was so confusing she had to sign up in person. 

Storyboard of Iterated Website

In this scenario, the customer found out from friends about the Cord Blood donation, she visited the website with her husband. Since the new website had all the information she was looking for she was easily able to register online.

Screenshot 2024-07-29 at 8.28.55 PM.png

User Journey

After talking to several people during the interview, I developed Kerry, my main persona. Kerry is married and is expecting her first child. She has decided that she wants to donate her child's Cord Blood sample to someone in need. She wants to register online and doesn't want to go in person to register. 

Screenshot 2024-07-29 at 8.32.54 PM.png

In the interview session, we touched on the pain points of the users. We listed all the issues they were facing on the existing website.

Interview Results

Screenshot 2024-07-29 at 8.39.51 PM.png

We organized all the customer feedback in different categories, and mapped out the main target points to improve the overall performance of the website

Affinity Map

Screenshot 2024-07-29 at 8.40.37 PM.png

Then we further filtered the categories to get a deeper understanding of the main issues to address.

Empathy Map

Screenshot 2024-07-29 at 8.42.35 PM.png

Usability Testing

Screenshot 2024-07-29 at 8.52.28 PM.png

User Flow

Based on the previous task flow and what we know about their habits, this user flow walks through the customer's journey through the site, taking into account various decision points along the way. 

Responsive Wireframes

After reviewing the sketches with the client and a couple of iterations, it’s time to start refining in the form of a low fidelity wireframe. Here, I further identified the layout of the interface. Utilizing wireframes in the beginning phases of design, is an efficient way to communicate placement of elements without getting too bogged down in minute details. A huge benefit and timesaver is that the layout can easily be changed. 

Screenshot 2024-07-29 at 8.58.05 PM.png
Screenshot 2024-07-29 at 8.59.36 PM.png

Style Guide

This is where Kerry's branding really starts to take shape. By using the mood board elements as inspiration we came up with the resulting style tile you see here. The client was presented with a choice of color palettes and she chose the one pictured. This gives us an idea of how the site could look by listing out all the different variations in logo styles, colors, and photo usage. The style tile helps set the mood and tone of the brand and is used in the next step. View the full size style tile.

Sitemap

Redesigning an existing website gives us the "advantage" of having an information architecture (IA) already in place. The client and I discussed the structure of the site ahead of time. I had every intention of speaking with her clients about the use of the site to get more insight into the architecture, but she was reluctant to give out their information to me. If I had had that research and also usage statistics, information architecture might have turned out differently.

Screenshot 2024-07-29 at 9.02.45 PM.png
Screenshot 2024-07-29 at 7.56.38 PM.png
Screenshot 2024-07-29 at 9.52.48 PM.png

Updated Website

We introduced a quick information video on the homepage to inform the customers of the process and answered most of the FAQs.  Updated Navigation Bar with a separate Registration Page, which included a fillable Registration form which made sign up easy.


Iterated Mobile Design

After the website, we then introduced easy sign-up through the app as well. This helped the company to sign up people on the spot.

Screenshot 2024-07-29 at 9.18.38 PM.png

Final Thought

To confirm if the website iteration were effective, the Marketing team performed a test on 50 new users and discovered that the majority of the user was able to easily register online. The result was 87% more than their existing website. The Redesign was approved by the CEO and it is now in the development phase.

Screenshot 2024-07-29 at 9.58.09 PM.png

Launched New Forms

Condensed the length of the form, added bread crumbs so that the user can evaluated how far they are from the finish line. This strategy motivated the user to use the form with confidence and efficiently.

bottom of page