Overview
Empathize
Define
Ideate
Prototype
Test

The Asclepius Snakebite Foundation

Web and mobile site revamp for a non-profit medical organization.

Overview

Role
UX Designer
Team
2
Timeline
12 Weeks
Tools
  • Figma
  • Miro
  • Adobe After Effects
View Final Prototype

Background

The Asclepius Snakebite Foundation (ASF) is a non-profit organization dedicated to reversing the tragic cycle of snakebite outcomes in affected communities. The organization is currently in the process of opening a clinic in Kindia, Guinea.

Problem

Over the years, ASF has grown exponentially and has done a lot of meaningful work that has changed the lives of many Guineans living in rural areas. However, as the digital landscape evolves, the current website’s outdated design, limited functionalities and user experience challenges have become apparent.

Project Goal

Update the website of ASF to enhance its performance and user experience, and improve the overall brand positioning of ASF.
Our team utilized an agile framework to complete tasks independently for maximum efficiency.

THE PROCESS

Step 01. Empathize

Research Method & Goals

Our team conducted analytical research to evaluate existing data about how users are experiencing and interacting with ASF's website, particularly to gain insights that would help us improve the user experience. We also conducted survey research to better understand what people know about ASF, what kind of imagery they would prefer to see on the website, and the kind of merchandise they would be interested in purchasing.

We also had a stakeholder meeting with one of the founders of ASF at the beginning of the project during which our team learned more about the Asclepius Snakebite Foundation, their current work, their goals and the expected outcomes at the end of the project.

Research Findings

The analytical research aided in identifying frequently visited pages on the website as well as user goals and behaviours while on the website. We found that the website had a high bounce rate, as visitors often left the website after viewing the homepage and the merchandise page. This resulted in a low conversion rate as ASF was not meeting their fundraising goals, which, as a result, was delaying the opening of their clinic in Kindia.

Data from the survey revealed important information regarding the type of imagery visitors would like to see, especially regarding images of snakes and of those injured by snakebites.

Step 02. define

Based on insights from our research, the UX team decided to focus on improving the user flow of the website to encourage visitors to stay on the website longer and also encourage them to make a one-time or monthly donation to ASF.

User Personas

Through our analytical and survey research as well as insights from our stakeholders, a user persona was developed.
Meet Bernard, a medical doctor from Laval, Quebec. He previously worked for a non-profit medical organization and vowed to continue to give back after moving back to Laval. He has heard about the Asclepius Snakebite Foundation through the medical community, but he wants to learn more about the work they do to ensure that his money is going to a good cause. He also wants to make a donation through their website.

How Might We?/Problem Statements

Our team began to brainstorm and generate ideas by creating “How Might We?” statements to innovate solutions for the problems found during research:

  1. How might we improve the conversion rate by encouraging visitors to make donations to or buy merchandise from ASF’s website?
  2. How might we improve the user flow of the ASF website to keep visitors on the website?
  3. How might we encourage visitors of the website to sign up for ASF’s newsletter?
  4. How might we improve the visibility of ASF’s blog page?

Step 03. ideate

Information Architecture

The information architecture of the website was also revised by the team. We organized content and menu items to make it easier for users to find information and complete tasks. With this revision, users will be more likely to return to the website again and ASF's business goals are more likely to be met.

Style Guide

Although ASF already had an existing logo and colour scheme, our team created a proper style guide including the logo, colours, fonts used, and other elements so they have something to refer to in the future when making further changes to their website or creating merchandise for sale.

Step 04. Prototype

Low Fidelity Prototype

The UX team created low fidelity wireframes to investigate the solutions we generated during the ideation phase.
These wireframes were shared with our stakeholders and the larger team for feedback and relevant feedback was implemented.

View Low Fidelity Prototype

High Fidelity Prototype

High-fidelity mobile and desktop wireframes were created, implementing findings from the survey and analytical research conducted earlier in the design process.

The focus was placed on the landing, blog, donation/membership and statistics pages as the stakeholders believed these were the most important pages to meet the goals of users and themselves.

Step 05. Testing

High Fidelity Usability Testing

During this phase, design changes were made based on feedback from the larger team.

FINAL HIGH-FIDELITY PROTOTYPE

Next Steps

ASF wanted to slowly implement the recommended changes to the website themselves and have made several improvements to their website since the conclusion of this project.

Reflections & Takeaways

I thoroughly enjoyed working on this project as my first real-life UX project. I had fun working with this team and learned a lot from them and from our amazing supervisor, Dr Tuhin. It was especially exciting working on a project for an organization that does meaningful and impactful work that positively impacts the lives of people who would not have access to the medical services they need otherwise.

Next