ROHIT SINGHIndependent Designer

WorkWeb & UI/UX

Tideline

A calm tide-planning app for open-water swimmers, where the tide curve itself is the interface.

Discipline
UI/UX design
Year
2026
Three phone screens from Tideline, a fictional tide-planning app for open-water swimmers, on a deep kelp-green ground crossed by a tide curve.

01Context

Tideline is an imagined app for people who swim in the sea. Swimmers tend to piece together a decision from a tide table, a wind forecast, and a local message group, usually with cold hands.

I picked this subject because it is a real test of hierarchy: there is a lot of data, but the person holding the phone has a single question.

02Objective

Reduce a screen full of numbers to one answer: when is a good time to get in? Then make the supporting detail available for anyone who wants to check the reasoning.

Everything had to remain readable outdoors, in glare, on a phone held at arm’s length.

Creative direction

Answer first. Evidence second.

The first thing you read is a sentence. Below it is the time window in very large type, then the curve that explains it. The order mirrors how a local swimmer would tell you: “Good this morning, get in before quarter past nine.”

A single warm signal color marks the swim window and the current time, and nothing else, against kelp, foam, and sand.

03Design approach

  1. 01

    One question per screen

    I mapped the journey as a series of questions before drawing any interface. Each screen answers exactly one, which removed about half the features I first assumed it needed.

  2. 02

    Designing the curve

    Tide data is usually a table. Drawn as a single continuous line with a shaded window, it can be understood at a glance, and it became the core graphic of the whole product.

  3. 03

    Honest about what it doesn’t know

    Screens state when conditions were last checked, and show a clear “no safe window” rather than an optimistic blank. In a product like this, restraint is also a safety feature.

User flow of Tideline: five low-fidelity phone wireframes connected by arrows, each labeled with the question the swimmer is asking.
User flow, drawn as the questions a swimmer asks.
Specification drawing of Tideline's tide curve, with a shaded swim window, a current-time marker, and annotations explaining each decision.
The tide curve, and the reasoning behind it. Sample data only.
Dark blue open sea seen from above, with white foam running across the surface.
The palette began with colder, darker water than most swimming apps admit to.

04Typography & color

The system

  • Kelp

    Ground and text

    #10302C

  • Foam

    Main screens

    #E9EFE6

  • Wet sand

    Planning screens

    #D9C8A6

  • Signal

    Window and now-line only

    #E4674A

  • Instrument Serif

    The plain-language answer

    Good window

  • Manrope ExtraBold

    Times, large

    07:40 – 09:15

  • IBM Plex Mono

    Labels and units

    WATER / 14°

Tideline on a tablet and a phone: the larger screen shows the curve and the spot notes together.

On a tablet, the curve and conditions share one view.

The phone is the primary device, since that is what comes down to the beach. On a tablet the extra width is not filled with extra features: the same answer sits beside the same evidence, without needing to scroll.

05Final design

Where it landed.

Tideline ended up with fewer screens than I expected, which I take as a good sign. The core of the concept is a hierarchy decision rather than a visual one: say the answer first, in words.

This is a concept study with sample data. It has not been built, tested with swimmers, or validated for safety, and it should not be read as a working product. It shows my process for structuring a data-heavy interface.

Photography from Unsplash: Michael Benz.

Next project

Perrin House

Website design

Like the way this was approached?

Let’s talk aboutyour project.

Your project would get the same attention to detail. Tell me about it, and I’ll get back to you about the next steps.

Request a Project QuoteView My Services