YouCaring Mobile App

Designing a New iOS App

Mobile App
B2C
Crowdfunding

Overview

YouCaring is a free compassionate crowdfunding platform that empowers people to help others overcome hardships such as medical costs, pet operations, and disaster emergencies. Compared to other crowdfunding platforms, they did not take a percentage of the of the funds donated or charge fees, and instead relied on voluntary donations from donors to fund their organization. YouCaring has raised over $800 million from more than 8 million donors since its launch in 2011, and was later acquired by GoFundMe in 2018.

At the time of this project, the company had a web product but no mobile app, meaning the campaign organizers did not have an easy way to engage with donors, share their campaigns to social media, or add updates regarding their campaigns on the fly.

Icon of person
Role

Product designer

Team

Product Manager, Product Designers, and Engineers

Timeline

8 weeks from research to final deliverables

Tools

Sketch, Marvel

problem statement

How might we...

Design the MVP of the YouCaring iOS app to help organizers easily manage their fundraisers and engage with donors?

Empathize

Since we would be designing an app from scratch, we made sure to do our due diligence with researching crowdfunding platforms, analyzing competitor apps, and most importantly, understanding the pain points of campaign organizers and the donors that ultimately funded the campaigns.

Industry Research

We started the project by doing industry research to get a better understanding of the crowdfunding landscape. We found some interesting data around fundraising for both organizers and donors, including which channels were most acceptable and the impact of social media in online giving.

Competitive Analysis

To learn more about YouCaring’s competitors, we did competitive analysis to see 1) which platforms had mobile apps for campaign organizers, 2) how users were able to manage their fundraisers and interact with donors, and 3) what sort of features and functions that each company had included in their mobile apps.

Screenshot of the campaign set up flow in GoFundMe

User Interviews & Comparative Usability Testing

We conducted user interviews with people who had experience with creating and managing fundraisers to get an understanding of the organizer’s work flows, and also to discover their needs and pain points.

Additionally, we conducted comparative usability tests on the mobile app of one of their main competitors, GoFundMe - this provided insights into which features had been implemented well and which ones could be improved.

Persona Development

Based on the user interviews and usability tests performed on competitor apps, we developed a persona to help us understand and relate to the user as we brainstormed solutions to solve their pain points.

Proto-persona based on user interview and usability testing

User Journey Map

In addition to the persona, we generated a user journey map to visualize the relationship between the fundraiser organizer and YouCaring. This provided a clearer picture of all the interaction points that the user had with the platform, and helped us identify opportunities where the mobile app could improve the organizer’s experience with YouCaring.

Define

After diving deep into the research, we analyzed the different jobs that organizers were trying to complete when managing their campaigns, and made our first attempt at structuring the information architecture of the app.

Mapping out the Jobs To Be Done

Jobs To Be Done

Using all of our research and insights, we then created job stories using the Jobs To Be Done framework to aid us in drilling down to the situations and motivations behind each of the jobs that the user was trying to complete.

Information Architecture: V1

After creating the job stories, we collaborated with YouCaring’s head of product to create a prioritized list of features that would help users complete those jobs. We also created V1 of the information architecture so that we had a sense of where features would live in the app before we jumped into sketching the UI.

Design

Now that we had a structure to work with, the next step was to design all the screens for the app. Since there were so many features and screens to work with, we needed to rapidly ideate as many designs as possible and then converge on the best ideas - using a design studio method allowed us to generate these designs in a short amount of time and helped us to create a lo-fi prototype to use for testing.

Design Studio

Using the Design Studio method to carry out a collaborative design process, we each sketched a high volume of ideas on paper in sprints and presented our ideas to the team for critique. Rapidly ideating solutions individually gave us the freedom to be creative and generate many different ideas in a short amount of time.

Deep in sketching mode for design studio
Lo-fi wireframe of the Promote tab, where organizers can easily add updates in the app as part of a feed, and also cross-post the update to social media channels

Lo-fi Wireframes

Using the whiteboard sketches as a jumping off point, I led the lo-fi team in creating multiple iterations of the low-fidelity wireframes.

Lo-fi Prototyping & Validation

After creating the wireframes, I consolidated the designs from multiple designers and put together a lo-fi prototype in Marvel for usability testing to validate our early designs before going into hi-fi.

We conducted usability tests on 5 users and wrote down all our insights from each test on post-its (each color represents a different user). Using affinity mapping, we grouped the pain points based on similarity and brainstormed ideas to address those problems.

Lo-fi prototype that demonstrates many of the key actions, including posting updates, thanking donors, and editing the campaign

Synthesis of usability testing insights using post-it notes and affinity mapping

Information Architecture: V2

We update the lo-fi prototype to incorporate solutions to the usability issues found in the first round of usability testing, and then conducted another round of testing to validate that they were all resolved. All but one usability issue were resolved - users were still getting tripped up over how to switch between fundraisers.

In order to solve this problem, we restructured the information architecture and allowed users to switch between fundraisers from multiple screens.

Hi-fi Designs & Validation

As we were designing the mobile app, the YouCaring team was also redesigning the web product simultaneously, which created more complexity to incorporating their new features and styles to our designs. To ensure that we were creating a consistent experience across their web and mobile product, we initiated several rounds of feedback from the YouCaring product team.

Using this feedback along with the YouCaring style guide, we created the hi-fi screens as well as the final hi-fi prototype. In total, there were over 40 screens designed that incorporated all the learnings from the lo-fi usability testing. We did a round of validation testing with 5 users to make sure we addressed all pain points - all users were able to complete the tasks we assigned!

Final Deliverable & Next Steps

As for the final deliverable, we made a fully annotated Sketch file to describe all elements and expected interactions to hand off to the YouCaring engineering team. We also consolidated all our research findings, from industry research, competitive research, and usability testing to send over to the product team so that they had access to all the data points we used to make our design decisions.

Final Prototype

The hi-fi designs referenced the basic style guidelines from the YouCaring team, and we executed a final round of validation testing to make sure all pain points and usability issues found in previous testing were all resolved.

The app we designed will be in development over the next few months, with the estimated launch of V1 later in 2017. We reviewed the designs and prototype with the head of engineering at YouCaring to discuss any blockers or issues - while some features may not make it into V1, we were told that there shouldn’t be any issues in implementation of the designs. To measure our success, we will be checking in with the team at YouCaring to keep an eye on key metrics such as shares per user and updates per user - stay tuned!

Final hi-fi prototype made with Marvel

TL;DR

YouCaring already had an established web product but did not have any mobile apps. Our team designed the iOS app from scratch, first using industry research and competitive analysis to get an overview of the crowdfunding landscape, then conducting usability tests and customer interviews to discover needs and pain points.

We ideated solutions for these pain points, prioritized features, and created a low-fidelity prototype that we tested and iterated. Using the existing web product and style guide as a foundation for branding, we created a high-fidelity prototype and conducted validation testing to confirm our designs were functional and intuitive for users. Finally, after weeks of researching, ideating, and designing, we delivered all research findings and final designs to the YouCaring team.

Reflection

Designing an app from scratch was no easy feat, and it was a challenging but definitely rewarding experience, especially since the platform we were designing for was doing a lot of social good in the world. It was awesome to be able to contribute to this organization and I am really proud of the work we did.

Challenges

Even though the goal of the project was to create a MVP of an iOS app, there were still so many features that needed to be included to make this a minimum lovable app - the app needed to be functional and also easy to use to actually solve the pain points of the users were designing for. And with all the research and testing that needed to be done, the restructuring of the information architecture, and the struggle of not having an easy way to consolidate designs, this project was definitely a test of endurance and keeping an eye on the north star.

Learnings

Designing an app from scratch was difficult, but because we had invested time into extensive competitive research, user interviews, and usability tests, we were able to prioritize features and define the information architecture with a high degree of confidence instead of prematurely jumping into ideation and design.

Takeaways

Testing the prototype early and often is crucial, especially before going into hi-fi mockups and prototyping. And just as important as lo-fi validation is hi-fi validation, to make sure how users comprehend, interact with, and navigate through the app once the hi-fi visuals are in place - visual designs can really impact users' attention to details. Additionally, there was a lot of time spent doing file cleanup while consolidating designs from multiple designers - creating a process for consolidating designs will be really beneficial in the future.

Previous Project
Next Project

Let's connect 👋

Send me a message or connect with me and let's chat about how we can work together!