Mobile Flow & UI design
( under COVID19
epidemic circumstances )
What is
this Project
About?
Project Brief:
Goodnation is a company that provides service to navigate how, what, and why of giving, and to improve charitable outcomes for family or individual donors. In the past, philanthropic advisors are for high-class people. However, Goodnation is looking forward to helping more people choose the right charities, track down the impact, and make the world better.
After reviewing the product, talking to Roger, the head of the product, and conducting user researches, we found that the communication between the users and the system is mainly off-line. While the user we decided our objective of this project is to give recommendations to create a mobile app flow of the desktop web app that they used to communicate with their clients to promote the usage of their online service.
My Role
Survey
Design
Survey
Analysis
Product
Analysis
Industry
Interview
User
Journey
Flow
Design
Wireframe
Design
UI of new
Functions
My Team Member:
-
Flora Li - https://www.linkedin.com/in/liflora901/
-
Richa Kulkarni - https://www.linkedin.com/in/richa-kulkarni-93093410a/
-
Xinyi Wang
PROJECT FOCUS:
FLOW DESIGN, UI lOGIC, UI DESIGN
METHODOLOGY:
CONTENT AUDIT, USER JOURNEY, MVP
TIME:
JAN 2020 - MAY 2020
Project Timeline
LOCK-DOWN
First,
Here comes
User research
Everyone in our life: General Survey
To understand the general behavior and tendency of people who donate, or people who have thought of make a donation but did not process to real donation, we created a questionnaire on Google Sheet. This questionnaire includes questions of what and how general people understand about donation.
We did not find many users to fill the questionnaire, however, some of the information we got from the forms is still valuable. We were fortunatetly being able to talk to people who filled the form to get further understanding of them.
Some of the people brought out questions on the survey. For example: Does giving money to homeless people being considered a donation? If I put some money into stray artists' boxes, does it considered I donate to support local art? We were forced to narrow down the definition of donation to "charity related donation" to get the standardized result. However, these questions do make some suggestions and would be reflected in our insights.
Through our questionaire, we saw:
-
About half of people have a donation history of donating by chance, which means people might also donate specific events, promotions, or even after watching a documentary movie.
-
About half of people experienced difficulties while trying or while making a donation.
-
Over half of people are not sure about the impacts they made through donation.
These findings are corresponding to the questions we've been asking while people were filling our survey. While we asked people who've recently donate to stray artists but rarely donated to an art organization why do they make this decision, the answers are very similar: "Who knows if the money would go to the artists?"
It is too much work to track down the donations they made. People do know they can follow the organization's SNS account. However, these organizations usually cannot survive the algorism.
In a short word:
Generally, people want to help others by making a donation.
We would try to emphasize the impact tracking function of the mobile experience based on this research.
Those who are able to give: The Millennials
According to our client, Goodnation would like to expand their Millennials market. We conducted a literature review on the Millennials since they have been heavily studied these years. After reading and studying their characteristics, we set several strategies based on how Millennials think and make decisions.
The Millenials -- also called Generation Y-- were frequently being compared with the BabyBombers -- which happens to be the main clients of Goodnation based on what the manager told us.
The chart upon is from Statista. As the infographic shows, the words most associated with Millennials are 'tech-savvy,' 'materialistic,' 'selfish,' 'lazy', and 'arrogant'. Moreover, even Millenials themselves seem to agree with this slightly-negative description highly.
However, are they?
This article on relate.zendesk.com talks about how about 84% of Millenials donated. They care about our world a lot. However, they value charities in the other way.
By knowing how they value donations and charities, we set these design principles as our strategy, also, the strategy we recommended the client to take:
Those who gave, who give, and who will give
We also considered the expert's options. In the article "Why Donors Give: Infographic", the author shows some well-polished infographics describe the tendency of the donors. Accordingly, the No.1 reason for donation is "needing mission in the community." The supporters are more willing to give money when they believe the mission and know that the organization have a good reputation or did something good serve the community.
Afterall,
They all share something
in common
All of the user researches have pointed to one story: the users care about how their money being used and usually evaluate the organizations by history and reputation. The core of the donation advising product is these JTBDs:
1.
When I want to make a donation,
I want someone gives me a standard to evaluate charities
so I can be informed and make better decisions
2.
When I want to track down my donation
I want to see the impact in a glance and understand how I related to the impact
so I can feel accomplish and share it with others
Did the current product hit these points?
Product
&
Service
Analysis
Product Flow on task
The product flow analysis is conducted with small-group user-testing under 2 user flow:
1. Set the payment options and donate to an organization that the advisor recommended.
2. Explore organizations under specific interest.
There are several issues being bumped out within the user tests. For example, the users generally cannot understand that "Under Consideration" means a recommendation list. They don't how to use the tab to travel between pages, nor do they can link the payment option under "YOUR PROFILE" immediately. The users were being asked to think out loud about their thought on the pages. 0 in 5 users I monitored is able to link "GIVING LIST" to "donate now" or link "YOUR GIFT" to "transaction records".
In the second task, the users were frustrated by opening a new section to read information of the charity because they would have to open multiple windows to check information of all the organizations they may interest in. One of the users mentioned that the screen did not provide sufficient information to help he decides which organizations he should take a look.
Product
&
Service
Analysis
Checklist with
"How Millenials Value..."
I asked 10 people to evaluate the values for me. They were being asked to explore the organization and tell me about their feelings, and rate these factors of the web app. The value on the chart was the average rating of each value.
As predicted, the audiences thought the web app did not featured strong digital connection and sharing features. The transparency rate was also low because they considered transparency as financial status than the value or faith of the organization.
2. Product Usage
Interview with the advisor
Due to the COVID-19 situation, we were not able to interview any existed user face-to-face. However, we talked to the advisors who work to give out donation advice and bridge the communication with and without the current product.
We learned about the real interactions that users made with the service and noticed the absence of the existed digital product. We asked for some email samples after the appointment to understand what kind of information that advisors provided to communicate with and satisfy the users. We also accent the user reliance on the advisors.
Usage Analytics
Based on Google analytics, there are about 20% of the users use a mobile device to access Goodnation. However, 20% of users are being refused by the not-mobile-responsive web app. In this term, it's better to build a mobile-responsive experience.
Very few users are return users. Currently, most of the organizations update the impact less than 4 times a year, and not many users donate frequently. There are no needs for them to use the web app very often, which makes memorability more important than frequent-use apps.
User Journey ( Current Product)
After all the researches, we created a user journey to help us revise the flow of the current app and design the mobile-responsive UI layout. In the user journey, the user started from being curious about the product but experienced a painful waiting until they received the invitation from the advisor. They opened the invitation email on mobile devices but failed to access the web app because of the absence of the mobile view.
They decided to send an email about their thought and ask recommendations directly from the advisors because it's easier and they've already known this is acceptable because they received an invitation from the advisors. They follow the instructions made by advisors to make donations on the web app. Afterward, they waited passively to receive the impact report that the advisor would send to them.
How do we
solve issues?
By Design!
How our design
develope
User Journey ( Proposed)
We combined our findings and business requirement ( make the service being more automatic ) to created the proposed user journey map. In this flow, the users won't lose their interest in long waiting times. While they get into the app, they can immediately review the recommendations. They won't have to wait for the advisor and can explore charities they are interested in. They can also read some articles on the platform to learn about current events and missions to devote in.
After they made the donation, a relationship would be built between the donors and the organizations. They can check the impact actively and easily. They can even send their comments on impact with Goodnation web app.
Sitemap ( Proposed) Version.1
We started to virtualized our ideas by creating a site map. After created the site map, we assigned each function(s) to a team member and created the wireframe. While we're working on the wireframe, we're also keeping revising the sitemap to meet our design focuses.
We created some mockups to help us discuss how should the layout and information architecture could be. We discussed where should we implant our ideas, and settled down to an iOS app. After made all these decisions, we revised the sitemap and the product flow again.
BTW, we're here now...
The client said YES!
Sitemap Version.2 & Wireframe
We added the news column during the COVID-19 remote meeting because we realized how did events and news affect people's donate decision. This also corresponded to the donor research section in our research. Moreover, this section powers the SNS sharing feature. We did a simple user test on the wireframe and received critiques from the professor. After collecting all the suggestions, we moved forward to the hi-fi prototype... and Jann.
Then,
Let's start a donation journey
with Jann.
-
Onboarding Experience
Jenn is a millennial and loves to check social media with her phone. She donated via Goodnation twice. However, Jann was not a big fan of the web app. She used to use direct email to communicate with the advisor and make decisions.
One day, after she emails her advisor, she received an email telling her that the web app has a new version --it's mobile responsive now. Since the last time she used the app is a month ago, she did not remember her password. However, she got it back quickly with the new app. This experience gave her an excellent first impression of the new app.
In the onboarding stage, we design a new way for users to log in and get back their password. This is important because the users of Goodnation are mostly not frequent users. The possibility of password forgetting is relatively high. Using email to get their account back makes sense because they used to use their email to contact the advisor all the time.
-
Dashboard
Right after she logged in, the new dashboard came to her. The app showed her donation history in a clear infographic. She spent a while study about it, then swiped down and saw more details and transaction histories.
Surprisingly, she also saw the recent updates of the charities on the dashboard, too. In the last version, she has to do the researches herself -- which made her ended up writing an email to the advisor and ask for one single report.
We reorganized the information architecture on the dashboard -- since it's the first page of the app, we decided to put the information that the users more interested in on it. The dashboard can be used as a shortcut to every function the users might be want to access.
-
SNS Sharing
Right after she logged in, the new dashboard came to her. The app showed her donation history in a clear infographic. She spent a while study about it, then swiped down and saw more details and transaction histories.
Surprisingly, she also saw the recent updates of the charities on the dashboard, too. In the last version, she has to do the researches herself -- which made her ended up writing an email to the advisor and ask for one single report.
Based on our researches, our users value both transparency, social sharing, and privacy. We designed sharing features to let the users can customize what information they want to share with their friends and families. They can also use this function to invite their beloved people join their donation journey.
-
Charity Exploration
Jann started exploring charities. She read the recommendation list and interacted with the charities. She then explored on other organizations which featured values and causes she recently got interested in. She also used keywords to find charities that had involved in specific events she wanted to support.
We use info card to show some important information on the recommendation page. In our researches, we realized that the users would want to read the information of the charities at a glance than multiple taps.
-
Donation & Advising
Jann explored smoothly with the new app and created her new saved list. She reread the list and brought some of the organizations to her giving list. However, she still wanted her advisor to review the list for her. She contacted the advisor with the app. Using the app to communicate with the advisor, it's much easier than writing an email because she can not only see the advisor's schedule in the app but also quote her lists directly.
In the message center, the users would be able to create a semi-direct connection between the advisor and the organization they've donated to. While they're communicating with the advisor, it's even better than using the email because referring their saving/giving list or transaction record would be much easier.
Now, we've got a happy Jann. More control, more active, more feelings of participation. She checked the app more often than before because the charities sometimes send her updates or event invitations via the app. She received photos and articles of impacts, she made and can share them on her SNS.
This is the end of Jann's donation journey, and it's also our semester project.
Let's talk to the
Client...
Since we have a client, one of the most important things in the project is the client's comment. In the mid-term meeting, we received a positive response from the clients. However, we were still worried about the final result.
In the final presentation, the client said our advice is helpful. They would definitely consider adding the message center and SNS to the current app. They would also use the project to communicate with the engineers and the designers in the future.
Reflection:
Working with Goodnation was a pleasant and challenging experience. Since I did not have any knowledge and expertise in donation-related service before, learning how doners think and how do donations being processed is a valuable experience of me.
In comparison to other projects, this project is more content-centered. Understanding the method the advisors using to guide their client is essential since the app is designed to make these works automatically.
In this process, we had to consider carefully to avoid the resistance against automation drives the users way from the service instead of benefit the business usage by providing a better user experience.
Thinking through all these elements gave me a clearer sight of how to strike a balance between brands, values, requirements, and UX needs. Since my team was nearly doing everything remotely, I also learned how to compress my thoughts to create efficient communications.