FACILITATION / WEB & APP DESIGN
Website/App- Optimization
for the Analysis of Marine Data
Creating dashboard and app according to users’ needs
ROLE
UX/UI Designer
Visual design,
Prototyping,
Interaction
Hazel Tong
Cat Yu
Sheena Chan
Niall Sheedy
Lovina Chandiramani
2 Weeks
(Apr 2021)
TEAM
DURATION
The Challenge
The current information on the website and mobile app is not sufficient for researchers to facilitate effective management of data transmission. A dashboard shall be created so that users can quickly gain insights into the most important aspects of their data.
Project
Background
Client
Sector
MY ROLE
Open Ocean Camera (OOCAM)
Research
-
Structuring Interview Questions
-
Wireframing and Interface Design
-
Design of Camera Control Panel
-
Development of Web Version Dashboard (File History)
Overview
Open Ocean Camera (OOCAM) started off as a University project of a bunch of enthusiastic students that wanted to make a change. As they discovered how underwater research is a very time consuming and difficult process, they started OOCAM to bring this camera tech into the world and provide an AI solution to help scientists sort data cheaply and quickly.
Basically they provide 2 services:
-
selling & renting services of OOCAM
-
open source platform: building a database of marine life images for researchers to perform AI searching
Process
We started to build the archetype based on the information provided by the client, and visualize the journey map before we worked on the wireframes and prototypes.
Research
Research
During our meeting with the founder, Sidhant Gupta, and Co-founder, Utkarsh Goel in their HKU office, we learnt about some existing problems of their website and app include:
- The 2 products cannot provide a holistic experience for marine researchers
- The user interface of 2 products is not intuitive
PAIN POINTS
We synthesised their responses and identified the following pain points:
- Lack of customisation in the report / dashboard
- Insufficient notification for users with changes of their account, camera, etc
- There is no way to trace the file uploaded history or perform file management
Persona
We found patterns in users perceptions and tasks and aggregated our findings in the form of a persona.
Client said this is exactly the accurate representation of their key audience segments and it truly reflects the users' needs, experiences, behaviours and goals.
HMW
We created 4 "How Might We" questions based on the pain points we consulted user feedback from the client.
-
Translate & Visualise the raw data into useful information?
-
Optimize the dashboard of the OOCAM control panel?
-
Allow users to track history of data/files uploaded?
-
Encourage researchers to engage in the community and actively upload more images for database enrichment?
Design Goals
Information
Architecture
Iteration
Solution
Aside from the website, we focused on developing a well designed app and web-version dashboard which allows users to perform 3 major tasks:
-
camera setting
-
checking of photos/videos upload history
-
AI search of marine life image
Regarding to the setting of camera, it will be very helpful if presets of shooting modes can be saved for users' future usages. Images or videos captured by the camera and sensor data collected would also be displayed in a systematical way that researchers can check the graph or chart with data generalized by AI analytics.
Wireframing
MVP
Usability Test
Usability Test
The usability test was conducted through zoom meeting with clients in order to evaluate the product and identify opportunities to improve the user experience.
They mentioned a few points:
- species classification of marine creatures shown on the analytics is not needed as the AI tool would mainly identify manta rays, jellyfish and turtles, remaining creatures would mostly be fish.
- Glassmorphism effect is not needed, as it maybe a bit distracting. Potential users of the website and dashboard would prefer very clean interface so that they can understand the statistics very easily.
- the of FAQ section suggested by our team was helpful
With the feedback collected from users, we revisited our work and made necessary changes for modification of the website and the dashboard.
The Product
What I have learnt
Reflection
As the users are mainly researchers or scholars, we focus on making simple UI and try to enhance readability to understand all data rather than using an attractive or trendy user interface. With a problem-solving mindset, we helped our clients to create designs that are aesthetically pleasing, technically refined and easy to use.