Hubble - A Reporting System for Ocean Wise

UX, UI & Product Design

Label Mislabel/Misuse Identification

Hubble is a reporting system designed for Ocean Wise to solve their reporting problems, allowing their users to report via the mobile app on the go. With the help of Hubble's centralized system, their admins can identify the reported violators in a more organized manner.

This project is created for the 2018 Vanhacks hackathon. I participated as a solo designer in a team of developers to create Hubble. The design process explored the possibilities on how can Hubble be integrated better to Ocean Wise with a good UX. Our Team were placed at the top 10 finalist out of 36.

View Pitching Deck

Hackathon Competition

Vanhacks 2018 - Social for Good

Acting Client

Ocean Wise


Ece - Web app, Glen - Backend + S3, Demian - Backend + Team Lead, Andrei - Mobile app, Cody - Mobile app

My Role

UX/UI, Product, Visual, Integrated design


A weekend in Fall 2018

Github Open Source


Hubble - A Reporting System for Ocean Wise

Ocean Wise

Overfishing is one of the biggest threats our oceans face today. The Ocean Wise symbol next to a seafood item is the assurance of an ocean-friendly seafood choice.

Ocean Wise has strict guidelines on the use of the Ocean Wise recommended label both in print and electronic publications, making it easy for consumers to identify the sustainable seafood choices.

Ocean Wise Logo


Hubble - A Reporting System for Ocean Wise
Integrating Hubble into Ocean Wise App based on the problems

Business Side

Ocean Wise wants a better digital transformation for their existing “report label mislabeling/misuse” program. They want to make the current web form of the program more user-friendly, so people can be encouraged to report the violators, easily and effectively; also, eliminated the internal labour on emails and forms to identify the violators.

User Side

How do we make the user care and identify label mislabel/misuse?

  • Average users/consumers don’t have a clue to identify who is who from the certified vendors VS violators.
  • Consumers don’t know their values or impacts on making sustainable seafood choices

Design the UX/UI + Integration

I worked closely with front-end developers in providing them with the UI, Visual and Graphic assets to support this project. In addition, I designed the UX to integrate Hubble and Ocean Wise.

Hubble + Ocean Wise Information Architecture
Hubble’s System Architecture
Hubble + Ocean Style

UI Visual Design

Hubble - A Reporting System for Ocean Wise

About Vanhacks

VanHacks is an annual hackathon organized by ViDIA dedicated to helping those helping Vancouver community. They call designers/developers to join them over a weekend to create tech solutions that solve challenging issues faced by Vancouver community's not-for-profit institutions whose aim is to do social good. All hacks are encouraged to be published as open source so that communities around the world can benefit.

View More