YouCaring

iOS Mobile App Design

About YouCaring

YouCaring is a free compassionate crowdfunding platform that empowers people to help others overcome hardships such as medical costs, pet operations, and disaster emergencies.

Scope

Design the MVP of the YouCaring iOS app, which would help organizers easily manage their fundraisers and engage with donors.

My Role

I was the Lead Designer for Lo-Fi on a team of 8 designers. I was highly involved with competitive analysis, user research, lo-fi wireframing, and usability testing.

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.

Process Overview

Empathize

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.

Source: http://institute.blackbaud.com/wp-content/uploads/2013/08/NEXTGEN.pdf

Competitive Analysis

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

Below are a few slides from our research:

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, we developed a persona to help us understand and relate to the user as we brainstormed solutions to solve their pain points.

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

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.

Ideate

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.

Whiteboard IU Sketches

After several rounds of sketching and critique, we converged on the best ideas by voting on the top designs and worked together as a group to whiteboard the rough wireframes.

Lo-Fi Prototyping and Validation

Lo-Fi Wireframing

Using the whiteboard sketches as a jumping off point, I led the lo-fi team in creating multiple iterations of the low-fidelity wireframes. Below are some of the screens from the final iteration that we used for the lo-fi prototype:

Usability Testing Round 1

After creating the wireframes, we put together a lo-fi prototype 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.

We iterated on the lo-fi designs to incorporate our solutions. Below are some of the changes we made to different screens:

Lo-Fi Prototyping

Here is the final lo-fi prototype we made based on insights from the first round of usability testing - check it out!

Usability Testing Round 2

Using the updated version of the lo-fi prototype, we did another round of usability testing to make sure that the pain points we discovered in round 1 were 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.

Information Architecture V2

Hi-Fi Prototyping and Validation

Hi-Fi Mockups

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, the hi-fi team created high fidelity mockups and 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

As for the final deliverable, we made a fully annotated Sketch file to describe all elements and expected interactions. Below is the final hi-fi prototype we delivered to YouCaring's product team.

Next Steps

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!

Takeaways