top of page

The Africa In Me

Redesign the website to help less privileged families by conditioning, relabeling, and attracting users

Project Overview

AFIM is a nonprofit organization established by an inspiring woman who is originally from Africa. The organization provides food and job security for the less privileged families in four counties in Africa.

Challenge

​​Due to a lack of information about the organization and its mission on their website, users weren't confident about trusting the organization with their finances.

Solution

Our redesigned homepage now features a compelling mission statement, impactful visuals, and a Founder's Corner, fostering trust by sharing our journey. With smoother navigation, an intuitive volunteer process, and an insightful blog, we invite users to engage with our cause, enhancing our credibility and impact.

Challeng.png

Challenge 

Designing a trustworthy website

responsibility1.png

Responsibilities
UX Research, User Testing, Interaction designer

web-design1.png

Tools
Figma, Adobe Photoshop, Zoom, Wix, Miro

TEAM1.png

Team 

Three designers

timeline.png

Timeline
Three weeks

Design Process
DISCOVER
DIFINE
IDEATION
DELIVER

Interview

Usability test

Competitive analysis

Problem & Solution 

Card sorting

Sitemap

User flow

Sketches

Wireframe

Iteration

Prototype 

Usability test

Discover
Understanding the User and Problem Space

In the first phase, users were surveyed and discovered. On the current website, we conducted a usability test with ten users. Observing the users during the trial and talking with them after they have completed the requested task, we have found:

1
Key User Test Insights
  • Unprofessional design and inconsistency discourage users

  • Lack of categorized Information about how the organization works 

  • The unclear information confuses users where and how the money used

  • Confusion ultimately prevented the user from trusting the organization

  • The users have to spend a long time applying the volunteer process

During this stage, I interviewed five users to further empathize with their donation process and frustrations. By talking to users ranging in experience from about to online donation for the first time, I validated user motivations and behaviors what they genuinely do during donation processing.

2
Key User Interview Insights
  • The work process of organization builds trust

  • The precise information about the place and how to spend money

  • The use of related photos and the effect of making them cause the user to pay more sympathy

"The clear information about where and how the money used, bring peace of mind and sense of satisfaction."

Faezeh

"Use influential Photos that related to the organization performance."

Mary

"There is peace in trusted sources - users tend to ask people they know about the organization."

Max

3
Competitive Analysis

For the next step, we did similar observation websites then summarized the results:

  • Change the category of presentation of content that user should see at first glance at the homepage 

  • Navigation design based on necessary data at the nonprofit organization

  • Using phrases "Who We Are" and "What We Do" to talk about the mission of the organization 

  • Having volunteer button in the specific area

compet 02.JPG
compet 03.JPG
compet 01.JPG
comarative Analysis.PNG
Define
Based on the case study, here are five problems I decided to focus on:
  • Lack of convenient and attractive home page for keeping the user on the website

  • Difficult to find information about the organization to make it trustworthy

  • Difficult to find an easy way to joining as a volunteer

  • Challenge about the knowledge of the founder 

  • Lack of a blog to make the site discoverable

Card Sorting

We worked on information architecture so that users can have easier access to the information they want.

card sorting.PNG
Site Map
Site map.PNG
User Flow
user flow.PNG
Design & Test
Design Ideation

Based on the organization and features defined during strategizing, I constructed the user experience flow in sketches and wireframes. During the redesign process, I continued referring to the target audience, organization mission, revenue model, and my goal to focus on improving the user experience regarding all user's pain points we found in our research.

116.jpg
115.jpg
Design Iteration

During design process we had lost of iteration to find a better idea and solution.

  • Using an icon inside a title can help to understand the concept faster

  • Showing essential and general information at first glance is better than a long description

  • Putting different kinds of Photos does not necessarily make the work attractive, so select an ethical photo with a straightforward explanation has more effective

Deliver
Wireframe

Moving forward, we prepared the final version of the design. Know we can see our solution how does it lunch.

Homepage

Redesign homepage and add a new future for the user that easily can access any information about the organization.

As the information in this section was spread across multiple pages, it was confusing, so we dedicated a specific section with a brief report on the homepage to help users decide how they can contribute.

Homepage

homepaGE.PNG

Redesign navigation and add three new pages and one feature. Include who we are, what we do, Blog, and search bar

Putting an icon next to the three key elements of organizational activity

Design a map of where we work

Place the volunteer button next to the donation button on the hero image

Our research show putting a picture with a quote from the founder brings trustworthiness and encouragement for the users

Design a specific part for joining as a volunteer

Volunteer page

Design a quick and short process for applying as a volunteer.

VOLUNTEER 1.PNG
VOLUNTEER 2.PNG
VOLUNTEER 4.PNG
Impact

Before and after the redesign, I conducted a usability test with ten users. As shown below, the time of applying as a volunteer significantly reduced. Ten out of the ten participants could easily find what they were looking for, and eight indicated they were happy with the website's new appearance.

Volunteer process

Easy navigation

visually appealing

Before

20%

40%

30%

After

5%

100%

80%

impact.PNG
Reflection
Personal learning
  • In the design process, some founder's views did not align with our research; therefore, finding the ultimate solution was more challenging. As a result, I had to choose the right solution to meet the founder's goal and user experience research

  • Working and collaborating with a coworker at different times zoon help me to manage our design process and be more flexible

Next Step
  • Our plan is to work on the other pages (what we do, our sponsor family) based on founder request to give users more information about what we do.

Let's work together! 

noun_Email_429221.png
linkedin (4).png

© 2021 by Sima Sanaei.

bottom of page