Tzu Chi
Humanistic Youth Centre
Tzu Chi
Humanistic Youth Centre
UI Design
UX Research
Usability Testing
Redesign
Content Strategy
Summary
Summary
This project aims to redesign our client's website, which is a community-based non-profit organization. The goal is to promote HYC as a secular space where like-minded youth and individuals can gather and make positive impact on their lives and society.
This project aims to redesign our client's website, which is a community-based non-profit organization. The goal is to promote HYC as a secular space where like-minded youth and individuals can gather and make positive impact on their lives and society.
Problems
Problems
Users
Users
Users require more detailed information in order to make informed decisions about events, spaces, and the services offered.
Users require a more youthful appearance for the website in order for it to be appealing to them.
Users require a clearer booking process to minimize inconveniences.
Users require more detailed information in order to make informed decisions about events, spaces, and the services offered.
Users require a more youthful appearance for the website in order for it to be appealing to them.
Users require a clearer booking process to minimize inconveniences.
Cilent
Cilent
Our client wants the website to appeal and inform the youth about the space. Additionally, they want it to effectively convey the message that HYC is a secular space where individuals who share their values can collaborate and make use of the facilities.
Our client wants the website to appeal and inform the youth about the space. Additionally, they want it to effectively convey the message that HYC is a secular space where individuals who share their values can collaborate and make use of the facilities.
Solution
Solution
Redesign the website by incorporating more diverse visual elements and to provide comprehensive and easily accessible information.
Redesign the website by incorporating more diverse visual elements and to provide comprehensive and easily accessible information.
User Interviews
User Interviews
We conducted 5 user interviews with youth and young adults between the ages of 20 and 30 to gather insights on their website preferences, sources of information, and any potential pain points.
Based on these interviews, we uncovered 2 key insights.
We conducted 5 user interviews with youth and young adults between the ages of 20 and 30 to gather insights on their website preferences, sources of information, and any potential pain points.
Based on these interviews, we uncovered 2 key insights.
Information
4/5 users said that there is insufficient information on the website.
Website
4/5 users suggested that the website should incorporate more pictures and improve its color scheme.
Website
4/5 users suggested that the website should incorporate more pictures and improve its color scheme.
Information
4/5 users said that there is insufficient information on the website.
Persona
Persona
To gain a better understanding of the target audience and align design decisions accordingly, we have developed a persona for users. This approach will help us find solutions that cater to the needs of both youths and visitors.
To gain a better understanding of the target audience and align design decisions accordingly, we have developed a persona for users. This approach will help us find solutions that cater to the needs of both youths and visitors.
Volunteerism Page Redesign
Volunteerism Page Redesign
Existing
Redesign
Existing
Redesign
Content Strategy
Content Strategy
The volunteerism page is one of the pages we recreated that showcases the content strategy we developed for HYC. It is written in a friendly, empathetic, and inclusive manner, reflecting the approachable nature of the staff and volunteers at HYC. They exude the same warmth online as they do in person.
The volunteerism page is one of the pages we recreated that showcases the content strategy we developed for HYC. It is written in a friendly, empathetic, and inclusive manner, reflecting the approachable nature of the staff and volunteers at HYC. They exude the same warmth online as they do in person.
Tone
Tone
We adjusted the tone to accommodate different contexts for other pages, such as upcoming events, encouraging youth to volunteer, collaboration, and for individuals seeking counseling services.
We adjusted the tone to accommodate different contexts for other pages, such as upcoming events, encouraging youth to volunteer, collaboration, and for individuals seeking counseling services.
What We Done
What We Done
We've made the page more vibrant by adding colors and incorporated relatable quotes and engaging stories. We believe this will provide visitors with a captivating experience that effectively communicates our message.
We've made the page more vibrant by adding colors and incorporated relatable quotes and engaging stories. We believe this will provide visitors with a captivating experience that effectively communicates our message.
Hero Image Redesign
Hero Image Redesign
Existing
Existing
The current hero image on the HYC landing page lacks diversity, and the slogan is difficult to read.
The current hero image on the HYC landing page lacks diversity, and the slogan is difficult to read.
Redesign
Redesign
We have decided to change the hero image into a hero slider that showcases the organization's purposes and what they offer with call-to-action button that encourages readers to take action and further explore.
We have decided to change the hero image into a hero slider that showcases the organization's purposes and what they offer with call-to-action button that encourages readers to take action and further explore.
Page Body Redesign
Page Body Redesign
Page Body Redesign
Existing
The current page body does provide information about what HYC has to offer for youth and what they can do there, but it may not be sufficiently clear or obvious.
Redesign
We have change the page body with concise headings and visuals that highlight key features making the content more engaging and to help users visualize what they can expect.
This improve the overall user experience making it easier for readers to scan the information and understand what is available to them.
Existing
The current page body does provide information about what HYC has to offer for youth and what they can do there, but it may not be sufficiently clear or obvious.
Redesign
We have change the page body with concise headings and visuals that highlight key features making the content more engaging and to help users visualize what they can expect.
This improve the overall user experience making it easier for readers to scan the information and understand what is available to them.
Usability Testing
Usability Testing
Now that we have addressed all the pain points, usability testing sessions have been conducted to observe user behavior and gather feedback on their experiences.
Now that we have addressed all the pain points, usability testing sessions have been conducted to observe user behavior and gather feedback on their experiences.
Before
Before
All our users mentioned that "Our Partners" does not fit the content and suggested that they should be categorized separately under "Spaces."
After
We decided to separate each amenity into its own category under "Spaces" so users will know exactly what they are looking for.
All our users mentioned that "Our Partners" does not fit the content and suggested that they should be categorized separately under "Spaces."
After
After
We decided to separate each amenity into its own category under "Spaces" so users will know exactly what they are looking for.
We decided to separate each amenity into its own category under "Spaces" so users will know exactly what they are looking for.
Before
Before
After
After
As HYC only offers counseling services, we decided to change "Services" to "Counselling" instead. This change is made to avoid misleading users by suggesting that HYC provides other services. Additionally, this makes "Counselling" an option that will be more accessible for the youth.
As HYC only offers counseling services, we decided to change "Services" to "Counselling" instead. This change is made to avoid misleading users by suggesting that HYC provides other services. Additionally, this makes "Counselling" an option that will be more accessible for the youth.
Before
Before
6/7 users felt that when they view the spaces to be booked, it requires some form of organization or arrangement.
6/7 users felt that when they view the spaces to be booked, it requires some form of organization or arrangement.
After
After
We have decided to emphasize Co Lab as it works differently when it comes to booking compared to the rest of the spaces. Additionally, you can now sort the spaces according to their prices.
We have decided to emphasize Co Lab as it works differently when it comes to booking compared to the rest of the spaces. Additionally, you can now sort the spaces according to their prices.
Final Look
Final Look
I took the feedback gathered from the usability test and iterated the design into a high fidelity mockup.
I took the feedback gathered from the usability test and iterated the design into a high fidelity mockup.
Landing Page
Landing Page
Book A Space Page
Book A Space Page
Arts & Culture Page
Arts & Culture Page
What I Learned
What I Learned
Overall, our clients are pleased with our work and have decided to develop the website exactly as we prototyped. They appreciated our content strategy and found our suggestions to be valuable in improving their website.
Technical Constraints and Brand Guidelines
Over the course of 3 weeks, my team and I understood the limitations and have successfully communicated with our clients to set realistic expectations and collaborated closely with our clients to overcome these constraints.
As a result, we were able to create a web redesign that meets both the client's objectives and the needs of the end-users.
Overall, our clients are pleased with our work and have decided to develop the website exactly as we prototyped. They appreciated our content strategy and found our suggestions to be valuable in improving their website.
Technical Constraints and Brand Guidelines
Over the course of 3 weeks, my team and I understood the limitations and have successfully communicated with our clients to set realistic expectations and collaborated closely with our clients to overcome these constraints.
As a result, we were able to create a web redesign that meets both the client's objectives and the needs of the end-users.
Future Steps
Future Steps
Because we have built a relationship with our client, we can continuously seek opportunities to enhance and expand our services to meet their evolving needs, while honing and improving our skills to solve new and existing problems.
Because we have built a relationship with our client, we can continuously seek opportunities to enhance and expand our services to meet their evolving needs, while honing and improving our skills to solve new and existing problems.
Healthy365
Healthy365
Website redesign to provide a seamless
& enjoyable experience with family & friends
Website redesign to provide a seamless
& enjoyable experience with family & friends