Backyard Movement Redesign Project
Role: UI/UX designer
Duration: 5 weeks (July- August 2022)
Tools: Figma, Miro, Trello, Gaze recorder
Overview
UX design
-
User research
-
Wireframing
-
Persona
-
Usability test
UI design
-
Redlining
-
Prototyping
-
Style Guides
-
Iteration
Backyard movement is a community-driven initiative. Their mission is to create real, positive changes in our community. The focus of their efforts is guided by three pillars Purpose, People, and Planet.
User research
Definition& Ideation
Prototyping
Testing& Iterating
Investigation
Object
This project focused on redesigning certain elements on the Backyard Movement (BM) pages and navigation. The goal is to streamline sections of the webpages, notably the ‘Events’ page, to offer a better user experience.
Project role
My role in this project is to increase traffic on the website by creating solutions for more convenient navigation. I want to help this organization as it contributes to communities in GTA by providing a platform for small organizations services to help them initiate, manage and host events.
Research
After investigating Backyard movement's web pages and identifying usability issues that impede the overall user experience.
4 main problems with Backyard movement website:
1. Main page confusion
2. Event page has a long explanation for each events
3. Gallery page seems to be blog page
4. Overall consistency
Definition
Problem 1: Main page confusion
1. Header needs improvement
No enough spacing, accessibility issues
2. Gray background makes it look lofi
3. The section with CN tower view needs to be redesigned
I think it'll look more elegant if the text doesn't cut into the picture and need to think if whole section should be dedicated to this content
4. Accessibility issues
5. Footer needs to redesign
6. Choose another font
Overall the website seems good but I was lost when I tried looking for the particular event page. Too many information and I felt overwhelmed.
Devon (28) from the usability testing
Problem 2: Event page has a long explanation for each events
1. Too much blank space under the image
2. Too much space between paragraphs
3. Images are inconsistent sizes
4. Elements are off centre
5. Too wordy
6. Events information should be more prominent
7. Some Bios are unnecessarily
8. Too many buttons
Too many CTAs, some seem redundant, buttons not consistent size. 1 button/event.
9. Issue with the primary and secondary header
It is not clear for cluttering and chunking different section, and it’s too close to the content size.
Problem 3: Gallery Page seems to be blog page
1. Accessibility issues
Font colour is hard to read
2. Logo colour changed
3. Too much spacing between texts
4. Short title is better
"Christmas Food Drive in Support of Daily Bread TO" can be displayed in shorter way
5. Bright image doesn't really fit
6. This page seems more like a blog page
Problem 4: Overall consistency
This website is a little bit inconsistent. It was not easy for me to find the page that I was asked to look for.
AJ (42) from the usability testing
Ideation
Now it is time to outline solutions for the four design flaws I identified.
I created the Protopersona — To comprehend better using the website experience. The goals and pain points were made based on the user's experience of Backyard movement website.
I conducted the Competitor analysis — To understand the landscape of competitors not only helps inform design decisions but it also helps inform the overall design strategy.
I created the sitemap — To organize the navigation category and make it more efficient experience towards audiences.
Method 1: Protopersona
Method 2: Competitor Analysis
.png)
.png)
.png)
Method 3: Sitemap
Prototyping
Low-Fidelity
Mid-Fidelity
.png)
The result/Hi-Fidelity
(1) Main page: Combine pages to make more a reasonable page for users
Problem: The original page needed a lot of improvements such as header , footer, accessibility issues.
Solution: Combined the explanations from the pages of About and Main to shorten the description in a neat and organized way. The layout has become looks more consistent and users can easily follow.
(2) Event page: Display events as card box to show the events aesthetically
Problem: Event page seems to be disorganized.
Solution: Display each events as card box. In this case, users can find the Upcoming and Past events. They can also look more for events by clicking the Load More button.
(3) Inside event page: Added the carousel for pictures
Problem: Originally, it didn't seem like a Gallery page instead looks like a Blog page.
Solution: Added carousel to show pictures. In this case, users can enjoy pictures on their own pace and easy to read the event description.
(4) The team page: Added bio for each members
Problem: No description for members and seems disorganized.
Solution: Made card box for each members and created the bio for each person so that users can understand who they are and what part of role they are doing for Backyard movement.
Style Guides
.png)
Final thoughts
✅ Overall
Using the agile methodology, I managed to set regular meetings to keep updated for each members and track what we needed to do for each week. We ensured that we communicated each other well to not feeling left out during the process of project. Thus, it was very good harmonized collaboration among developers and UI/UX design team.
✏️ New Perspectives
There were some limitations based on designed pages while working with developers. For instance, navigation category. They couldn't code it as the design team wished but we thoroughly discussed about what they can do similarly. Also, from design team we suggested the another design to test if they could code it. After multiple iterations, we figured out that current hover state which is still accessible for all users.
🌟 Next step
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.