ADMAS Mobile App

Designed a mobile experience for navigating and consuming large-scale government data, statistics, policies, projects, reports, and initiatives.

Client

MoPD(Ministry of Planning and Development)

Role

Senior UI/UX Designer

Tools Used

Figma, Adobe illustrator, Google Meet, Notion

Year

Feb 2025

Industry

Government/ Public Sector

Mobile App UI/UX design Big data Prototypes

Background

ADMAS tracks national growth, policies, and infrastructure pipelines.
Historically, this data was trapped in siloed channels, causing misalignment between state bodies. As the Sole Product Designer, I was brought in to audit the ministry's legacy desktop web apps and transform their complex data structures into a unified, mobile-first product for real-time field tracking.

The problem

Critical data, milestone updates, and macroeconomic indicators were locked inside separate, old internal web dashboards and massive static PDF reports.
These desktop-only systems were completely unoptimized for mobile viewports, leaving traveling ministers and field project managers disconnected.

Challenges

The challenge was translating dense, multi-layered desktop web data into a clean 390px mobile layout without losing visual precision.
As the solo designer, I had to balance an advanced statistical interface for data practitioners, an immersive vertical video feed for fast updates, and an AI chat assistant within a single, highly accessible government system.

Project Preview
Project Preview
Placeholder
Placeholder

Personas

To ensure the 0-to-1 app served both executive decision-makers and technical field managers, I anchored the design framework around two distinct user archetypes:

Placeholder
Placeholder

Information Architecture

The Information Architecture of this government platform organizes national data, projects, and initiatives into a coherent system. It is structured around five main pillars — Home, Chatbot, Data, Stats, and Projects — each representing a distinct way of accessing and understanding information. Together, they form a hierarchy that balances clarity and depth: from high‑level dashboards to detailed policy indicators and project tracking.

Placeholder

User Flow

The user flow is engineered around two distinct user tracks, executive minister and project manager. Each track is designed with a flat hierarchy to minimize friction, ensuring that high-ranking government officials can locate data or broadcast intelligence within two taps.

Placeholder

Existing Ecosystem: What did the client hand?

I have received an access to a massive dashboard where all the data of ministries, public bodies, policy area, national initiatives and more are stored. Extremely detailed data that are hierarchical and sophisticated. I am expected to bring all these mega governement document into a 390px mobile viewport. Couple of screen will be shared below.

Placeholder

The Wireframes

Before introducing typography scales, brand tokens, or visual styling, I constructed middle-fidelity wireframe layouts. This structural step allowed me to stress-test layout information density on a compact 390px mobile viewport and ensure that multi-digit data blocks remained highly legible.

Placeholder

Design System

To transition the mobile application from low-fidelity wireframes into a scalable, developer-ready product.
I engineered a highly disciplined tokenized design system. For a national government platform, visual consistency and WCAG 2.1 accessibility standards were non-negotiable architectural mandates, not aesthetic choices.

Placeholder

Final Design: The High-Fidelity Ecosystem

The final solution synthesizes the mid-fidelity structural wireframes with the tokenized design system primitives into a polished, production-ready interface. The resulting ecosystem translates dense government web dashboards into high-fidelity mobile viewports designed explicitly for rapid, touch-friendly interaction.

Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder

Key Design Decisions

With the final designs established, it is critical to present the exact behavioral psychology and tactical logic that drove the interface layout choices. Top-tier design recruiters skip the pretty visuals to evaluate how you defend your system decisions.


Here are the three pivotal architectural choices that defined the platform's success:

Placeholder
Placeholder
Placeholder

Outcome/ Impact

The project successfully transitioned from an ambiguous data landscape into a highly structured, developer-ready design ecosystem. As a 0-to-1 product built entirely from the ground up, the design assets have been officially approved by ministry leadership and are currently moving through active engineering phases.

Lesson Learned

Managing the complete 0-to-1 design lifecycle of a high-stakes government intelligence ecosystem as a Sole Product Designer provided massive growth insights. Designing for extreme data complexity under strict national accessibility guidelines reshaped my approach to product engineering.

Placeholder
Placeholder
Placeholder

Icon Let's talk about your project!

Image Image