Mobile coming soon.
View on Desktop.
Wear OS

A pioneering collaboration between Ustwo and Google's Wear OS team revolutionized smartwatch face design and development.

CLIENT
Google
STUDIO
Ustwo
YEAR
2017
ROLE
UI Designer

Google introduced a new version of Android for smartwatches in March 2014, and recognized the need for a collection of watch faces to serve as a wallpaper for the OS due to the transient card UI. They contacted Ustwo for assistance, and a design request was made internally. Our team designed, built, tested, and delivered eight watch faces in time for Google's annual Google developer conference in June, where they were showcased live on stage. Our team was later commissioned to design two collections of smart watch faces for the new platform.

Problem

Wear OS, a new version of Android specifically designed for wearable devices, was created by Google. With the impending release of the first version of smartwatches powered by Wear OS, Google's team sought the assistance of a design partner to develop smartwatch faces, establish best practices, and document the design process.

Solution

A highly skilled team of designers and engineers was assembled by Ustwo to design and build two sets of smart watch faces. The team dedicated efforts towards comprehending the limitations and possibilities of Wear OS, defining key design principles, and documenting the process to impart knowledge on the wider design and tech communities.

Foreword

Our team's extensive knowledge of the Wear OS platform and exceptional ability to deliver top-notch software in a short time frame led to our being selected as an early access partner by Google. We created for the platform while collaborating with Google on new and unreleased APIs. The design team focused on style and data integration. Our goal was to create collections of watch faces that were authentic, energetic, and diverse. Our team of five designers produced numerous concepts, which were then ranked based on their clarity, glanceability, and complexity of implementation. Ultimately, we developed 20 new watch faces, which were released alongside the new Wear OS Watch Face API in December 2014.

Rift Smartwatch Face

The Rift smartwatch face features a design that includes 60 spikes extending from the outer edges of the screen, representing the position of minutes in a single hour. These spikes also shift in color from lavender to fuchsia, marking the progression of seconds as well. The above diagram illustrates the procedure that our team followed to create every smartwatch face, taking into consideration diverse screen modalities like LCD, OLED, and AMOLED. Moreover, our design team ensured that the face design synergizes with the standard components of Wear OS.

Customization

We believed it was essential for wearers to be able to personalize the appearance of their watch faces. To make this possible, we designed for how users could customize their watch faces both on the watch and through a corresponding mobile app. To achieve this, we conducted extensive research to gain a comprehensive understanding of how smartwatch faces can be influenced by corresponding mobile applications. With this knowledge, we proceeded to design each watch face with customization in mind. For instance, our Rift watch face features customizable colors, allowing users to select their preferred color theme. Additionally, we ensured that all watch faces were able to display the timezone of the user's choice, providing an added layer of personalization.

Waves Smartwatch Face

Another digitally authentic and style-focused design that I created is the 'Waves' smartwatch face. This design is based on a grid of square shapes that flip in a successive manner over the course of a minute to reveal the underlying color. One of the most significant features of this smartwatch face is that users can customize its color theme by using their watch face settings and/or mobile companion app. This level of customization allows users to make the watch face more personal and tailored to their preferences. I particularly enjoyed working on this design because it presented an exciting opportunity to explore the interplay between color and movement. By leveraging the flipping motion of the squares, I was able to create an intriguing visual effect that captures the user's attention.

Design Process

Just like with my other smartwatch face designs, I carefully considered the screen modalities and Wear OS components when creating this particular watch face. By taking into account these essential factors, I was able to ensure that the design would be optimized for the smartwatch platform and provide a seamless user experience. Understanding the screen modalities was critical in ensuring that the watch face design would look great and be easily readable across different smartwatch devices. Additionally, considering the Wear OS components ensured that the smartwatch face would be compatible with the underlying operating system and provide the necessary functionality for the user.

Versus Smartwatch Face

Versus is a data integrated smartwatch face that displays fitness data set in the context of time. By incorporating the step count into the smartwatch face design, the user can easily track their fitness progress from day to day. The data is presented in a visually appealing and intuitive manner, making it easy for the user to understand their progress. One of the key considerations when designing a data integrated smartwatch face is ensuring that data is presented in a way that is easily digestible and not overwhelming for the user. With Versus, I focused on simplicity and clarity, while also making sure that the design was visually appealing and engaging.

Collections

The design team put their creativity to the test by generating around 300 unique design solutions. However, the team ultimately selected two collections of 10 watchface designs to ship. The first collection focused on styles that were authentically digital, while the second collection featured data-integrated smartwatch faces. Throughout the design process, the team worked closely together and provided feedback on each other's work. This collaborative approach allowed for regular critiques of each design solution, with a focus on elements such as clarity, the ability to consume information in a single glance, and ease of implementation. By working side-by-side and leveraging each other's expertise, the team was able to create designs that not only looked visually appealing but also served a practical purpose for the user.

Google Play Store

Our ultimate goal in designing aPlay Store presence was to provide potential users with an immersive and engaging experience that accurately reflected the style and functionality of each unique watch face. To achieve this goal, our team employed a range of techniques, including the production of a captivating video that showcased the fluid movement of each watch face. In addition to the video, we developed a series of images that were carefully designed to capture the intricate details and stunning visual elements of each watch face. These preview images served as a visual representation of the watch face, providing users with an in-depth look at the color scheme, shape, and unique features of each design. To further enhance the visual appeal of our Play Store listings, we also created custom app icons that reflected the distinctive style of each watch face. To complement these visual elements, we also crafted clear and concise descriptions that explained the key features and benefits of each watch face in language that was easy for users to understand.

Design Guidelines

Towards the later stages of the project, I had the opportunity to collaborate with one of our team's senior engineers and the developer relations team at Google. Our joint effort resulted in the creation of the first version of design and development guidelines for the Wear OS platform, specifically regarding smartwatch faces. Although the task of formalizing months of research and design work into written guidelines was a grueling experience, I found it to be a rewarding challenge. At the end of the process, I felt a sense of accomplishment and confidence in the fact that our work would have a meaningful impact on the broader community. By developing these guidelines, we aimed to provide a clear set of standards and expectations for developers looking to create smartwatch faces for the Wear OS platform.

Outro

One of the younger designers on our team, Eduardo Kerr-Oliveira, collaborated with a colleague who specialized in 3D modeling to create a teaser video for the launch of our smartwatch face collections. Looking back on it now, the experience of working with the Wear team at Ustwo remains one of my most inspiring career memories. The dedication, creativity, and teamwork that went into creating this product serves as a reminder of the exceptional talent and passion that existed within our team. In retrospect, it was a testament to our company's culture of innovation, where individuals were encouraged to take creative risks and explore new approaches to design challenges.

Team Credits
Team Member
Team Member
Team Member
Team Member
Team Member
Team Member
Team Member
Team Member
Short Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor amet et consecuter adisciping amet et consecuter lorem ipsum dolor ipsum consecuter adisciping amet et dolor lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor amet et consecuter adisciping amet et consecuter lorem ipsum dolor ipsum consecuter adisciping amet et dolor lorem ipsum dolor.
Team Credits
Andrew Zellinger
Andrew Zellinger
Andrew Zellinger
Andrew Zellinger
Andrew Zellinger
Andrew Zellinger
Andrew Zellinger
Andrew Zellinger
Short Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

20%
Data Point Headline
40%
Data Point Headline
60%
Data Point Headline