Redefine Pop-up Window
Design Guideline 

Redefining pop-up windows for phone, tablet and foldables  

Overview
Problem
Goal
Outcome
Process
Use case
Content
Sizing
Addition
Maintenance
Back to Top
Overview
With the addition of foldable phones and tablet in 2021, MIUI design team realized that the current pop-window format can not accommodate the needs for difference screen sizes thus a more comprehensive guideline is needed.  

As a member of the design system team, I redefined the pop-up window component for different platforms, added new components and worked with our SDK developers and other designers to optimize implementation and maintenance.
Time
4 Months
2022. 4 - 2022. 8
Team
4 Core Members
2 Interaction Designers
2 SDK Developers
My Role
Interaction Designer
Identify user needs Facilitate design workshop
Create guidelines
Problem
Current "drawer" style pop-up window on mobile phone can not be applied to foldable and tablet
Current MIUI mobile uses a "drawer style" pop-up window that appears from the bottom of the page. This is not an ideal format when it comes to tablet and foldable phones that have wider screens.
Goal
We need to redefine the visual and interaction guidelines for using pop-up windows on different devices and screen sizes
Solution part 1
A new multi-platform design guideline for
pop-up windows
The beta version of Xiaomi Smart Share MIUI+ was one of the features that received the most media coverage and positive user forum comments after MIUI 12.5 launch event.
Solution Part 2
A New Component for Large Screen
To account for cases where the new pop-up window guideline no longer apply, I defined a new container called floating window for large screen devices.  
Impact
The responsive guideline significantly reduced redesign and development cost for different screen sizes
<10 %
Redesign needed for tablet and foldable Pop-up windows
120 +
System App & OS designers uses Pop-up window on a daily basis
8.9 / 10
Design guideline satisfaction rate by design and SDK dev team
Use Case
When should pop-up windows be used?
Define pop-up window use case in comparison with other components
The fact that pop-windows are overlayed on top of a page that interrupts users' current interaction makes it ideal for displaying highly important and transitory actions that need immediate attention.
Explain use cases with specific examples
Along with the general use case recommendations, I also provided specific cases as reference and kept updating the example library when other designers reached out to me for confirmation.
Content
What should go inside a pop-up window?
Collect, cluster and distill from current usage
Now that users can access both their tablet and mobile from the PC, it is important to keep the two user flows and interface as consistent as possible to avoid confusion and extraneous learning.
Size
How does it fit on different screen sizes?
Setting break points for a responsive layout
Since it is impossible to make pop-up window display perfect on all screen sizes, our strategy is to ensure optimal quality for the most widely used models (360 - 394 dp covers most of the popular models ). Pop-ups are centered because single-hand reachability is no longer an issue on tablet.
Addition
What if the new guideline no longer meets my needs?
The need for a larger container on foldable and tablet
The old pop-up window were used for many content-heavy, multi-step use cases that are no longer recommended under the new guideline. A new component type is in need for large screens.
Setting the floating window guideline
The same guideline structure was used for floating windows. It covers definition, use case, content & layout, dos and don'ts, interaction & motion as well as Figma components for quick application.  
Maintenance
Implementing and maintaining the guidelines
Reconsidering the maintenance workflow
The new design guidelines were introduced through 2 alignment meetings with all together 120+ stakeholders. We also created multiple channels for designers to 1) provide feedback 2) report edge cases 3) check-in with their design 4) ask for extended information
Other Projects
LSFI Dashboard & Course Redesign
Improving online course learner engagement
Widget Store Redesign
Better browsing and editting experience for MIUI widget
Xiaomi Smart Share
Improving device connectivity across phone, tablet & PC
MIUI Pop-up Window Guideline
Redefine pop-up window usage for multiple platforms
© 2024 Made by Tingxue Yu. All rights reserved