← Back

SingPost

Public Utilities, National Postal Infrastructure, Multi-Persona Service Design

Overview

A comprehensive strategic initiative to transform Singapore’s primary postal portal into a modern, utility-first platform. As Lead UI/UX Designer, I restructured the digital ecosystem to maximize self-service efficiency, eliminate cross-persona friction, and establish rigid layout governance.

Background

Role

UI Design

UX Strategy

Research

Prototyping

Tools

Adobe Xd

Flowmapp

Google Analytic

Hotjar

Year

2022

Link

Live Preview

01 / Discovery & Alignment

Stakeholder Alignment & Analytical Audit

Before diving into design artifacts, the initial phase was dedicated to running a comprehensive audit of the legacy platform and establishing alignment across cross-functional enterprise stakeholders. We needed to uncover the exact operational bottlenecks and technical constraints governing SingPost’s web infrastructure.

Key Activities Undertaken:

Behavioral Analytics Audit: Analyzed traffic drop-offs, search query trends, and click maps to understand how users interacted with high-frequency utilities.
Stakeholder Workshops: Aligned with product, customer support, and engineering teams to define core business goals—specifically targeting a reduction in manual customer service workloads.
Legacy Heuristic Evaluation: Evaluated the existing layout to locate core friction points causing feature bloat and navigation confusion.

Data Validation & Behavioral Analytics: Synthesizing user behavior maps and high-frequency search trends to pinpoint exactly where users drop off. The analytics proved that tracking and core utility metrics completely dominated initial user intent, justifying the shift toward an above-the-fold utility focus.

02 / Strategic Challenge

Translating Complexity into a Unified Strategy

The data collected during our initial audit painted a clear picture of systemic friction: SingPost's legacy web portal was attempting to be everything to everyone simultaneously, resulting in severe feature bloat. To solve this, we had to redefine the relationship between user intent and platform architecture.

The core challenge was two-fold:

De-cluttering the Core User Paths: Isolating distinct, high-volume user groups so they could achieve their specific goals without stepping on each other’s digital toes.
Structuring a Strategic Solution: Creating an immediate, high-level framework to realign the business goals (reducing support overhead) with inclusive user expectations.

The 5-Pillar Strategy Blueprint

To bridge the massive gap between user frustrations and business objectives, I established a macro-level UX strategy designed to tackle both layout infrastructure and functional usability. Instead of jumping straight into cosmetic UI fixes, this blueprint served as our North Star to maintain strict governance across the entire redesign lifecycle.

Target Persona Ecosystem Mapping: Segmenting a fragmented public utility user base into primary operational archetypes—from high-volume B2B clients (Corporate Cain) to daily B2C consumers (Shopper Shawn). Isolating their unique pain points established the foundational user logic needed to reconstruct the platform's root navigation.

Proposed UX Roadmap & Strategic Framework: Translating core user friction points into an actionable, five-pillar digital transformation strategy. This blueprint defines the execution requirements—ranging from front-end layout governance and responsive scalability to distinct, root-level content differentiation for personal and business segments.

03 / System Architecture

Restructuring the Blueprint for Multi-Persona Efficiency

With a clear strategy in place, the next phase required completely tearing down and rebuilding the platform’s navigation framework. The legacy structure lumped enterprise logistics and casual consumer tracking into a single, chaotic menu hierarchy.

To eliminate this friction, I decoupled the architecture into two entirely independent navigational ecosystems. By introducing an explicit global toggle header, we successfully insulated casual consumers from complex corporate tools, ensuring both user groups could access their high-frequency utilities instantly upon landing.

Key Structural Frameworks Designed:

Root Navigation Decoupling: Engineered a hard separation between Personal and Business domains to instantly filter intent.
The "Above-the-Fold" Utility Engine: Architected the layout blueprint for a unified, tabbed "Quick Task" widget to prioritize rapid parcel tracking and postage calculations.
Self-Help Escalation Paths: Reorganized the help center hierarchy, mapping out structured self-assist groups to proactively intercept support tickets before they reach manual operators.

Targeted Utility & Self-Help Mapping: Detailing the architectural wireflow of high-frequency hubs. On the left, the layout prioritizes the "Quick Tools" ecosystem (Track & Trace, Postage Calculation) to instantly catch immediate intent. On the right, the "Self-Help Escalation" system maps out structured knowledge groups designed to intercept support tickets before they require manual human intervention.

04 / Core Execution

Translating Architecture Into High-Utility Interfaces

With the structural sitemaps and user flows validated, I transitioned the system into high-fidelity component layouts. The execution focused on transforming complex logistical data streams into clean, scannable digital blocks. Every interface choice was governed by strict layout guidelines to optimize rapid utility and maintain visual accessibility.

Core Interface Solutions Delivered:

The Unified Hero Dashboard: Built a responsive, multi-tabbed utility engine directly above the fold, providing an instant interface for bulk parcel tracking (up to 20 items), rate calculations, and postal code lookups.
Intuitive Personal vs. Business Pivot: Designed a highly visible global header toggle that instantly shifts the entire interface context, ensuring appropriate tools are prominently displayed based on the selected mode.
Frictionless Support Escalation: Structured a multi-tier, categorized self-help directory using logical grouping to guide frustrated users toward self-service articles, drastically minimizing direct contact friction.

Multi-Tenant Navigation Architecture: Designing individual landing environments for Personal, Business, and Corporate pillars. The primary Personal view features a unified utility dashboard right above the fold to capture immediate search and tracking intent, while a persistent global header toggle allows frictionless swapping between audience segments.

Transactional Engine Optimization: Developing a structured, step-by-step wizard interface for complex calculation tasks. By organizing input segments into logical progressive steps and utilizing clear visual product cards, the interface maximizes checkout confidence and speeds up completion workflows.

Self-Assist Help Directory: Constructing the interface for the optimized customer care repository. The layout uses tiered category blocks, high-contrast query rows, and expandable accordion states to proactively intercept tracking and claim complaints before they reach manual operators.

05 / Strategic Outcomes

Scalable Governance & Handoff Excellence

True design leadership extends far beyond high-fidelity mockups—it is proven by the long-term maintainability of the shipped product. The final phase of this transformation was dedicated to translating our finalized layouts into a highly rigorous, atomic design language built to withstand engineering scale and protect platform layout governance.

By modularizing the decoupled Personal and Business components into clear master variants, we ensured that future internal product teams could scale SingPost’s digital ecosystem without degrading the core user experience or re-introducing feature bloat.

Core Deliverables Engineered:

Atomic Component Libraries: Developed unified UI states (default, hover, active, error) across hundreds of high-frequency components to ensure strict brand alignment.
Responsive Viewport Breakpoints: Extrapolated layout wireflows seamlessly from ultra-wide desktops down to mobile screen sizes, ensuring critical quick tools remain perfectly thumb-accessible.
Systemic Engineering Handoff: Documented clear spatial grids, typography rules, and interactive layout behaviors to drastically accelerate development implementation cycles.

SingPost UI Guidelines & Design System Foundations: Establishing a cohesive typography hierarchy and systematic semantic color palette to support both light utilities and deep dark modes. Standardizing form input fields, button state behaviors, and responsive header systems protects the long-term design governance across product teams.

Design System Scale & Governance: A comprehensive look at the production ecosystem workspace, spanning hundreds of responsive desktop and mobile viewport variants. Standardizing these atomic behaviors guarantees zero friction and maximum pixel-perfection during engineering handoff.

◆

Retrospective & Key Takeaways

Designing for the Public Sector: Redesigning a national infrastructure requires a delicate balance between modern visual aesthetics and strict web accessibility. Utility and readability must always take precedence over decorative UI trends.
Engineering Collaboration is Key: When building platforms at this scale, establishing an atomic design system early is critical. Aligning with engineers on day one regarding layout logic, component variants, and spatial grids saves hundreds of hours of design debt during the implementation phase.
Data Over Intuition: Shifting from guessing what users want to relying heavily on quantitative heatmaps and structured personas completely streamlined our design choices and simplified stakeholder alignment workshops.