INTRODUCTION
2. Volunteer Skills Page
Other users were more focused on finding tasks that matched their skills or professional development goals. I designed the Volunteer Skills page to help these users discover matching tasks from any project.
What is GiveShop?
GiveShop is a crowdsourcing platform with the mission of improving the world's minimum quality of life. It allows contributors to donate money and volunteer their skills to curated high-quality social impact projects.
GiveShop’s current challenge is to persuade visitors to become contributors. But as a brand new product, it’s unfamiliar to most users. What’s GiveShop? How can GiveShop help me achieve my goals? Is is trustworthy? Giving users compelling answers to these questions is critical to winning them over and growing a big enough contributor base to get GiveShop off the ground. At this early stage of development, the team was focused on helping users achieve their goals.
My Role:
Case study in the span of 10 weeks, I worked alongside three teammates on the responsive website as well as the design system. I led the user experience design of a number of MVP iterations and optimized the task flow, navigation, and work on over 10 functional pages.
UNDERSTAND THE PROBLEM
I Anticipated GiveShop’s UX Problem
GiveShop’s initial designs had a problem. I articulated a hypothesis and presented this to the CEO: “Users have difficulty discovering how the product can help them achieve their goals, due to ambiguous CTAs, incomplete navigation, complicated task flows, and an over-emphasis on educating users instead of helping them take action.”
USER RESEARCH
Confusion Was the Main User Pain Point.
The user research team conducted testings—with 14 users and 5 project managers—which backed up my hypotheses: 43% of users experienced confusion with our CTAs. Givers and nonprofits could not tell which section was for them. “If it (the site) continues to confuse me. I will leave!”
DEEPER INSIGHTS
Confusing, Also Effortful
to Achieve the User’s End Goal - Donate/Volunteer.
I conducted deeper UX research to understand the core of the problem, evaluating the user flow based on the business priorities, and conducted 3 user interviews. I discovered users were not only confused, but also had to work hard to make progress:
1. Effortful.
It took 5-6 clicks for users to reach their end goals - donate/volunteer.
2. Single & long happy path.
There was only one path from the homepage to users’ end goals.
3. Unhelpful navigation
Users could not make sense of the main navigation. It didn’t help them form clear expectations.
FRAME THE PROBLEM
Poorly Formed Navigation and User Flow Cause Downstream Understanding and Engagement Problems.
1. How could we improve clarity for two sides of the users?
2. How could we help prospective contributors to achieve their end goal with minimal effort?
COMPETITIVE ANALYSIS
Learnings From Our Competitors.
I started a detailed competitive analysis. I wanted to understand how existing products in this space solved the navigation, CTA labeling, engagement, and action discovery problems. I discovered the following major points:
Takeaways about sitemap + CTA:
Take the needs of both (givers & project owners) into considerations when we build a sitemap.
Prioritize the most valuable and important user tasks. Create multiple happy paths (via header, footer, text links, and buttons) to accomplish these tasks.
Create a separate “How it works” page to gain user trust.
Repeat the primary CTA in multiple places.
Give CTAs descriptive labels that help users predict what the next page will be. The labels should be specific, concise, comprehensive, familiar, front-loaded (most info-carrying words come first).
Above are screenshots of competitive analysis
THE PLAN
Design Principles
Flatten the sitemap - help users achieve their goals with minimal effort.
Multiple happy paths - given users multiple ways to discover how to make progress.
Keep all users in mind.
Show important information above the fold.
Concrete Design Changes
1. Unhelpful Main Navigation
Problem: The main navigation didn’t help users build a mental model, or link them directly to relevant actions.
Solution: Rework the navigation information architecture and design to help give both contributors and project owners a mental map of how GiveShop works. Put the most relevant actions prominently in the nav.
2. Happy Paths Too Few and Too Long
Problem: To find a relevant action, users needed to make 5-6 clicks, following a single specific path through the site.
Solution: Flatten the sitemap and provide multiple opportunities for a user to discover how to make progress.
3. Missing Pages
Problem: Users wanted to find projects and tasks based on their location, skills, and schedule. However, there was no single page that solved this problem for them.
Solution: Create new pages to fill these needs. 1) Explore Tasks page to help users discover tasks that match their skills and other constraints. 2) Explore Projects page to help users search for projects supporting causes they care about.
THE SOLUTION
1. Fixing the Main Navigation
Before: Users found the main nav confusing. They didn’t know what to expect when clicking the links.
After: the nav provides a clear mental map of the product, primes expectations, and directly links to pages that solve the most pressing user needs. The nav now also caters to both project owners and potential contributors.
2. Create Multiple Happy Paths and Optimize User Flow
Before: there was only one way to progress from the homepage towards project discovery; the CTA was way down below the fold. The final goal was behind several clicks.
After: we created multiple opportunities to progress above the fold, which immediately land the user on actionable pages.
3. Create New Pages to Satisfy Users’ Needs
Most potential contributors want either to explore projects related to a cause they cared about, or to find volunteer tasks that matched their skills.
Before: There was no easy way for them to do this.
After: Focused pages allow users to solve both of these pressing needs with minimal effort.
1. Explore Projects Page
Some potential contributors were strongly motivated by causes. They wanted to find how to support causes they cared about. I designed the Explore Projects page to help them do this easily.
THE IMPACT
Optimized the task flows, reducing the clicks needed for the most important tasks from 5-6 down to 1.
Users were much less confused about the main navigation. In subsequent UX tests with 9 users, all achieved their goals via the main nav with little difficulty.