- Web & Mobile UIUX
Type:
UIUX & Wordpress
Timline:
Apr 2022
Tools:
Figma & Wordpress
My role:
User research
Interview
UIUX Design
Prototyping
Wordpress Development
Overview
Bacang Charity is an NGO that provide community services to the local public. They are quite frequent to raise donation and funding through offline activities currently. They are planning to provide an alternative and convenient method to their donors through online donation. So I have been assigned to assist them in design and develop a charity platform to raise donation.
Problem Statement
Helps donors to make donation easy and convenient through online website.
UX Audit - Existing Website
User Persona
I conducted an interview session with the client to further understand the users/customers’ persona & characteristics.
- 90% prefer mobile donation
- 30-50 y.o
- Business Owner/ Retired/ People with financial stable
- Prefer ewallet/ local bank tranfers
After the interview, the following are the ideal user profile and user stories that I used as the main reference to design and build the website:
“I wanted to make some donation to your organization, but the current process is too manual and tedious. I have no time to come over to the center.
“I prefer make donation through my mobile phone with various payment method, it is easier and faster.”
“I wish to donate money every month, but I couldn’t find a easy way to complete my donation”
User Journey Mapping
The Goal
The goal of this entire project is to achieve the following:
- To make the donation process easy & seamless
- To ensure mobile-friendly
My Solution
In order to achieve the goal, I have concluded with some features that must be included in the platform:
- Ensure mobile-friendly design
- To ensure the donation process is completed within 3 steps.
- To pay through an online payment.
- To allow express donation & individual campaign donation
- To allow offline donation options
Information Architecture
Firstly, I started by drafting the information architecture of the overall website structure.
User Flow
Then, I create the user flow for the donors to make donation easy and faster.
Lo-fi Wireframing
Hi-fi UI Design & Prototyping
Click Here to check out the live website.
I have designed the donation process that can be completed within just 3 steps which will save the donors a lot of time and brings convenience.
Donation Goal progress bar is crucial to keep the donors well informed on the current donation status of the campaign. This is prompt to the donors decisions and enhance conversions.
Besides that, I have also designed a sticky button at the bottom of the screen to keep the donor's eye attention while scrolling on the campaign information. This definitely helps in terms of conversions.
During the interviews, I found out that the donors prefer more payment options. As far as I am concerned, there are some technical constraints in the development phase when using WordPress. So as an alternative, I decided to make the offline donation options obviously display on the home screen and every single initiative & campaign screen.
To enhance the user interaction, a success state is one of the crucial components that would definitely have a tremendous impact on the user experience. Success states inform users that they are closer to achieving a goal or already achieved the goal.
I have challenged myself to self-learn and apply custom CSS in this project. However, due to some technical constraints, I have tried my best to make the design as perfect as what I have designed in the Figma prototype. In terms of padding, margin, and alignment, it isn’t perfect yet in the live.
Conclusion & Lesson learned
In overall, I feel satisfied with my personal learning growth in terms of design skills & techical skills.
If I was given more time on the project, I would like to further explore on the following expect:
- Mobile App Design
- More functions design like Monthly/ Annual Payment Option, Display Donors List, referrals & etc.
- Enhance technical skills like HTML, CSS & JS.