The African Esophageal Cancer Consortium (AfrECC)
A website to fight esophageal cancer by raising awareness, connecting patients to care, and driving donations to support communities in East Africa
I served as a UX Designer, responsible for creating the website's branding, designing half of the homepage, and the entire esophageal cancer page. This included developing low- to high-fidelity prototypes and collaborating with stakeholders to ensure content accuracy and alignment with AfrECC’s mission.
The African Esophageal Cancer Consortium (AfrECC) website raises awareness about esophageal cancer, educates the public on prevention, helps individuals recognize symptoms, and connects them to essential care. It also encourages donations to support AfrECC’s mission of benefiting communities in East Africa.
Check out the website and make a contribution to improve lives: https://www.afreccfoundation.org
In progress
In progress
Increase in Donation
Problem Context
"Esophageal cancer (EC) kills 500,000 lives annually, with regions in Asia and Eastern Africa bearing the highest burden"
Most cases are esophageal squamous cell carcinoma (ESCC), often diagnosed at advanced stages, resulting in limited treatment options and a short life expectancy. AfrECC addresses these challenges by advancing research, improving clinical practices, and promoting early detection and better access to care for EC patients.
Solution
The African Esophageal Cancer Consortium (AfrECC) website serves as a platform to
Educate the public about esophageal cancer
Help patients understand esophageal cancer's risk factors, learn about prevention methods, and access information on early detection and treatment options
Encourage support through donations.
How Might We Statement
How might we raise awareness about esophageal cancer, connect patients to resources for early detection and treatment, and inspire donations to support AfrECC’s efforts in addressing this urgent health crisis?
Stakeholder Interviews
Interview Goals: To understand AfrECC board members' and the African community's priorities on cancer awareness, prevention, and patient care. To also, define expectations for the website’s features, design, and content to meet user needs.
Participants: 7 interviewees, including AfrECC board members and members of the African community familiar with AfrECC.
African Physicians:
1 American expert in gastroenterology and endoscopy.
2 African physicians focused on esophageal cancer research and education.
Goal: Understand their needs for resources and medical equipment to improve early detection and treatment.
African People:
Often access information via word of mouth or phone.
Goal: Identify where they find information and resources on esophageal cancer.
AfrECC Board Members:
Diverse professionals in medicine, business, and fundraising.
Goal: Understand their needs and AfrECC's mission, including effective fundraising strategies for esophageal cancer initiatives.
Interview Insights
African Physicians
Easily find research findings and tools for early detection and treatment of esophageal cancer.
African People
Over 90% of EC in the high-risk belts is esophageal squamous cell carcinoma (ESCC)
Educate about esophageal cancer awareness and prevention in Africa
AfrECC members as a whole
Clear calls-to-action and transparency in how donations support their efforts
Bringing doctors and surgeons to African regions
Research: Persona
By analyzing our data from the interview insights, our team identified two main groups of users within the African community: physicians and patients. These physicians and patients were developed into personas, serving as data-driven representations of our target audience throughout the project.
Ideation
Narrowing down the features
Our team took part in several quick brainstorming sessions to come up with different features based on insights and website goals from our research interviews. We used sticky notes to jot down ideas and then sorted them into groups, resulting in the following features:
A donation page for individuals or businesses to contribute and help save more lives affected by esophageal cancer
A section highlighting AfrECC's vision and mission statement
A page dedicated to educating people about esophageal cancer, including its risk factors and treatment options
Organizing AfrECC’s Website Structure
Due to the time constraints of publishing the website by December 1st, I decided to focus on 3 main pages, Home, About AfrECC, and Esophageal Cancer, rather than the initially planned 5 pages. This decision was also informed by the needs, pain points, and goals we gathered during the research and ideation phase. To ensure clarity and usability, I organized and grouped the information gathered from interview insights into a navigation system that prioritizes the website's goals of prevention, detection, and education about esophageal cancer. This process also highlights the evolution of key pages and the content on each page. Below is the mapped-out progression from the initial to the final iteration of the AfrECC website.
Compiled all the information gathered from the initial meeting with board members into potential website features, emphasizing AfrECC's work and providing users with detailed information about esophageal cancer.
Due to time constraints, I combined the AfrECC and About pages, focusing on their history and the different groups within the board members
Added in a designated donate page for organizations and individual to change many lives by donating
Added a Frequently Asked Questions section to each page to address questions specific to its content
The Esophageal Cancer page underwent the most changes to emphasize risk factors and current treatment options
Design
What do existing cancer awareness look like?
I gathered design inspiration by reviewing existing websites focused on cancer education and awareness, such as Prevent Cancer Foundation, American Society for Gastrointestinal Endoscopy (ASGE), START Research, and Cancer Research Institute. These sites provided valuable insights into the types of information typically shown about cancer, along with the best design practices for effectively presenting a cancer awareness website.
Wireframes
What do existing cancer awareness look like?
To present to the AfrECC board members during the team design session, our team prepared wireframes of the AfrECC website. While the brand identity had not yet been established at this early stage, my primary focus was on designing the website layout to ensure that the information and structure aligned with the AfrECC team's vision and were heading in the right direction.
Although most feedback involved changes to the text content across various pages, specific input on the "Home," "Donate," and "Esophageal Cancer" pages became the primary focus for the next design iteration.
Crafting AfrECC's website Branding
Inspirations
My inspiration came from the light purple color of the logo, which represents calm. Since Boston Scientific has been the most significant supporter, I also drew inspiration from their website. One of the pages I suggested to the board members was the Cancer Research Institute, where the use of orange symbolizes warmth and optimism, offering hope for patients or individuals diagnosed with esophageal cancer.
Branding and Design Systems
I chose these sans-serif fonts for the AfrECC website because it is clean, easy to read, and accessible to all audiences. It strikes a balance between professionalism and approachability, while its soft, rounded design evokes a sense of hope and trust, providing a comforting feeling.
Resources
Most of the images, introduction video, and content on the website were provided by the board members. We organized and allocated them across various sections, including the Home, About AfrECC, and Esophageal Cancer pages.
From Low-fidelity to High-fidelity Testing
Once our branding was created and applied to our prototype. Due to the tight deadline, we started to design low fidelity and quickly design high fidelity and user test with the AfrECC board members.
Most board members agreed that the current hero image is more relatable to physicians or board members but fails to resonate with the broader audience regarding AfrECC's work on esophageal cancer. Additionally, the Africa map on the homepage lacks a title or indicator, making it unclear while the website aims to highlight the severity of esophageal cancer in Africa. The home page also missing the story of patient which could give hopes to other patients. The following design changes were made to resolve the problems:
Video as a Hero Image for the Landing Page: A video showcasing AfrECC's work on esophageal cancer provides users with a concise overview, eliminating the need to read through lengthy descriptions and making the content more dynamic and informative.
African Map Indicator: I provided additional context and detail to the African map by including all AfrECC site locations and introducing indicators to highlight areas with higher severity of esophageal cancer, emphasizing the impact of esophageal cancer across Africa.
Text Size and Boldness: Enlarging images and emphasizing key text ensures that critical information is highly visible and captures the audience's attention effectively. Bolded headlines such as "Every Contribution Counts" and "A Critical Health Crisis" convey urgency and importance, aligning with AfrECC's mission to improve survival rates.
Image Sizes: Enlarged images not only help audiences better visualize the information but also make the message clearer and more emotionally impactful. This approach reinforces the message and inspires action, supporting the goal of raising awareness and encouraging meaningful contributions.
