AI Framework

Mar 22, 2023

AI-Enhanced Watch Face Design Framework

Introduction

In the realm of UI/UX design, the AI Designer framework sets out to revolutionize watch face design by leveraging generative AI capabilities. The primary goal is to empower designers with increased creative freedom, foster inventive thought processes, and streamline workflows, thereby significantly reducing the time spent on commodity projects like watch face design.

Project Timeline

Commencing in February 2023 and concluding in May 2023, this project unfolded as a pivotal component of my team's increase in productivity and allocating valuable time for other vital projects. As an individual endeavor, independent of affiliations with specific design tools or platforms, the project explored various roles, including UX Research, UX Design, Interaction Design, Prototyping, Usability Testing, and Visual Design. Illustrator,Figma and Midjourney were the primary tools employed throughout the project.

Background

The project focused on utilizing the Midjourney AI Model , specifically targeting UI design tasks related to watch face design. An experiment was conducted to assess the model's understanding of design language by generating images based on varying description strategies and parameters. The initial test began with fundamental design requests and progressively introduced specific criteria such as different layout configurations.

The findings revealed limitations in the current model's understanding of tasks and its ability to generate relevant design images. This prompted an investigation into the seamless integration of a proficiently trained AI into the UI/UX design process, with a particular emphasis on watch face design.

What is watchface?

A watch face is the graphical display on a digital or smartwatch, presenting the time, date, and additional information. It serves as the visual interface for users, offering customization options for style and functionality. Watch faces play a crucial role in providing quick access to relevant data on the watch screen.

Types of watchface's?

Watch faces come in various types, including analog, digital, and hybrid designs. Analog mimics traditional clock hands, digital displays time numerically, and hybrid blends both styles. Additional variations feature complications, offering data like weather or fitness stats, allowing users to personalize their watch face to suit preferences and needs.

A peek in the world of watchface's
Anatomy of a watchface

A watch face typically consists of the time display, often in analog or digital format, accompanied by elements like date, day, and watch hands. Complications integrate additional information, while customization options include design, color, and complications placement, providing a personalized and functional visual interface on a smartwatch.


Traditional watchface design method with an example

Watch Face Design Process: Bringing Nature to Your Wrist

Our watch face design journey commenced with brainstorming sessions, exploring ideas for a unique and captivating concept. Inspired by nature, we aimed to seamlessly integrate the beauty of the natural world into the smallest marvel on your wrist—the watch.

Mood boards played a crucial role, helping us visualize themes and unexpected qualities that could be incorporated. We sought to capture the massive and mysteriously beautiful essence of nature in the delicate canvas of a watch face.

Ideation became a playground for experimentation. We delved into various styles, exploring the delicate elements of flowers that bloom in different seasons. The creative board witnessed the fusion of seasonal colors and unique flower forms, mirroring the intricate gears of a masterfully crafted watch.

New innovations emerged as we sought the perfect balance between stillness and liveliness. Nature's dynamic transformation, observed in the changing seasons, guided our design iterations. Insects became the focal point, representing the gradual passing of time. Their movements, carefully crafted, mirrored the subtleties of the natural world.

Through meticulous testing, we ensured our watch face design was intuitive for users of all ages and cultures. The insect element, a mystical addition, aimed to provide a connection to nature in our fast-paced lives. From low battery notifications to lively gestures, every detail underwent final testing to guarantee a seamless experience.

The result: a watch face that not only tells time but also encapsulates the essence of a personal garden on your wrist. As we launch this creation, we invite you to find joy in the serene passage of time, connecting with nature through the intricate dance of our meticulously designed watch face.


The conventional watch face design process, spanning 15-100 days, proves time-consuming for an active user base of 1.2 million seeking daily unique watch faces. This demand underscores the need for a more efficient solution to cater to diverse preferences and maintain a dynamic experience in the rapidly growing smartwatch market.

What is Gen Ai?

Artificial intelligence art is any visual artwork created through the use of artificial intelligence (AI) programs.

Midjourney is a generative artificial intelligence program and service created and hosted by San Francisco–based independent research lab Midjourney, Inc. Midjourney generates images from natural language descriptions, called prompts, similar to OpenAI's DALL-E and Stability AI's Stable Diffusion.

What's a prompt ?

A prompt is an input or command given to a computer system or AI model to initiate a specific action, generate a response, or perform a designated task. It guides system behavior.



Research

A Midjourney workshop was conducted on a private Discord channel, engaging six mid-senior level UI/UX and product designers. Text prompts were provided, and Midjourney was used to generate corresponding watch face designs. The workshop aimed to understand designers' communication strategies when interacting with an AI model and assess the impact on efficiency, creativity, speed, and potential challenges.

Ideation

Research insights informed the design approach, leading to the decision to integrate generative AI technology as an intelligent design assistant within Figma, a widely used platform in the design community. The focus was on enhancing the visual and interaction design and prototyping phases, where generative AI showed the most potential according to designer feedback and workshop experiences.

Several design tasks based on user needs were specified, and task flows were created to delve into the user journey. This information shaped the AI-integrated functionalities, user interface design, and interaction patterns.

Design and Implementation

Wireframes were generated, featuring various layouts, and feedback was collected from multiple designers to determine the optimal integration of the AI Designer into Figma. The preferred design introduced an interactive AI assistant in the form of a movable modal, ensuring flexibility and unobtrusiveness.

After several iterations informed by usability tests, the final version of the AI Designer prototype was completed. The tool showcased key functionalities, including generating artifacts using existing styles, components, or libraries, creating a user flow from a written prompt, updating existing design work using different prompts, and using reference images as visual prompts.

Impact on Watch Face Design

The AI Designer proved instrumental in streamlining watch face design processes, significantly reducing the time spent on commodity projects. Designers could now create multiple variations of a watch face component based on a written prompt, allowing for versatile design exploration. The tool's capability to generate designs, update existing work, and maintain a version log for each iteration contributed to a more efficient and creative watch face design workflow.

Conclusion

The AI-enhanced watch face design framework demonstrated its potential to transform the UI/UX design landscape, offering a streamlined and efficient solution for designers working on commodity projects like watch face design. By integrating generative AI into the design process, the AI Designer empowered designers with enhanced creativity, faster workflows, and a more dynamic approach to watch face design.



Other projects

Sambuca + Coffee Beans ;)