← All projectsNext: Greater Western Sydney Advocacy Network →
Beach Safety
UX / UI Case Study · Mobile app · Gold Coast, QLD

The Beach Safety App

An interactive mobile app for the Gold Coast that provides real-time updates on tides, flagged swimming zones, rip currents and shark sightings — alongside a map of lifeguard stations and accessibility features. With push notifications, multilingual support and offline access, it helps locals and tourists stay informed and enjoy the beach safely.

Real-time conditions Push notifications Multilingual Offline access
Watch the prototype
1:26 · app walkthrough
Platform
Mobile app
Client context
City of Gold Coast beaches
Deliverables
Wireframes, prototypes, hi-fi UI, dark mode, design system
Tools
Figma, FigJam
01 — Project Overview

A safety gap at Gold Coast beaches

Gold Coast beaches attract large numbers of locals and tourists each year, yet incidents — especially those involving rip currents — remain common, particularly among visitors and infrequent beachgoers.

Although safety information exists, it is fragmented across signage, websites, surf apps and lifeguards, making it difficult to access clear, timely guidance for safe decision-making.

Where safety information lives today
Beach signage
Council websites
Surf apps
Lifeguards on site
One reliable platform
Splash screen and beach-type question screen Accessible beaches map and Burleigh Heads beach page
02 — Goal

Choose the right beach. Enjoy it safely.

To provide a single, reliable platform where users can easily access clear, up-to-date information about Gold Coast beaches — safety conditions, facilities, accessibility features and nearby amenities — so they can choose the right beach and enjoy it safely and confidently.

Beach features grid and features map
Now tab showing live beach conditions
03 — What does the app do?

Everything you need, in one place

The app helps people easily find the right beach on the Gold Coast by providing clear, up-to-date information in one place. Users can quickly check:

Location & distance

Beach location and how far it is from you.

Safety

Hazards and lifeguard availability.

Conditions

Weather, tides, surf and water conditions.

Facilities

Toilets, drinking water, playgrounds and baby change areas.

Accessibility

Ramps, accessible toilets and paths.

Around the beach

Photos, plus nearby cafés, restaurants and local businesses.

Forecast and details screens with tides and lifeguard patrols
04 — Who is this app for?

Five kinds of beachgoer

Tourists

Easily explore Gold Coast beaches with a map showing locations, distances, safety conditions and nearby places to eat or visit — so they can choose the best beach with confidence.

Families

Quickly find safe, family-friendly beaches with playgrounds, toilets, baby change facilities, drinking water and clear information about risks and hazards.

Local surfers

Check tides, forecasts, water conditions, lifeguard coverage and surf-related hazards before heading out — all in one place.

Walkers

Find beaches with safe walking paths, nearby toilets, drinking water stations and low-risk environments for relaxed walks.

Mobility needs

Easily identify beaches with accessible paths, ramps, toilets and nearby amenities — removing uncertainty before you arrive.

Nearby shops tab and Surfers Paradise beach page
05 — Design Process

From scattered info to one app

01
Inspiration
02
Wireframes
03
Low-fi prototype
04
Usability test
05
High fidelity
06
Dark mode
Inspiration

After careful investigation, we gathered apps and sites holding fragmented beach information that we could bring together in our design.

Inspiration: existing beach apps and organisations
Wireframes
Annotated wireframe flow, sections 1 to 12
Low-fidelity prototype
Low-fidelity prototype screens
06 — Usability Test

Users needed an anchor point

After completing the mockup and testing it with different users, we added the Home, Discover, Services and More pages. Users needed an anchor point that provided centralised information.

Finding 01

Users tried to press the icon buttons on Features.

Finding 02

A user suggested a dog-friendly beaches category.

Finding 03

A user asked what “Live” meant.

Usability notes with wireframes, and the resulting Home, Discover, Services and More pages
New Home, Discover, Services and More pages
07 — High Fidelity

The final screens

Splash, beach questions and accessible beaches map
Beach pages for Surfers Paradise, Main Beach and Coolangatta
One template, every beach

Each beach page follows the same structure — location, quick actions, conditions tabs, photo, then features, map, live and events — so users learn it once and use it anywhere.

08 — Dark Mode App

Same brand, after dark

Finally, I created a dark mode version of the app while keeping the branding.

Dark mode features screen and splash
09 — Design System

Built to scale

Colours
Primary
#006F80
On-page
#6ED3E8
Secondary
#000000
Neutral
#7E8485
Feature accents

Each feature category has its own colour, so facilities are recognisable at a glance on lists and maps.

Typography · Inter · base 11 · ratio 1.333
H1 · 23px
Burleigh Heads
H2 · 16px
Most popular beaches
H3 · 13px
Lifeguard patrols
P · 11px
The Esplanade, Burleigh Heads QLD
Button states
Normal Hover On-click On-page
Design system: typography, colours, buttons and icons
10 — Spacing

A consistent rhythm

8px · gutters between tabs
12px · feature icon spacing
16px · padding and image margins
24px · page margins and row spacing
32px · section spacing
Spacing guide on beach page and Now tab
All projects
Next project: Greater Western Sydney Advocacy Network →