GenGen (Generous Generation) is a non-profit organization bridging authentic generosity between Gen Z and other generations. They collaborate with artists to create donation-based stickers, emphasizing collaboration, sticker design campaigns, and various forms of giving beyond donations.
The Problem:
GenGen focuses on community outreach and redefining generosity by giving from your heart. Although their mission is meaningful, we have observed that the site does not communicate their narrative strongly and their donation method is not effectively shown. this has led to litter interaction on their website.
How might we expand GenGen's mission by improving their donation flow, information architecture, and site traffic?
The Solution:
Based on the problems mentioned, our redesign focused on two main parts - simplifying the navigation bar and making their donation feature more prominent.
UX/UI Designer
3 Weeks
Redesign the website with better information architecture and organize the site map
Figma
Google Suite
Zoom
Through in-depth stakeholder interviews, we acquired valuable insights into GenGen's brand, mission, and their desired trajectory as a non-profit organization.
What are the stakeholders' thoughts and goals of GenGen and their website?
Learning about their goals, visions, & flexibility of web redesign
Conducting a survey analysis provided us valuable insights about GenGen’s current user demographics and how they can expand their customer base to larger audiences.
The survey analysis visualizes GenGen’s original customer base. The majority of users on the site were female students between the ages of 21-24.
One area of improvement we noticed in the survey was the disparity between the percentage of students and working professionals. Through this observation, we hypothesized that increasing the number of working professionals visting the website would increase the number of donations.
While stakeholders wanted the website to convey “playful” and “optimistic”, current users think otherwise
Initially, our team believed that users would only go on the website for the campaign support, but we were surprised to learn that many users go on GenGen’s website to learn about the organization
Based on our interviews with GenGen’s stakeholders and users, some pain points that we discovered included: an easier way to find the donation section, a more prominently presented mission statement, and a navigation bar that was easy to understand.
Based on the survey and the pain points that we discovered, we created our user persona to represent the major demographic of GenGen’s. Meet Sidney C, a determined individual who wants to support creators and small businesses in her community. A major frustration she has is her lack of knowledge of any non-profit organizations (NPOs) that she finds trustworthy. Her ultimate goal is to find a NPO that she can consistently donate to for many years to come.
During our heuristic evaluation, we discovered that there were many design opportunities we could improve. Some of the main issues we initially found focused on navigation, information architecture, and color accessibility. During our first experiences with the website, we we were overwhelmed by the number of tabs on the navigation bar. Also, both the original footer and call-to-actions (CTAs) did not pass the Level AA Website Accessibility and Design compliance standard.
Most of our inspiration for the final redesign stemmed from images and websites with homepages that has a z-pattern composition which leads the users' eyes down the page to keep them engaged.
Through our mood board and the existing branding of Gen Gen, we were able to create a style tile that combined our new branding with added design elements we planned to implement into the website.
When developing the hi-fi prototype, we wanted Gen Gen’s branding and mission to be the focal-point of the user’s experience. Thus, we created an interactive and visual aesthetic that combined playfulness and professionalism. As Gen Gen is a non-profit focused on stickers, we incorporated sticker outlines into the background shapes that users can hover over to learn more about past campaigns (See gif for reference).
-Recovered.gif)
My team and I developed the idea of having hidden easter-egg stickers to represent GenGen's past campaigns and when the user clicks on one, it takes them to a page representing that campaign.
.gif)
Communicating with stakeholders
This project was my first exposure to communicating with professional stakeholders. From this experience, I was able to practice presenting my design decisions, sharing designer expectations, and understanding stakeholder expectations.
Stay focused throughout
Throughout the duration of this project, there were times where my team strayed away from our original objectives and goals when brainstorming. To help mitigate this problem, I learned to play the role as mediator by listening to everyone’s opinions while progressing the conversation towards a decision.
Establishing boundaries
During our first few meetings, we found ourselves calling for long periods of time, which eventually led to the team burning out. To prevent this from happening again, we established boundaries for meetings and set deadlines for ourselves which challenged us to utilize our time more wisely.
