Scope
Research
UX Design
UI Design
Visual Design
Prototyping
Tools
Adobe XD
Adobe Illustrator
Adobe Photoshop
Google Workspace
Blender
project overview
The product:
For my Google UX Design Certificate course project assignment, I selected a project topic generated by Sharpen, a platform that provides curated project ideas for UX designers. The assigned project was to design a website for a charity group that includes a volunteer scheduling process.
The primary focus of this project was to develop a responsive website that caters to both desktop and mobile devices.
Project duration:
4-week project, April-May 2022
To ensure a solution that aligns with the real-world context of the project, I opted to work with an existing charity group called Second Harvest Japan. Second Harvest Japan is a nationwide food bank in Japan. My goal was to redesign and enhance their current website, aiming to improve its functionality and overall user experience.
The problems:
The current website does not incorporate a responsive website for mobile devices.
Also, the readability of the website is low and the sign-up process for volunteers is not intuitive.
The goal:
To redesign a website that provides a better readability for both desktop and mobile devices, along with an improved volunteer sign-up process.
My role:
The UX designer of this personal project.
Responsibilities:
Conducting interviews, creating paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
User research: summary
Based on the insights derived from the empathy maps created during the interviews, it became apparent that a significant number of target users exhibit hesitancy in initiating or consistently engaging in volunteer activities, primarily due to the cumbersome sign-up process. Furthermore, the current volunteer calendar utilized by Second Harvest Japan (hereinafter referred to as 2HJ) proves to be a source of frustration for users as it requires them to invest considerable time in reviewing available volunteer spots. Additionally, several users emphasized the importance of having a mobile-friendly website, stating that it would incentivize them to explore more information about the charity group.
User research: pain points
Persona: Jing Yi
Sitemap
I have restructured the subcategories to create a more streamlined and user-friendly navigation system. Recognizing that the 'Support Us' section is highly visited, I have given it prominence throughout the entire website. Additionally, I have ensured that it can be easily accessed from multiple locations on each page.
Paper wireframes
Next, I created paper wireframes for each screen of my app, taking into consideration the user pain points related to navigation, browsing, and the volunteer sign-up process.
Digital wireframes
Transitioning from paper to digital wireframes facilitated a better understanding of how the redesign could effectively tackle user pain points and enhance the overall user experience.
A crucial aspect of my strategy involved prioritizing the placement of useful buttons and visual elements. By carefully considering their positioning, I aimed to optimize user interactions and streamline the navigation process.
Low-fidelity prototype
To develop a low-fidelity prototype, I connected all the screens relevant to the primary user flow of signing up for volunteer events.
During this phase, I gathered feedback on my designs from participants involved in the usability research. Their input focused on aspects such as button placement and page organization. I took their feedback into careful consideration and incorporated several suggested changes to address user pain points effectively.
Usability study: parameters
Usability study: findings
iterations
I streamlined the homepage to a landing page style, featuring an image carousel that directs users to key pages or topics of interest. The subcategories are now located on the top tab for easy access, and users can review them simply by hovering over each tab.
Incorporating insights gained from the usability study, I implemented changes to enhance the volunteer sign-up flow. One notable modification involved relocating the sign-up process to the end of the user journey. This strategic adjustment aimed to boost users' interest in participating in activities by alleviating concerns about the disclosure of their personal information.
High-fidelity prototype
Page overview
1920*1080 web version
mobile version
Takeaways
Impact:
Feedback from users indicated that the design exhibited intuitive navigation, enhanced engagement through imagery, and showcased a clear visual hierarchy. Users found the volunteer sign-up process to be more straightforward and less stressful to review.
What I learned:
Redesigning the existing website for Second Harvest Japan (2HJ) proved to be a highly informative experience, marking an important milestone in my UI/UX journey. Unlike my other project where I built an app from scratch, working on the redesign allowed me to directly address existing issues and implement necessary changes. I thoroughly enjoyed this project and feel a great sense of satisfaction with the final outcome.
next steps
I would like to conduct a follow-up usability testing on the new website to really reflect users' needs and wants.
With this project as a starting point, my goal is to create a more immersive scroll experience such as a parallax scrolling design for long pages with more content. Trying out all kinds of design styles for different projects will be my next challenge.
Thank you for your time, hope you enjoyed this project!