Designing a Native iOS App
YouCaring is the leading free web platform for charitable crowdfunding. They wanted to leverage mobile to make managing fundraisers more convenient, and create a new growth channel for the business.
Design a native iOS app that allows organizers (people who use YouCaring's platform to raise money) to conveniently manage & stay engaged with their fundraiser.
As design lead and project manager, I led 7 designers in scoping, defining, & executing every phase of the design process. I facilitated internal & client meetings, & served as the primary contact with YouCaring's Head of Product.
YouCaring's original product is a web application. Our team designed an iOS app that allows organizers to conveniently fundraise for their cause and engage with donors and potential donors. We defined the app's scope, requirements & features, information architecture, interactions, & visual design. In the process, we overcame challenges with web/mobile app parity, ambiguous user feedback, and designing for a large spectrum of use cases.
I led the project, managed the timeline, and communicated with YouCaring's Head of Product, product designers, and engineering lead.
Our designs will be developed and shipped in late 2017. Here's a sample of what's to come!
Understanding Crowdfunding & Learning from Competitors
To design an app that helps organizers be successful, we first needed to understand how to be successful! So, we researched the crowdfunding space to learn best practices, and looked at 6 of YouCaring's competitors to identify what worked and didn't. We learned that:
Social media plays a huge part. The more posts to social channels, generally the more money raised.
Other crowdfunding platforms provided many opportunities to share and spread the word.
Other crowdfunding platforms provided readily accessible tips and help resources.
User Interviews: Understanding Organizers
To learn more, we interviewed 5 past organizers to learn about their experiences, challenges, and what was important to them. This helped us think beyond the straightforward functional requirements of managing a fundraiser, and really think about how we could address their concerns.
Here's a few key insights from our interviews:
Persona Development: Keeping Organizers at the Focus
Based on our research and YouCaring's user data, we developed a persona to keep the needs of organizers on our minds and help inform our decisions.
Mapping an Organizer's Journey
To help us think holistically of the crowdfunding experience and envision how organizers would interact with our app, we mapped out touch points, including what emotions & thoughts organizers have, and identified opportunities to help.
Jobs to be Done: Translating User Goals into Product Requirements
We used the "Jobs to be Done" framework to help us think about the ‘jobs’ (scenarios) that an organizer would ‘hire’ our app to do. Understanding these contexts helped us refine user goals & identify core actions organizers would take within our app, which helped us define product needs next. Here's a snippet of our work:
2. Product Definition
To translate user needs into a product, we needed to establish requirements and define what our app needed to do. But first...things got a little tricky.
Defining an app on an undefined web experience?
A challenge we faced was that the YouCaring product team was simultaneously redesigning their web experience. So we were defining a mobile app based on some web features that were still undefined.
To push through the ambiguity, we prioritized solving user needs over product parity, and did our best to maintain a similar experience by synthesizing some features from preliminary web mockups.
Ideating and Prioritizing Features
Using inspiration from the existing website, website redesign mockups, and working within our 'Jobs to be Done' framework, we brainstormed and ranked features that would meet organizers’ needs.
Information Architecture: Structuring our Ideation
I led an internal group card sorting exercise to organize our features and content. Based on this & our understanding of users' core actions, we settled on grouping our features under 4 high-level categories that would form the tab bar navigation: Dashboard, Promote, Supporters, & Profile. We used this as a starting point in sketching wireframes.
Design Studio: Exploring as many alternatives as possible
Once it was clear what we needed to design for, we wanted to explore as many alternatives as possible. Given our constraints of a tight timeline and the large scope of the project, I led a Lean UX design studio, a 5-hr rapid ideation session.
Armed with organizers' concerns, goals, provisional feature set and information architecture, we sketched and iterated (and iterated on our iterations), and finally converged on a set of UI sketches.
We then took our UI sketches and turned them into wireframes. Here's a snapshot of the 4 main tabs:
4. Lo-Fi Prototyping & Validation
Testing, iterating, testing, and...iterating again.
Usability & Comprehension Testing: Round 1
To test our designs with real users, we gave 5 past organizers scenarios and asked them to complete tasks based on primary interactions users would have with the app. Here's a few examples:
Post an Update:
"You've raised 50% of your goal. Show me how you would let others know."
"56 people donated to your fundraiser. How would you send a message to all of them?"
"Imagine you're also fundraising for another cause. How would you switch fundraisers?"
We used affinity mapping to draw out insights from our tests and see what we could improve.
Here's a snapshot of the pain points we identified, and the changes we made:
Testing Round 2: Success! But...
After iterating on our designs, we tested users a second time, and found that we solved 5 out of the 6 main pain points we encountered in round 1. Yay!
However, 2/5 organizers still couldn't figure out how to switch between fundraisers, if they were managing multiple fundraisers. We initially thought the subset of organizers with multiple fundraisers was an edge case, but data showed that they make up a lion-share of revenue. At the scale of tens of thousands of users, no edge case is acceptable. So, we iterated on the 'switch fundraiser' feature and put it to the test.
In total, we ran 2 rounds of lo-fi testing and iterating to figure it out. We didn't. Not the first time...or the second time. Across two rounds, users went back & forth between thinking switching fundraisers on the dashboard and the account tabs.
So, we rethought our information architecture and settled on a solution that was crystal clear and almost omnipresent. This ended up working when we tested our Hi-Fi prototype. Hooray!
Among other things, we:
- Allowed organizers to switch from any of the tabs (excluding 'Profile')
- Moved everything related to a single fundraiser to the 'Fundraiser' tab (renamed from 'Dashboard')
Take a look at the evolution of our 'switch fundraiser' feature:
I would have 1) tested more users during the first round of testing for a larger sample size, and also just focus on 2) making our original design more clear (which is what ultimately worked). By focusing on the edge case organizers, we made it more difficult for the majority.
5. Hi-Fi Prototyping & Validation
Designing UI Consistent with YouCaring's Brand
Before testing our prototype again, we worked within YouCaring's existing style guide to create an experience that followed brand characteristics of being 'friendly' 'compassionate', 'trustworthy', & 'empowering'.
Testing Round 3: They Love It!
We conducted another round of tests to see if we hammered out all of the usability issues, especially with our "switch fundraiser" solution. And we did! Hell yeah.
Here's a snippet of our findings:
- 5/5 organizers easily switched from one fundraiser to another
- 5/5 organizers thought posting an update was intuitive
- 5/5 organizers could thank multiple supporters
- Overall, organizers loved our app and thought it would be extremely helpful in staying engaged!
In addition to making a usable product, we also solved for organizers' initial concerns. Here's a refresher and how we solved for organizers' needs.
Ensuring Feasibility & Engineering Implementation
We made a few minor adjustments according to some user feedback before presenting our prototype to YouCaring's Engineering Lead to address any technical concerns, and iterated accordingly, again.
Looking back, I would touch base with the Engineering lead earlier in the process. However, because we worked closely with YouCaring's Director of Product and incorporated his feasibility feedback early on, we are very confident that our designs are both intuitive and feasible.
In total, we designed 40+ screens and delivered a sketch file that included notes on interactions and engineering implementation.
Leading a large team of 7 other designers was definitely challenging, but highly rewarding. Things didn't always go as planned, but we pushed through, and I learned a lot about leadership and design in the process.
On design, I learned to:
- Bring structure to complexity in creating an experience from the ground up
- Design for a large spectrum of use cases
- Navigate conflicting user feedback
On leadership, I learned to:
- Make decisions in the face of ambiguity
- Manage a tight timeline, a large scope, and a large team
Challenges aside, organizers are excited about being able to manage and stay engaged with their fundraiser on the go and loved our product! The YouCaring team will be implementing our designs later this year. Stay tuned!