THE PROBLEM
THE SOLUTION
PROJECT OUTCOME
Understand client's multiple target users to effectively redesign responsive website.
Simplify the volunteer process for St. Jude events
Simplified the 'Get Involved' drop down options and add hover buttons on homepage, making it easier for users to sign up for St. Jude's volunteer events.
METHODS
2-Week Agile Design Sprint
Screener Surveys
User Interviews
Affinity Mapping
Persona Development
Journey Mapping
Problem Statement
Design Studio Sketching
Wireframing
Rapid Prototyping
Usability Testing and Reports
TOOLS
Figma
Invision
Zeplin
Keynote
Slack
TEAM
Sally H.
Jason K.
Nelson D.
Will H.
​
MY ROLE
UX Researcher
UX / UI Designer
Here are the research methods used:
.png)
Screener Surveys
We received 36 responses and filtered the data for users to interview based on our criteria.
User Interviews
We interviewed 7 amazing travelers that has been around the world and shared some amazing stories with us!
Research Insights
User data like travel habits, reliable resources, devices used, were affinity mapped and summarized into insights, aka "I statements".
PERSONA
We synthesized our data into one representative user addressing goals, needs, behaviors, and painpoints.
Journey Map
Let's map the flow of accessing the website from the person's point of view. What areas are his/her low points that we need to address?
​
Problem Statement
We identify the persona painpoints we want to address by formulating a concise problem statement to represent what we are ultimately trying to solve.
iDeNTIFYING THE TARGET USER
Here's what St. Judes is known for:
1) researchers
2) a hospital that treats children
3) a hospital that accepts donations
4) a hospital that shares volunteer opportunities
​
Have you volunteered your time for charity in the past year?
So when we created our screener survey, we made sure to include closed-ended questions regarded those 3 things in order to see what users were visiting the site for.
​
​
​
​
​
​
​
​
​
​
​
Have you or someone you know donated to charitable organizations in the past year?
Have you ever visited a
children's hospital website?
Here are some interesting insights we found:
​
​
We prepared an in-depth discussion guide to ask more about the 3 things:
​
-
volunteering
-
donating, and
-
why they were visiting a children's hospital website
​
We conducted user interviews with 7 users and here's what they said:
Insights
I donate to reputable organizations.. if it looks well put together, aesthetically pleasing, easy to maneuver, chances are it's more reputable and It trust it more.
We volunteered with a charity that reaches out to children with heart problems
It was very difficult to maneuver around a hospital website; don't know what you're supposed to click on to get what you need to know. Every website is different-- I have to learn a new visual language every time, the information is in different places.
After synthesizing our data of insights and trends, we formed seven "I statements". We then focused on 2 painpoints to address and solve for:
​
I want to get involved but it's difficult finding the opportunities.
I'm motivated by others to volunteer
The team affinity mapping user insights from user interviews.
We created a Persona to represent the users we interviewed:
Persona
I gave up and called the front desk.
-Eleanor, 35
New Jersey
Goals
-
Wants to sign up to volunteer at a children's hospital and wants to be able to invite her friends to volunteer with her
Needs
-
More accessible volunteering information showing a list of opportunities nearby and to easily sign up for
Pain points
-
Has a hard time the finding volunteering information she needs on children websites, and doesn't know how to sign up as a group
JOURNEY MAP
After going through St. Jude's current website, we created a journey map with our persona Eleanor in mind.
.png)
Journey Map with team in progress with journey phases, actions, mindsets, and emotions.
People are motivated to volunteer when their friends and family are doing it too.
​
Eleanor is spending a lot of time researching which volunteer opportunities she can participate in as a group, how might we help her find volunteering opportunities quickly?
​
​
​
​
​
​
USABILITY TEST ON CURRENT SITE
What's the Problem?
We tested the current St. Jude's website, focusing our scenario and tasks based on our persona's needs.
Scenario
You and two friends want to volunteer as a group for St. Jude Children's Hospital. Given that you all live in NY or NJ, you
want to find an opportunity nearby.
Task 1
Sign up for a Volunteering event.
Task 2
Show me how you'd invite your friends to a volunteer event
Task 1
Sign up for a Volunteering event.
Multiple Starting Points
Medium Issue
Users clicked on multiple menu bar options to find the category that Volunteering is in
“Oh! (I have to click)
Get Involved!.. actually
pretty difficult”
.png)
.png)
Inconsistent Routes
There were many inconsistent routes and each route was a lengthy process to finally get to a Volunteer Page
Medium Issue
Recommendation:
-
Make a clear Volunteer button to click on
-
Minimize the number of screens needed to get to the page to search for opportunities
Task 1 (continued)
Sign up for a Volunteering event.
Unclear Results Page
Medium Issue
“Is it because I have to click on the navbar?”
When results appeared:
When results didn't appear:
​
​
​
​
​
​
​
​
​
​
​
Recommendation:
-
Eliminate the misleading “112 other opportunities” and only show how many are available near them
-
Include a map visual from the location they entered, and suggest that they can edit their search distance from this results page instead of clicking back.
2/4
users
2/4
users
didn’t understand why they were getting no results and proceeded to set parameters on the filter bar-- thinking it may add more opportunities to the list
were confused when they saw the “1 out of 112 opportunities” and was wondering how they can see the other 112.
Task 2
Show me how you'd invite your friends to a volunteer event
No Universal Share Icon
“There was no button or hint on how to do that.”
Major Issue
4/4
users
said they would copy and paste the link to their friends
3/4
users
said they would "just text it" to their friends
0
users
clicked "more", which is where the share options were
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Recommendations:
-
Add share icons on multiple sections of the volunteer opportunity page.
We ran multiple Design Studio sessions with the team, one for each feature and converged to a final sketch of each feature, developing our Lo-Fi Wireframes.
Team sharing ideas during Design Studio
Design Studio
In Design Studio 1, we decided as a team to add two easy to find volunteer buttons to the homepage.
Homepage
-
Incorporate drop down menu with "Volunteer" as an option
-
Add "Volunteer" button within video banner
In Design Studio 2, users were having a hard time finding volunteer opportunities near them due to the distance range they set when searching. We wanted to include a map view of other opportunities if there are none near them.
Page 1
Page 2
Volunteer Page
-
Added map option
-
Include "Sorry" message and provide volunteering recommendations farther than set distance preference
In Design Studio 3, we diverged ideas on how we can make a more shareable experience from the volunteer event page. We iterated and converged to agree that we should add share buttons on the volunteer event page for users to easily invite and share the event with their friends, especially perfect for someone like Eleanor.
Share Buttons
-
Include a universal share icon
Mid-FI Wireframes
1
1
2
2
3
3
4
4
4
5
5
6
6
7
​
7
USABILITY TESTING WITH MID-FI PROTOTYPE
Scenario
You and two friends want to volunteer as a group for St. Jude Children's Hospital. Given that you all live in NY or NJ, you want to find an opportunity nearby.
Task 1
​
Medium Issue
Sign up for a Volunteering event.
2/5
users
tried to use the map to find nearby
opportunities
3/5
users
tried to adjust the search from the no results page
Task 2
​
Success
Show me how you'd invite your friends to a volunteer event
3/5
users
successfully
found the share button
Analysis:
Our search within 5 or less miles results in no volunteer opportunities being found. Some users thought they were searching incorrectly as a result, others went and searched again
"I feel like I want to refine my search."
Recommendation:
-
Suggest the closest opportunities with a list, not a map
-
Increase text size of announcement on the no results page
Analysis:
Users who failed task 1 did not get to the event page required to complete task 2
"I would probably just copy and paste the URL"
Recommendation:
-
Add a "Copy link" icon
HI-FI PROTOTYPE
Here are the changes we made to the website:
1) Hover Buttons and a Drop down Menu
2) A bigger "Sorry message" and still show volunteering opportunities outside of set distance range
3) Added easy to see and use share icons, and a copy link icon
HI-FI USABILITY TEST RESULTS
Task 1
Minor Issue
Sign up for a Volunteering event.
5/5
users
found the "Volunteer" button successfully
-
​ two via the hover over "Volunteer" button
-
three via the "Get Involved" drop-down
From the homepage, all users were directed to the volunteer page by successfully clicking one of the two volunteer buttons created for the user.
"You don't have to click on a bunch of pages to get where you want to go"
3/5
users
searched for 5 miles or less, where 2 users didn't realize the recommended event was not in their range.
Task 2
​
Show me how you'd invite your friends to a volunteer event
Success
When searching for a volunteer event within 5 miles, users didn't realize there were actually none available within that radius, and the recommended event, Radiothon shown on the screen is actually 6 miles away.
However,
Recommendations
-
Make the "sorry" message/search announcement text bigger.
-
Eliminate the suggested nearby volunteer event icon so people are not drawn to that first.
Secondary breakpoint: Hi-FI mobile
Incorporating the new features we designed from the responsive website.
Volunteer button
Share buttons
-
Red search failure text
​
-
Show next closest volunteer opportunties
-
Added Share button
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
What we learned
Volunteering is a common activity that people like to do to spend their spare time. Most people either sign up in person, on the same day, or find out from other sources like from someone's post on Facebook.
​
St. Jude's volunteer section was a chore (over 4 steps) to find volunteer opportunties, and the way they displayed opportunties was not the most efficient. We've heard from users that from their past experiences of signing up for volunteering events online, it was too complicated. And if people needed to, they would usually just go to the site to look up the volunteering address.
​
We listened to their painpoint around volunteering, and streamlined and designed a more effective way to sign up for volunteering opportunities. We introduced hover buttons as an alternative way to select volunteering from the homepage and we were excited that it was a huge success. We learned a lot from our usability testing with the site in the beginning to kick start our design studio sketches. I am very excited to have tackled this with the team and fill the need for those that want to give back by volunteering.
Next steps
Test our mobile hi-fi
Increase the size of "Sorry, we couldn't find any volunteering opportunities in your search range"
Further emphasize distance on "Next closest opportunity" section
Continue to test and iterate
