Loading case study…
01Case study · Launched
MXPress
Logistics Website Redesign: Transforming a Logistics Website into a Task-First Digital Experience
Redesigning and developing a logistics website that makes parcel tracking, delivery quotations, and service discovery more accessible from the moment customers arrive.
An end-to-end website redesign focused on making essential logistics services easier to discover and access, supported by responsive UI design and front-end development.
I owned the end-to-end UI/UX design and the front-end implementation of the redesigned MXPress website.
02The Challenge
A Website Renewal That Needed More Than a Visual Refresh
The project started with a broad request to renew the existing MXPress website. With limited initial requirements, the opportunity was to evaluate the existing experience and identify where design improvements could make the website more useful for customers.
A key usability problem involved access to two important customer functions, requesting delivery quotations and tracking parcels. Previously, users needed to navigate through several menus or pages before reaching these functions, creating unnecessary navigation for customers who arrived with a specific task in mind.
The challenge was to improve the website’s information structure while also creating a modern and responsive visual experience.
Illustrative reconstruction of the previous journey
- Homepage
- Navigation Menu
- Additional Page(s)
- Quotation or Tracking
- 01Hidden Primary Actions
Quotation and tracking were not immediately accessible from the homepage.
- 02Navigation Friction
Customers had to navigate through multiple steps to reach important functions.
- 03Website Structure
The redesign required clearer organisation of company, service and product information.
- 04Website Renewal
The existing experience needed a more modern, interactive and responsive presentation.
Design question“How might we make the most important customer actions immediately accessible while creating a clearer and more engaging logistics website?”
03UX Evaluation
Turning an Open-Ended Request into a Clear UX Direction
Rather than immediately redesigning the interface, I reviewed the existing website experience through usability evaluation activities involving stakeholders and the Project Manager.
This process helped identify navigation friction and opportunities to improve access to important customer services. The evaluation informed a more task-focused approach to the redesigned website.
My approach · 01 / 05
Review the Existing Experience
Evaluate how customers navigate the website and reach important services.
04Before vs After
From Navigation-Heavy to Task-First
Before: navigation-led
- Homepage
- Navigation Menu
- Additional Page(s)
- Quotation or Tracking
Illustrative reconstruction of the previous journey
After: task-first
Homepage
- Get Quotation
- Track Parcel
Directly from the landing page
Illustrative reconstruction of the previous journey, there are no screenshots of the old website, and no click counts or time savings were measured.
The redesign prioritised the tasks customers were likely to arrive to complete. Instead of requiring customers to search through navigation menus, the homepage surfaced quotation and tracking directly.
This reflects a shift from a navigation-led experience toward a task-first approach.
05Information Architecture
Making Important Services Easier to Find
The redesign included restructuring the website navigation and content presentation. The goal was to create clearer paths to essential customer functions while making MXPress services, products and company information easier to explore.
- Clear Navigation
Redesigned the website navigation to support more understandable content discovery.
- Task-First Homepage
Prioritised quotation and parcel tracking.
- Service Discovery
Organised and presented logistics services and products through the landing experience.
- Company Information
Created a clearer, more interactive presentation of company-related content.
- Responsive Structure
Designed the navigation and content experience to work across desktop and mobile devices.
- Express Deliveries
- Warehousing & Fulfilment
- Get a QuoteAlso on the homepage
- Shipment Protection
- Logistics
Top-level labels and a selection of sub-pages as they appear on the live website (October 2026). The live content is maintained by MXPress and may have changed since launch.
About Us grouped into one dropdown, keeping the top-level navigation short.
06UI Design
Designing the Complete MXPress Website Experience
I designed the complete redesigned MXPress website, covering the landing page, navigation, service presentation, company information, interactive sections, and responsive layouts.
The interface was designed to balance usability, clear information hierarchy, and visual engagement.
The live website
01 / 06
Homepage
One scrolling landing page that opens with the key actions. Get a Quote, Pick-up and Track Your Shipments sit in the hero, the first thing customers see, with no menus in between.
Screenshots of the live production website. The Services and Mobile screens were captured from mxpress2u.com in October 2026; live content is maintained by MXPress.
07Front-End Development
Bridging Design and Code
My involvement extended beyond UI/UX design. I personally developed the MXPress website front end using HTML, CSS, JavaScript and Bootstrap.
This allowed me to carry the intended interface design into the implemented website experience. The development work covered the redesigned page layouts, navigation, responsive behaviour, and interactive front-end elements.
Design · live website<section class="hero">
<div class="container">
<div class="row g-3">
<div class="col-6 col-md-3">
<a class="action-card" href="/quote">
Get a Quote
</a>
</div>
</div>
<form class="track-form">
<label for="cn">Track your shipments</label>
<input id="cn" class="form-control">
<button class="btn btn-track">Track</button>
</form>
</div>
</section>Technology I used
- HTMLPage structure · Semantic content
- CSSStyling · Layout · Visual presentation
- JavaScriptInteractive front-end behaviour
- BootstrapResponsive layout and UI development
These are the technologies I used for the front end, not a description of the production hosting or backend.
- 01UX Evaluation
- 02Design Proposal
- 03UI Design
- 04Responsive Design
- 05Front-End Development
- 06Production Website
08Outcome
From Redesign Proposal to a Live Website
The redesigned MXPress website was developed and launched, and is live at mxpress2u.com.
The production website brings important customer actions directly into the homepage experience, alongside clearer navigation, service presentation, company information, and responsive layouts.
The project demonstrates my ability to identify UX opportunities, propose solutions, design the complete interface, and implement the front end.
Confirmed outcomes
- 01
Production Launch
The redesigned website was launched and made available to customers.
- 02
Direct Access to Key Actions
Quotation and parcel tracking became accessible directly from the homepage.
- 03
Complete Website Redesign
Navigation, landing page, services, products, company pages, milestones, and gallery were redesigned.
- 04
Responsive Experience
The website was designed and developed for desktop and mobile use.
- 05
Design-to-Development Ownership
I delivered both UI/UX design and front-end implementation.
No traffic, conversion or other performance figures are published, these are delivery outcomes, not measured impact.
09Reflection
Designing the Experience, Then Building It
MXPress showed how a broad website renewal request can become an opportunity to improve the customer experience.
Evaluating the existing website with stakeholders and the Project Manager helped identify usability problems that weren’t defined in the initial request, and prioritising quotation and parcel tracking reinforced the importance of designing around the tasks customers want to complete.
Owning both UI/UX design and front-end development strengthened my ability to connect design decisions with implementation. It reflects my approach to product design: understand the problem, simplify the experience, and deliver a working solution.