NPO & The Backyard Movement
Transforming NPO Website for Enhanced User Involvement
Background
Enhanced website appearance to boost traffic and implemented an accessible update system for stakeholders managing upcoming events, improving user experience and engagement.
Timeline
3 months
Role
End to end product design
Stakeholders
1 co-founder, 2 UI designers, 2 UX designers and 2 developers
Tools
Figma, Miro, Invision, Trelo, Gaze recorder
Discovering Business and User needs
The Challenge
-
How can we increase the traffic on the website?
-
How can we navigate users to their desired page?
-
How can we ensure to allow co-founder to update the upcoming events on his own?
Goals for tool
Usability
The homepage requires a clear presentation of the website's purpose. Consistency across pages needs improvement, ensuring comprehensive explanations for each section to enhance user understanding.
Business
The co-founder aimed to personally update upcoming events, leading to a focus on an accessible design. This approach facilitated the delivery of volunteer services to the local area through an online platform.
User survey's
Conducted the gorilla testing with 5 testers. Identifying usability issues that impede the overall user experience.
Survey findings
88% of them experienced that home page was confusing. For the event page contains too much words.
"The Backyard movement seems to be fun and interesting but website page flow is a bit confusing"
Before Production
The Existing Design
Main
Event
.png)
Support us
About us
Competitive Analysis
Identify market opportunity
Goals
To analyze the competitive writing landscape, identify common features among competitors and pinpoint unique offerings necessary for comparison and market distinction. Look into collaborative editing, version history, formatting options, accessibility, integrations, and user-friendly interfaces.
Results
Findings revealed that many of similar platforms revealed that they have donation section in sign up page. This might be a crucial consideration.
Brainstorms and User Journeys
Usability heuristic to investigate the page
Goals
Understand the issues with the each pages.
Results
I discovered accessibility issues experienced by users, notably inconsistencies in design across different pages of the website. This inconsistency was visibly apparent and impacted the overall user experience.
_edited.jpg)
User journey map
Goals
With the gathered information from usability testing and interviews I wanted to create a journey map based on how users were thinking, feeling, and experiencing to sign up the contributions.
Results
I noticed through some interactions and interviews with users that a lot of users were interested to join the Backyard movement events. However, struggling to understand what do they do exactly.
Initial wireframes
Goals
To speed up our team's advancement in demonstrating planned functionality, features, content, and user flows, I created simple wireframes prioritizing speed rather than intricate details.
Results
These drawings were thoroughly reviewed by the developer team, giving us the chance to tackle trade-offs and pinpoint problems before moving on to layout testing.
Design Hurdle 1
Define Purposes
Challenge: How to deliver message to users seamlessly?
Following usability heuristic evaluations, certain design elements required attention. Navigation tabs were identified as causing accessibility issues, and the information architecture appeared disorganized.
These factors significantly hindered users' understanding of the organization's purpose.
Solution: Defined potential bottleneck
The About and Main pages' explanations were merged to create a concise, organized description. This improved consistency in layout and enhanced user comprehension, ensuring ease of navigation throughout the website.
Design exploration
.png)
.png)
User Research
Type of research
Used the gathered data to investigate the potential solutions.
Findings from research
Figured that users preferred concise descriptions.
Impact of Research on Product Development
Managed to decrease 30% of bounce rate.
"I wish the page looked simple but catchy."
Design Hurdle 2
Events Page
Challenge: How to design event page more fun?
Event page seems to be disorganized. This page has the most engagement result.
Solution: Card box
Events now appear as card boxes, showcasing both upcoming and past events. Users can easily find and explore more events by clicking the "Load More" button.
Design exploration
User Research
Type of research
The proto persona was crafted to gain insights into The Backyard Movement's website experience. This involved defining goals and pain points based on user interactions and experiences with the platform.
Findings from research
The Events page garners the highest user engagement within The Backyard Movement platform, indicating significant interest. Given the multitude of past events, it's crucial to prioritize organizing the layout for better accessibility and user experience.
Impact of Research on Product Development
The card box layout significantly improved users' ability to thoroughly view all The Backyard Movement events.
Production
Final Design
Main
Event inside
Event
About us
Design System
Results & Next Steps
Initial Results
💡
Managed to decrease 30% of bounce rate.
💡
Increased 28% of usability.
💡
Co-founder could successfully upload the event on his own.
Quotes from colleague
"I can now successfully upload the future events easily!"
"Great UI/UX ownership"
Final thoughts
Throughout this project, I found communication is very essential to lead the successful projects. I learnt that taking any feedback as constructive criticism to understand better user experience and adopt to necessary changes.
