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
www.seafood.ocean.org

Team

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

My Role

UX/UI, Product, Visual, Integrated design

Time

A weekend in Fall 2018

Github Open Source

vanhacks-hubble/python-hubble.org

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

Problems

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

Business Side

Ocean Wise wants a better digital transformation for their existing “report label mislabels/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 the use of emails and form to identify the violators.

User Side

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

  • Average user/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 for making the 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 between 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 designer/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 open source so that communities around the world can be benefited.

View More