top of page

XIAOMI
Watch S1 Pro

UX / Product Design

User experience design and UI enhancements for health Apps on smart watch for global tech brand.

0a408469-544b-4edc-b307-84a46db872e8.jpg

Xiaomi Watch S series rivals Apple Watch and Fitbit, with a global market share of 15%. As part of the user experience team, I revised UI guidelines which later used for all health apps.

Learn more about the project at the end.

e5ccdb44-25af-4f49-b9fc-541102cd835c.png
Layout Comparision.png

I renewed the Period App with an identical interactive solution, with clear data hierarchy and circular visual system for seamless usability.

Learn more about the project at the end.

Frame 227.png
period app ui draft.png

The new solution changed the original Period static calendar into an interactive mode, activated by turning the watch crown.

Learn more about the project at the end.

In this new version, user could view a 30-day period forecasts by rotating the watch crown, a cursor will scroll along the dial, each dots along the dial represent a calendar day. As user scroll along, the main screen switches in color and text, notifying the prediction on specific days. 

Learn more about the project at the end.

Frame 184.png

As user turn the crown to scroll across the dial calendar, the color changes in gradient corresponding to specific date and forecast.

Learn more about the project at the end.

Project Story &
My Contribution

Xiaomi is a leading electronics company which produce smartwatches, rivaling Apple Watch and Fitbit. Our team enhances UX, visual systems, and UI guidelines, specifically for S series models. To enhance the Period App on the smartwatch, which previously only had a static, square-shaped calendar for cycle forecasting, underutilizing the circular dial and watch crown.

The design aims to utilize the watch crown and creates a dynamic interaction. Use circular dial effectively, creating an organic and visually appealing interface. Information placed in clear hierarchy, reduce understanding costs.

T
o align with Xiaomi's circular dial, we introduced centrally symmetrical interfaces, optimizing screen space, standardizing card formats, and refining visual details for clarity. In a dial-shaped interface, users can navigate by turning the crown to adjust the cursor, while in a list interface, they can swipe to scroll through options.
Our users could view 30-days forecasts by rotating the crown, still keeping the calendar feature. When rotating the crown, a cursor scroll along the dial, each dots along the dial represent a calendar day. When tapping into the period App, user lands on the circular calendar page, in a beautiful organic shape. Each dots has color that representing period prediction status, as you scroll along, the main screen switches notifying our users prediction on specific days.

We kept the original calendar color system from previous versions, and assign each type of day with specific color. As user turn the crown to scroll across the dynamic dial calendar, the color changes in gradient corresponding to specific date.

I led and drafted this proposal in Q4 2021, just before the end of my internship. A year later, my colleague from Xiaomi contacted me to inform me that they had chosen to adopt this plan for future product designs. Ultimately, it was implemented in the Model S1, S2, and S3, which were released between 2022 and 2023.

Employer
Xiaomi

Discipline
Product Design

Tools
Figma
After Effects
Adobe Premiere

Office
Beijing

Project Team
Yan He
Zhoucong Tsui
Xuewei Tsui
Leo Liu
Kairui Wen
Zhen Mei

Julia Du

Next Project

DIOR
Merchandising

Business Analysis

Trend analysis, sales forecast, and store management for Dior Menswear.

bottom of page