Embedded Files
GR8Harbor is an app that was designed for “social good”. The goal is to connect the local community to each other to assist in cleaning their harbor.
The Challenge.
To design a responsive website for “social good”. Creating a clear and easy way to connect the community and assist in keeping the harbor clean.
The Solution.
We took a practical and user-focused approach, conducting thorough user research and testing to gather insights. With this valuable feedback, we refined the app's interface for simplicity and ease of use. Our aim was a clean and intuitive navigation system, incorporating user-friendly design elements. This practicality and user feedback resulted in a straightforward, hassle-free home rental app.
My Role.
I wore many hats, pretty much all of the hats in this operation. I was the UX designer and researcher.
My Responsibilties.
User research, wireframing, low and high fidelity prototyping, I did it all.
User Research.
User Research.
As the head UX designer and researcher for GR8Harbor, I conducted extensive user research to ensure that our webpage effectively serves the community in keeping the harbor clean. Initially, I made the assumption that users primarily wanted a simple platform to report and track litter and pollution in the harbor. However, after conducting research, including user interviews, surveys, and usability testing, my assumptions shifted. I discovered that users not only wanted a reporting system but also desired educational resources, community engagement features, and incentives for participation. This valuable user feedback allowed me to refine our design approach and prioritize features that align with the community's needs. The research findings highlighted the importance of creating a comprehensive platform that fosters awareness, collaboration, and a sense of ownership in maintaining a clean and healthy harbor.
Persona.
Persona.
Name: Steven
Age: 32
Hometown: New York City
Family: Lives Alone
Occupation: Accountant
Goal: Assist in the cleanup of the harbor.
Frustrations: Having no means of grabbing trash or even being able to notify someone who can help.
Quote: “It makes me feel like trash when I see all the trash in the harbor.”
Bio: Steven is an office worker who has the privilege to travel by water shuttle to work every day. While it’s nice to be on the sea at the beginning and end of every shift, it’s hard not to notice the trash floating around the harbor. They wish they could do something to help but they simply do not have any means of helping; and even if he did, he simply doesn’t have the time.
Name: James
Age: 35
Hometown: Yonkers, NY
Family: Lives with fiancé
Occupation: Dentist
Goal: Assist in the cleanup of the harbor. Recruit and befriend like minded individuals.
Frustrations: His hobby is kayaking not trash removal, he does what he can but doesn’t want it to be the only thing he does in the water.
Quote: “I do what I can but there’s only so much a fella in a kayak can do."
Bio: James is a dentist who lives by the harbor. Every weekend, James kayaks around the harbor as a workout routine and as a hobby. According to James, it’s hard not to notice the amount of trash when he’s so low and close to the water.
James doesn’t mind helping, but could use help himself. There is a very limited amount of space in his kayak.
Competitive Audit.
Competitive Audit.
Initially, I wanted to skip the “competitive audit” because I believed that a program that is truly for “social good” shouldn’t be focusing on competition. But I chose to simply follow along with the course and I did end up finding some gaps in my project.
Design.
Design.
Digital Wireframing.
Digital Wireframing.
A big goal of the project was to keep it as simple as possible so it would be as accessible as possible. All buttons are big, easy to find and easy to read.
High contrasting colors fit the branding, and help with accessibility.
Since this is an app for “social good”, we simply just need to tell people our mission as clear as possible and extremely easy to “digest”.
Low Fidelity Prototype.
Low Fidelity Prototype.
Circling back to keeping things as simple as possible, I kept everything within one page.
The navbar will scroll users to their desired location, or they can manually scroll and find it organically.
Through the use of components, I was able to compact everything into the home page. Even the donation “checkout” is within a component.
Usability Study.
Usability Study.
Parameters.
Parameters.
Study type.
Study type.
Unmoderated Usability Study.
Participants.
Participants.
5 volunteer participants.
Location.
Location.
United States, remote.
Length.
Length.
30 Minutes Maximum.
Findings.
Findings.
Users had no issues finding what they needed.
A handful of bugs in the prototype that lead to awkward spacing when scrolled to an area.
Refining the Design.
Refining the Design.
It was smooth sailing this time around. The main concept was fairly simple and very minimal changes had to be made as you can see below.
Before.
Before.
After.
After.
Mockups.
Mockups.
High Fidelity Prototype.
High Fidelity Prototype.
Accessibility considerations.
Accessibility considerations.
Consistent navigation. Users have multiple way of finding the same destination.
Contrasting colors. The white background on black text, as simple as it may be, are extremely easy to read.
The white text is even legible and easy to read on the blue buttons.
Bold and short headings ensure users know where they are on the page.
Conclusion.
Conclusion.
Sometimes the simple solution is the easiest. What I didn’t show in this project is the entirely different app I initially designed for “GR8 Harbor”. It was super complex and over ambitious while missing many of the goals for this project.
The simpler solution ended up meeting all goals, and even visually looked better at the end of the day.
Page updated
Report abuse