Case study · Xiaomi MIUI 15 · 2023

Lock Screen Personalization Editing

Interaction Design · Product Design · Visual Design
Lock screen personalization editing cover
01Overview
Overview

In 2023, MIUI 15 will launch three new lock screens under its new design philosophy. While enhancing customization capabilities, it also showcases leadership in glass effects, AOD lock screen linkage, and cutout technologies, improving user satisfaction with lock screen aesthetics.

My contributions
  • Product architecture design
  • Interaction flow design
  • UI design
  • Prototype design and production
  • Usability testing
Team
  • Design lead 1
  • UX Designer (Me)
  • Graphic Designer 4
  • Product Manager 2
02Project background

The project was initiated by lock screen visual designers who provided 7 new lock screen designs and 2 new technical capability requirements. As the interaction designer, I joined after the initial pitch succeeded to design the editing flows and framework for lock screen personalization.

The seven new lock screen designs
03Competitor analysis
01

New templates have low exposure, requiring users to click the bottom-right add button to view;

02

Template images are small and details are difficult to preview;

03

For users without customization needs, the application process is long (at least 6 steps);

04

Templates are not interoperable, with inconsistent bottom editing options, making expectations unclear.

Competitor lock screen editing flows
Competitor template galleries compared
04Design principles & strategies
01

When entering lock screen editing, new designs should be strongly showcased;

02

Provide multiple preset combinations for low-customization users to apply quickly;

03

Customization interaction framework must be highly generalizable and easy to use.

Product strategies

Strategy 1: Use “Classic Lock Screen / Diamond Time” as the flagship option, with multiple preset lock screen combinations;

Classic lock screen preset combinations
Diamond Time preset combinations

Strategy 2: Expand “Image Magazine” as a new style annually, depending on development resources and version updates;

Image Magazine style expansion

Strategy 3: Ensure all sets support at least the basic customization ability (information layer and wallpaper layer).

Basic customization ability across all sets
05Final model highlights
01

Immersion: As large a template preview panel as possible, with vertical switching for templates and horizontal switching for preset variations;

02

Instant Use: Users can apply anytime via the top-right button, reducing costs for low-customization users.

Final editing model, template preview panel
Vertical template switching
Horizontal preset variation switching
Instant apply from the top-right button
Customization framework overview

Want the full walkthrough, with every flow and iteration?

6-digit password required · or email me for access