Widget Store Redesign

Overview

Since the initial launch of widget in MIUI 13, the amount and category of widgets in the widget store has grown significantly. A new content display and searching mechanism is needed to help users find the widgets they want more efficiently.

As the interaction designer, I worked closely with the PM team to improve the widget searching and browsing experience, allowing users to efficiently navigate the widget store while satisfying promotional needs.
‍

Time

1 Month

2022. 7 - 2022. 8

Team

2 Core Members

1 Product Designer (me)
1 Product Manager

My Role

Product Designer

Wireframe
Design handoff

Context

From 50+ to 1000+ widgets

The number of widgets in the widget store has been growing fast since third-party creators joined the community. We need efficient categorization, feed curation and searching to accommodate the growth.

Challenge

How can we make "widget shopping" more efficient for users and beneficial for creators?

User Need

Efficiently browse, find and add widgets that satisfy their needs.

Business Need

Attract and retain widget user; promote paid widgets to attract third-party creators.

Solution

Widget Store 2.0

Improved widget browsing and adding experience

Better widget categorization

More structured search results

Swap same-size widget in-place

User Challenge

How do we help users find what they want more efficiently?

Considering 2 different use cases

The functionality of the widget store is very similar to that of an app store or a physical department store. Users either have a clear shopping list or here to casually browse content.

For a better search experience, result grouping and filtering are added to help users find the best match

Search results are divided into apps, individual widgets and widget sets (new feature). Further filters can be applied to individual widgets for users to pick a particular color or size .

For a better browsing experience, curate feed to show diversity while leaving opportunity for exploration

The widget store home page mixes widgets in different sizes and colors and refreshes periodically. Users can also choose to browse by category, app, or curated themes.

Interaction challenge

How do we optimize workflow to avoid unnecessary clicks?

Allow users to preview widgets without leaving the store

Instead of leaving and re-entering the store after adding each widget, we allow the widget store slider to stay at the bottom of the page so users can get back to it in one click.

Replace widget in-place instead of delete and add

Renovating one's launcher is time consuming and it is very frustrating when the layout is messed up. Based on this insight, we introduced a replacement feature that allows in-place widget swap.

Business challenge

How do we give paid widgets enough promotion?

Allow preview before purchase

Users are more likely to pay for a product after a trial. Similarly, we allow users to add and preview widgets on their launcher before making the final purchase.

Drive traffic to MIUI theme store, a stand-alone OS app with better widget display and curation

While the widget store is mainly for adding widgets, theme store focuses on display and selling. Driving users to the theme store increases the chance of finding and purchasing widgets they like.

Multi-platform

Adapting the design to larger screens

Adding side navigation for foldable phone 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.

Other Projects

Xiaomi Smart Share

Improving device connectivity across phone, tablet & PC

MIUI Pop-up Window Guideline

Redefine pop-up window usage for multiple platforms

LSFI Dashboard & Course Redesign

Improving online course learner engagement

Widget Store Redesign

Better browsing and editting experience for MIUI widget