Squirrel prioritises short-term financial clarity over traditional forecasting. Instead of asking users to interpret projections, it gives them one actionable view of their financial position: the Safe Spending Balance, backed by recent activity and scheduled payments for context.

That turns the task from analysing data into making a decision. Users get a clear, continuously updated number instead of having to work one out themselves.

The interface reflects this: key information sits upfront, with supporting detail revealed progressively to keep things simple without hiding anything.

I used two tools throughout: ChatGPT for product exploration and system thinking (drafting design system structures, variables, and documentation content, and refining language and accessibility considerations), and Figma Design and Figma Make to turn those ideas into layouts, components, and prototypes.

The usual sequence was: draft prompts in ChatGPT, generate first-pass screens and documentation in Figma Make, then refine everything by hand in Figma Design for consistency and usability.

The workflow was iterative, not automated. AI sped up exploration and early drafts, but I made every final call myself to keep quality and coherence under control.

The first step was defining the foundational rules of the interface: the visual and interaction primitives everything else builds on.

I used AI to explore initial structures for tokens, styles, and accessibility considerations, then refined them by hand.

The foundations cover colour, typography, brand, spacing, radius, elevation, and tone of voice, each combining tokens, styles, usage guidance, and accessibility principles.

Foundations in practice

• Colour defines brand, neutral, and status palettes with clear contrast guidance.
• Typography establishes hierarchy across headings, body text, captions, and microcopy.
• Brand defines how visual identity and tone are expressed across the interface.
• Spacing ensures consistent layout rhythm and accessible touch targets.
• Radius and elevation define surface hierarchy and component structure.
• Tone of voice ensures clarity, consistency, and accessibility in content.

Accessibility is built into these foundations directly: colour contrast, text readability, and touch target spacing, not treated as a separate layer.

With the foundations in place, the next step was building the reusable components: the actual building blocks of the interface.

I used AI to generate an initial component library in Figma Make, covering both components and the patterns they support, then refined the outputs into a structured, documented system.

The library includes core elements such as buttons, input fields, switches, icons, badges, and alerts, built for consistent reuse across the product.

Component structure

Each component is documented the same way: purpose and usage guidance, anatomy, variants and states, content guidelines, and accessibility considerations.

While components are reusable UI elements, patterns are how those components combine to solve recurring interaction problems, like navigation bars, top app bars, segmented controls, lists, and cards.

I developed these alongside the components rather than separately, refining both together as part of the same system design process.

Pattern structure

Each pattern is documented with purpose and usage guidance, anatomy diagrams, configurations, behavioural rules, and accessibility considerations.

Accessibility is a core part of the design system, not a requirement bolted on later. Squirrel targets WCAG 2.2 AA across foundations, components, and patterns.

Foundations handle colour contrast, typography readability, and touch target spacing. Components define semantic roles, keyboard behaviour, and screen reader support. Patterns handle focus management, interaction hierarchy, and predictable navigation.

I used AI to explore early accessibility considerations, then refined them into structured documentation.

With foundations, components, and patterns defined, I applied the system to build actual screens: not a complete product, but proof of how the system behaves in real use.

I developed layouts iteratively, using the approved components and patterns and following the accessibility and brand guidance already established.

Key screens

• Onboarding and bank connection
• Dashboard and safe-spending overview
• Activity history and scheduled payments
• Settings and security

Early layouts were generated from structured prompts in Figma Make, then refined in Figma Design.

I built interactive prototypes to show how the interface behaves across three key journeys:

• Account onboarding and bank connection
• Understanding the safe-to-spend balance
• Account settings and security management

I used AI to explore transition patterns, then implemented and refined them in Figma. Motion needed to feel calm and predictable, so transitions stay subtle and functional: guiding attention rather than adding visual noise. Bottom sheets, gentle transitions, and progressive disclosure keep financial information clear and timed to when users need it.