I’m very pleased with Hang’s website design of Care2Share of the Carolinas. His design skills are deeply rooted with many years of graphic design, user interface experience. He has a complete understanding of user friendly and offers the simplicity of effective web design. Hang is a trustworthy & dependable individual and a valuable team player.
Da Mai – Secretary of Care2Share of The Carolinas, Senior Software Engineer from Honeywell (Retired)
C2S UX Design
Care2Share of The Carolinas UX Design
Tasks:
Study 1: Semi-structured interview
Non-Profit website project: How donator approach information and donate
Background
Everywhere, in any stage of life, there are always unlucky people living in destitution and deprivation in all aspects. They always need the help of kind-hearted people who are not only fish but also fishing rods so they can make a living in life. On the more fortunate side, with kindness, they always want to share that luck to the elderly, orphans who are struggling with daily food. The question is who and where do we really need the help and the reputable organization to send their hearts on their behalf.
Research goal
My research wants to learn about how users, donators visit a non-profit website approach information from the organization, unfortunate cases, and donate. The website also attracts volunteers to participate in useful charity programs.
Research questions
- What information do users expect to see on the website?
- What payment methods are convenient for them for quick donation?
- Why they choose Care2Share of The Carolinas but other non-profit organizations?
Method
- Send questionnaire via email to current donators, volunteers to gather in-depth qualitative data
- The researcher will use the answer script as a guide and ask follow-up questions based on answers from the users
Recruiting
- 4-8 participants
- Adults with a stable job who willing to help and donate
- To recruit participants, I will send emails to members and guests who already participated Care2Share of The Carolinas events
Screening questions
1- Have you ever donated online?
- Yes
- No
2- If yes, what website/organization do you like best? Why?
3- How often do you donate a month? A year?
- Monthly
- Yearly
- Sometime
4- When was the most recent time you have used online donations?
- Within a week
- Within a month
- Over one month ago
Timeline
- Design proposal: March 28, 2020
- Recruiting: March 29, 2020
- Session: March 30-31, 2020
- Readout: April 01-03, 2020
Introduction
Care2Share of The Carolinas is going to develop a website to provide information, unfortunate cases, projects proposal, and provide a donation online for whom who are busy or can not participate in our fund-raising events.
Warm-up questions:
- Could you tell us about yourself?
- How often do you use the internet to read information and news?
- Do you participate in any non-profit organization? If yes, what organization?
- Which website do you like the best? Why?
- Have you ever used the website to donate? If yes, which website? Could you walk me through how you find information and make donate?
- Observe what features the participant is using and how he/she uses them
- Ask what feature he/she like or dislike, why he/she like/dislike each feature
- Which feature do participants not use? And why?
- What made you decided to donate?
- How often do you donate or help unfortunate people?
- Do you think to give people the fishing rod is help better than a fish? Why?
- Do you know any unfortunate person to share with us?
Wrap-up
Thank you so much for sharing your experience and insights. Your answer will help our team build a better product. If you have any additional thoughts and comments, I would love to hear them at any time. I can be reached at c2sotc@gmail.com. I hope you have a wonderful day.
——-
Study 2: Survey
How to build and display information?
Background
This is an opportunity to approach users and better understanding which information, pictures, functions are they expected to see and use in the website and provide it accordingly.
Research goal
- This study focuses on better understanding users’ needs related to provide the relevant information and pictures and get them to involve in Care2Share activities/events
Research questions
- How the website approach user and make them donate
- Which features/functions are useful?
Method and Recruiting
- Use surveys to collect data from 10-20 users
- Test survey questions with 5 volunteers recruited from a volunteer member
- Collect information and analyze structure and content appropriately
Survey questions
- Which website are you using to donate?
- Red-cross
- Radio station
- United Way
- Other
- In the past month or year, how many times you donate?
- By participating directly into the event
- Donate online
- Send a check via mail
- Donate into a donation box
- How often do you visit the non-profit organization’s website?
- What is your first language? What language do you prefer to read on our website?
- Vietnamese
- English
5. What is your age?
- Under 18
- 18-25
- 26-35
- 36-65
- Above 65
6. What is your education level?
- Less than a high school degree
- High school degree or equivalent
- Associate degree
- Bachelor’s degree
- Graduate degree
Research Report
Non-Profit website project: How donator approach information and donate
UX Researcher: Nguyen Hang, April 2020
Executive Summary
Since our project is at a very early stage, our team is interested in exploring the expectation of information and donation function for Care2Share members. We interviewed 5 members on their interests, pain points, and how they use another website to donate.
Key finding
Most of the members do not have much time to read through articles and projects, so they suggest the minimum of text. What user can participate and suggest seeing photos of the improvement before and after the project. The donate button should be in top-right corner of the browser, and at each project as well.
What did we want to learn?
Our team wanted to explore adult members’ web browsing and scanning information and make donation. The goal was to determine what/how information/photo we should display on the homepage and donation button located. We discussed whether or not to show the donation button on the homepage. Or let users read our articles/cases in detail then provide the Donation button.
Key research questions
- Do you like the donation button right at the homepage or at the case detail page after you read the article?
- Which device do you usually use to read the information (PC, Laptop, iPad, Phone)
- How often do you usually read information online?
Participants
| Button at the homepage | Device use | Frequency | |
| Participant 1 | Yes | Phone | Every day, lunchtime, after work, cooking |
| Participant 2 | No | Phone/iPad | At night, after having dinner |
| Participant 3 | Yes | Phone | Lunchtime, after work |
| Participant 4 | Yes | Phone/PC | Lunchtime, after work |
| Participant 5 | Yes | Phone | After work |
Key finding 1
Members use Phone/iPad to read information online during short breaks during workdays (~10-15 min). Participants usually use Facebook to read news and if they interested, they will visit the website for more detail. Some of them go directly to the website if they already donate before and read more information/cases
“I like to spend 10-15 minutes at lunchtime to socialize with my friends and read the news on Facebook during workdays. If interested, I will go to the website to read more in detail”
- Participant 1 and 3
“I like to share knowledge information with friends and colleague”
- Participant 2
Recommendation 1
Write articles/cases and post a very short story in Facebook (average 50-60 characters) with touchy photos and the direct links to the website with more detail.
Need share icon on each article/case
Key finding 2
3 out of 5 participants said the website should be load fast since they use mobile data or limit time to wait/read the article/photo. Donation should be at the homepage since they already read/know the project/case before, and they decided to come back just for a donation rather than click to the article/case again then click donate.
“I really don’t want to go to a lot of questions before I donate, I decided to donate so please keep 1-2 or 3 steps at max.”
- Participant 1, 4, 5
Recommendation 2
We will pay attention to web loading time, optimize images/photos so the web will load faster within .5 second at max.
The donation button will be located on the homepage. Within 1-2 steps users can finish their donation.
Next steps
- Validate findings with surveys
- Run a design sprint for brainstorming
- Design wireframe layouts
Data Collection and Analysis
PROJECT TEST
Welcome message
Dear valuable users,
First of all, thank you so much for your participated in our last layout design. It helps us look to have a better re-look at what we have done. We try our best to improve and deliver the best product to you all. In order to do it, we need your help again to review our design with photos, icons, buttons, etc. Also clickable for you to surf around. Please follow these steps below and let us know your concerns.
- Go to homepage, look for information at the slide show, scroll down to the bottom of the page
- Scroll up and click to one of the news on the slide show
- Go to the menu on top, click back to home
- Click Donate button to go to the donation page
- Click the navigation link on top to go back to the homepage
- Click to the menu, go to the contact page
Thank you so much,
Data & KPI
Used lookback.io, observation and got feedback via email/phone call.
- Several users like to have a quick jump to the top
- Navigation is too high; they need somewhere near to reach
- Someone could not find the navigation on the very top
RESULTS & IMPROVED
After receiving feedback from the review group. I come up with several changes
- Move navigation link from the top to below the logo
I also reference ADA compliance and apply to my design such as:
- Give user control in Video/clip, transcripts and AD function (upcoming event page)
- Show alert when users enter a wrong format or forgot to enter information
- Re-arrange and increased spacing for users easy to read
- Add Go to Top button at the long page content
Link to Zeplin
Care2Share of The Carolinas is a non-profit organization established in 2014. For years, they are using their main communication via email, and Facebook. In 2020, they decided to have a website since they got much feedbacks from their users: Care2Share of The Carolinas should have a website to provide information/cases and especially gain trust in everyone.
As a UX designer, I must aware of that. My design should be professional with clean layouts and all information need. With years working on User Interface design, I apply my design skills such as layout solutions, sketch, icons design, graphic design as well as Figma/Adobe XD for layout and interact within screens. I also used Miro to create user flows and Zeplin to get users’ feedback.
In the very first stage, I came up with many ambitious ideas such as members can earn points when donate or introduce members, sell advertising, some quick games, etc. But when I approach users, have a talked to them, worked on surveys; I realized, the website only needs a very basic function to lead users to their point and complete their task in the simplest way. Users do not have time to surf through all functions which invest a lot of money and time-consuming.
Empathize, users, understand their pain points and what they expect to see on the website is my key point to focus on every page. I finally come up with some modifications to meet their need: simplified layouts, optimize photo size, web load by suggest use sprites and limit texts. Donation button also places at the homepage for users who already read and just come back for donation, they do not have to re-read again via several steps before reach the donation button.
The final solution got a lot of good feedback and I am looking forward to working with the engineering team to make this project live.
Thank you all who participate in this project and make it happen,
With much appreciation!
Details
-
Group
-
Label
- Research
- Lo-Fidelity Prototyping
- Hi-Fidelity Prototyping
- Build Interactive Design
- Create & Improve Hi-Fidelity Design
- Case Study