Handhelp
Handhelp is an online giving platform centered around 1-on-1 giving in the local community, designed to be personal, accountable, and transparent. Handhelp’s philosophy is to revoke faceless giving and increase transparency in the donation process.
Deliverables
UI/UX Design
Branding
My Role
Research
Design
Prototyping
Testing
Branding
Context
New Media Coursework
Aug-Nov 2021
14 Weeks
Project Overview
As part of a UI/UX assignment for New Media module, this is a comprehensive documentation of my first ever case study. How I failed, how I iterated, and how I persevered as the sole designer working on Handhelp. This project took 3 months to complete.
*March 2022 Update
This project has received a special mention for the New Talent Award from UX Design Awards 2022, held by International Design Center Berlin.
Design Process
DISCOVER
Market Research
For my market research, I focused on qualitative research through doing factual reviews of articles by credible media sources. I wanted to know as much as possible about the charity scene in Singapore before assessing the initial key problems. I contextualised my findings through data.
Competitive Analysis
I furthered my research through case studies of other giving applications. I evaluated popular features based on user feedback from surveys and identified missing functions that Handhelp could possibly utilise. I wanted to compare how local donation apps differed from international donation apps.
Trends I found were:
-
Local giving platforms were more catered towards local charities and small NGOs through crowdfunding. For e.g. surgical operations fundraisers, help build an orphanage
-
Global giving platforms were more catered towards larger NGOs and NPOs with broader focuses. For e.g. ending hunger in third world countries, disaster relief.
I went to conduct field interviews from a variety of groups in the local community. I conducted two different interview groups for my two different target audiences - donors and beneficiaries. These people came from all walks of life, namely salarymen, local business owners, and people from lower income levels such as migrant domestic workers.
User Interviews
Objectives in interviewing donors
Objectives in
interviewing beneficiaries
-
Gather insights into donating behaviours
-
Uncover useful methods by which participants may employ to improve efficiency in donating
-
Uncover what keeps users from donating to people in need
-
Understand the type of donations they need
-
Understand the pain points of asking for and receiving donations
Affinity Map
To better classify, structure & summarize my user research insights, I created an affinity diagram. It included the overall user motivations, frustrations, needs & goals for an online giving app. Based on the synthesis from the affinity diagram, I got an enhanced understanding of the target users, which helped me in better empathizing with them. It also helped me in creating user personas and journey maps later on.
DEFINE
Key Insights
Design Requirements
From the user research, product principles were also generated to guide the ideation process. This framework will be the design requirements the product must feature in order to solve the problem and satisfy the users. Having these guiding principles will provide a clear framework for future features of the product.
-
Allow personal connection between donors and beneficiaries
-
Allow for accountability and transparency about where the donation ends up
-
Allows the feeling of a meaningful impact
User Personas
3 user personas were created based on the synthesis & key findings from the primary research that represented Handhelp’s 2 primary target user groups, donors and beneficiaries
DEFINE
Key Insights
User Personas
3 user personas were created based on the synthesis & key findings from the primary research that represented Handhelp’s 2 primary target user groups, donors and beneficiaries
Design Requirements
From the user research, product principles were also generated to guide the ideation process. This framework will be the design requirements the product must feature in order to solve the problem and satisfy the users. Having these guiding principles will provide a clear framework for future features of the product.
-
Allow personal connection between donors and beneficiaries
-
Allow for accountability and transparency about where the donation ends up
-
Allows the feeling of a meaningful impact
Problem Statement
How might we design a giving and receiving experience that is catered to the local community, while being impactful and transparent for donors and facilitating personal connection?
DEVELOP
Feature Ideation
Due to time constraints, I could only focus on 3 key features for my app.
1. Donor & Beneficiary Messaging
The option to message will evoke a sense of community, and enhance connection between donors and beneficiaries.
2. Activity Feed
A social feature in which beneficiaries update through “posts” once they have redeemed donations, providing accountability. The donation experience transcends the payment process, and donors truly feel that they have created meaningful impact.
3. Beneficiary Wishlist
To solve the pain points of beneficiaries having their daily needs unmet, they can opt to request these items as donations in their wishlists. Donors who scroll their profile sponsor these items.
AHA! Moment
The donation process I had in mind was very much catered to the local community. Hence, when I saw that there was an opening here to facilitate the donation through local businesses who were struggling during the pandemic, I decided to add one more feature, which is very much in line with the principles I set up in the research synthesis phase.
4. Item Redemption
Once the donation goes through, or once donor has donated an item for a beneficiary, a local business selling the donated item will be notified. This will help increase revenue for their business along the way.
Information Architecture
From here I could decide what actions and features were crucial and beneficial and designed a sitemap around these conclusions. I arranged the potential features, content & information for the application in a structured flow diagram to better visually view & understand the hierarchy of categories & subcategories. Better defining their paths for easy navigation. I kept reorganizing the content to find the most suitable, easy to navigate & intuitive structure.
User Journey
From the data collected, an ideal user journey map was generated from the perspective of the persona Patricia, a donor, to dive deeper into how a donor would ideally experience the app. It later developed into an empathy map, which captured the user’s journey and emotional results with each touchpoint they perform within the app.
Prototyping
Paper Sketches
Here came the meaty part of the case study, in which I brainstrormed initial UI designs for the app, to direct the look and feel as well potential feature placements. During this stage, many features were enhanced and flows were solidified.
Mid-fi Wireframes
Using the initial paper sketches as a guide, I created the digitialised version of a mid-fi app prototype. This allowed for early assessment of app's usability, which I took to refining the features and placements.
Hifi Wireframes
From my mid-fi wireframes, I created the hi-fi wireframes of my app. Along this process, I also defined the style guide and design language of the app, such as colour palette and illustrations. I prototyped this hi-fi version through Adobe XD and proceeded to use it for my usability testing.
User Testing
Objective
The goal of this user testing session is to assess the learnability of Handhelp for new users downloading the app for the first time and the overall usability of the app. I would like to observe my users’ impressions with my app’s features and if they
1)
2)
3)
Can successfully purchase an item from a beneficiary’s wishlist
Can successfully sponsor a beneficiary monthly
Can successfully message and connect with a beneficiary
Methodology
The usability test conducted during the usability assessment of Handhelp application consisted of an introduction, 3 tasks, a short interview, and a post-test questionnaire (QUIS scale). I instructed the participants to think out loud and share their thoughts throughout the test. Sessions were performed on an individual basis with each session lasting approximately 15-30 minutes. All user testing sessions were recorded, with all consenting to video, audio, and screen recording. Moderated remote session participants were briefed beforehand to share their screens through zoom.
Affinity Map
Again, I employed the use of an affinity map to classify my research findings. I grouped them into: Observations, Errors, Negative Quotes, Positive Quotes, Recommendations.
Key Insights
Table of task completion for all 5 participants
Task Succession Rate
86.6%
Validation Rating
Despite an overall satisfying learnability rating and task succession rate, I observed some error occurrences. I find that organizing these findings through an affinity map is very effective. I also jotted down some notable quotes given by users, which revealed further pain points in the onboarding, donation, and social experiences. How might we solve these issues? Through adding subfeatures as a solution and fixing UI flaws.
DELIVER
Feedback Implementation
The user testing session revealed some flaws in my design which caused confusion in some of my users. The first part of the solution was fixing these before getting on to enhancing my existing features with some subfeatures.
Adding Subfeatures
The second part of the design solution involved developing subfeatures. From the validation score, I found that people still do not find Handhelp accountable or transparent enough (both given a 3.5/5 rating). I began asking the question: How do I facilitate a more transparent transaction? How do I make sure the accountability of the donation outcome?
Increasing Transparency & Accountability
For the first problem, I tackled it through the payment procedure. The most crucial change was adding in Merchant and Organization Info cards to the donation summary page, as this would allow users to know who exactly is facilitating the donation. You can also add a personal note to the beneficiaries and merchant, allowing for a more seamless way to connect with them. Next, for the profile page, easy-to-digest data visualisation of donations made may be displayed to offer contextualisation as well.
Hi-fi Interface
The Solution
Onboarding Experience
The onboarding screens introduce the principles of Handhelp. Users will have options to create a new account via email.
Pain points solved
The option of integrating email will simplify the sign up process for the users and help build a comprehensive user authentication database for Handhelp
![[Mockup] iPhone 13.png](https://static.wixstatic.com/media/365670_e4dec683f39c41e58ce9dfce83f6d0d6~mv2.png/v1/fill/w_60,h_91,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/%5BMockup%5D%20iPhone%2013.png)
Homepage
The homepage incorporates banners for latest or featured articles, an overview of beneficiary profile cards that is scrollable and an activity feed to see what’s happening with their beneficiaries.
Pain points solved
Being a donation app which focuses on personal connection, users are met with beneficiary profiles and feed, where they can receive live updates and freely interact by liking and commenting on posts.
User Profile
The user profile offers a personalised donation goal tracker and easy to digest data visualizations for easy tracking of donation history. Mementos feature allows users to reminisce on their donation history as well.
Pain points solved
Being able to have goals will motivate users to donate more. The use of nostalgia makes the donating experience continue beyond the payment, increasing user retention.
![[Mockup] iPhone 12.png](https://static.wixstatic.com/media/365670_ec3320dd65a8446ead13c1855aa1a288~mv2.png/v1/fill/w_56,h_86,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/%5BMockup%5D%20iPhone%2012.png)
Messages
This feature lets beneficiaries and donors interact with each other, helping forge community and connection.
Pain points solved
This feature emphasizes on 1-on-1 level charity, solving the pain point of impersonal and faceless giving.
Beneficiary Profile
Handhelp offers users the freedom to sponsor items or causes from a beneficiary’s wishlist, which is previewed in their profile along with their short bio and recent activities.
Pain points solved
Beneficiaries get to choose their own needs. Hence, users who donate these items know their donations are impactful no matter how small.
![[Mockup] iPhone 13-1.png](https://static.wixstatic.com/media/365670_6731cd1cf93641caa568d4d30041d382~mv2.png/v1/fill/w_60,h_91,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/%5BMockup%5D%20iPhone%2013-1.png)
![[Mockup] iPhone 13-3.png](https://static.wixstatic.com/media/365670_01e720a79f5548d684ec93a97ed2da60~mv2.png/v1/fill/w_60,h_91,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/%5BMockup%5D%20iPhone%2013-3.png)
Final Reflection
Not only was this my first ever UX design project case study, it was also my first time coming into contact with the frameworks, terms, and concepts, but I loved every step of it. I stumbled upon some difficulties with trying to maintain focus on the principles the initial research generated for the app. I found myself excited to add on features, despite sometimes negating the risk of time constraints. Next time, I will spend my time more meticulously refining the already existing main features instead. I thoroughly enjoyed the user testing process as well. It opened up new heights in just how insightful user testing sessions can be in helping to refine an app. It humbles and grounds the design, to always think of the users firsthand. That being said, there is much room to improve in Handhelp. If I were given the chance to revisit this project in the feature, I would like to design the beneficiary or even the merchant side of the app.
Thank you to Jonathan, Kensha, Charina, Daniel, and Melvyn for being my willing user testing participants. As well as Mr. Winson Ho as my lecturer for guiding me throughout this project.
*March 2022 Update
Upon receiving the special mention for the New Talent Category of the UXDA 2022, I am extremely happy and humbled. This has propelled my motivation and drive to further pursue UX Design, and think of more ways I can solve real-world problems and cultivate social impact through UX.