Mobile app · UI/UX case study

OneCitizen

A government super app concept that unifies 14 Bangladeshi government services into one mobile platform.

Role
UI/UX designer, team of six
Timeline
2026 · published July 2026
Tools
Figma, Adobe Illustrator, Adobe Premiere Pro, ChatGPT
Type
Mobile app · UI/UX case study
Team
Ubada Forayaje, Samiha Shama, Iqbal Hasan Mahmud Shadmam, Nipu Basher, Sumaiya Jannat Arpa, Md Adnan
OneCitizen home screen on a phone floating over a dark green stage with the OneCitizen wordmark

Problem and context

Getting something done with the government in Bangladesh usually means knowing which office, which portal and which documents. The team framed the goal in one line: simplify government service access by reducing complexity, improving usability, enhancing transparency, and creating a seamless experience for all citizens.

The research board named four problems that kept coming up.

OneCitizen project overview board: client, categories and project focus

Research

Before any screens, the team talked to people and looked hard at what already existed.

User interviews
5
People surveyed
50
Platforms analyzed
10

That work became a user persona and an empathy map: what citizens say, think, do and feel when they deal with a government service.

User persona board with thoughts, feelings, actions and pain points
Empathy map board: says, thinks, does and feels

IA and user flows

The findings were turned into a sitemap for the whole app, then into flows for each task: onboarding, sign-in, browsing services, applying, paying, tracking and notifications.

Design process timeline from discovery and research to prototyping and testing
OneCitizen app sitemap showing every section and sub-page
  • User flow board: splash, onboarding, login and home

    Splash → login → home

  • User flow board: services, application and form correction

    Services → application

  • User flow board: tracking, payment and notifications

    Tracking → payment

  • User flow board: registration screens

    Registration

Design system and components

A 10+ component library keeps 30+ screens consistent: one color system, a four-column mobile grid with fixed spacing, and a logo and brand that work from the app icon to a sign on a building.

OneCitizen color palette wheel in greens and neutrals
Four-column mobile grid and spacing specification
OneCitizen logo and branding on a card, a phone and a building sign

Each problem got a direct answer in the interface:

Problem and solution board pairing each citizen problem with an app screen

Final screens

  • OneCitizen splash screen with the logo over green hills

    Splash

  • OneCitizen sign-in screen in Bangla with login and register buttons

    Sign in

  • Registration screen offering NID card, birth registration or passport

    Register: choose an ID

  • Registration success screen with two people celebrating

    Account created

  • OneCitizen home screen listing government services with status chips

    Home and services

  • Application update screen with sections to change personal details

    Update an application

Key flows: sign-in and in-app guide

The sign-in flow starts on a calm splash screen and offers two clear choices: log in or register. Registration lets people pick the ID they already have (NID card, birth registration or passport), then confirms success before handing over to the home screen.

From there, an in-app user guide walks new users from login to home, so the first visit doesn’t depend on someone explaining the app.

App experience preview: a row of OneCitizen screens

Reflection

OneCitizen showed how much of a government service is information design: telling people what they need before they leave home, and telling them where their application is without a phone call. The output was 30+ hi-fi screens, a 10+ component library, the sign-in flow and the in-app guide, built as a team of six and published on Behance in July 2026.