Girls Inc

Website Redesign

Problem

Girls Inc of Greater Houston is currently is running on solely donations, limiting funds for local education enrichment programs in schools, at day camps, and other events.

Proposed Solution

Increase website traffic and retention rate especially in the donation experience section.

Role

UX Designer, UX Research, UI Design

Deliverables

Primary research, proto persona, user interviews, synthesizing research, problem statement, storyboard, user flow, wireframes and iterations

Tools

Figma

Trello

Miro

Google Forms

PROTO PERSONA

Understanding who I'm designing for

We felt it was important to figure out who would donate to an organization like Girls Inc to better redesign the webbsite based on their goals. We gave our proto persona a name to humanize her by also giving her some demographics, needs, goals, and pain points. This way we can stay more focused while going through this process.

Tina Drew, 22 yrs old

Occupation: Student
Education Major at University of Houston
Location: Houston

Loves to paint
Hiking/Running
Actively on Instagram

Goals & Needs

Volunteer work for local children organizations
Needs credit from volunteer work for college

Pain Points

Doesn’t like sketchy looking websites
Wants information now, does not have time

Interview Plan

The team and I first wanted to see if the user knew why they were donating too. We set up 5 interviews on Zoom from who we thought would donate to Girls Inc like our proto persona Tina Drew. We had prepared tasks for them to complete, we asked if they could share their monitor while they thought out loud as they preformed each task while we watched and observed virtually.

Results

The findings from the interviews were all put into digital sticky notes in Miro where my teammates and I discussed why we grouped different sticky notes together that had similarities.

Common Findings

Confusion navigating website
Unclear what the organization does
Wants to help by volunteering
Wants to see transparency
Distrust, website look inconsistent

DEFINE USER

User Persona

A more define user was created based on our 5 interviews, the affinity diagram that we did above helped create Diana Harris. Now we are not continuing based on assumptions but on research.

Diana Harris, 32 yrs old

Occupation: Designer
Location: Houston
Salary: $60k /yr

Interests

Arts & crafts
Running
Foodie
Plays soccer

Goals & Needs

Wants to feel a connection to the overall cause of the program
Wants to know she is making a difference with her skills
Transparency is important and organization

Pain Points

Doesn’t like sketchy looking websites
Gets frustrated when she can’t find simple information
Hates guessing what the cause or mission is on a website

Problem Statement

How might we improve the navigation, information architecture, so the website delivers strong compelling content, provides accessible and accurate contact and "call-for-action" information; avoids lacking directions; no mission clarity, diffused expertise, and donor confusion.

Storyboard

We decided to create a storyboard to get a visual representation oh how our user, Diana would come across Girls Inc. This also helped us start a flow when we begin the user flow.

User Flow

Creating a user flow helped the team and I figure out the structure and avoid dead ends or any unwanted confusion for Diana who is very interested in volunteering for Girls Inc. The goal is to get Diana to volunteer even if there's a chance she doesn't feel ready we will provide transparency as she likes to feel comfortable with her decision.

Mobile Wireframes

Having a mobile version felt like the best way to go for this redesign. Diana is always on the go and we carry our phone everywhere now a days so focusing on an experience for mobile first felt right.

Priority

We wanted to keep it clean and straight forward for Diana to get the chance to help out local girls in need. By making the information that is important to her to get to her goal.

Hierarchy List

Mission
Volunteer CTA
Donate CTA
Advocate CTA

Volunteer Process

Based on our user Diana, we thought it was best to get right straight to it. We also wanted to provide easy communication by providing a choice of email or text.

Volunteer Application

Application

Filled Out

Success

Message

Progress bar

Iterations

We conducted usability testing and found out most users did not like how long the volunteer process was. We decided to break it up into a step-by-step process, where it highlighted what kind of information would be with in each section. This way the user knows what's coming up and has an idea of where they stand within the application process.