Project Depth

This was a project dealing with smart watches and watch faces. These devices are very popular and have a huge fan base. There is also a large community of watch face creators, full of creative designers and developers. I joined in and tried to help with my UX skills.

Research / problems

By interviewing both users and creators I identified two interesting problems. 

– Most users love the fact that a smart watch can display information beyond real watch functionality. Time, day, and date are essential, but they also wanted to see heart rate, step counts, alerts, or even moon phases. Creators were struggling to put all that on a tiny screen, so usually the experience was compromised. 

– When it comes to real watches, users love all the physical detail. They appreciate all the hard which work goes into a real watch, but that detail is lost on a screen, which can only display a flat representation of a real thing. 

Intuitive experience

I wanted a simple and intuitive solution for the first problem. I decided to split up the information on multiple screens to maximise readability.

Smart watches are packed with sensors such as accelerometers, so I suggested not to rely on tap or swipe, but to measure wrist rotation to switch between screens. We would display time on one screen, then the user would slightly rotate their wrist (and the watch with it) to switch to day and date. Then we switch to battery levels, alerts, etc.

The first prototypes were far too sensitive, but after several iterations the end result was usable. Users were able to read information better, and they could see more detail without touching the watch.

Depth

Creating depth on a flat screen is not easy. We can measure a lot of things about the watch, but we can’t measure anything else (i.e. head movement). But after observing user behaviour, I realised that most users don’t do much when they check their watch. The usual process is: lift arm – look down – rotate wrist. Therefore, we started focusing on these actions.

Using accelerometer data, we were able to estimate roughly where the watch is compared to the user’s eyes. The solution was to combine this data with traditional “parallax scrolling”. 

The watch face was designed and built in a specific way. Certain parts were separated into different layers, such as watch hands, shadows, numbers, etc. Then upon wrist movement we used the rotation angle as a multiplier to move things on the screen, meaning some layers move faster, others move slower. 

After several iterations we managed to simulate depth on the screen.

 Tools

Most of the work on my side was done on paper, and we used several different communication tools to collaborate. For the UI we used Sketch App, or Photoshop.