YOU
GROW
GIRL!
You Grow Girl! is a King County-based 501(c)(3) nonprofit organization founded and led by a former foster care recipient and systems survivor. They have been providing comprehensive wraparound services (individualized mental health care) and programming to youth and their families throughout Washington State since 2002.

The goal of this project was to redesign their website to improve the user experience and ensure volunteers, donors, and individuals seeking services could easily find what they need.
TIMEFRAME
3 WEEKS
TEAM
ALLISON AUSTAD
AUSTEN COURPET
LAUREL PARK
FARIA RAHMAN
TOOLS
FIGJAM, FIGMA,
GOOGLE SUITE, PHOTOSHOP
SLACK, TRELLO, ZOOM
THE PROBLEM

The current You Grow Girl! website lacks organization and structure, causing its users to struggle to find what they are looking for.

How might we redesign the current website to instill more confidence so that mobile traffic, donations, and volunteers increase month over month?

OUR SOLUTION

Redesign the website using the design process (discover, define, develop, deliver) to improve the user experience and increase mobile traffic, volunteer inquiries, and donations.

THE DESIGN PROCESS
DISCOVER
01
  • Interviews
  • Survey
  • Heuristic Evaluation
02
DEFINE
  • User Persona
  • Empathy Map
  • User Journey Map
03
DEVELOP
  • Feature Prioritization
  • Card Sorting
  • Wireframes & LoFi Prototype
  • Style Guide
04
DELIVER
  • User Testing
  • Iterations
  • Hi-fi prototyping
05
REFLECT
  • Challenges
  • What we learned
  • Future Work
01

DISCOVER

USER RESEARCH
To begin, we needed to determine:

  • What do users really want from the website?
  • What is the current You Grow Girl! website doing right?
  • What could be improved?
INTERVIEWS
Interviewed 10 users to empathize with users who actively donate time and money to nonprofits.
SURVEY
Conducted a survey to gather actionable data on user preferences.
HEURISTIC EVALUATION
Performed a heuristic evaluation to evaluate the current website to determine what keeps users from finding the information they are looking for.
INTERVIEW TAKEAWAYS

We found that users of nonprofit websites want to:
BUILD CONNECTION
Users want to build a connection with their community as much as they want to help those in need.
SUPPORT LOCAL
Users are much more inclined to donate resources to local organizations.
USE MOBILE DEVICES
100% of users we interviewed said they visit nonprofit websites on their mobile devices.
SURVEY FINDINGS

Our survey revealed the following statistics from participants:
  • 70%
    70% of participants donate to
    3 or more organizations.
  • 30%
    More than 30% feel the website experience influences their decision
    to donate or volunteer.
  • 30%
    Donate or volunteer weekly.
HEURISTIC EVALUATION
We evaluated the current website and found the following areas for improvement:

  • No menu navigation. Because everything is mostly on one page, there is no menu, which makes it difficult for users to find what they need.
  • Single image / too much text. The amount of text and lack of hierarchy is overwhelming.
  • Too many typefaces. Lack of consistent font usage and brand guidelines.
  • Mobile version broken. The website did not work on mobile.
WEBSITE BEFORE RE-DESIGN
WEBSITE AFTER RE-DESIGN
02

DEFINE

To define the problem and focus the development phase, we completed the following:

  • Created a user persona to highlight typical website user goals and pain points.

  • Created an empathy map to gain a deeper understanding of the user.

  • Crafted a user journey map to determine design opportunities.

  • Drafted a problem statement to focus the goals of the development phase.
USER PERSONA: LISA
Lisa is a Seattle native and systems survivor who wants to give back to her community by volunteering at deserving, ethical organizations. She frequently donates to local non-profits and wants to find organizations that truly need her donation and will use it for what they say it is for.

She is a highly compassionate and caring individual, motivated by the desire to make a difference, achieve personal growth, and make connections with like-minded individuals.


LISA
Age: 65
Work: Retired Teacher
Family: Married
Location: Seattle, WA
GOALS:
  • To find an esteemed organization she can donate her time and money to.
  • To use her life experiences for the greater good and give back to her community.
  • To feel like a part of something bigger than herself.

FRUSTRATIONS:
  • Not knowing what her monetary donation is going towards.
  • Being unable to connect with an organization on a personal basis
  • When a website is inaccessible and hard to use
EMPATHY MAP
  • SAYS
    • “I want to feel connected to an organization before I consider donating or volunteering.”
    • “I want transparency from an organization. Tell me what my donation is actually going to be spent on. Show me your budget.”
    • “I like seeing money spent competently.”
  • THINKS
    • Can I trust this organization?
    • I’m not sure I understand what this jargon means.
    • Will my donation actually make a difference? Do they really need it?
    • Is my donation going to be spent on what they say it will be spent on?
  • DOES
    • Volunteers in her free time.
    • Donates money multiple times a year.
    • Looks for people who really need her help.
    • Users her phone to search for causes/nonprofits.
  • FEELS
    • Skeptical
    • Empathy for the people this organization helps, a desire to get involved.
    • Accomplished
    • Frustrated
USER JOURNEY MAP
UX SCENARIO
Lisa, 65, discovers a call for board members on social media, leading her to You Grow Girl! Despite initial reservations about nonprofit websites, she takes a chance and finds the site to be professional and easy to navigate on her phone. Impressed by the clear mission and community impact, Lisa confidently decides to contribute her time, appreciating the seamless mobile experience.
DISCOVERY
Lisa sees a Facebook post asking for volunteers and donors at You Grow Girl!
Lisa clicks on the post to find out more information.
1
2
RESEARCH
Lisa looks for more information about You Grow Girl! online
Lisa is hesitant to view their website, as she has had negative prior experiences with nonprofit websites.
3
4
GOALS
  • With so many nonprofit causes, Lisa needs to sort through them all by visiting their websites.
  • Lisa wants to find a reputable organization where she can donate money.
TRY
Lisa navigates through the site and is very impressed by the organization and professionalism.
She uses the volunteer page to sign up as a volunteer for an upcoming event
5
6
RETAIN
Lisa has a wonderful time at the event and is excited to sign up for another.
Lisa has a great experience with You Grow Girl! and encourages her friends to join her next time.
7
8
03

DEVELOP

For this phase, we:

  • Performed card sorting and created a site map to determine navigation.

  • Crafted a feature prioritization matrix to decide on website features.

  • Created a style tile and iterated on our design ideas to ensure consistency and brand standards.
CARD SORTING
We performed card sorting to organize the necessary elements of the website:
  • ABOUT US
    • What We Do
    • Mission & Values
    • Careers & Internship Opportunities
    • Meet Our Team
    • Locations
  • DONATE
    • Make a Donation
    • Amazon Wishlist
  • VOLUNTEER
    • Volunteer Form
  • PHOTOS
    • Photo/Video Gallery
  • REFERRALS
    • Refer for Services
  • FOOTER
    • Social Media Links
    • Accessibility
    • Languages
    • Contact Us
FEATURE PRIORITIZATION
We created a feature prioritization matrix to decide which features we wanted to focus on. It resulted in the decision to prioritize these features:
MOBILE VERSION
Because 100% of users we interviewed stated they visit non-profit websites on their mobile devices, we decided to prioritize making the website
mobile-friendly.
PHOTOS AND TESTIMONIALS
Users want to feel connected to the organization. Therefore, we decided to prioritize the inclusion of photos and testimonials to help the user relate to the organization.
EASY TO NAVIGATE
In user tests of the current website, participant's biggest concern was that it was too difficult to navigate and they expressed it was one of the biggest hinderances to getting involved.
STYLE GUIDE
We wanted to establish a brand that is youthful and vibrant for our users. To this end, we created the following style guide:

YOUTHFUL COLORS
CLEAN TYPOGRAPHY
04

DELIVER

To gain feedback and iterate on our existing design, we did the following:

  • User Testing

  • Iterations

  • Hi-fi Prototyping
ITERATIONS
We conducted 3 rounds of user testing and used the feedback we received to make the following iterations:
  • Sketch
    • Initial sketch of mobile wireframe
  • Lo-Fi Prototype
    • Testers preferred left-aligned text over centered.
  • Mid-Fi Prototype
    • Testers found the UI too cramped; suggested adding more space between elements
  • Hi-Fi Prototype
    • Added more space between elements
    • Applied style guide
FINAL PROTOTYPE
Made on
Tilda