Ocean Eco Watch — A high-fidelity Figma prototype designed to inspire stakeholders and investors
This case study highlights how we integrated market insights, client needs, and user requirements into the design. It also emphasizes the value of unbiased feedback in making smarter, more effective design decisions.
Ocean Eco Watch
Ocean Eco Watch aims to map and analyse plastic debris in coastal areas using daily satellite imagery. Their technology predicts where problematic plastic waste concentrations might be found in real-time. With a team of four developers focused on improving the model’s quality and scalability, they hired me to address usability issues and identify key features for their roadmap.
Research approach
Competitor Analysis: I have examined environmentally themed editorial websites, NGOs, clean-up organizations, research institutes, and tech companies. This helped in differentiating Ocean Eco Watch’s value proposition and visual identity while considering user expectations.
Survey: Conducted with 55 participants to gather quantitative data on user needs and requirements for a platform informing about oceanic plastic debris.
User Interviews: Conducted four interviews with open-ended questions to understand user wishes and expectations. Followed by user testing with the existing prototype to uncover usability issues and gather insights on content and features.
Prototyping: Conducted a usability test that provided a list of usability issues. A Figma prototype was used to test the new ideas and measure the need of the new functionalities and features with qualitative data.
Business goal
The improved Figma prototype demo would help to gain more interest from stakeholders and investors, while exploring and defining new features to add to the roadmap.
Project background
My Role: User research, UX strategy, UI design, and Testing
Timeline: 3 weeks
Objective: Identify UX/UI opportunities and visualize the proposed user interface
Deliverables: Branding, Style Guide, Hi-fi prototype
Full case study: Inspire stakeholders with user research and co-creation driven design
“The prototype appears to be a great tool to communicate a potential vision and make our ideas more tangible. Moreover, it has inspired us to determine new features for our roadmap.” - OEW founder
When getting stuck, I consulted a design mentor. This has been the most valuable decision during this project. She pointed out my biases and suggested reassessing the project scope, which helped me to understand the essence of the business goal, challenges and limitations.
Research
Survey and Interview insights
Current design issues
Key desired features
Timeline of Plastic Patches: Track the development, sources, and movement of plastic patches over time.
Success Stories and Actionable Insights: Highlight how actions are being taken and suggest how users can contribute.
Relevant Regulations: Information on global regulations related to plastic pollution.
Debris Information: Characteristics and lifespan of different types of debris.
Impact on Marine Life: Information on marine life in affected areas and how they are impacted.
Local Perspectives: Insights on how coastal communities are affected by plastic debris.
Size Reference: Use familiar objects for scale comparison to help users understand the size of plastic patches.
Search and Filters: Enhanced search functionalities and filters for more specific information retrieval.
Flat Map View: Option for a simplified flat map for better functionality.
User flow
Scoping down the project
To narrow the scope of the project and maintain a realistic output within the given timeframe, a user flow has been created. The user flow illustrates how users navigate through the prototype and suggests some of the ideated features.
Design
Competitor analysis and visual style
By conducting a competitor analysis, I discovered that blue is the most commonly used colour in the industry (unsurprisingly). However, dark mode is less commonly seen. I chose turquoise as the brand colour, derived from the mood board, as the sea often appears more green than blue. Finally, using Google Material Design for UI guidelines and icons, the style tile demonstrates how the components come together.
Lo-fi wireframes
Exploring compositions and interactions
I made quick sketches for exploring potential compositions. Once I got the composition right, I started sketching lo-fi wireframes of the user flow.
The Landing Page: Showing Only What’s Needed
The landing page is designed to quickly inform users about the demo, allowing them to minimize cards to save screen space.
Location Indicators for High-Probability Coastal Debris Pollution
By hovering over the location indicators, users can preview details about each corresponding location.
When zooming in, the details, a legend along with the debris becomes visible.
The legend allows filtering on the minimal percentage of probability to only see what you are looking for.
The Details of the Debris: Information Viewers Want to See
The qualitative research indicates that users are interested in several topics related to debris pollution. This information can be detailed in an info card on the left.
Additionally, test participants mentioned having difficulty understanding the size of the debris. To address this, a reference object (a plane) has been added to help convey the scale.
Project roundup
Next steps
Finalize the style guide and hand it over to front-end developers.
Identify and implement quick wins for immediate improvement.
Prioritize proposed features and UX/UI changes while considering development capacity.
Personal learnings
Thanks for making it till the end! Perhaps you have a little longer to read how I reflect about my personal learnings in this project.
Keeping the scope small to keep the outcome feasible
One of the most important lessons I learned during this project is the importance of maintaining a manageable scope. When I completely lost sight of my end goal and felt overwhelmed by the amount of work, a mentor advised me to define the most realistically feasible user flow. This advice greatly helped me focus on delivering quality over quantity, rather than trying to do everything.
The importance of communicating progress and a good mentor
This leads me to another significant lesson: the value of surrounding myself with smart people whom I can consult when I lose perspective and sight of the end goal. Losing focus is a common pitfall in design, so it's essential to communicate progress throughout the project. This helps prevent bias, avoids endless cycles of revisions, and ultimately keeps me from becoming uninspired and unmotivated.
My thoughts on AI tools performing design work
With the emergence of AI technologies, there is a temptation to eliminate certain roles from the process. While I believe that AI will eventually handle many tasks, it is crucial for experts to maintain oversight. Just as I might miss mistakes in a line of code written by AI, developers might not notice the shortcomings of AI-generated visuals.
Image from Jeremy Bishop found at Unsplash