The ThyCa Thyroid Cancer charity is an existing website meant to provide support services for Thyroid Cancer patients and their families and caregivers. The online donation flow was redesigned for this Google UX Design certificate project to make it easier for donators to make monetary contributions from the website or a mobile device Project overview.
Project duration: August 2021 – September 2021
The problem: The online donation flow on the website was not accessible or mobile-friendly. This can make it difficult for many users to make monetary contributions on the website or, particularly, on a mobile device
The goal: To improve the user interface of the donation process on the website and make it more responsive on mobile devices in order to increase donations to the cancer charity
Responsibilities: User research, market research, wireframing, mockups, prototyping, user testing and analysis
Before the Redesign:The online donation form was not very mobile-friendly. Although it was possible to submit a donation, the fields were not designed for the mobile environment. Options were difficult to read for some, and very small radio buttons were difficult to select and not accessible. The formatting was not centered or aligned properly on phones, requiring horizontal scrolling at times. Mobile design seemed to be an afterthought.
User Pain Points and Ways to Mitigate
1. Frustrating form. Too many form fields all at once discouraged some users from filling it all out.
Problem statement: Celia is a busy mother, sister, and member of society who needs to easily donate to ThyCa on her phone because the charity needs money and she wants to teach generosity to her daughter.
I thought through the logical order of the donation flow. This helped determine the necessary screens to get the task performed easily and without confusion.
As I sketched design ideas for the donation screens, I thought about each step the user takes when making an online donation. The screen designs need to make filling out the form easy for users.
To make the website responsive on other devices, such as smartphones, I sketched layouts for mobile as well, keeping in mind accessibility and best practices.
User feedback and pain points informed design decisions in order to increase usability. Based upon paper wireframes, I created digital wireframes for the website and mobile device donation screens.
I made design decisions based upon the user journey and paint points. Based upon ongoing user feedback, I continued to update the designs for the website for both desktop and mobile.
Usability Study Findings:
1. Too many form fields on one screen is frustrating. Split the fields into 2 screens.
2. Asterisk placement is important. Indicating required fields should not be confusing.
3. Labels should be outside of form field. This improves accessibility of the form, particularly for those using screen readers.
Some users expressed frustration when they saw all of the form fields at once. It seemed less overwhelming to them when only some fields were presented on the same screen.
The hi-fi prototype includes updates made to improve form usability based upon the user feedback.
Back to Home To Top of Page
Phone: (757) 477-1244