Case Study

Tidewell

Self-Initiated UI/UX ConceptMobile + Responsive13 Screen States

The Project

Tidewell is a self-initiated concept for a mobile banking app built around everyday money tasks. It is fictional: there is no client and no real bank. The project is a 13-state clickable prototype designed around one idea, that clarity builds trust.

The Problem

How might a mobile banking experience make everyday money tasks feel clear, trustworthy and easy to navigate without overwhelming the person using it?

A design question I framed for this exercise. It is not based on research.

The Goals

  • See the balance and recent activity at a glance.
  • Make sending money short and hard to get wrong.
  • Show security as visible reassurance, not a buried setting.
  • Handle errors, empty states and loading honestly.

The Thinking

  • Send Money is the hero flow. It combines a person and an amount, so it needs the most confidence.
  • One primary action per screen, in plain, human wording.
  • Four tabs: Home, Activity, Payments and More keep navigation predictable.
  • Balance first. The most important number gets the most visual weight.

The Process

  • Framed the design question and goals.
  • Mapped the product into four areas and a small set of 13 screen states.
  • Chose Send Money as the hero flow, with an error and a recovery path.
  • Set a visual system: deep ink, warm off-white and one deep green, with Bricolage Grotesque, Manrope and tabular numbers.
  • Built a clickable prototype and checked the flows myself.

No user research, interviews or usability testing were done. The checks were functional, not research.

The Interface

Eight of the 13 states, shown as they appear in the prototype.

The Interaction

Primary flow:

  1. Home
  2. Send
  3. Choose Recipient
  4. Amount & Review
  5. Confirmation

Error and recovery:

  1. Amount & Review
  2. Error
  3. Try Again
  4. Amount & Review

Inside the screens: Activity has search, filters, a skeleton loading state and an empty state. Cards has a freeze control. Pay a Bill and Create Account validate their fields. In Send, enter ₱60,000 to see the error state.

Design Decisions

Errors That Help

They say what happened and how to fix it, with an icon and text, never color alone.

Choice Cards

Radio-style cards for two or three options: recipient, transfer speed and biller.

Progress Where It Fits

Shown only in account creation, the one genuinely multi-step flow. Welcome has a skip.

Honest States

Skeleton loading and a clear empty state on Activity.

Readable Numbers

Tabular figures and consistent ₱ formatting keep amounts easy to compare.

Accessible Controls

44px touch targets, visible focus and On or Off text on switches.

Reflection

Tidewell shows how I approach hierarchy, forms, states and trust in a product where mistakes matter. Because it is a concept, it has not been tested with people. The next step would be usability testing of the Send flow.

Concept only. Tidewell is not a real bank, and no real data, users or results are shown.