Gaining investor interest with an inspiring prototype of potential features
design system
Style guide
UX design
UI design
illustrations
Saas
web 3.0
Summary
Goals and challenges
Define stakeholder’s needs and exploring 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 features to the company’s roadmap to implement for 2024
Improved the dashboard’s real estate and visual hierarchy
Designed an initial branding and style guide that communicates a more modern look
My role
User research
UX strategy
UX/UI design
Usability testing
Feedback
“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
Learning
Technology driven design can be tricky, if the team does not has the resources, such as capacity and knowledge, to add features that make the overall product engaging enough to get used. An inspirational design with feature suggestions could lead to ideas regarding the potential of the technology and potential clients and collaborations. Nevertheless, next time I will aim to design for valuable potential collaborations, and integrate this more into the final result.
Background
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.
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 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.
Role and collaboration
To align the vision and strategy and create a vision of ownership, it could be important to include the builders into the process. Therefore, developers were included with the user interviews and during co-creative session to define features. Besides, new insights have been regularly presented to gather feedback about feasibility and priorititsation.
Research
Initial designs and painpoints
Based on the survey and the user interviews, the initial designs have been reviewed and 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 wanted immediate access to the demo upon landing.
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 for a simplified flat map for better functionality.
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
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.
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.
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 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
Conclusions
Apart from the designs and the UX and UI recommendations to the company, it is advised to go back to the “why?” of the product. Throughout the project, the project scope and the product’s users were unclear, which makes design decisions more difficult. The technology alone is not enough to engage with the app. Next time I would focus on clean up organisations as users, as they have a functional purpose and would be good partners to continue developing the technology and expand from. Also, the data that comes available from visitors are more relevant and could benefit other processes and organisations. And another opportunity, is to build a community around it, which should be validated first.
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
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.
TO WRITE: clear business goals
…
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.
