HCDE 498 Final Project Moto 360 Redesign

Background

In this class, we learned a lot about prototype design, including paper prototype, 2D, 3D prototype and interactive design prototype. The final project will use the prototype design that we learned in this class to create a smartwatch 3D model and UI prototype.

The final project includes following prototype contents in HCDE 498 class:

  1. paper prototype
  2. 3D model prototype (model)
  3. interactive high fidelity prototype

Concept

The project prototype design was inspired by the Moto 360 watch and Apple Watch UI design. Moto 360 is the most popular android smartphone that Google and Motorala released last year. As the first wearable device that Motorala designed, Moto 360 UI design exists some problems that need to improve.

  1. Main User Interface

For example, different from Apple Watch, Moto 360 does not have a main UI for users to select different Apps. Instead of main UI, users can only select their Apps from a list. That is the first problem that we want to fix.

2. Music App

The second problem we want to redesign is music app design in Moto 360. The picture below shows the current default music App UI which only has pause and play button. Moreover the ablum is blocked by notification bar.

Current Default music app in Moto 360

3. Hear rate and fitness tracker

Another UI design we want to change is Moto 360 heart rate detection App. The following picture shows the current UI of Moto 360 heart rate UI. Different from Fitbit and Jawbone, Moto 360 health tracker does not have walk count and distance detection (only shows walk and run time). Thus, we want to complete the UI design of Moto 360 health tracker.

heart rate detection
current fitness UI

4. Clock Alarm UI

The last problem we found about Moto 360 default App is clock alarm user interface design. The normal clock alarm UI we used in smartphone is a list of time. Users can choose different time through a list. However, Moto 360's shape is a circle and some list information is blocked by the shape. Thus, it is not comfortable for users to choose the time they want to set.

Time Clock Alarm

Goal

Our final project goal is to redesign the Main User Interface, Music App, Heart Rate and Fitness App and Clock Alarm App UIs. Then we create a Moto 360 3D model and print out the UI interfaces we designed to do a paper prototype.

Here is the list of our final project contents:

  1. Moto 360 3D model
  2. Moto 360 Main User Interface
  3. Moto 360 Music App UI
  4. Moto 360 Heart Rate and Fitness App UI
  5. Moto 360 Clock Alarm App UI
  6. Paper Prototype
  7. Video

Implementation

Preparation Sketch

Before we start to design a high fidelity prototype, we did some research and brainstormed some ideas about Moto 360 UI.

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 size is 3.14 * 20^2 = 1256 mm^2. Thus the Moto 360 display area is much larger than Apple Watch display area. However, the Moto 360 display’s utilization ratio is less than Apple Watch display’s uilization ratio which indicate Apple Watch shows more information than Moto 360 in per pixel area. Thus, in order to improve the Moto 360's utilization ration usage, I decide to try Apple Watch Main User Interface in Moto 360.

Moto 360 Main UI

Music App UI

Music App UIs

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 bar is the music progress bar and pause/play, next/previous song buttons show in the middle line. It is easier for users to know the music information and pick the song they want to listen.

Heart Rate and Fitness App

One clap, two clap, three clap, forty?

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