SeaClear

Human computer interaction project focused on making beach water quality information easier to access, understand, and act on.

HCI Usability Accessibility Flask Information design Documentation

Overview

SeaClear is a group-built HCI system designed to support beachgoers by improving the clarity and usability of water quality information. The project focuses on communicating environmental health content in a user-friendly way and providing tools for engagement through reporting and education.

My contributions

My work focused on page design, information structure, and improving user flows through heuristic-guided iteration.

HCI approach

Because SeaClear is an HCI-focused project, I helped keep the experience consistent by ensuring design decisions followed usability principles and heuristic guidelines. I prioritised clear navigation, meaningful feedback, readable information structure, and predictable user flows across pages.

Usability heuristics Consistency Meaningful feedback Clear navigation Information structure

Homepage revamp + map integration

I improved the home page layout and information structure, including beach card layout improvements, better placement of the map widget, and homepage carousel enhancements to support a smoother entry experience for users.

Layout changes Beach cards Map widget Homepage carousel

News page + carousel

I designed and implemented the News page structure and contributed to the homepage News carousel. I also sourced relevant news content to support credibility and create a clearer narrative around water safety and environmental context.

Page design News carousel Content sourcing Navigation UX

Education page content and structure

I helped design and structure the Education page into clearer sections and sourced content that explained water quality impact in a practical way, including waterborne illnesses, public health risks, and economic impact. I also supported multimedia through video links.

Educational UX Content design Multimedia Clarity-first

About page

I contributed to the design and structure of the About page to improve credibility and help users understand the motivation and goals of the platform.

Trust building Information structure

Community reporting feature

I built the user-facing community report flow, including the reporting form and beach selection dropdown, and connected submissions to backend handling so reports could be saved correctly.

User reporting flow Form design Backend integration

Base UI and navigation improvements

I improved general navigation and UI consistency across the site, including navbar updates, clearer navigation controls, and improved flash messages to reduce user confusion during key actions.

Navbar UX Flash messaging UI consistency

Documentation and QA

I authored test cases to validate key user flows and contributed to project documentation, including parts of the report and a user manual. This improved evaluation quality and strengthened maintainability.

Test cases User manual Project report QA thinking

What I learned

SeaClear strengthened my HCI approach to software. I learned how to translate usability thinking into concrete changes across navigation, information structure, and interface flows. I also learned the value of content design and credibility in systems that communicate public health information.

HCI mindset Usability iteration Information design Trust and credibility
Back to Projects
d