YouCaring is the leading online compassionate crowdfunding platform that is currently only a web app. We were tasked by YouCaring's Head of Product to design a native iOS app—defining and designing the scope, features, information architecture, and visual design of the app. Our goal was to create an app that allowed crowdfunding organizers to easily manage their fundraiser and encouraged them to engage more with donors and potential donors.
Make it easier for organizers to raise money
YouCaring is a crowdfunding platform with a mission to make it free and easy for people to raise money for humanitarian causes. I worked with a team of product designers to design a native iOS app to make fundraising easier for YouCaring organizers (people who use the platform to raise money).
While YouCaring has a responsive website, their organizers currently do not have a convenient way to engage donors and potential donors through the platform, which in turn makes raising money more difficult. If organizers want to share their fundraiser or post updates about their cause, they have to go to the website on their computer or phone, log into their account, and then share or post updates from there. How might we make this easier for them?
From a business perspective, YouCaring wanted to be even more competitive amongst other crowdfunding platforms and be the go-to platform whenever someone needs to raise money for humanitarian causes. YouCaring operates off of voluntary contributions from donors, so more users raising money = better sustainability.
Design an iOS app that encourages and makes it easy for fundraiser organizers to manage their fundraiser and engage with donors and potential donors in order to raise more money.
The team was divided into 3 sub-teams: research, lo-fi, and hi-fi. My primary roles and responsibilities were:
- UX Research Team Lead
- Ideation and creating lo-fi wireframes
- Hi-fi UI design
- Hypothesis formation
- Industry research
- Competitive analysis
- User interviews
- Journey mapping
- Job stories
- Design studio
- Usability testing
8 weeks; December 2016 - February 2017
After 8 weeks of user research, usability testing, multiple rounds of prototype iterations, and regular collaboration with YouCaring’s Head of Product and Product Design team, we created an entire iOS app. Check out the clickable prototype or watch the short video below.
With 8 weeks to design an entire app, we took a Lean UX approach to gather feedback and iterate quickly. The team met with YouCaring's product team throughout this process to create a shared vision for success and ensure we were on the same page.
Exploring the online fundraising landscape
Getting a sense of the industry
We wanted to figure what was most effective in getting people to donate so that we could incorporate those channels into the app. As the Research Team Lead, I reviewed existing research on online fundraising and found that social media and email are becoming more and more effective drivers of online donations. This proved to be true with the users we interviewed later on.
Reviewing the competitor landscape
Reviewing the key features of GoFundMe, Indiegogo, and Generosity, all crowdfunding competitors, helped us generate ideas later on in the design process on how to differentiate our app and encourage organizers to share and post fundraiser updates. One feature all competitors had in common was a constant reminder to share their fundraiser. We definitely wanted a similar feature to encourage organizers but knew we had to make it more personalized.
UNDERSTANDING WHO WE'RE DESIGNING FOR
Conducting user interviews helped us understand how we could add value for organizers through an app. As the Research Lead, I wrote the interview guide to dig deep into our interviewee's experience and challenges. We interviewed 5 people who organized crowdfunding campaigns to gain insight into the crowdfunding experience.
Through our interviews, we gained an understanding of the end to end process of managing a fundraiser, including:
- What sharing channels they used
- How often they shared or posted updates
- What kind of updates they posted
- What challenges they experienced when managing their fundraiser
Uncovering organizer challenges and patterns of success
Creating an affinity map from the user interviews helped us identify common organizer behaviors and challenges to address in our app.
Key insights on fundraiser sharing
- Sharing on Facebook, Twitter, and email led to successful campaigns
- Instagram was used by a couple of users to share photos
- Ability to edit or customize messages before sharing was important to organizers
Key insights on donor engagement
- Biggest challenge was maintaining momentum throughout the campaign
- Organizers didn’t want to post too often because they didn’t want to spam friends or dilute message
- Photos were shared more often than videos
- MailChimp/email was effective for campaign updates
- Organizers thank donors through the platform or sent text or Facebook messages if the donor was a close friend
DEVELOPING A PROVISIONAL PERSONA
Based on our interviews and data we received from the YouCaring team that most fundraisers on their platform are for personal causes (vs. for a non-profit organization), we created a provisional persona: Olivia, a woman in her late 20s who manages a personal fundraiser. Our persona kept us focused on organizer needs as we validated and iterated on our designs.
MAPPING the organizer’s journey
Since we were creating a new app for YouCaring, I decided to lead a journey mapping workshop to help the team understand and truly empathize with our persona Olivia's emotions from the beginning to the end of a fundraiser.
Journey mapping helped us identify opportunities where our app can help organizers stay positive. As we were focused on the Management phase, how might we:
- Encourage organizers to share their fundraiser and post updates more without making them feel like they were spamming their friends?
- Help organizers keep up the momentum so that they feel hopeful?
- Help organizers express gratitude to donors easily?
Defining features and information architecture
Focusing on outcomes first, not features
We brainstormed Job Stories to help us focus on triggering events, organizer motivations, and their expected outcomes before we defined specific features. Once we had a good idea of the context in which an organizer would use our app, we then brainstormed features that would help organizers achieve their expected outcomes.
Through collaboration with YouCaring’s Head of Product, we finalized and prioritized our feature set based on what was most important in helping organizers manage their campaign.
Information architecture (IA)
Creating an IA diagram helped us structure the features into four main components of the app that made up the tab bar navigation (Dashboard, Promote, Supporters, and Profile) so that we had a clear place to start when sketching wireframes.
Rapidly sketching wireframes for the app
Running a 4-hour Lean UX design studio helped us tackle the design of an entire app in a very collaborative way. We split into two teams, and everyone rapidly sketched their own ideas for the features we finalized. After two rounds of divergent ideation, we voted for the best ideas and converged on one set of wireframes for the app.
Prototype & Validate
making A clickable lo-fi prototype for testing
The lo-fi team created a prototype using Sketch and Marvel, which allowed us to put an interactive solution together quickly and get early feedback from users.
Because we didn't want organizers to feel like they were spamming their friends when sharing their fundraiser, our personalized modal encouraged organizers to share based on milestone accomplishments; our goal was to guide organizers to share at important moments rather than sharing at arbitrary times.
Validating our designs with users
Referring back to our goal, we needed to find out whether or not our app made it easy for organizers to manage their fundraiser and engage with donors. We conducted usability tests with 5 participants who have fundraised online or were interested in crowdfunding to understand:
- What are users’ initial and overall impressions of the app?
- Do users understand what they can do in the app?
- Can they easily edit their fundraiser, share, post an update, thank supporters, and manage funds with this app?
- Is the app valuable?
As the Research Lead, I wrote defined the usability test objectives and tasks, recruited participants, and led the sessions.
Pain points and iterations
From our usability tests, all participants thought it was easy to share the fundraiser and post an update. They said it was an app that they would use to regularly check their fundraiser progress, share, and thank donors. However, we did uncover a few UI and IA issues (annotated in the “Before” screens below).
We iterated on our prototype to make it easier for organizers to find tips, edit their fundraiser, switch fundraisers, and thank donors (annotated in the "After" screens below). Adding a Tip of the Day section to the dashboard was another one of our solutions to encourage organizers to post updates without feeling spammy by giving ideas for meaningful updates that lead to more success.
Usability testing round 2
We tested the prototype with another 5 users using the same tasks to make sure we addressed the pain points.
Pain points and iterations
From our second round of testing, we found that users were no longer confused between the Share and Update functions and were able to easily edit their fundraiser and thank donors.
While we solved most of the pain points, we still observed issues with switching fundraisers—3 out of 5 users went to the Dashboard first instead of the Account tab, which was where we originally put the switch fundraiser action.
The team spent a lot of time exploring different ways of allowing users to switch fundraisers—we weighed the pros and cons of using a hub and spoke model where each tab would be a list of fundraisers that led to a single fundraiser, sticking to the current way of switching, and going back to the drop down. Ultimately, we removed the switch fundraiser button from the Account tab and added the switch fundraiser drop down back to the nav bar in the Dashboard as well as the Updates and Supporters tab since most of the users we tested expected it to be there. We made this change to match our users’ mental model and make it easy for them to know which fundraiser they were managing and switch fundraisers wherever they were in the app.
Here's our updated IA incorporating the changes made:
Making the ui consistent with YouCaring's brand
We incorporated the changes above as well as feedback received from the YouCaring team into a hi-fi prototype that aligned with YouCaring’s existing style guide. I was on the hi-fi team and responsible for the Supporters tab—I made sure the colors and typography aligned to the style guide and that the spacing throughout the screens was consistent.
Here’s our hi-fi clickable prototype:
Refining the prototype with more user feedback
We conducted another round of usability testing with 5 users who have fundraised online or were interested in crowdfunding with the same tasks as previous rounds to see if there were any issues with our new iteration.
Paint points and iterations
Our testing revealed that some users expected to post updates from the Fundraiser tab (i.e., like Facebook), so we added a Post Update button to the Fundraiser screen.
The YouCaring team also wanted us to allow organizers to message donors more than once, so we incorporated that feature into our final prototype.
Since we had different team members working on different screens, our hi-fi team lead did an amazing job making sure the styles of the UI elements were consistent across every screen. Here’s the final prototype we delivered to YouCaring:
The YouCaring team will be developing our app later in 2017! We reviewed the final prototype with YouCaring's Head of Engineering to discuss the technical feasibility of our designs. While some trade-offs will have to be made for the first launch, he said the majority of our app was straightforward.
Once the app is launched, we'll look at certain metrics such as the number of shares/updates per user and the user activation rate to see if our hypothesis was right!
Conforming to users' mental models was important when creating the IA for our app, and testing with users twice before moving onto a hi-fi prototype was key in helping us get it right. Having the ability to manage multiple fundraisers added complexity to the IA. We moved the switch fundraiser action around a couple of times based on user pain points we observed and what we thought was logical, but in the end, our design was based on what the majority of users tested (6 out of 10) expected. It was the right choice because in the last round of testing, all users expected to use the drop down in the navigation bar to switch fundraisers.
In future projects, I'd push for getting user feedback as early and often as possible to get the IA and interactions right before moving on to visual design—it'll save a lot of time. Even testing quick changes with people in the office helped our team settle internal debates.
Another key learning I'll bring to future projects is the importance of establishing some sort of design system early, especially when you have different designers creating screens from scratch. It saves a lot of time. We had 3 designers working on the hi-fi screens simultaneously, and while YouCaring's style guide helped us use typography and colors consistently, we didn't have a system for consistent spacing. The hi-fi team lead spent a lot of time at the end of the project adjusting the grid layout and spacing for all screens. It wasn't easy, but we got there!