I’m a UX/UI Designer with a front-end development background.
I'm a designer with 2 years of front-end development experience. I love transforming complex workflows into easy and productive experience. Currently, I'm working at a data analytics startup, designing for complex data and business needs.
I’m a UX/UI Designer with a front-end development background.
I’m a UX/UI Designer with a front-end development background.
I’m a UX/UI Designer with a front-end development background.
GiveNext Mobile Experience Design
GiveNext is a fundraising platform that aims to provide a fast and easy way for its users to make donations online
My role
UX/UI Designer - Design, user interview, user testing
Team
4 other UX designers
Project duration
3 months
Overview
In 2016, Our client and founder of GiveNext, Dan, wanted to take the platform further, by increasing the user base and adding new features. Dan also wanted to develop a mobile app for the platform to make online donations even easier. I joined 4 other designers on helping transform GiveNext's web-based online donation experience into a mobile app experience. I specifically focused on improving the transparency in transactions and helping users better track their transactions.
Understand the users
In the initial research, we send out a questionnaire to the current user of GiveNext for some insights on their demographics and donation patterns. We learned that:
-
55-64 is the age range for most active users
-
Most active users have large annual incomes (100K+)
-
64% to 68% of donations are made to education or health organizations
-
Donations are very dependent on either donation patterns or commitment to others/groups
Based on the result of the initial research, we interviewed 4 prospective users that fits the demographics and we found that:
-
The motivations behind donations are highly related to personal interests/experiences and community that the interviewees have or involved with (e.g. A mom frequently donates to child education charities or a cycling enthusiastic is more willing to donate to cycling related organizations)
-
Trust and legitimacy is a major concern when choosing a platform for donation. Most of the interviewees uses charities’ or organizations’ official websites for donations, because they feel safer making transaction through their websites. They also prefer drop off the checks in person for local organizations.
-
All interviewees express the need of transparency during transactions. They want to know how much money are charged for a transaction and how much actually goes to the charity/organization.
-
Most of the interviewees find that reminders from organizations or solicitations from friends are acceptable, but they don’t like solicitations from strangers.They also wish to have one reminder for all donations, instead of getting emails from different organizations.
Understand how current solution works
Since this is a big project that involves designing a lot of screens, the team decided to divided the work. I chose to work on the donation experience and history part of the project.
I started by analyzing how the platform was handling transactions and transaction history. I found out that:
-
When making a donation, there was no information about how much would be charged for a transaction. There is also no confirmation page that allow users to review their designation, donation amount, and address etc.
-
For transaction history, GiveNext provided a pdf tax receipt, which included how much a user donated to each organization throughout a year. However, it did not disclose the fee charged for each transaction.
In conclusion, the lack of confirmation page and fee disclosure can lead to questions about the legitimacy or transparency of the platform and thus result untrustworthiness.
Make transactions clear and easy to track
I started from gauging what information was meaningful to users when they were reviewing their transaction history. I spent some time asking people around and looked at some examples of finance management apps, such as bank apps. I found that the most important information was the transaction amount, to whom it was made, and when it was made. I wanted to make sure that the key information was clear and straightforward to the users. So I explored several options for the layout in my medium-fidelity prototype.
Explorations on presenting the key information
After getting feedbacks and critiques, I went with B. It organizes and presents information nicely. It also avoids overwhelming users with too much information.
Improving transparency
I figured the best way to improve transparency was by adding something like a disclosure statement to the page where users make a payment. But I didn’t want the statement to be too prominent or too subtle. From left to right, I explored different options for disclosing the fee.
Alternatives for disclosing the cost
Originally, I found C to be compelling. It is easy to be spotted but not too prominent, and it allows users to use the keyboard to calculate the amount of fee they are paying if they want to. However, for some people, the text was too small. It felt like it was intentionally made small so that people would not pay attention. It also did not fit the overall design.
Then I switched to D, which directly shows users how much fee there would be and asks users’ confirmation. But the problem with this design was that some people were not sure who was charging the fee.
Option A was too abrupt and annoying if it keeps pop up for each transaction. So I finally settled on B, which clearly stated the fee and allowed users to learn more about why they are being charged.
Aquire new users and improve user engagement
I also designed a confirmation page, which aimed to improve transparency as well. Since we learned in our research that reminders from organizations or solicitations from friends are acceptable. I decided to add the social media sharing feature to the page, so that
-
users could let their friends know what causes they care about and motivate more people to help the organization.
-
GiveNext could attract more users, which was one of the goals our client wanted to achieve.
Improve transparency
This lets the user know when the organization would receive the donation
Added sharing feature
Allows the user to spread the word and potentially increases GiveNext user base
Confirmation page when a user successfully made a donation
Besides the confirmation page, I added a few things in my design to help retain users for GiveNext. One of the things was the "Add a memo" feature, which allowed users to write down the reasons why they made the donation. I got the inspiration from our initial research, where we learned that the donations were highly related to personal interests/experiences and community that the interviewees have or involved with. It meant that a donation was usually attached to some personal emotions or memories about the organization. So I wanted users to be able to express that emotion and recall the memory when they look at the donation history.
Memos in transaction history
Allows users to see why they made each donation
Memo for a transaction
Allows users to make each donation a memory
I integrated these features with the pages I made previously and then transformed those pages into a high-fidelity prototype.
Outcomes
We made a hight fidelity prototype to illustrate the mobile experience and new features and presented to our client. Here is a final interactive prototype that I made for my part of the design.