MilesBetter

A UX Case Study

A wellness app and wearable integration for HGV drivers to support fitness, nutrition, and mental health on the road.

🔗Explore the full case study here

My Role:

I designed MilesBetter end-to-end — from conducting user interviews and developing personas to creating wireframes, information architecture, and high-fidelity UI. I led all UX and UI design, prototyping, and visual branding, iterating based on real user testing and feedback.

🚚Problem:

HGV drivers face unique health challenges — including long hours, limited access to fitness facilities, unhealthy eating habits, and social isolation. Existing wellness apps were too complex, inaccessible, or not suited to drivers’ on-the-go lifestyles.

💡 Solution:

MilesBetter is a mobile app designed specifically for HGV drivers. It provides simple, accessible tools to support mental health, fitness, and nutrition — with features that fit seamlessly into their daily routine, whether online or offline.

Key Features:

  • Quick voice or text onboarding

  • Wellness dashboard with fitness and nutrition insights

  • Buddy network for driver connections

  • Offline support for drivers on the move

🚚Wider Problem:

MilesBetter is a narrowed-down concept from the initial concept, which was an all-in-one app for HGV drivers, including: 

  • The facilities and fuel available at each station, with live price and parking updates. 

  • Ability to reserve parking in advance and switch it to another station if delays on the road

  •  Invoice and paperwork section 

  • Offline support and route updates- tailored to your vehicle. (weight, any restrictions etc.)

  • Driver/ manufacturer/ customer Slack channel to avoid navigation delays for the driver

  • Emergency support chat

During the process of creating the app and testing the product on users, I changed the scope and focus of the app.

🔍To see the full research proposal, please click here:

⚙️Design Process:

1. 💬 Value Proposition

Defined the core offering:

A wellness app tailored for HGV drivers that supports mental health, fitness, and connection — designed to work on the road, even offline.

2. 🎙️User Research

  • Conducted 6 semi-structured interviews with long-haul drivers

  • Developed a user interview script focusing on lifestyle challenges, current habits, and attitudes toward wellness tech

User Interview Script.

A targeted script designed to uncover the real-world challenges HGV drivers face around nutrition, isolation, and mental health, helping shape meaningful features like activity tracking, wellness prompts, and peer connection tools.

3. 👥Personas

Created detailed user personas based on patterns and pain points from interviews.
Example:

“Alan”, 61 – Veteran driver concerned about his health but struggles to stay active and often feels isolated. Wider concerns on the road include safety and efficiency (long delays and disruption).

Persona: Dave – The Motivated Maintainer.

A veteran HGV driver focused on improving his health without disrupting his routine. Dave helped shape features like hands-free voice mode, a wellness dashboard, and social tools, reflecting real concerns around mobility, isolation, and road-friendly nutrition.

Persona: Alan – The Roadwise Veteran.

With 40 years on the road, Alan values efficiency, routine, and safety. His needs influenced the development of features like route-based parking alerts, over-60 networking tools, and a centralized app to simplify job-related admin and enhance work-life balance.

Persona: Matt – The Everyday Grafter.

Matt represents younger full-time HGV drivers juggling family life, long shifts, and late-night parking issues. His feedback shaped dynamic parking updates, in-app rewards for wellness tracking, and simplified tools focused on clarity, safety, and family-first flexibility.

4. 🧠Information Architecture

Mapped out the app’s structure to ensure intuitive navigation:

  • Dashboard

  • Wellness Resources

  • Buddy Network

  • Settings

  • Help / AI Chat

Information Architecture – MilesBetter Wellness App

A structured sitemap outlining all core app sections, from wellness tracking to social features. This architecture balances simplicity with functionality, enabling quick access to features like offline chat, voice-only navigation, and personalized health insights — designed for users with limited time and attention on the road.

Information Architecture – All-in-One HGV App

A comprehensive sitemap designed to support the complex needs of HGV drivers — from personalized route planning and parking filters to mental health support and document management. Features like voice-only navigation, offline access, and live emergency support were prioritized to ensure usability on the road.

5. 🔄Task Flows

Outlined core tasks for users:

  • Signing up via voice or text

  • Tracking wellness stats

  • Finding and joining driver groups

  • Syncing a wearable device

  • Accessing offline wellness content

Task Flow – Wellness App: Account Creation & Plan Setup

This flow maps out a new user's journey from logging in to setting personalized wellness goals. It highlights key decisions, error states, and user actions, ensuring a smooth onboarding experience tailored for HGV drivers with minimal time, tech access, or prior wellness planning experience.

Task Flow – All-in-One HGV App: Smart Parking Finder

This flow outlines a complex decision path for drivers searching for safe, convenient parking with features like CCTV, floodlighting, and 24/7 amenities. Designed to reduce delays and frustration, the system filters real-time options by security, access to food and showers, and driver preferences — all accessible through voice or touch.

6. ✏️Sketches & Wireframes

  • Created low-fidelity sketches on paper and in Figma- Experimenting with flow and app name.

  • Iterated wireframes to validate flows and screen hierarchy

Wireframe Sketches – All-in-One Driver App (Truck Mate)

Early-stage interface concepts for Truck Mate, a multifunctional driver companion app. These sketches explore core screens like login, journey planner, driver dashboard, and real-time messaging with customers or manufacturers — all designed for fast, safe, and context-aware interaction on the road.

Wireframe Sketches – HGV Wellness App (Driver Well)

Low-fidelity sketches exploring the core experience for a mental health and fitness app tailored to HGV drivers. Key flows include hydration prompts, mood tracking, wearable syncing, and goal setting — all designed for ease of use, quick interactions, and offline access while on the road.

Mid-Fidelity Wireframes – MilesBetter Wellness App

A mid-fi prototype mapping the full app structure: onboarding, dashboard, settings, and wellness tracking. These screens prioritize clarity and usability, enabling HGV drivers to register, sync wearables, view daily tips, manage health data, and access 24/7 support with minimal friction, even while on the move.

7. 🧾High-Fidelity Prototypes

  • Developed polished UI mockups using a masculine yet approachable aesthetic

  • Designed for accessibility, clarity, and mobile use under low-attention conditions

High-Fidelity UI – MilesBetter (Preferred by HGV Drivers)

Final design mockups showcasing the visual system, iconography, and user flows for onboarding, fitness tracking, wellness chat, and personalization. Designed with accessibility and clarity in mind, the interface emphasizes bold icons, calm color tones, and quick-glance navigation tailored for busy HGV drivers on the move.

8. 🔁Testing & Iteration

  • Conducted remote usability testing with 3 target users

  • Adjusted button sizes, reworded onboarding copy, and improved navigation hierarchy based on feedback

  • Continued iterative testing throughout development

Testing & Iteration – UI Refinement & Visual Benchmarking

Ongoing usability testing informed key improvements in button sizing, onboarding clarity, and feature navigation. This phase also included visual benchmarking across GPS, fitness, health, and insurance apps — helping refine UI tone, accessibility, and design patterns for real-world driver use.

High-Fidelity UI – MilesBetter Aesthetic Preference Test (Not User-Preferred)

This version explored a bolder and more expressive visual identity, aligned with my personal design preferences. However, user testing indicated that Version 1 offered better clarity, contrast, and alignment with HGV drivers’ expectations, especially in terms of masculinity and legibility.

🏁Outcome

MilesBetter delivers a wellness platform tailored to the real-world needs of HGV drivers, with an intuitive, user-centered experience. Designed to boost driver health, promote social connection, and offer wellness support — anytime, anywhere.

MilesBetter was created for a group often underserved in tech and wellness: long-haul HGV drivers. Through interviews, prototyping, and testing, I built an experience grounded in simplicity, empathy, and accessibility, crucial for users balancing long hours, limited downtime, and safety-critical environments.

I explored two visual directions: Version 1 focused on clarity, contrast, and minimal distraction — ideal for use on the road, but lacking visual character. Version 2 introduced a more polished and expressive aesthetic, which I preferred personally, but testing showed it felt too lifestyle-focused for the audience. I chose Version 2 for the cover to reflect my visual instincts, but I’d aim for a balanced direction going forward — one that preserves the legibility of Version 1 while injecting just enough personality to build engagement and brand identity.

I'm also excited by the long-term potential of developing the larger all-in-one HGV app, though currently beyond scope, it's a concept I'd love to revisit and expand in future iterations.

This project deepened my understanding of inclusive, needs-based UX and strengthened my ability to balance visual storytelling with real-world function.