Martin Hall
UIUX Designer

Home View Projects
Zero Aareon Toyota Currys Integrity Commerce

Mar 2022 - Aug 2023

Aareon

aareon.co.uk

Housing management

Aareon provides SaaS tools that help housing associations and councils manage their homes and support tenants more efficiently. The system brings everything together in one place — from handling repairs and rent payments to managing tenancies and customer service. It also gives tenants access to self-service tools, so they can report issues, view statements, or update their details online. Aareon’s goal is to make housing services easier to run for staff and easier to use for residents, supporting both everyday tasks and long-term digital improvements.

Brand

Aareon

Role

UI/UX Designer

Location

Southampton, UK

Sector

Housing

The challenge

At Aareon, I was challenged with getting to grips with a wide range of processes across 10+ different software services, each designed for different formats—tablet, mobile, or desktop—with a mix of responsive and non-responsive designs. There were three standout challenges I faced, the first being the rigid legacy framework, which offered little flexibility and required me to modernise the UI within strict guidelines, ensuring improvements felt fresh without disrupting the existing system.

The second challenge was accessibility, as many of the products are used by elderly users and people with impairments, making inclusive, legible, and easy-to-navigate design a priority. The third was handling and presenting large volumes of data in a clear, cohesive way, which demanded careful attention to hierarchy, layout, and interaction design to keep the information usable and actionable across a broad range of users.

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.



Adobe XD


Angular


Photoshop


Illustrator


Asana


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 Aareon’s tech stack and design guidelines was key to ensuring my work was both practical and impactful. As a global company with a wide portfolio of software, it was essential to identify what was technically possible before moving into design.

I thoroughly explored each product to understand its purpose, audience, and constraints. This deep dive into the systems and business allowed me to create designs that aligned with technical capabilities, met user needs, and stayed consistent across Aareon’s suite of solutions.

Discovery

Insights

Evidence




Testing

With Aareon’s large global reach, testing played a vital role in the design process. Usability testing was a regular part of the role, often involving direct sessions with customers and operatives to see how they interacted with the software in real scenarios.

Accessibility testing was equally important, ensuring the products could be used by people with a wide range of needs, from those with visual impairments to users navigating the platform in different languages. This constant feedback loop helped shape designs that were not only functional but genuinely inclusive for Aareon’s diverse audience.

Assessment

Accessibility

Usability




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 Aareon, 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.

Branding

Scalability

Impact

Design system

When I began working on Aareon’s legacy system, I knew a full overhaul wasn’t an option. Instead, I focused on making thoughtful, incremental improvements within the existing framework. This meant carefully balancing the brand’s established colors, typography, and layout constraints with usability enhancements. I collaborated closely with developers and stakeholders to identify where subtle shifts in spacing, font sizes, and component styling could improve clarity and user flow without disrupting familiarity.

Once these boundaries were clear, I created a set of refined UI design system designed to be both visually cohesive and adaptable across the product suite. Using consistent spacing rules and updated text hierarchies, I was able to elevate the overall interface’s accessibility and readability. This approach ensured the legacy system felt refreshed and modern, while respecting the technical and business requirements already in place.




Style Guidelines
Atomic Design

Color pallette

Aareon’s colour palette was strict and one of the main boundaries I had to work within. I focused on making the most of the existing colours, predominantly using their signature navy blue, while ensuring visual clarity and consistency across all components and screens.

Custom icons

Although many icons were provided, I frequently created new ones from scratch. Aareon supplied clear artwork guidelines regarding stroke width, radius, and size, which I followed to ensure all icons remained consistent and aligned with the existing system.

Typography system

Aareon’s legacy system already had fonts in place, which I could not change, but their usage often lacked hierarchy and clarity. I took the existing typefaces and built out my own structured components, defining a hierarchy that I felt was more robust and meaningful. This approach improved readability and created a more consistent typographic system across the product.

Grids & Boundaries

Working within Aareon’s legacy system meant strict grids, padding, and boundaries were already in place. These constraints shaped much of the design process, but there were instances where I needed to define new grid structures to support modern layouts.

Accessiblity

Making my designs accessible was paramount, as many users were non-technical, elderly, or impaired. I paid close attention to clarity, readability, and usability across all screens. For colour contrast, I used tools such as WebAIM to test and refine palettes, ensuring compliance with accessibility standards while creating interfaces that were both inclusive and visually consistent.

Atoms

At Aareon, I built the foundation of the design system with a strict focus on minimizing scrolling for users. The atoms—buttons, inputs, icons, and typography—were carefully sized and spaced so they could combine into larger components without adding unnecessary vertical length. Every element was designed to stay compact, consistent, and accessible while supporting a scalable system that respected the platform’s rigid guidelines.

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 key housing information such as tenancy details, maintenance requests, and account summaries. Because the system is used daily by both staff and tenants, it was crucial that these components were not only visually consistent but also context-aware, ensuring users could access the right information clearly, quickly, and with confidence across the platform.

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 Adobe XD 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 applications, like onboarding, repairs, or management. 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 apps.

Templates

Templates were the next layer in the system and 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 apps.

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, you’ll find a showcase of the 10 different products I redesigned and worked on during my time at Aareon. Each highlights unique challenges, design decisions, and the impact these improvements had across the portfolio.

Connect

Aareon Connect is Aareon’s integration platform (iPaaS) that lets housing providers link their Aareon systems with third-party apps through secure, low/no-code APIs. It includes a partnership with Microsoft Power Automate so users can build automated workflows between Aareon and other business tools without custom coding.

Engage: Client Visit

Engage: Client Visit is Aareon’s mobile workforce solution that enables field staff to access tenant and property records, capture notes, photos, and signatures, and update job statuses on-site. It offers scheduling, route planning, and instant data sync with the office, helping teams reduce paperwork, improve efficiency, and deliver faster, more responsive customer service during and after visits.

Engage: Estate Management

Engage: Estate Management is Aareon’s platform for connecting estates, residents, and management teams through digital channels. It gives property managers and tenants access to services like onboarding, issue reporting, and communication in real time. By streamlining interaction and providing self service tools, it helps estates run more efficiently and creates a smoother experience for everyone involved.

Engage: Gas Servicing

Gas Servicing is Aareon’s mobile solution that enables engineers to carry out gas safety checks directly in tenants’ homes. Field staff can access property records, complete compliance forms, capture notes and photos, and record results on-site. The app ensures all checks are logged accurately and instantly synced with the office, helping landlords meet regulatory requirements, improve safety standards, and reduce paperwork while providing a more reliable service for tenants.

Engage: Tenancy Signup

Engage: Tenancy Sign Up is Aareon’s onboarding solution that streamlines the process of moving new residents into managed properties. It allows housing professionals to manage application data, verify records, and guide prospects through registration using self service portals and mobile tools. The result is faster placement, clear communication for all parties, and a more user friendly experience that reduces administrative effort for both tenants and staff.

Engage: Aareon 360

Engage: Aareon 360 is a comprehensive self-service portal designed for housing providers, tenants, staff, suppliers, and contractors. It gives tenants 24/7 access to tenancy details, rent accounts, repair booking, payment plans, income and expenditure budgeting, and communication tools—all from any device

Key impact

Here are some of the key contributions I made at Aareon, highlighting the impact of my work on product design, user experience, and accessibility. These examples showcase how I helped shape solutions that improved usability, supported business goals, and set the direction for new products, with full details provided in the projects below.

Helped

Aquisition

My work contributed to Fixflo’s decision to move forward with acquiring Aareon, showcasing the value and potential of our products during the evaluation process.

Digitally

Pioneering

I created the conceptual design for a new product set to launch in partnership with Microsoft Automate, shaping its core user experience and visual direction. This early design work helped establish a clear vision and functionality path before development began.

They said

Good Job

100% of customers and operatives reported my designs were more accessible and easier to use, improving satisfaction across the board.

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.

Product Designs

10

I worked on the redesign and improvement of 10 different products during my time at Aareon, ensuring each was modernised, more user-friendly, and aligned with our updated design system. This breadth of work strengthened the overall product suite and improved the experience for thousands of users.

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.

Time to Switch

Figma > XD

During this period Figma was quickly becoming the more intuitive and efficient design tool. I created a detailed use case and demo to clearly demonstrate why Figma would be the better choice for Aareon over XD. The initiative was successful.

From Old to Bold

A curated collection of before-and-after shots showcasing the transformation and improvements made across multiple products.


old
Estate Management App

bold
Estate Management App

old
Repair Works Order App

bold
Repair Works Order App

Learn more..

Visit website to see how my design work shaped the product experience.

View Website