loomo.png
Loomo3.png

World’s top 1 sold personal AI assistant robot.

Home.GIF
iphone_edited.png
资源 54.png
Google-Play-and-Apple-App-Store-Logos-Tw
Google-Play-and-Apple-App-Store-Logos-Tw
Loomo3.png

Meet

 

Loomo is a mobile robot sidekick, both a self-balance transporter and a personal assistant.  Loomo went on sale in April 2018 worldwide and has been integrated into the lives of 30,000+ satisfied customers.

image%2029_edited.jpg

SELF-BALANCE TRANSPORTER

image%2030_edited.jpg

PERSONAL SMART ROBOT

  • YouTube

My Role:

Product Designer

Duration:

20 Months

Cross-Platform:

Robot, iOS, Android

I joined the Loomo team in May 2017, worked as the Product designer in a team of 2 PMs, 3 Product designers, and 20 engineers. And I drove the end-to-end designing, developing, and collaborating with different roles. I designed the entire robot interaction experience and the controlling mobile application from 0 to 1.
 

I led the end-to-end design of features including:

  • Robot personality / status system

  • Homepage

  • Skill menu page

  • Follow-shot
  • Auto-composition shot

     

  • Voice / gesture interaction
  • Out-of-box experience
  • Interactive tutorial
  • Over-the-air (OTA) system
  • Usability testing

     

As a designer for smart products, for each feature, I conducted cross-platform design for both controlling mobile application (iOS, Android), and robot feedbacks (touch-screen interfaces
Voice, head, base movement, and lighting).

 

8.png

On this page, I'd like to mainly focus on 2 mobile application features: Skill Menu Page and Follow-shot. Share how I brought them from ideation to launch, and solved the users’ problem.

 
167 (1).png

Skills menu page

I used gamification design thinking to create an unlock and level up system, enhanced user engagement by 46%.

Group 624.png

STORY  #1
 

New users get confused about which skill to start with, easy to get stuck, and feel frustrated.

Problem

image 4.png

BACKGROUND
 

Design goals

  1. Give good guidance for new users’ exploration.

  2. Enhance user engagement.

  3. Provide delightful visuals.

IDEATION
 

Gamification

Group 628.png
Group 627.png

Based on skills connections, users start with the basic skills, unlock new skills afterward.

Unlock

Group 627.png

Skills can be upgraded while users spend more time on each skill. While upgrading, users get in-skill bonuses.

Level-Up

Frame 1 (1).png

ITERATION #1
 

1st version: Skill cards

Group 57.png

Like Alexa or Siri have false voice triggering when users did not call them, but they react. Gestures were also falsely triggered by mistakenly recognizing the random body language as the gesture commands and potentially starting to move suddenly!

Testing and design review

To verify the design, I held quick internal testing with 7 of my colleagues. At the same time, I shared the design plan with the whole design team including PMs and other designers for critique.

Insights

Frame (1).png
Frame (1).png

Higher engagement
Unlock and level-up are attractive

Frame.png
Frame.png

Longer interactive path
Scrolling cards not intuitive enough

ITERATION #2
 

2st version: Simplify the user flow

Group 635.png
Group 25 (1).png
Group 630.png

Remove the skill cards, click on skills icons to enter the skill, long press to check skill information.

Group 629.png

Present level information with “badge” on the skills page.

Group 621.png

Automatically unlock new skills and notify users with pop-ups.

167 (1).png

Visual Design

Skill menu page 

Group 10.png

Illustrations

Designed illustrations, used different colors to indicate different skill levels.

Group 622.png
Group 634.png

Animations

To help user even engage more in the gamification system,  designed animations for playful experience.

ezgif.com-gif-maker (7).gif

Skill Level Up

ezgif.com-gif-maker (6).gif

Homepage -> Skills Menu Page

VALIDATION

Usability testing & evaluation

I held usability testing to assess if the new skill system solves the user’s problem and achieve design goals:

Interview:

image 2.png

Field research:

with the methodology of field research and  interview:

  • Participants: (8) Total

  • ​Demographics: Age 9 - 47

1. System Usability Scale (SUS) score - Objective judgment
2. Net Promoter Score (NPS) - Subjective judgment

3. Interview: 8 questions to gather user feedback

Compared the result with previous usability testing:

SUS:

Engage Time:

Completion Rate:

64 to

78

Increased

46%

76.25% to

92.25%

Rectangle 46.png

STORY  #2
 

Follow-shot

Group 636.png

Designed the feature of Loomo will keep following the targets while taking videos. 

3 key iteraations.

 

BACKGROUND

What is Follow-shot

Screen Shot 2021-03-15 at 10.36 1.png

Loomo will keep following the targets while taking videos. The users can control robot with mobile phone, or directly use the robot to take following videos.

There are 2 different shooting modes to fit users' requirements based on scenarios.

Mode #1

Group 638.png
ezgif.com-gif-maker (10).gif
Group 639.png

Mode #2

ezgif.com-gif-maker (11).gif

During the design process, I've met several core challenges. I'd like share them and how I made decisions.

CHALLENGE #1 - MOBILE

Let users know who is being tracked

  1. Designed green frame to demonstrate trackiing target.

  2. Users can switch between two shooting modes with the tab bar.

  3. If target lost, will mark with red frame and use toast to notify user.

Group 640.png

CHALLENGE #2 - MOBILE

How to deal with multi-targets

  1. If detect multi-targets, mark them with yellow frames and let users select target they want to track.

  2. Automatically start tracking after selection.

  3. User could preview videos they have taken.

 
Group 641.png

CHALLENGE #3: CROSS-PLATFORM DESIGN

Design for both mobile and on-robot applications

As the users can control robot with mobile phone, or directly use the robot to take following videos, I designed the control interfaces both for mobile application and robot interface.

Robot interface

Mobile application

Group 642.png
Rectangle (1).png

I held usability testing with 5 participants, including observation for tasks and deep-dive interviews.

Group 643.png
Group 644.png

Usability testing & evaluation

NEXT STEP

What can we do better?

Tracking any defined target:

  • A group of people

  • Non-human target

Group 645.png

Check More I Designed for Loomo

Voice Auto-shot
资源 4.png

Voice Auto-shot

Over-the-Air (OTA) Update
资源 2.png

Over-the-Air (OTA) Update

Usability testing &
Research
资源 3.png

User Testing & Product Testing