Martin Hall
UIUX Designer

Home View Projects
Zero Aareon Toyota Currys Integrity Commerce

Aug 2023 - Current

Zero

zero.co.uk

Sustainable Bank

Zero is a climate-first fintech offering free personal accounts and a debit card made from 95% recycled plastic. Its GreenScore® tool tracks your spending to help cut your carbon footprint. Unlike traditional banks, Zero avoids investing in harmful industries and gives 20% of its value back to users through a share scheme. Available on iOS and Android.

Brand

Zero

Role

UI/UX Designer

Location

Wales, Cardiff

Sector

Finance

The challenge

Joining a fintech startup with no prior experience in the sector, I faced the challenge of rapidly understanding a complex, regulated industry while designing user journeys that could compete with leading apps like Revolut, Monzo, and Starling.

As the sole designer, I was responsible for building and managing the entire design system from scratch — every UI component, interaction, and flow had to be carefully crafted to deliver a seamless and trustworthy experience, all while establishing a design standard that could scale with the product.

Toolkit

Below is a list of the tools and technologies I used to complete this project. Selected to support the design process, streamline development, and ensure a high-quality final outcome.



Figma


Flutter


Photoshop


Illustrator


Sharepoint


Miro

Focus areas

These are the key areas I focused on during my time in this role. While I likely had other responsibilities along the way, these stood out as the strongest and most impactful parts of what was asked of me.

They reflect the main UI and UX priorities for this position, from improving usability and maintaining visual consistency to ensuring the product met both user needs and business goals.




Research

Understanding the customer needs and competitive landscape is essential. Designing without this foundational insight risks misalignment, wasted time, and missed opportunities. As the sole designer at Zero, I worked closely with the product manager through multiple meetings and ongoing conversations.

She provided extensive documentation covering finance, Mastercard, Apple/Google Pay, and more. I also drew insights from 11:FS, a respected fintech consultancy known for its deep analysis of digital banking trends and customer behaviour, to ensure our decisions were informed and relevant.

Understanding

Fintech

Trends




Synergy

Collaboration is a vital part of my design process. As a UI/UX designer, I work closely with cross-functional teams to align on goals, share insights, and ensure consistency throughout the product.

I make it a priority to understand how each team communicates—whether through daily standups, async tools, or detailed specs—and adapt accordingly. Using Microsoft Azure for project tracking and documentation, I ensure all design decisions are clearly recorded so everyone stays informed and momentum is maintained throughout the project.

Consistency

Alignment

Flow




Wireframing

Wireframing is a crucial part of my design process, it allows me to map out the structure and functionality of a feature before investing time in high-fidelity visuals. By focusing on layout and user flow first, I’m able to identify complexities early, validate ideas quickly, and avoid unnecessary rework later in the process.

At Zero, I regularly held iteration meetings with the product manager to review wireframes, gather feedback, and make fast adjustments. This helped us align on the direction early and ensured smoother handoff to development.

Structure

Functionality

Iteration




Product design

This stage brings together all previous research, user journeys, and brand insights into a refined, functional product. I follow the Atomic Design methodology to build a scalable design system, ensuring consistency and adaptability across the app.

The process begins with low-fidelity wireframes—hosted on a dedicated canvas used collaboratively with the product owner to validate structure and functionality. Once flows are confirmed, I transition to high-fidelity designs on a separate canvas, serving as the single source of truth for developers. This space houses fully polished journeys, complete with visual design, interactions, and specifications ready for implementation.

Usability

Scalability

Impact

Design system

When I joined Zero, the brand already had a basic foundation in place—logo and color palette—which served as a good starting point. I used these existing assets as a reference point and began collaborating closely with the CEO and product owner to better understand the product’s goals and user expectations. These early discussions were critical in shaping the direction of the design system and ensuring it aligned with both the brand and business strategy.

My first step was to define the core style guidelines, including color usage, typography, iconography, and spacing principles. Once the visual language was established, I transitioned into building out the interface components using the Atomic Design methodology. This approach allowed for a modular, scalable system where elements could be reused and iterated on efficiently. The result was a layered, systematic design framework that provided both consistency and flexibility across the product. A visual snapshot of this layered structure is included below for reference.




Style Guidelines
Atomic Design

Color pallette

I extracted Zero's three primary brand colours and developed contrast chips to include in the style guidelines. By creating a range of faded variations for each, I established a more balanced and versatile palette for use in containers and background elements. Additionally, I introduced standard palettes for warnings, errors, and status indicators to ensure consistency across the product.

Custom icons

I created a custom icon sets tailored to Zero’s brand identity, focusing on subtle design choices that reflect the product’s tone and values. Attention to intricacies—such as stroke weight, corner radius, and visual balance—was key to ensuring consistency across the UI. These small but deliberate decisions helped elevate the brand’s personality and made the interface feel cohesive and polished.

Typography system

Zero selected two core typefaces to carry throughout the product: Segoe UI for body text and Plus Jakarta Sans for all labels and headings. Building on this, I developed a structured typography system that defined hierarchy, scale, and usage across all screen types. This font pairing was applied consistently throughout the entire app to maintain visual harmony and enhance readability.

Design kits

As the app was being developed for both iOS and Android, it was essential to adhere to each platform’s native design conventions. To support this, I incorporated official Figma UI kits for both platforms, ensuring I had access to all native components and interaction patterns.

Atoms

The foundation of the design system begins with atoms—the most basic, reusable UI elements. I built out all the core atomic components used consistently across the app, ensuring a single source of truth and visual consistency throughout the interface. These included elements like inputs, buttons, and base screen structures. While this is just a snapshot, the full system contains over 100 unique variations within the atom layer alone.

Molecules

Once the atomic components were in place, I began assembling molecules—groups of atoms that function together as reusable UI blocks. These included navigation menus, notification alerts, nested button groups, and containers used to display financial data like balances and spending. As this is a banking app, it was crucial that these components were not only visually consistent but also context-aware, ensuring users could access key financial information clearly, quickly, and with a sense of trust across all areas of the interface.

Organisms

After setting up the core components, I started building out organisms—bigger, interactive sections made up of things like dropdowns, side menus, and account overviews. These are the parts of the app users actually move through, so they had to work well across different screens and use cases. I set them up in Figma using nested components so I could easily update styles or layouts in one place and have changes flow throughout. This made it way quicker to keep things consistent as the app evolved.

Pages

The next step in my design system was building out reusable pages. These acted as templates for key journeys in the app, like onboarding, payments, or settings. Having these in place made it way faster to test and build new flows without starting from scratch every time. It also helped keep the structure consistent across the product, so users always knew what to expect no matter where they were in the app

Templates

Templates were the next layer in the system—similar to pages, but more focused on structure and reusability across repeated layouts. These were especially useful for screens that shared the same content setup but needed slight variations, like a success vs. failed state. By setting up templates with swappable components and messages, I could quickly create different versions of the same flow without rebuilding from scratch. This not only sped up design and development but kept things consistent across the app.

Low fidelity design

All user journeys and early concepts were captured within my dedicated ‘Low Fidelity’ board in Figma. Working closely with the Product Manager, she would provide end-to-end journey ideas which I would translate into structured flows. Depending on the complexity of the feature, I would either begin with simple wireframes or build full low-fidelity user journeys to explore layout and functionality.

This board served as a collaborative space exclusively for myself and the Product Manager, acting as an evolving archive of ideas, explorations, and iterations. It allowed us to quickly validate concepts, identify usability issues early, and maintain a clear record of the design evolution.

High fidelity design

After thorough exploration, user research, wireframing, and iterative low-fidelity design, I move into creating high-fidelity, developer-ready screens once concepts are signed off. These final designs include precise spacing, padding, and typography, fully prepared for smooth handoff.

Below, I’ve selected a few of my favourite screens to showcase—chosen for their complexity, design rationale, and overall visual execution. Feel free to explore them.

Key impact

Here are the key contributions I believe I brought to the company. While there may have been other areas where I added value, these stand out to me as the most impactful and easily translatable. They reflect where I was able to make a real difference—whether through improving user journeys, streamlining processes for developers, or helping the product meet external standards like Apple Pay’s strict integration guidelines.

Helped aquire

Funding

My initial prototype played a key role in securing early-stage funding from angel investors by clearly communicating the product vision and user value.

Keeping it

Slim

I focused on keeping our banking app streamlined and intuitive. For example, our onboarding journey was significantly shorter and simpler than those of most traditional banks.

Off-Brief

Tasks

Beyond my core role, I designed the company website, created marketing assets for social media, and provided broader design support wherever needed.

4 Weeks

Apple Pay

I designed the full Apple Wallet Pay journey and successfully delivered it four weeks ahead of schedule. Launching a month faster than many other banks in the space.

Journeys built

31

While working at Zero, I designed 31 end-to-end user journeys, covering everything from onboarding to advanced banking features.

Design

System

I developed a comprehensive design system from the ground up tailored to this startup’s unique features and visual style. This scalable system now ensures consistency, improves efficiency, and supports future growth across all product touchpoints.

Developer/Product

Collab

I established a clear and cohesive workflow that enabled seamless collaboration between the product owner, developers, and myself, improving communication and project efficiency.

Creating

Noise

My website design ranked number 4 on hubspot as an inspirational example of fintech design, highlighting its innovation and branding:
https://blog.hubspot.com/website/30-financial-website-designs-to-inspire-you

Beyond the Interface

A selection of marketing materials I designed to support the product launch, including debit card designs and other branded visuals.


Learn more..

Explore the Zero app or visit the website to see how my design work shaped the product experience. From onboarding and user journeys to branded visuals and marketing assets.

Download on Apple
Download on Android
View Website