top of page

YOU GROW GIRL!
Concept

You Grow Girl! homepage prototype in Figma featuring mobile-first design

OVERVIEW

You Grow Girl! is a nonprofit organization that empowers young women through mentorship and support. However, its website struggled with usability issues, making it difficult for users to access resources and engage with the organization. As part of a UX/UI design boot camp, my team took a user-centered approach to redesigning the site, improving navigation, enhancing clarity, and strengthening its connection with the community. The project culminated in a clickable Figma prototype.

REDESIGN STAGES

1. Discovering User Problems

2. Defining Issues To Be Addressed

3. Developing Solutions

4. Delivering A User-Tested Product

5. Learning from the Experience

MY ROLE

As a UX design lead, I collaborated with three colleagues to evaluate the current website, conduct research, create prototypes, and deliver a clickable prototype.

TIMELINE

3 weeks

TOOLS USED

Adobe Color, Figma, Figjam, G Suite, Giphy capture, Photoshop, Procreate, Shades, Stark, Slack, Trello, & Zoom

SCOPE

The primary focus of this project was creating pages, improving menu navigation, and ensuring a satisfying mobile experience.

DISCOVERING USER PROBLEMS

ASSESSING USABILITY THROUGH HEURISTIC ANALYSIS

We evaluated You Grow Girl! using design heuristics, identifying pain points such as having too much information on a single page and using too many different fonts.

Old You Grow Girl! homepage with girls holding hands, white logo, and text below. Shows poor image placement and low-impact visuals.

1. IMAGES

  • There is only one image on the website.

  • Missing opportunity to connect with users.

Old You Grow Girl! homepage with multiple text paragraphs, inconsistent headings, varied fonts, and uneven line heights.

2. TYPOGRAPHY

  • Too much text.

  • Inconsistent fonts and line spacing.

Partial image of old You Grow Girl! homepage with left-aligned sidebar navigation, outlined button containers, and awkward, unattractive design.

3. NAVIGATION

  • Confusing side navigation.

  • The mobile version is broken.

GATHERING INSIGHTS FROM USER INTERVIEWS

To design a more user-centered experience, our team conducted interviews to better understand the motivations and concerns of nonprofit volunteers and donors.

BUILD CONNECTION

  • Want to help others in need.

  • Want to connect with their community.

SUPPORT LOCAL

  • More likely to donate locally.

  • Want donations to have greater impact.

MOBILE FRIENDLY

  • 100% view websites on mobile devices.

  • Favor a good mobile experience.

using data visualization to share survey findings

Our team collected actionable data on user preferences and assessed user pain points through a quantitative research survey.

Pie chart showing 70% filled in, representing the majority portion of data in a circular chart format.

DONATION HABITS

70% donate to three or more organizations.

Heat map showing likelihood to volunteer or donate based on website experience: 26% low, 43% moderate, 31% high.

PERCEPTIONS

31% of survey participants felt that a good or bad website experience would strongly influence their willingness to donate.

Pie chart with 30% filled, illustrating a portion of the total data.

VOLUNTEER HABITS

30% volunteer or donate to nonprofits weekly.

Defining issues to be addressed

Organizing Insights to Guide User-Centered Design

Our team employed an affinity diagram to organize and visualize the patterns and themes emerging from the vast information gathered in our interviews, allowing us to identify key commonalities among users.

Affinity diagram with groups of sticky notes organized into bold categories for visual organization.

Developing a User Persona to Inform Design Decisions

Our team used user research and interview feedback to create a user persona or key user segment. This informed our design decision-making and aligned the team.

Persona of Lisa Garden showing demographic data
Lisa Garden likes nonprofit organizations and uses technology like her phone a lot
Lisa Garden persona, she lives in Seattle and is principled, accepting, nurturing, and resilient
Lisa Garden persona, listing her Goals, Wants, Needs, and Fears

Mapping the User Journey to identify key opportunities

I created a user journey map to visualize Lisa Garden’s experience as she navigated the website, identifying friction points and areas for improvement. Enhancing usability and highlighting the organization's positive impact would help build trust and increase donation confidence.

Emotional journey segment from user journey map with emojis: neutral, hesitant, and happy faces showing Lisa's experience.

LISA GARDEN, user

  • Goal: Give back to her community and connect with others

  • Needs: To find a nonprofit that provides valuable services to those in need 

  • Pains: Bad mobile websites are difficult to navigate and are discouraging

​

​

Emoji faces highlighting the emotional journey of Lisa Gaden as she uses the new website

EMOTIONAL JOURNEY

  • 8:15 am Sees a Facebook post for a local nonprofit: You Grow Girl!

  • 8:16 am Hesitates to view their website on her phone because of past mobile experiences

  • 8:19 am Easily finds volunteer opportunities, engaging photos, and simple donation options

Icons of Facebook, camera, and calendar representing user journey map insights: social engagement, connection, and event activity.

dev OPPORTUNITIES

  • Social posts drive community members to view the website

  • Photos of the organization helping youth builds user confidence and encourages donations

  • An event calendar drives community members to get involved and volunteer

Establishing Clear Goals Through a Problem Statement

Before diving into feature development and design, we created a problem statement to ensure our design goals aligned with the nonprofit's objectives and vision, clearly outlining the key issues we intended to solve for users.

Young girls smiling and holding each other, illustrating how a redesigned website enhances user connection with the organization's goals.

PROBLEM STATEMENT
​
The You Grow Girl! website aims to inspire donations and support for its mission to help youth in need. Our research shows that while users are motivated to donate time and money to similar causes, the current website is not mobile-friendly and fails to engage potential donors and volunteers.
​
​
HOW MIGHT WE?
​
How might we redesign the website to build user trust, improve mobile accessibility, and increase donations and volunteer sign-ups month over month?

developing solutions

Brainstorming website features

Our team employed the 'I Like... I Wish... What If...' approach to generate design features to solve website issues. Afterward, we used dot voting to reach a consensus on the most beneficial options.

I LIKE...

  • Seeing photos of who is involved

  • When mobile is as good as desktop 

  • Having a calendar to see upcoming events​

  • Seeing testimonials from those helped

​

I WISH...

  • The website design was more deliberate

  • There was a carosel of photos 

  • There was a menu bar for navigation ease

WHAT IF...

  • There was an AI chatbot to help answer questions

  • The website was also an app

  • There was a suggestion box or feedback form

Prioritizing Features for Maximum Impact

We used an impact matrix to prioritize website features from our brainstorming. Some ideas were saved for future sprints due to time or impact constraints. A responsive design, navigation menu, and engaging photos were feasible and would benefit both the client and users.

You Grow Girl! feature prioritization matrix: cards display features voted on, including good mobile experience, improved navigation, and more photos.

Improving Navigation Through Card Sorting

With the original site as a simple landing page of form links, I used card sorting to reorganize content into clear, logical pages. This established the information architecture, ensuring users could quickly find what they needed.

Upper section of card sorting with yellow sticky notes for proposed pages/links; lower section displays organized cards for better hierarchy.

Creating a Clear User Path With a Visual Sitemap

I translated our card sorting into a hierarchy. This visual sitemap shows how pages are linked together and roughly how users can expect to flow from the homepage to subpages. Users can reach any page within two clicks.

Visual sitemap with home at the top, navigation categories (about, donations, photos, volunteer), subpages, links, and footer structure

Exploring Initial Concepts Through Paper Sketches

We began the layout design process with paper sketches. I led the team in adopting a mobile-first approach, informed by our user research. We emphasized the need for a seamless mobile experience. By designing for mobile devices first, we ensured a strong foundation before adapting for desktops.

Paper mockup of You Grow Girl! homescreen showing banner, donate button, hamburger menu, photo placeholder, and user engagement prompts.

Creating a Low-Fidelity Wireframe to Gather Initial Insights

Next, we translated sketches into wireframes to focus on the layout, navigation menu, content sections, call-to-action buttons, and footer. This low-fidelity version enabled the team to iterate on the design and start to work on a visual design language.

Wireframe version of paper mockup showcasing image scrolling arrows, typography choices, spacing, quotes, footer, and a floating menu.

Creating Interactive Prototypes in Figma

Using our low-fidelity designs, I built an animated menu in Figma to enable testing and validate our card sorting decisions. This clickable prototype allowed us to gather early feedback on the navigation's functionality and make necessary revisions to improve usability.

Figma prototype displaying connections between elements like patch cables; left shows off-screen menu; right shows animated menu with X to close icon.

Refining Design Choices with a Style Tile

Our team chose a vibrant, youthful theme with bold, high-saturation colors to align seamlessly with the brand's logo and social media presence.

Style tile for You Grow Girl! redesign. Logo, typography choices (h1 etc), buttons, theme (youth, sisterhood), images, art, and color swatches for design consensus

delivering a user-tested product

Measuring Redesign Impact with User Testing

We tested our navigation redesign to ensure an intuitive layout. After adjusting spacing, wording, and buttons based on feedback, our final prototype increased navigation success by 60%.

Usability testing results: navigation success rates for early prototype (yellow) and final prototype (magenta) across three pages: team (63% to 100%), board signup (63% to 78%), donate (100% to 100%).

Crafting User-Centered UX Writing and Branding

We streamlined the website copy with clear, concise language, made links and buttons action-driven, grouped related info with cards, and added tooltips to clarify organizational jargon.

Redesign of desktop homepage showing hand pointer over 'youth' in yellow; tooltip definition, quote section, and 'What We Do' with three information cards for improved layout.

IMPROVING ACCESSIBILITY WITH USABILITY TESTING

We ensured our final design met accessibility standards using tools like Adobe Color and gathered real-world feedback from testers to validate usability.

COLOR PALLETE

  • Text to background contrast ratio 7:1

  • Colorblind safe color combinations

TYPOGRAPHY

  • 16px type size for body text

  • Sans-Serif legible typeface (Urbanist)

DESCRIPTIONS

  • Clearly labeled form fields

  • Contextually descriptive links and buttons

Ensuring Design Consistency with a Style Guide

We created a style guide that clearly defines the typography, color palette, spacing, and color combinations. We included examples of best practices ensuring consistency in brand identity.

Style guide displaying the design grid for You Grow Girl! desktop website redesign, featuring red guidelines for page title alignment across pages.
Style guide section for You Grow Girl! redesign showing phone mockup preview to the left of the working area, showing off spacing, layout, and design choices

Refining the Design Through Data-Driven A/B Testing

We conducted an A/B test to compare donation interactions. Version A featured a standard 'Donate' button and menu option, while Version B featured a larger button. The larger button increased engagement by 33%, indicating that users preferred the more prominent call to action.

A/B testing of You Grow Girl! website header: Version A shows main banner with small donate button; Version B features larger donate button.

Version A
​
​
Version B

A/B testing results: testers clicked donation menu option 40% of the time with a small button vs. 20% with a large button; donate button clicked 60% (small) vs. 80% (large).

Coordinating Tasks and Timelines for a Successful Redesign

Thanks to my effective management, the team completed the prototype on schedule. As Scrum Master, I ensured clarity on project goals, empowered team members to make decisions, and quickly addressed scheduling issues, keeping all deliverables on track. We also created a Google Slides presentation to showcase our work and findings.

Trello board displaying task categories: To Do, Doing, Done/Ready for Review, and Archived; completed items marked green, showcasing organization and leadership skills.
Google Slides presentation for You Grow Girl! redesign proposal. Shows thumbnails of slides on the left and the main working area on the right.

TAILORING UX THROUGH RESPONSIVE DESIGN

We implemented final changes based on testing and ensured the prototype functioned seamlessly, delivering a tailored experience for both desktop and mobile views.

Desktop computer screen displaying the You Grow Girl! website clickable prototype for desktop view
Mobile mockup of You Grow Girl! website displayed on a smartphone held in a hand, showcasing the mobile screen view.

Learning from the Experience

INSIGHTS

Here are just a few of the insights gained during this project.

BRAND
INTEGRATION

We reinforced the organization's identity by integrating their established branding elements into the redesign.

USER-CENTERED
DESIGN

The redesign prioritized mobile usability, providing users with an easy-to-navigate interface that enhances engagement and accessibility on all devices.

ENHANCED ENGAGEMENT

The new design features, such as the prominent donation button, led to a significant rise in user interactions, demonstrating the effectiveness of our strategic design choices.

AGILE
METHODOLOGIES

Iterating quickly based on user testing and feedback throughout the project allowed us to refine features, address pain points, and deliver a more effective, user-centered final prototype.

NEXT STEPS

Here are a few things I would like to do if I had more time to work on this project.

STAKEHOLDER ALIGNMENT

Connect with You Grow Girl! stakeholders to gather their input and ensure the redesign aligns with their evolving goals and priorities.

ENHANCED FUNCTIONALITY

Create an event calendar feature to inform users about upcoming activities and encourage community participation.

BROADER ACCESSIBILITY

Expand the design by developing dark-mode and tablet-compatible versions to enhance accessibility and user experience across more platforms.

COMMUNITY ENGAGEMENT

Add functionality for users to leave testimonials and reviews, fostering community interaction and building trust with new visitors.

Thanks for reading.

Back to the top

Next case study

bottom of page