UX Designer
cover-v4.png

UX Redesign - Arts For All

afa_logo_color2.jpg

Arts For All Redesign

Redesign a non profit organization website to attract donation and participation

Homepage - Click to open image

About the Project

Arts For All is an American non-profit organization which offers accessible artistic opportunities to children in the NYC area who face socio-economic, physical, or emotional barriers to exploring the arts. Its website introduces the mission and activities of the organization. This project is to redesign Arts For All’s website, including desktop and mobile.

ISSUE: Users often struggle to find relevant information in AFA website and don't find the content interesting or convincing for them to donate.

Challenges

  1. What is the first thing user want to know about this organization?

  2. What are the factor influence user’s decision of participation or donation?

My Role

  • UX researcher & designer

  • Information Architects

I worked with three teammates as manager of the team. I was mainly responsible for conducting user research, collecting and synthesizing research data, mapping the user journey and potential opportunities, brainstorming, sketching, and designing wireframes, low and high fidelity prototypes.

 
A website is the face of an organization what people see online should reflect who you are as a nonprofit.
 

User Research

Understanding our users, make sure we will design what they need.

According to the opinions from AFA, we identified our target user group:

 
user.png
 

“Finding who are the benefactors can tell if this organization is reliable before donation. What if it is a scam?“ — Ley, student

Honestly, I’m really looking for one that gives me clear information on their events. I’m always on websites and I can never find the calendar or, like, when the event is happening or where. It’s really frustrating.“ — Jessica, parent

“I am passionate about helping people. Usually, I would love to check the mission statement to see if they are suitable for me.“ — Leslie, art educator

“I would love to some photos of the program, make sure it fits me.“ — Ken, Artist

 

User Findings

  • The mission statement is the first thing the users want to see on the website

  • Clear and organized content with hierarchy can provide a reliable impression to users

  • Related visual information will help users make decision about donation and participation

 

Persona

 
 
 

Structuring Content

Reorganizing the categories and labels to be understandable and increase the findability of features.

 

Card sorting result

Cart Sorting

We conducted a card sort consisting of 31 labels drawn or adapted from existing labels on the Arts for All website, the labels were displayed as short descriptive statements to make them easier for participants to understand. The data to inform our design was gathered through a pair of short studies hosted on Optimal Workshop.

 

Tree testing result

Tree Testing

Based on the results of card sorting, we designed a preliminary site map for use in a tree test. We divided our headings into five top level categories, further dividing the largest category into subcategories.

Five tasks were developed to test this preliminary design, which require the participants to explore the majority of the site map without creating a pattern that would influence their answers.

 

Updated Site Map

Results of card sorting and tree testing led us to reduce the complexity of the map by cutting down on the total number of content headings, separating the large subdivided category into two top-level categories, and moving some headings to different categories. Additionally, we changed the names of a number of headings to make their meanings clearer.

 
 
 
 

Competitive Analysis

Learn both an offensive and defensive strategic context to identify opportunities and threats.

This study compares four non-profit organizational websites that can be considered competitors to Arts-for-All. All four of them aim to provide arts education opportunities to young children in NYC. By studying their websites can help us better understand industry standards and improve Arts-for-All based on existing designs. Furthermore, isolating flaws in these competitor sites will help us avoid these pitfalls in our designs.

We compared the four websites using six dimensions: homepage, links & labels, content, images, organization, and accessibility.

 
 
 

Based on our review of competitor sites, our design insights are:

 
Competitive Analysis.png
 
 

Paper Wireframe Prototype

After completing all the findings and analysis, we developed the final wireframe prototype of desktop and mobile. We then created two tasks for user testing for improvement. One task for each prototype.

Design Ideas:

Wireframe Evaluation

Then we tested the prototypes with actual users. Each member conducted with 2 users individually(8 in total).

 

Desktop - Look for event List page

Findings

  • All participants completed the task.

  • Too much white space on homepage and needs more visual information.

Mobile - Look for donation page

Findings

  • All participants completed the task.

  • “Menu” is not noticeable.

  • Users preferred “Donate” more than “Support Us”

High Fidelity Prototype

Desktop

Based on the feedback, we further created a high fidelity prototype. We added data and illustration to rich the content and increase credibility.

Before and After

 

Mobile

For mobile, we focused on keeping content and appearance consistent with desktop experience and optimize the navigation and layout for small screen.

 
 
 

Feedback from professional

The desktop prototype looks good. The mobile prototype needs to increase and give a background color to a clickable button for increasing discoverability. Other than that, we were successfully identified user’ s perspective and created effective solutions and they were satisfied with our product.

Summary

This project involved lots of researches that gave us the concept of how users think and their preferences. We focused on the credibility and the structure of the website to attract donation and participation. I also realize it is important to keep our findings in mind while working on the design, always start working on the research instead of the design. Otherwise, the focus will be easily moved from UX to UI. Always remember user research is the reason behind the design.

 

Group Photos