Moola

The brief came with the UX already done: wireframes for a My Accounts screen, a Current Account screen and a My Spending screen, each at mobile and desktop. My job was everything visual. Define a brand for a new bank called Moola, then design the three screens in high fidelity and make them work at mobile, tablet and desktop.

• brand identity: define a personality for Moola and apply it everywhere
• UI design: three polished, high-fidelity screens
• responsive design: one experience across three sizes

Before any pixels, I wrote down what Moola should feel like.

• Playful. Using the product should be a joy. Colour, animation and shape carry personality, never at the cost of being intuitive.
• Clear. It is people's money. Information is presented uncluttered, and white space does a lot of the work.
• Trustworthy. The presentation has to convey that the money is safe.

Each word got its own moodboard, so the tone existed as pictures as well as a sentence.

With the tone set, I collected references for each part of the visual system: interfaces, colour palettes, typography pairings, shapes and iconography. The point was range. Seeing bright, rounded, gradient-heavy work next to restrained banking UI made it easier to pick a position between the two than to drift to one end.

The style sheet fixes the choices: a purple-to-pink brand gradient with turquoise, green and blue as accents; Figtree at every heading and body size; soft, rounded buttons in filled, outline and ghost variants; alerts; a small set of brand icons; and semantic tokens for foreground, border and state colours, so the palette stays consistent and checkable.

Two decisions did most of the work. Colours were built in HSL, which made a systematic, contrast-checked palette straightforward. And mobile navigation uses a standard tab bar rather than a hamburger menu, so the main features are always in view.

The final designs for My Accounts, Current Account and My Spending at all three sizes. The desktop uses a persistent left rail and two columns, the tablet keeps the rail and stacks the cards, and the phone moves navigation to a tab bar and leads with the balance.

What the brief taught: a methodical process, from tone to tokens to pixels, beats reacting quickly. Contrast checking and legible type are not optional, and HSL made an accessible palette easier to reason about. The interesting part was the balance between a distinctive identity and the conventional patterns that make a bank feel safe.