Creating a New Interaction Framework for Xiaomi HyperOS

THE PROBLEM

Xiaomi's brand now has a wide range of devices in different types and sizes, including smartphones, foldable phones, and tablets. And Xiaomi is continuously developing new devices.

My team and I were asked to redesign the entire interaction framework to create a more consistent experience while maximizing the hardware capabilities of each device.

**To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.

MY ROLE

End to end UX design/ Compose interaction specifications

CREATING A VISION

We invited visual designers from various system apps like Album, Notes, and File Manager to join us in two exploration rounds. After these explorations, we identified 4 main goals for the redesign work:

  • Design for efficiency: Our user research indicates that more and more people want bigger screens (devices that can fold or tablets) for work purposes.

  • Consistency and differentiation: Optimizing the unique strengths of each device type while making sure users have a consistent experience across different devices.

  • Internationalization. To organize the interface in an intelligent manner, so that it offers a consistent user experience regardless of the displayed language.

  • Responsiveness: to create designs that can easily adapt to different hardware specifications, reducing the need for extensive customization and layout adjustments.

Different devices we have

DESIGNING DOWN FROM A VISION

01 Framework guidelines

“Make rules & make flexibility”

“Good design guidelines inspire, rather than just restrict. “—— That’s the lesson I learned from the project.

On larger screens, we flattened the app's navigation by introducing a new sidebar. However, If the app's information structure is already flat and simple, we can stick with the old bottom tab bar navigation.

So for a tablet, an app could choose from 4 models; For a foldable, there are 3 models, For a phone, there is an universal model.

02 Responsive rules

The responsive rules are set for different screen sizes to ensure a consistent experience across different devices, while also adapting to different hardware features.

Example 1: “drag and drop” rules

Example 2: “Titlebar” rules

After conducting a thorough, page-by-page review of our system apps, I’ve developed this decision map to help app designers align their designs more effectively with the new framework.

When designing an app, system app designers should first assess the app’s feature set and structural complexity to determine the optimal model for tablets. Once the tablet model is established, the corresponding approach for foldable devices will follow naturally.

03 Interaction rules (2 examples)

To ensure consistency in the system, detailed rules are established for all system apps to adhere to regarding their interaction behaviors.

let’s take “darg & drop“ and “title bar“ for example 👇

🌟 the response could be different, depending on what the user is dragging and where they drop the item.

We have also considered and specified the detailed corner cases for the UI elements, such as how the text should be displayed on the title bar under different scenarios.

Before & After

The new framework makes an app consistent across different devices while maximizing the potential of each device.

Here, I show the changes by using the Note app as an example 👇