AI AR Agent

USER FLOW
Before designing screens, I mapped the complete user journey to identify key decision points and edge cases — from first landing on the homepage to sending reminders and managing account settings.
The flow revealed three critical moments that shaped design decisions: the magic link confirmation state (what if the email doesn’t arrive?), the CSV upload error state (what if the file format is wrong?), and the delete account confirmation (irreversible action needs friction).
Mapping this upfront meant every screen had a clear purpose within the journey — nothing was designed in isolation.

DESIGN SYSTEM

Colour Pallete
The palette was built around the client’s brief and chosen with B2B SaaS conventions in mind — colours that feel trustworthy and professional without being generic.
Navy #000A33 anchors the UI. It carries authority without the harshness of pure black, and works across navigation, footer, and primary actions. Blue #004EE4 drives all interactive elements — CTAs, links, active states — giving users one consistent visual cue for “something you can click.” Using a single interactive colour means there’s no ambiguity about what’s actionable.
The supporting palette handles status communication without decoration. Success green #1D9E75 and destructive red #B10014 appear only where the meaning is genuinely positive or irreversible — a sent reminder, a deleted account. Light blue backgrounds #E4EDF6 and #F0F5FA create visual hierarchy between page background, cards, and interactive surfaces without adding noise or relying on heavy borders.

Typography
Two typefaces, each with a clear role. The pairing was chosen to balance character with legibility — important for a product where users need to move quickly through information.

Lato handles all headings. Its geometric structure works at large display sizes without feeling cold, and the slightly humanist details make it approachable rather than corporate. It gives the product a distinct voice without competing with the content below it.

Open Sans takes care of everything else — body copy, button text, labels, input fields, captions. At 12–14px it stays consistently readable across the dense parts of the dashboard, where users are scanning invoice numbers, email addresses, and status labels at a glance. It’s neutral enough not to pull attention, which is exactly what you want from a UI typeface.

The size scale has two sets of values — desktop and mobile — because the content hierarchy changes at smaller viewports. H1 drops from 72px to 38px not just to fit the screen, but to maintain the same visual weight relative to the surrounding elements. The body sizes stay consistent across both, since readability doesn’t need to change.