Challenge
Revamp the current Non-Profit Organization Website and mobile UX/UI design
Role
UX/UI Researcher/
Designer
Time
2 Weeks
Tools
Google Forms, Figma, Miro, Adobe Illustrator, Zoom, Slack, Trello.

MoreArt

More Art is a nonprofit organization that supports collaborations between professional artists and communities to create public art and educational programs that inspire social justice.




01 / EMPATHIZE

User Research

We first created a proto-persona thinking about More Art’s mission to raise awareness and continuous involvement in the arts. For more art, art is a way to inspire and provide much-needed life in the communities. So, we imagined someone like Cindy Rogers in her early thirties, who is a marketing VP, living in the upper west side, looking for an organization that would align with her values and principles regarding art, but currently her pain points are the number of organizations out there that make it overwhelming for her to donate, the lack of information on where to donate, and she wants to know where her money is going.

Survey Results

We received 22 responses from an online survey we conducted to determine the motivations and pain points of people when they interact with non-profit organizations

Research Interviews

We conducted 4 research interviews as well and obtained valuable insights on how people donate and why they give. Some of the key findings were...

“In an age where everything is driven by profit, non-profit organizations believe in a cause and I want to help”

“I want a valid story--I want to know what happens after”

Heuristic Evaluation

This is our heuristic evaluation. We noticed that help is available one very page, and the way to return home was consistent, the limited number of buttons and links were kept simple which made it easy to navigate. But there were huge blocks of texts, the design felt cluttered and some links were broken so we could never access it.

These were are annotations below. Some key takeaways were how the spacing was too tight, the font sizes were too small to read, and the spacing, alignment, headers, and sub-headers were inconsistent throughout the other pages.



02 / DEFINE & IDEATE

Affinity Diagram

Through the user insights and affinity diagram, we found out that People who donate online need to have a simple,  reassuring, and accountable giving experience because trust and transparency are key into motivating users to donate

Competitor Analysis



03 / PROTOTYPE & TESTING

User Flow

Hi-fi Web & Mobile Prototypes

We conducted user testing for the hi-fidelity prototypes and the following were key points that needed revisions:
  • “Alignments and use of space for different pages need to be consistent”
  • “Felt like the donate page seemed like a separate website”
  • “Spacing is strange, too close to the image when trying to purchase a product. Too much dead space to the right of About the artist.”
  • "Need Better call to action buttons"





04 / REFLECTION & NEXT STEPS

1. FURTHER 
PROTOTYPING

2. Reassurance

· Follow-up with our testers to see if the design iterations worked.
· Explore redesigning the artist's page based on user feedback.

· Find out more ways to reassure customers (certifications on landing page, no. of donations, etc.)