Internal Product • 2022
Mobile UX + Performance

Making Focal Hub
actually usable on mobile.

An incremental mobile + performance improvement project on a legacy internal operations platform. The goal was to make the Hub fast and usable on mobile without a full redesign (as a new Flutter app was planned for the future).

ROLE
UX/UI Designer & Product Design Lead
TIMELINE
6 weeks
IMPACT
Dramatically improved mobile usability & speed

PROJECT CONTEXT

Incremental improvements on a legacy platform

Until 2022, the Focal Hub had no mobile version at all — it was completely desktop-only and not responsive. The business needed a fast way to make the tool usable on mobile devices for field teams.

At the time, leadership had plans to eventually build a brand new app in Flutter. Because of this, they asked for targeted improvements rather than a full redesign or architectural overhaul. The brief was clear: make the Hub significantly faster and mobile-friendly while keeping the existing foundation intact.

Interestingly, it is now 2026 and the new Flutter app has not yet been built. The improvements delivered in this project are still in active use and continue to support daily operations across multiple agencies.

Key outcomes

~70%
Faster perceived load times
No more waiting 30–60 seconds with zero feedback
Zero
Unwanted iOS zoom on inputs
Text size increased + proper mobile form handling
1
Clear entry point for new users
Automatic agency/branch selection popup

THE CHALLENGE

The hub worked on desktop.
It was painful on mobile.

Focal Hub is the central internal tool used by operations teams to manage orders, appointments, photography, and 360° smart viewings across multiple agencies and branches.

While functional on desktop, the experience on mobile was broken:

  • Text in input fields was too small → iOS would automatically zoom in, breaking the flow
  • No visual feedback when selecting agency and branch (background task could take 30–60 seconds)
  • The system loaded all 500–700 orders at once, making every page slow
  • Confusing navigation structure (To-Do List, Current Orders, Previous Orders as separate top-level items)
  • Search only worked within the current tab — no way to search globally
  • Inconsistent tap targets and interaction patterns

RESEARCH & INSIGHTS

Understanding the real friction

I spent time using the existing hub on an actual iPhone (the same device our field teams use). This revealed several critical issues that weren’t obvious from desktop testing:

1. No loading states = confusion

When an admin selected an agency and branch, a heavy background query ran with zero indication. New users had no idea what was happening.

2. Everything loaded at once

The app was fetching hundreds of orders on initial load, even when the user only wanted to see “Current Orders”. This made the entire experience feel sluggish.

3. Navigation didn’t match mental models

Users thought of orders as one thing (with different states). The current IA treated To-Do, Current, and Previous as completely separate sections.

DESIGN APPROACH

Mobile-first, performance-first, clarity-first

I approached this as both a UX and performance problem. The goal wasn’t just to “make it look good on mobile” — it was to make the tool genuinely pleasant and fast to use on the devices people actually use in the field.

Key design decisions

Restructured Information Architecture

Grouped To-Do List, Current Orders, and Previous Orders under a single Orders section. Renamed “To-Do List” to “Requiring an Action” to better reflect the user’s goal.

Infinite scroll + smart loading

Replaced traditional pagination (which was just hiding already-loaded data) with true infinite scroll. We now load ~10 orders at a time as the user scrolls, dramatically reducing initial load time.

Global search

Added a persistent global search in the header that works across all order states. Users can now search from anywhere — including the Create Order page — without navigating away.

Mobile-first component system

Increased tap target sizes, improved form input sizing to prevent iOS zoom, added clear loading states, and made every interactive element finger-friendly.

Clear entry point for new users

Introduced an automatic “Select agency and branch” modal on first login for admin users. This removed the hidden knowledge requirement that previously existed.

SOLUTION HIGHLIGHTS

What changed

BEFORE
  • 500–700 orders loaded on every page
  • No loading indicators
  • Text too small → constant zooming
  • Confusing top-level navigation
  • Search only worked per tab
AFTER
  • ~10 orders loaded initially + infinite scroll
  • Clear loading states everywhere
  • Proper text sizing + no unwanted zoom
  • Clean “Orders” section with clear states
  • Powerful global search from anywhere

BEFORE & AFTER BY SCREEN

Detailed improvements across the mobile experience

Here’s a closer look at the key screens and interactions we transformed, shown side-by-side.

Create New Order / Home Page

Before and After: Create New Order page on mobile
BEFORE

No mobile-friendly layout. Elements were too small — users had to zoom in to click anything.

AFTER

Mobile-friendly layout with bigger tap targets. Added a dedicated mobile menu and global order search in the header.

Mobile Menu & Navigation

Before and After: Mobile menu and navigation
BEFORE

No functional mobile menu. The menu was broken on mobile.

AFTER

Dedicated mobile menu with clear structure. Grouped To Do List, Current Orders and Previous Orders under a single “Orders” section.

Order Listing Page

Before and After: Order listing page on mobile
BEFORE

No mobile-friendly layout. Pagination didn’t actually paginate — the site loaded all ~700 orders at once.

AFTER

Clean mobile layout. “Requiring an Action” (formerly To Do List) is now the default landing page inside Orders. Infinite scroll loads ~10 orders at a time. Every order card is fully tappable. Statuses are clearly colour-coded (In Progress / Complete / Error).

Order / Property Page

Before and After: Order detail page on mobile
BEFORE

Mobile button in header wasn’t working. Products were squeezed and broke onto multiple lines. Videos and matterport views were not showing properly on mobile.

AFTER

Full mobile-friendly layout. Order ID, reference and property type are clearly shown under the address. Product tabs now take full width with horizontal scroll. Videos and matterport views display properly on mobile.

Create Order Flow

Before and After: Create Order step on mobile
Before and After: Product selection in create order
BEFORE

No dedicated mobile view. Users had to zoom in to read and interact with forms and product selection.

AFTER

Inputs take full width. Clear step indicators added. “Select” buttons much larger. Product listings show side-by-side with better spacing.

Loading States & Agency/Branch Selection

Before and After: Loading states
Before and After: Agency and Branch selection loading
BEFORE

Almost no loading indicators. Selecting or changing agency/branch showed zero feedback during heavy background tasks.

AFTER

Added subtle skeleton-style loading effects. Agency & Branch selection now shows persistent loading state until data is ready.

Global Search

Before and After: Global search on mobile
BEFORE

No global search. Search only worked within the current tab.

AFTER

Powerful global search available from anywhere. Instant results across all order categories with clean result cards.

Account Menu & Appointments

Before and After: Account menu on mobile
Before and After: Appointments page on mobile
BEFORE

No dedicated mobile layout for account menu. Appointments page had poor formatting on mobile.

AFTER

Agency & Branch moved into account dropdown with larger buttons. Appointments redesigned as a clean, scrollable timeline.

RESULTS & IMPACT

The tool finally feels fast and usable on mobile

While we didn’t run formal usability testing due to time constraints, the qualitative feedback from internal testers and early users was consistently positive:

  • “Finally feels like it was made for mobile.”
  • “I can actually find orders without waiting forever.”
  • “The new search is a game changer — I don’t have to go to the orders page first.”

The biggest technical win was moving from loading everything upfront to a more thoughtful, progressive loading strategy. This change alone made the entire product feel significantly more responsive.

REFLECTION

What I learned

This project reinforced how much perceived performance and clarity matter — sometimes more than visual polish. The biggest improvements came from:

  • Reducing the amount of data loaded upfront
  • Adding clear, immediate feedback for every action
  • Aligning the information architecture with how users actually think about their work

One thing I would do differently next time is involve more real users earlier in the process for quick validation, especially around the new navigation structure and naming (“Requiring an Action”).

Overall, this was a great reminder that even internal tools deserve thoughtful design — and that small, targeted improvements can have an outsized impact on daily work.

STAKEHOLDER FEEDBACK

Real feedback from senior leadership

HB
Head of Business Applications
Internal feedback after demo
“Thanks for this. Looks great and from the looks of it the speed should be noticeably faster! Making the Hub faster and mobile friendly is a significant milestone which enables us to start our campaign of directing customers to the Hub where they can self-serve.”
TB
OPS Director
After reviewing the documentation and video
“I’ve been through the docs and the film, thanks for all the effort in putting this together. There is so much to like about it!”

These improvements are still actively used in 2026, four years after delivery, which speaks to the lasting value of the work.

KEEP EXPLORING

See next project or jump back

PREVIOUS PROJECT

Vixel

NEXT PROJECT

OBD2EU

Want to see more?

I’d be happy to walk you through the full process, show more screens, or discuss how I approach similar challenges.

Get in touch