Category: Mobile App • Roles: Visual Design, UI + UX • Agency: Infuse • Client: myRoundUp
myRoundUp is an app that helps charities raise money so that resources could be used to create more impact.
Last year, in the United States alone, non-profits set aside 8 billion dollars towards marketing and design expenditures. (source)
myRoundUp rounds up each donor’s credit card transaction to the nearest dollar and sets that money aside to donate to a charity of their choice each month. Micro donations have been implemented in point of sale devices, but there is not a dedicated app in the charity space. myRoundUp is an app for people to actively give to charities at manageable amounts.
The app primarily functions as a sign-up service; the bulk of the screens are for user onboarding and settings. When installed, the app runs quietly in the background, and only serves as a means to view the amount accumulated over the month. Settings include changing your financial information, setting limit caps to donation amounts each month, changing the charity to donate to, and viewing and exporting past donation logs.
Our challenge was to create a product that would help charities raise money without having to use extra resources.
The client had the initial idea for creating a charity app and knew about microdonations, but did not know how to actually execute and fully visualize the app. They needed a fully wired prototype that could be used to get charities on board and to raise enough money from investors to finish app development.
Initial wireframes and research done by Angie Fu. My role in the project started at the visual design and interactive phase, continuing on to prototyping and working with a developer. After the initial product was finished, 8 months passed and with new funding, we were able to reexplore and redesign the app. The screens seen here are a reflection of that second stage of design.
The app needed to be easily skinnable for charities that wanted their own branded version of the app.
The UI was designed to be "invisible" and easily changable based on the charity's existing branding. I made a style guide for best practices when converting the app to a charity-based app. MD Anderson was the first client to request their own app.
RESEARCH + OBJECTIVES
Finding existing solutions to established user needs.
With my product manager, we hash out our ideas on what features we need and what aspects of the app are going to be high priority, as well as a rough idea of how the flow should be.
We tested Acorns, an app that also uses a microdonation engine, noting any positive or negative experiences screen by screen.
RESEARCH AND BRAINSTORMING HYPOTHETICAL USER NEEDS
Who is our target user?
Charities primarily focus their fundraising efforts on Boomers and Retirees because they donate the most among the age groups. However, Millenials are a growing force in the charity sphere- "Studies show that in 2011, 75% of Millennials gave to charitable organizations; just two years later (in 2013), the percent of Millennials giving rose to 87%." Source
Millennials want to feel a sense of connection and purpose and social media helps spur campaigns. "The Pew Research Center’s Internet & American Life Project has been working on a series about the “Millennials,” another term for Generation Y. The research reveals that Gen Yers want to know what their friends are donating to; they need that personal connection and they want to talk about with their friends." Source ALS's viral Ice Bucket Challenge raised over $15 million from over 3 million donors in two months. Source
What does our target user want?
- To feel like they're making a difference in the organization they're supporting.
- To share how much they're making a difference with their social network.
- To be able to donate to their favorite charity without having to do it actively, yet still feel rewarded with the monthly donation notifications.
- To continue giving even when there isn't a viral campaign.
What are metrics of success for myRoundUp?
- Being able to convince users to sign up and make their first monthly donation.
- Retaining users past the first month.
Sketching user flows
When I create wireframes, I start with a default scenario of the initial sign up flow and the main feature of the app. We used Agile development strategies which meant we were delivering small milestones and integrating the client's feedback continuously. The wire framing stage is the first step of this cycle, and I go back to sketching out wireframes for every new additional feature that needed to be implemented.
When framing solutions, I write out what a certain flow needs to do. For example: “Have the user make an account by entering their email and a potential password”. On paper, I sketch the entire flow for this action, based on common and repeatable action patterns seen in other apps.
VISUALIZING IN SKETCH
Mapping Initial User Flows
Using my sketched wireframes as a roadmap, I mock up low fidelity wireframes in sketch.
I lay it out onto a sheet with arrows showing interactions. This is useful for the developers later on so they do not have to click through my prototypes and is useful for clients to get an overall view of functions.
Presenting a wired prototype
I use Invision (a prototyping web app) to link the screens together into a tappable prototype that can be viewed on the device we’re designing for. It’s extremely useful to see at this early stage where there is friction, and the low fidelity keeps the clients focused on the actual function instead of getting distracted with higher fidelity visual designs. I usually send over a link to the prototype and the wireframe overview to clients a full day before our call so that they can look at the app without my guidance. I also encourage them to leave comments directly on the design through Invision. I usually have a list of talking points I also include in the email, directing and making sure that I’m getting the actionable feedback I need to move forward, and it helps give clients direction in how they should approach feedback as well. When we agree on the wireframes, we move on to visual design.
Designing in Sketch
I duplicate the wireframe document in sketch, and I start building my visual designs right on top. I set menu items and buttons as symbols already in the wireframe stage, so converting those into more polished visual design assets makes my process fast and efficient.
I try to establish a consistent UI set early on so that I don’t have to waste time going back in and creating or finding assets. I also set 3-4 font types that are labelled so it keeps me consistent. It also helps me later on so I don’t have to go back and hunt for every single asset on my sheet to give to developers.
INTERACTIVE PROTOTYPING AND USER TESTING
Testing on devices
At this point in the process, the prototype looks and feels like a real app, with all the gestures and interactions wired into place. I test the app on my potential user base. I watch their interactions and make note of pain points, and after using the app, have the users fill out a brief survey on general and specific details on their experience. Based on the feedback, I make iterations directly addressing their problems.
Utilizing user testing to discover user needs and pain points
Users wanted to know exactly how much money was being spent and wanted to control the donation amounts regardless of actual accumulated amounts.
Being fully transparent with financial features meant designing a more intuitive format that instilled trust in the user. The user has total control of how much money they want to actually donate and when to opt out of the service. Bank information is clear and easy to get to, and donation history is exportable.
Figuring out user anxieties to streamline the sign up process
Our users didn’t feel confident linking their bank accounts because they were not sure exactly what each step meant.
Instruction cards before every step helped give context and reason for each step, resulting in more people completing the sign up process.
After the MVP of myRoundUp was created, I reevaluated the goals and metrics and came up with solutions to improve the app.
Providing utility and proving value before registration
The flow had explainer cards before every step, but the value of the app was not conveyed until after registration. This caused too much friction for users. "In particular, apps with low brand recognition—or those in which the value proposition is unclear—must clear a higher hurdle when they ask users to register at the start of the experience." source
Before giving any information, users can test a demo version of the app to see what it does. There are text bubbles explaining every feature in the demo version.
Building a scalable system for selection
The original design relied on logo recognition for selecting the cause they wanted to help. There was no way to search or filter through the charities. Initially, this was not needed because there were very few charities that could be selected, but as time went on, the list grew and the design needed to address the issue.
The new design now lists the charity in a searchable table. Eventually, a feature to filter by charity type will be implemented as well.
Building deeper connections between user and cause
Besides a quick company snippet and a donation history, there were no other features that would connect the user to the cause they were supporting.
To make sure that the user felt like they were making a difference, we implemented the cause's social feeds and thought of better ways to measure the impact each user was making in more concrete terms, such "trees planted" or "cans of foods donated". The structure of the cause page changed to being tabbed for better organization.
An informative landing site for potential users and charities
myRoundup needed a site that could explain what the app did and how it worked before the app itself was actually completed. I made an interactive version of the site that had an animated module that would show the most important screens with a short explanation accompanying each screen. There was a page directed at charities and a page directed at potential future users.