Portfolio

Make complex
systems clearat a glance.

UI design for public-sector
digital products.

  1. 01Web designEngineering platform

  2. 02Mobile designCity dashboard

  3. 03Data wallCity operations

  4. 04Campaign designPosters and long-scroll graphics

Film1 min 17 sec

Six design skills,
in one short film

Each skill is shown through one project: the approach and what changed.

0:00 / 1:17

4areas

Work

One project from each area: an engineering platform, a mobile dashboard, city data walls and campaign visuals.

  1. 01Integrated engineering platformV2.0 redesign and product websiteWeb design2025
  2. 02City dashboardMobile app for city operationsMobile design2022
  3. 03City operations data wallCities A, B and CData visualization2021
  4. 04Campaign designLong-scroll graphics, posters, roll-up bannersGraphic design2023

6fields

Skills

These skills are applied to public-sector digital products. Each one appears in the cases below.

01

Design system

Color, type, grid, icons and components, defined once and shared across subsystems.

Standards and components
02

Information architecture

Navigation regrouped by business area, a rebuilt workspace and shorter paths to core functions.

Navigation, before and after
03

Signal and noise

Lower saturation, fewer redundant elements, and blue, orange and red to separate progress, risk and overdue items.

Noise reduction, before and after
04

Interaction and guidance

Dragging a card reorders a pipeline in one step instead of three. Drawers, inline editing and stepped forms.

Interaction examples
05

Data visualization

A chart component system, a centerpiece map and standards for data walls, plus card layouts for small-screen dashboards.

Data walls
06

Motion and campaign

Motion for data-wall login and home screens. Long-scroll graphics, printed posters and roll-up banners in one brand blue.

Campaign materials

Design principles

  • Easy to learn
  • Quick to use
  • Less noise
  • Progressive disclosure
“It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”
From Don't Make Me Think

01

Web design

The 2.0 redesign of an integrated engineering platform, and its product website.

Engineering
platform

V2.0

The full engineering workflow in one platform

The platform covers requirements, collaboration, code, integration, testing, build artifacts and deployment. The 2.0 redesign focuses on consistency, hierarchy and noise, and task flow.

Type
B2B web platform
Role
UI and UX design
Year
2025
Version
Redesign, 1.0 to 2.0

Version 1.0

Background

The redesign started from three problems.

  1. 01

    No shared standards, inconsistent experience

    Features kept piling on, and usability issues built up.

  2. 02

    Cluttered hierarchy, heavy cognitive load

    The page frame could not support new features, and layouts were poorly organized.

  3. 03

    Long task paths, little guidance

    No onboarding or help tips, which made the product hard to learn.

Consistency

Built a new design language on base tokens, with strict rules for the most-used controls. Every subsystem shares one layout.

Color and type

Chinese

PingFang SC

Numerals

Helvetica Neue

Size

2820161412

Weight

RegularMediumSemibold

Icons

One grid size, with matching corner radii, endpoints and stroke weight. Two styles, line and two-tone, chosen by context.

Grid

  • Columns 24
  • Gutter 16
  • Margin 24px
  • Screen width 1440px ~ 2560px

Every page uses the same grid, which keeps visual and interaction rhythm consistent.

Design specs and component library

Specs keep the style consistent and make design and development faster.

  1. Define
  2. Apply
  3. Refine
Empty states and error pages, eight in all.
Component library docs. Each component lists its types, states and styles.

Hierarchy and noise

Unified the navigation frame, rebuilt the workbench, and pared back color and elements. Progress and risk read at a glance.

Before
  • Long paths. Going from module A to module C meant opening the top-level “Product” menu, then choosing through at least three levels.
  • Inconsistent layout. Modules mixed top-bottom and left-right frames, and some left wide gaps around the content, which wasted space on small screens.
  • No shared project entry. Each module had its own project page, so switching modules meant choosing the project again.
BeforeAfter
After

Main navigation and subsystem menus fixed on the left

  • Shorter paths between modules.
  • The platform's main modules are always in view.
  • Left navigation and top bar share one background color, so the content area stands out.

Adjustable navigation size

Submenus are open by default and can be collapsed by hand. On narrow screens (1280px and below) and dense editing pages, they start collapsed.

Menus regrouped by workflow

Project submenus, for example, are split by workflow into General, Development, Testing and other groups, so each function is quick to find.

Flow

Drag to reorder, view and edit in place, open details only when needed.

Pipelines: drag cards to reorder

Before

Click a stage→choose its position→save3 steps

After

Drag the card to its target column1 step

Trees and tables: drag to reorder

Reordering needs no menu or button. Drop the item in its new position and it's done.

Version 2.0

Screens

Seven representative pages built on the unified design language.

Metric cards
Vulnerability detail
Milestone plan
Statistics
License detail
Merge request
Repositories

Related design

Product site

The product site for the engineering platform. The page has four sections.

Horizontal feature switcher

Eight feature modules share one row, which keeps the page short.

Workbench

To-dos for requirements, tasks and defects in one place, plus your projects, repositories and recommended plugins.

02

Mobile design

A mobile city dashboard for government users. Data on the economy, emergency response, tourism, water, transportation, epidemic prevention and urban management fits on one small screen.

City dashboard

  • Data display
  • Small screen

Background

Each department's data goes into one platform. Key information is shared and visualized, so it is clearer who is responsible for what.

Work that spans several areas, such as holiday tourism management and emergency response, can be coordinated in one place. The government uses the platform to allocate public resources and issue warnings.

Scroll the phone screen

Home

The home page holds the entry to every topic page. Cards keep the topics apart, so users find what they need fast.

  • Entries are grouped into two sections: city overview and the historic old town.
  • The entry icons are drawn as a set, with the same gradients and depth.

03

Data walls

Operations data walls for three cities, from visual style and specs to chart components and the login and home screens.

City A unified
operations platform

A three-column operations data wall with a 3D main map and chart components.

Date
2021.12
Role
  1. Reworked the visual style based on user feedback
  2. Designed the chart style samples
  3. Designed the login and home screens and their animation

Screens

Main map

Chart components

Page layout

Three columns suit a wide screen. The main map keeps its share of the space, and both sides still hold plenty of charts.

Mid-size screens

Redesigned the login page and home navigation to match the existing mid-size screen style, and added animation.

Login page
Home navigation

04

Campaign design

Long-scroll graphics, posters and roll-up banners for product promotion and events, in one brand blue online and in print.

Long-scroll graphics

Four for online use: two introduce products, two promote events.

Integrated cloud platform

Three parts: product overview, highlights and core services.

Data masking system

Opens with the policy background, then covers three data security problems and how each is solved.

Efficiency coach recruitment

Recruitment graphic. Sign-up ran July 1 to 7.

Spot the flaw, win the prize

Graphic for the 2023 Product Quality Month, with event details and prizes.

Print materials

One event poster and two product roll-up banners.

Poster for the all-staff testing event, September 2023.
Roll-up banner for a digital identity authentication and evidence-preservation platform, covering features and architecture.
Roll-up banner for a data security platform, with an overview and six advantages.

Make complex systems
clear at a glance.

Back to top