Gaining investor interest with an inspiring prototype of potential features
user research
UX review
UX strategy
UI design
dashboard
green-tech
Summary
Goals and challenges
Define stakeholder’s needs to redefine existing interactions and new features to add to the roadmap
Gain more interest from investors through making an interactive prototype that communicates the company’s vision and their technology’s potential
Redefining the visual appearance of the brand to be more modern
Results
Increased interest from investors
Added several interaction improvements and features to the company’s roadmap to implement for 2024
Designed an initial branding and style guide that communicates a more modern look
Learning
Limited resources made it challenging to implement new features or improve interactions on their own. This highlighted the need for a strategic pivot: partnering with companies that could benefit from the technology. These partnerships would not only make the technology more desirable but also help the startup focus its capacity on its strengths.
This experience underscored that product design isn't just about creating solutions but also about recognizing when collaboration and strategy are necessary to make technology impactful and sustainable.
Background
Ocean Eco Watch
Ocean Eco Watch maps and aims to 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.
The challenge
As described above, a design brief has been defined, through an intake with the client to align our expectations. After developing the technology and implementing an initial interface, the company needed more investments. Their strategy was to communicate their vision of their product’s future and the potential of their technology. They needed to understand, the market, their users and clients, to define the next features to be build.
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 with the existing prototype that provided a list of usability issues. In a later stage, a Figma prototype was created to test new ideas and measure the need of the new functionalities and features with qualitative data.
Research
Initial designs and painpoints
Based on the survey, the user interviews and usability test of the initial design, several insights have been summarized below.
Users mention that they perceive the current design as unprofessional and outdated.
Users experience unintuitive progression and visualisation of information.
Lacked visual hierarchy and intuitive information progression.
Overloaded with information at once, without distinguishing importance levels.
Ineffective use of real estate, such as an unnecessary legend when no debris is shown.
Plastic patch visualisation concepts were confusing and inconsistent.
Users are not motivated to revisit, due to a lack of:
Engaging interface features
Compelling content topics
Key desired features and content
Flat map view: Option to toggle between a globe view and a simplified flat map
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.
Timeline of plastic patches: Track the development, sources, and movement of plastic patches over time.
Design
Userflow and lo-fi wireframes
Scoping down the project
The user flow illustrates how users navigate through the prototype of the redesign and suggests some of the ideated features, while maintaining a feasible scope for the project timeline.
Exploring compositions and interactions
Competitor analysis & 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.
Solutions
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.
The details of the debris: information viewers want to see
The qualitative research suggests 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
Feedback
“The prototype appears to be a great tool to communicate a potential vision and make our ideas more tangible, such as more logical interactions and a greatly improved dashboard’s real estate and visual hierarchy. Moreover, it has inspired us to determine new features for our roadmap.” - OEW founder
Next steps
Evaluate initial business goals and rethink the strategy and prioritisations.
Identify and implement quick wins for immediate improvement.
Prioritize proposed features and UX/UI changes while considering development capacity.
Finalize the style guide and hand it over to front-end developers.
Personal learnings
Thank you for making it till the end! Perhaps you have a little longer to read how I reflect about my personal learnings in this project.
The intersection of product design and business strategy
Working with this startup taught me the importance of aligning product design with strategic goals. The project started with exploring ways to make their technology relevant and meaningful through user research. Based on insights, it became clear that to design a product that:
Makes their technology relevant,
Raises awareness and informs users, and
Can be implemented with their current resources,
a clear vision of the user problem and the functionalities needed to address it was crucial.
However, designing a desirable product was only part of the solution. Limited resources made it challenging to implement new features or improve interactions on their own. This highlighted the need for a strategic pivot: partnering with companies that could benefit from the technology. These partnerships would not only make the technology more desirable but also help the startup focus its capacity on its strengths.
This experience underscored that product design isn't just about creating solutions but also about recognizing when collaboration and strategy are necessary to make technology impactful and sustainable.
The importance of communicating progress and a good mentor
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.
