Wear OS by Google. A case study.

Chapter 1: Intro

This project isn’t a “one project”, this is a relationship between Google and this amazing design studio called ustwo that I was lucky enough to work with for about 5 years. I was in New York just to “pass by” on my way to Berlin when while practicing job interviews met the beautiful people at ustwo at their old Chelsea studio. As you know by now everything went great and the opportunity to work with Google came a year later.

I was incredibly excited as I had no clue I would even get a job in New York, let alone one with a tech giant. It was an incredible opportunity to work on extremely high standards of design quality, but also with challenging goals. Google wanted us to create the very first products for the never worked on before ‘Wear OS’ (at the time called Android Wear). Needless to say, it was a completely new hardware experience — many times we were working off unfinished prototypes with specs to be created.

The goals were to generate excitement on the platform with products that would catch the eyes of the audience, but that also had great functionality, easy to use and would feel needed. One of the directors at Google said “I want people to go back home to pick up their watches because they forgot them and they can’t spend the day without it”. Which, in itself is a hard ask, as those watches were, especially at that time, just a small mirror of what you already had on your pockets. So, summarizing, we needed to create awesome watch face bundles that would set the standards for the platform, work first hand with new APIs, and pave the way on best practices both on a design but also on a development level. All of that would be manifested by us having all of our work on Google’s own Android guidelines and ultimately loads of media coverage.

I worked on this relationship for almost 3 years, worked on 9 projects during that time where I ended up also falling in love with New York.

Chapter 2: Initial challenges. Basic & Smart bundles

To set the mood of the time we were living in — it’s important to mention this is 2014 — there was no big player in the wearables for us to look at. Apple Watch would only be released a year and a half later and would only launch the “always awake” mode a further 10 years down the line.

Here are some of our most important goals initially. Our briefing, if you will:

• Watch faces needed to be digitally unique. Design qualities that an analog watch couldn’t replicate
• Strive to be best in class
• Set the standards for the platform. Every developer that comes after would use us as a standard goal in quality — both in design and development
• Inspire the community with blog posts, interviews, specification documents etc…
• Plan the future so we drive the platform in the right direction. One example is when overwhelmingly the request from users was to add customisation and we had to pave the way towards that outcome
• Always listen to users

The very first bundle would be the ustwo Basic Collection. At that point, we would only use very simple customisation on a small number of the watches and there would be no data displayed — meaning it would only “tell time”. A couple of goals were in mind here: We needed to understand the low battery mode in depth (what happens when the watch isn’t on) and also implement the first on-watch tap interaction.

At that point, we were a big team already. Around 6 designers, 7 developers, a project manager and a couple of QA devs. I was lucky enough to approve a few concepts. Here’s a couple is worth mentioning:

HUD, was the very first concept I got the green light to move into production. It had very nuanced details that made it “digitally unique” such as the second hand not going all the way to the centre and the top and bottom arcs giving a secondary impression of seconds and minutes with a range bar. It was one of the picks to be used first with tap interactions and later that year it was used on a huge screen at Google I/O. On top of this, HUD was the most downloaded watch face during its time, which made me incredibly proud, but it was awesome to see clients loving it and using it often — everytime we visited Mountain View, before launch, I would see loads of “Googlers” using HUD around the campus.

Zodiac, first off, I just think it looks really cool. I was also thrilled to push the boundaries of the briefing and get this idea approved. The circle with numbers are your current time zone and another time zone the user could pick. So technically, I’m actually having one piece of data on a non-data bundle: Time zones. I was also excited about how it animates with the dots connected almost as a constellation giving this idea of connection to someone or somewhere. Remember, this is our first release, we weren’t expecting to have continuous animations so early in the game. If you’re familiar with analog watches you’ll know that the most continuous second hands are the most high end they are.

On the process front. I actually don’t want to spend too much time explaining ours here. I’m not super interested on detailing this as much as there’s loads of content out there about this subject, but we were working mostly Agile, especially because most of the time we had no idea what we were stepping into, but we also had moments down the line where we went waterfall. Here’s a chart of our process at this time of the project. Happy to answer any questions, if you leave them in the comments.

Chapter 3: Getting better, Smart Collection

Smart collection was supposed to be the exact same thing, but with the implementation of three different data APIs:

• Weather
• Fitness with step count
• Calendar via Google Calendar

The curve ball on the briefing was that Google didn’t want just a complication showing those pieces of data, they wanted us to be smart about how the data was being presented to the user. The way I approached this briefing was to think on tell time and the data I was providing at the same time. I wanted to provide info “by osmosis” — the user wouldn’t even notice they received that piece of info.

Once again the process with Google would be the same. On a weekly basis we would present a deck full of ideas from designers — that we previously curated ourselves — and then Google would pick their favorites to move forward to finish the concept and then development.

I was able to approve “Next” for calendar and “Saturn” for fitness, but for this case study I’ll go over my “calendar on your wrist” design interpretation.

“Next”, was the end product of what I thought it would be a really good interpretation of your calendar on your wrists. I’m not gonna lie, I spent a good deal of time on trying to do a 1:1 representation of the calendar on those 280px x 280px screens. It took me time to get to a more minimalistic approach.

Moving forward to a more interesting take of a calendar, I started to clean as much as possible and moved on to the idea of “what’s the most important piece of information” I could give to someone that would wear their calendar on their wrist? I felt pretty confident that the answer to this question was “your next meeting”. Hence the name. But I wasn’t done yet, this idea moved quickly to this persona that was always busy and all it wanted was to know the next meeting in that split second, but that didn’t mean that person wanted just the name of the meeting or that they would be busy all the time.

The concept became something that I was really excited about. At that point, I moved from having several calendar entry points to only two pieces of info, a countdown to the next meeting and the name of the meeting.

So, I had to design variations or states for those instances. Which led me to what I called “zen mode”. Any time the user wouldn’t have any meeting for the next 6 hours it would trigger this state.

The last important thing to talk about Next was feedback. In the hope that you’re familiar with Google’s dogfood, the biggest piece of feedback I got from users was that they still wanted to be able to tell the time while on “busy/ calendar only” mode. Which to me was a little against the concept itself but I was ok with designing an option under settings where users could add the digital time at the top of the watch face.

Digital time version pointed at by the pink arrow

Chapter 4: Customisation

If you still remember the initial briefing from Google, they wanted us to “always listen to users” and at this point, two years down on this project, the overwhelming piece of feedback/ feature request was about “customisation”.

Enter the Facemaker collection. Google and ustwo agreed it was time to dig into the customisation rabbit hole and come out from it with best practices and the best experience around customising watch faces. I can tell you the story of this adventure in three ideas we had that pretty much summarise this journey.

Our very first idea was also the boldest. We initially thought about what would be the easiest and lowest friction flow we could create, and the answer was a voice input version for customisation. So, a user would be able to open the settings of a watch face say something like “winter” and the watch face would generate a watch face that related to a word or small sentence. As much as we loved the idea, this was 2016 and the development effort would be too great and probably end up with an outcome not so accurate or good-looking. It’s fair to say that nowadays we have a completely new landscape around tech for this idea and all the cool things coming out of AI-generated art could make this idea a lot more feasible.

The second idea was a lot more down to earth, and I kept telling myself I took the idea from some video game but couldn’t really remember which one. The idea was to load the customisation settings page, highlighting all items that could be customised. E.g. Hands, background and numerals would be highlighted with a dashed outline and depending on which one you tap on, you would see a second screen with a list of options for the tapped element. I would like to point out that all of these ideas were coming out of brainstorming sessions with the entire team, so never one person generating the UX solutions. Collaboration was key.

Continuing… This concept had two main issues:

1. Some elements would be too small to be tapped, having a poor tap area.
2. Very bad for WYSIWYG. If you don’t know that means “What You See Is What You Get”. I heard this term for the first time during this project — it basically means you won’t have a preview of the outcome while picking the customisable items.

The learnings from the previous idea put us on a much better path to really nail this concept. We ended up developing a matrix system where moving up and down, a user could pick different variations of one element (E.g. colour red, colour blue, colour green etc…) and if you swipe the screen horizontally you would change the element that’s being customized (E.g. Hands, Numerals, background). One quick detail about this horizontal movement, we learned through usability tests that every time a user moved sideways we should show a tag for a moment that would say what element they’re currently editing.

One very interesting problem happened during development that I think is interesting to share. By the time we got to QA, we faced a very unique (at least for me at the time) challenge. “Classic”, the watch face I created had a total of 4500 different outcomes so there was no way I could create specs for all of them nor the QA dev could check that in any way. The solution: I had a chat with Jim (our QA) and agreed I was the one that needed to check the outcomes and also be responsible to say if they are good or not. The “how” was gonna happen with Jim writing a script that would export all outcomes onto several A3 pages, and I would print them and hang them on a wall to check one by one. See image below 😅

One last note about Facemaker. This UX we created was used as the standard by Google on everything moving forward — it became a Watch OS standard. Needless to say the entire team was very happy to ship this product.

Chapter 5: A proud moment

The last project I’m sharing here is a quick one. It’s called Moods, and I’m extremely happy about this project for many different factors.

For context, we had just launched a collection called Looks. It was a BIG DEAL. This was a collection that was pitched to ustwo to be the collection that would come pre-installed on their very first Google watch. This collection had 9 watch faces that took us 11 months from start to finish. The team was big as well: 4 product designers, 1 UX designer, 6 developers, 1 project manager and 2 QA developers. TL;DR we delivered and Google was very happy about it, so much so that their marketing team got so excited about it that they wanted to pitch a completely new collection to us.

Enters “Moods”. A persona-based collection of watch faces:

• Chill, an “at home” and zen watch face. Potentially “image in the background” kind of concept.

• Do, the “at work” concept.

• Move, the sports watch face.

• Play, the watch face used on a night out with friends.

• Go, the perfect concept for the traveler.

What’s the catch then? Well, the budget and the time were incredibly small. We would have to do a similar project seven months faster and with way fewer people on the project.

When I heard about this project I got asked if I was up for the challenge. I would have several constraints and would have to design the entire collection and lead the whole process alone. Spoiler, I accept it and delivered in time with Google’s marketing loving the result.

I’m gonna list 5 things I did that I believe were crucial for the success of this particular challenge:

1. I planned the entire design and development phases very tightly. Felt like playing tiny Tetris via a Waterfall plan.
2. I made the relationship with the client and our team very close. Everyone knew about everything that was happening on a regular basis. Four months for this project was “no joke” and I couldn’t afford miscommunication.
3. I planned on approving two concepts very fast so developers could almost start working at the same time as me.
4. Since this was a persona-based collection for a marketing team, I thought of creating two mood boards for all concepts: An “emotional mood board” and an interactive/ UI mood board. This idea worked like a charm. Approving the mood boards was easy and by the time I showed concepts I was “green lighting” designs almost as quickly!
5. Last but not least, it was obvious to me that I needed to reduce development and QA time and a great way to do that was to reduce the complicated customisation system. From 6 possible layouts down to only two.

As I mentioned before, this chapter is called “a proud moment” because I was able to successfully deliver this project to Google. The marketing team was happy, the bundle achieved the 100,000+ downloads mark and it was our 2º best-ranked bundle at the time with a 4.2/5 score at the play store.

Chapter 6: Speaking of results…

I hope this wasn’t too long and you don’t feel like never hearing about digital watches again. Closing this article I want to talk about what the team achieved over these 3 years:

• Wear OS with Google was — at the time — the longest and most successful project (client) ustwo ever had
• Successfully implemented new platforms to the system as best in class: Complications API, Customisation Flow, On-watch interactions are 3 great examples
• Android Wear partnership with ustwo built a huge amount of content on their guideline page to inspire the community: Products, free code, guidelines and so much more
• Trust relationship built with Google: We worked closely and most of the initiatives Google had on Wear platform we somehow worked on during that time, but also several other projects outside of wear
• The partnership shipped 7 different projects over three and a half years plus supported their launch of Google Fit
• More on a personal level, for that young designer that landed in New York for the first time, on his first project with Google, seeing work from his Photoshop canvas to a massive screen on Google I/O was a pretty good result.

What wasn’t so good? Honestly, this was a dream project to me. I learned an incredible amount as a designer, especially on a soft skill level. I would say that mostly everything that was within our control went pretty smoothly but if I had to name a few things that could have been better, it would be:

• I actually ended up working on this project for almost 3 years. I feel it was a little too long — even with some little breaks on other projects in the middle (nothing longer than two weeks)

• At some point we designed assets that needed to be on a different type of file than how it was done originally and that problem exploded on my lap. I spent almost 4 months only creating assets at one point. Not fun.

• On Moods collection we didn’t plan to have developers with experience on wear available so I had to deal with a tight agenda with developers that were new to the platform.

• A couple of concepts never saw the light of day. Long story short, it was out of our hands but I wish I had finished some of them.

To end on a good note, that was so much more (believe it or not) to share. This was truly an incredible ride and I’m so happy I could share it with you. Hope you enjoyed it.