Redesigning the User Interface for the Current Moto 360

We have studied about different approaches of prototyping for the past 10 weeks, including paper prototyping, 2D and 3D prototyping, and interface prototyping. For the final project, we have combined three types of prototyping techniques and implemented a redesigned UI for the Moto 360 smartwatch. The techniques include:

  • Paper prototype
  • 3D model prototype
  • Interactive high fidelity prototype

Concept

As the title stated, the project is based off the current user interface of Moto 360, a smartwatch produced by Google and Motorola. The watch was released last year and is the pioneer of Google’s Android Wear operating system. However, there are some UI design problems that impede friendlier user experience. We have picked some of them for an UI reimagination.

Home Screen

Different from that of the Apple Watch, Moto 360 does not have a main screen of icons for users to select different apps. Instead, users can only select them from a list, which is cumbersome to navigate.

A list of operations/apps for users to select.

Music App

Due to the shape of the hardware, the album arts of songs will be cropped. Sometimes it is not showing the whole picture and it feels frustrating. Moreover, there is only one controlling button in the Music app — play/pause. If a user wants to skip tracks or scrub, they have to do it on the paired phone.

Cropped album art and the one-button control in the current Music app.

Health App

Health app is another target we have selected to make some changes. The current health app in Moto 360 only has a heart rate readout and a fitness timer, which makes this app more or less useless.

Current health app with fitness timer and heartbeat readout.

Alarm Clock App

This is another UI that its readability is limited by the shape of the rounded hardware. The text is not fully shown unless the user scrolls the list item to the middle of the watch (the widest part).

Current alarm clock app.

Goal

Our general goal is to redesign the user interfaces for selected Moto 360 apps in order to make them utilize the shape and the screen of the hardware. Peripheral tools (paper prototypes and paper prototype container) are also implemented to better test the redesigned UI.

  • Desirability: Millions of Moto 360 watches have been shipped to their customers, and those customers would find out some of the design flaws and wanted certain UI changes in order to make it easier to use.
  • Feasibility: Moto 360's operating system is based on Android Wear OS, which is fully open-sourced and customizable. Design changes of UI elements will be very feasible.
  • Usability: The current UI of some apps on Moto 360 received bad user feedbacks, this impedes users from further purchasing the succeeded products. They really have a lot of potential to improve.

Implementation

UI

Preparation Sketch
Redesigned Main Screen

We used Sketch to do the interface design and layout, and Marvel to do the interactive interface of the pictures exported from Sketch.

We compared the Moto 360 display to Apple Watch display. The size of Apple Watch is 24.34 * 30.42 = 740.42 mm^2 and Moto 360's size is 3.14 * 20^2 = 1256 mm^2. Thus the Moto 360 display area is much larger than that of the Apple Watch. However, the Moto 360 display’s utilization ratio is less than Apple Watch display’s utilization ratio which indicates that Apple Watch shows more information than Moto 360 in per pixel area. Thus, in order to improve the Moto 360's utilization ratio usage, we decided to try Apple Watch’s main user interface in Moto 360.

As we mentioned above, the default music App does not have progress bar, the full album cover, the next/previous song button. Thus, want I want is to set the whole album cover as the music background image, the blue ring around the album art is the music progress bar and pause/play, next/previous song buttons is intuitively shown in the middle. It is easier for users to know the music information and pick the song they want to listen.

Redesigned music app, with clearer controls and album arts.

The current health app only contains heart rate and a timer. It is not fully utilizing the sensors that the watch has. Inspired by fitness apps such as FitBit and Jawbone, we added step count and distance recording functionalities in order to make it more helpful.

Redesigned health app, with added step count and distance travelled functionalities.

The alarm clock list contains lots of same information. For example, if you want to set up a time for minutes, it will show you a list of minutes: 1 minutes, 2 minutes, 3 minutes and etc. There are lots of same information “minutes” in the list so that we can set that as default and only change the time number. Thus, we redesigned the clock alarm with specific time. Users are allowed to change the digit by swiping up/down.

Redesigned alarm clock app, with intuitive gesture controls and display.

3D modeling of the paper prototyping container

The 3D modeling of the container for paper prototype is implemented in Rhinoceros 3D. The dimension of the Moto 360 watch was found online and the model was made to its actual scale. The model contains only the watch face and does not have bands. It is also modified to have a cutout in order to let the paper prototype slide through.

The finished 3D model file opened in Rhino.

The finished model was exported to STL format for MakerBot app to process. The model was 3D printed twice with different machines and different quality of materials.

The first printed watch face (blue) and the second (black). Notice that the black “band” that the second face attached to is actually a FitBit (for aesthetic purposes). Photo credit: Lukas Eiermann

Paper prototype

After designing the interface in Sketch, we exported all the watch faces as PNG image files. We then pasted them into Pages and rescaled them to have diameters of 40mm and exported as PDF file. After the print job, the single-page of interfaces was carefully cut and pasted together for the most precise result and the smoothest experience when sliding through the container.

Evaluation

Final Deliverable

Our final deliverable contains:

  • 3D printed Moto 360 watch face with paper prototyping capability
  • Redesigned Moto 360 main screen
  • Redesigned Moto 360 music app
  • Redesigned Moto 360 health app
  • Redesigned Moto 360 alarm clock app
  • Paper prototype of the redesigned interfaces
  • Demo video

Demo

A walkthrough of different interfaces

Comments

We exhibited our product to the general public on June 4, 2015. There were a lot of visitors on our table and provided many insightful thoughts:

I really liked your printed prototyping tool, you can definitely use it in the future!
Are these UIs designed by you? Because I could not get it from the video.
How did you printed your paper prototype? Oh they are pasted together. Clever!
Your redesigned UIs really points out the flaws of the current ones!
That watch face fits the FitBit really well! I was fooled!
It’s a bummer that you cannot show your interactive prototype on the phone.
I think the interactive prototype needs more efforts. Adding some animations would significantly help!

Analysis

We have discussed the good and bad about this project, and have summarized two lists:

The good

  • The project idea is very feasible, Android Wear OS is open-sourced and the redesign can be really adopted by the industry in order to provide a better user experience.
  • The project is very specific, it focuses on Moto 360 and its rounded shape. We know it is a challenge to balance between the traditional watch shape and a digital one. Exploring the possiblities on a rounded interface was a real fun.
  • The 3D model received very positive feedbacks from our visitors.
  • The paper prototype was to the scale and the printing quality was definitely better than hand sketches.
  • The user interaction and interfaced we designed really revealed what the current UI is doing wrong.

The bad (what will be improved in the future)

  • Too many ideas was inspired by other products, such as Apple Watch, FitBit etc.
  • More can be done to its main screen.
  • The interactive interface prototype looks “cheap”, majorly because of the lack of animations.
  • We did not have access to a real Moto 360, all the flaws were discovered through online videos. More could be done if we had a real device in hand.
  • Some tiny details on the UIs are not intuitively shown in the prototype, we had to explain using words.
  • Coordinating teamwork on this project is harder than what we thought, thus we made some mistakes.

In conclusion, we had a lot of fun experiencing the process of combining different prototyping techniques together into a product. It is interesting to see how our learnings can be applied to real world problems solving. We really appreciate the help from Andrew Davidson and Lukas Eiermann throughout the quarter.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.