Xiaomi
Smart Hub
< Empowering cross-device sharing >
Xiaomi Smart Hub is a collection of features that enhance the inter-device connectivity of Xiaomi’s multi-device ecosystem. Users can share files, applications, text messages, and much more seamlessly across smartphone, PC and tablet.
My contribution
Wireframing
UI Design
Usability testing
Team
Product Manager *3
Software Engineer *6
Designer *2
CONTEXT
In 2020, the annual shipment volume of tablet and laptop in China has increased by 7 and 17.7% respectively1. More people are now owning multiple devices to meet their daily needs.
1source: IDC FutureScape
HOW MIGHT WE
Improve inter-device connectivity to unleash the power of a multi-device ecosystem?
timeline
Initial research was carried out by our user-research team. I participated in feature brainstorm and in charge of the later-on wire-framing, UI design, usability testing, UI hand-off and final UI walk-through.
DISCOVERY
After rounds of interviews and survey, the user research team has summarized for us the most pressing pain-points and opportunity areas:
Personal files and data dispersed on different devices are hard to locate and transfer. It is especially painful for PC and phone. The impenetrability between Windows and Android system is a core to this problem.
Each device has its strengths and weaknesses. This means users have to constantly switch between different devices to complete a task.
Most people find it distracting to hear notifications on other devices while concentrating on one. What’s more, many push notifications are repetitive on all devices.
FEATURE BRAINSTORM
With the general problem area identified by the user research team, we move on to specific user scenarios and brainstorm possible solutions.
We divided them into 4 categories:
Applications Notifications
Files Hardware capabilities
Joy wants to work on her laptop while watching a live broadcast that is only available on Taobao mobile, she has to pay attention to both devices.
We can project mobile Taobao onto PC, give it adjustable window size and support full mouse & key interaction so Joy won’t have to pick up her phone
Tony is doing research with his laptop, but his client-communication app is on his phone, he has to constantly watch for notifications on his phone.
We can merge mobile notification with the windows notification system, Tony can just click on message and reply on his laptop.
Lily took some really nice pictures that she want to edit in PS, she has to browse - make selection and send back and forth.
We could let Lily directly open her mobile phone file manager on her laptop and drag the files in while browsing.
Designer Adam just made a slide on his laptop that he wants to show his boss and get some visual feedback
Project slides from laptop to tablet, which Adam can easily take with him and make edits on with a smart pen
EVALUATION
Together with our engineers and product managers, we evaluated the feasibility of each proposed solution and created a feature set with various priority level.
WIREFRAME
While designing for system-level features it is important to build upon existing interaction patterns to avoid extra learning cost. The wireframe below shows how these features would exist in the current system:
.gif)
.gif)
Different from tablet’s automatic connection and penetrable Android system, PC requires a manual connection process and a client terminal to host all the functions
DEVELOPMENT
After sketching out the overall structure, I went back in to each feature, filling in the missing steps and detailed interactions along the way.
HIGH-FI PROTOTYPE
With rounds of design critique and feedback, I continued to push the design into higher fidelity level, which our engineers used to produce demo for usability test.
#1 USABILITY ISSUE FOR TABLET
The prerequisites for this function (bluetooth on and close proximity) are not clearly listed for users to troubleshoot. There is also a lack of proper instruction for first-time users.
#2 USABILITY ISSUE FOR PC
While operating their phone projection on PC, users will intuitively follow conventions and habits they use for laptops, such as hitting "enter" or " ctrl + c" "ctrl+v" when editing texts.
ITERATION
#1 FOR TABLET
Settings page is redesigned to clarify connection prerequisites and introduce features
#1 FOR PC
Frequently used shortcuts such as 「enter」 「ctrl c」「ctrl v」 are implemented, the navigation buttons has their designated shortcuts and supports customization.
HANDOFF
Working with a visual designer, we unified design language, went through several rounds of review and delivered the final designs to the development team.
This is a collaborated work with visual designer Zehua Deng
FINAL PRODUCT
With smart share you can open and use all of your mobile phone applications on PC, receive notification and open files. There’s no need to switch between devices.
Use tablet as a second screen for your PC or use your cursor to travel across devices to grab files.
Send applications from your phone to tablet. Window can be resized to meet your personal need, be it multitasking or watching an immersive movie.
Clipboard text, photo & screenshots, identification code and cellular data automatically flow to your current device.
outcome
The beta & official version launched with MIUI12.5 & MIUI13 respectively and have reached 40k daily active user by now
launch of the beta version called MIUI+