YEASD

Responsive Web Design

YEASD

A responsive web design for client located in Cameroon Africa.

My Role

Design Lead, UX Designer, Resercher

Client Project

Responsive web design to help share information to users and allow users to get involved in community environmental issues.

Tools Used

Figma, Miro, Zoom, Photoshop

The Problem

Client has no website, but has a large social following. They want a responsive website for users to stay up to date on local issues and easily get involved.

How might we create a space that informs users and is easy for them to get involved?

The Solution

Create a responsive website that allows users to easily find information and get involved.

Design Process

Market Research

To begin our research, each member of the team conducted a competitor analysis. This allowed us to get many different perspectives and allow each person to focus on a aspect of NGOs. Once completed, each member presented what they found and we compared what common trends were found. Below is an image of the competitor analysis I created. I wanted to focus on strengths, weaknesses, and trends of NGOs.

Stakeholder Meeting

To kick off this project my team and I hosted a stakeholder meeting with our team and client and their team. The purpose of this meeting was to build a relationship with our client, empathize with the problems they were facing, their goals, and KPI's. We also made sure to set project deadlines and put together a list of local people in Africa that we could conduct user interviews with.

User Persona

Based on the interviews I set up one persona.

We referred to this persona throughout the entire product development process

Site Map

I focused on creating the site map based on secondary and user research as well as what the client gave to us for inspiration. After doing a few team brainstorming team sessions a few pages and content in each page did change from this original site map.

User Flows

Building on this, the user flow I devised followed took potential customers on two journeys:

Discovering YEASD on a friend's social and deciding they want to learn a bit more about the business.

User decides to they want to donate some funds to YEASD

Mobile Wireframe
Style Tile

Usability Testing

We conducted our usability tests with a total of 9 participants. Participants were separated in a desktop and mobile group. This would help us not get biased results between the two devices. 

Objectives:

  1. To observe how users interact with the YEASD website on desktop and mobile.

  2. To assess whether or not tasks are easy to perform and if they make sense. 

  3. To uncover anything that is confusing or missing from the user’s perspective.

Usability test plan & Script​

Test Findings

As a team, we held a remote monitored usability testing, from 12/14-12/7. Each team member interviewed three participants each for a total of 9. 

Participants were split into two groups, desktop, and mobile. This helped prevent any biased test results. During the test, participants were asked to think out loud during each task.

For the most part, users completed the tasks easily and weren’t overly confused with aspects of the website on both desktop and mobile.

 

Most of the concern revolved around the "Contribute & Shop" CTA. Participants mentioned that the CTA gave them the impression that they had to buy something to contribute.

Another concern that was brought up was that some information could be place in one page, instead of multiple pages, such as issues, mission and goals.

User Interviews

At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem.

Participants were given to us by our client and as well as our participant's connections.

Participants: Gender: 2 men, 6 women Age: 25-35 All participants are involved in helping their community environmental issues in some capacity.

Key Findings

Volunteers are motivated by incentives. Many volunteers are youths and young adults who are looking for internship programs.

Donors and Volunteers are visually persuaded. This means they determine whether or not they want to donate or volunteer by the photos shown. They want to see people having fun, working together, and creating change.

 

Users want to see what the organization's story is, their mission, goals, and how they plan on solving issues they want people to help with.

 

Users like to be able to show their network what they are involved in, help promote and get others involved by donating or volunteering.

 

Users are very self-motivated to help their communities because they faced these issues first hand. Many users like to stay informed on local issues and trends.

Affinity Mapping Clues

To synthesize the data, we organized the information into different groups to see if there were any patterns that would help me better understand these readers and their habits. I was able to identify users’ needs based on the patterns I observed.

Desktop Wireframe
Mobile Screens

"You've got to start with the customer experience and work back towards technology, not the other way around." - Steve Jobs

Findings

Using the notes taken during testing, I created an Affinity Map composed on individual user thoughts and observations. I looked for patterns between the testers, and distilled them down into key insights and finally recommendations of revisions to make based on user testing

Iterations

Based off the testing results and feedback we received from our participants we made the following changes. A lot of the changes were very minor and did not affect the architecture of the website.

Changes:

"Contribute & Shop" CTA was changed to donate. Users expressed that the original button made them feel that they had to buy something to contribute and expected that there was going to be a gift shop, when in reality it was only one t-shirt.

CTA on hero page was added As a team we based this decision on what we discovered from our desk research and the client's need. We wanted to make the "Get Involved" CTA front and center for users to learn more and get involved.

"About" page Users mentioned that there were too many clicks and were confused by some of the information. Instead of separated links to each page such as local issues, about the team, etc.. We decided to have it all out there on the main "about" page. Each topic included a blurb and a link to learn more. This would allow the user to read the blurb and if it is of interest they can learn more about the topic. This will eliminate unnecessary clicks for the user looking at the information they are not interested in.

Reflection

This project has taught me the importance of clear communication with stakeholders. Truly understanding the client's needs and their customers will help lead a project onto the right path and guide to a solution to their problems.