WEAR OS
SMARTWATCH INTERFACE MOTION DESIGN
The project's objective was to develop a watch interface that incorporates motion design components into the final prototype mockup and shows the time and weather. Creating mood boards to investigate several analogue and digital watch interfaces as well as weather data visualisations were among the project deliverables. In addition, a mood board based on a selected word was made to investigate visual language. High-quality wireframes were created, and integrated motion animations were included in the prototype mockup.
PROJECT OVERVIEW
TimeLine
2 Months (June to July) 2023
Tools
Figma, Illustrator, Adobe Xd & After Effects
Role
Interface & Interaction Designer
DESIGN PROCESS
Ideation
MOOD BOARD EXPLORATION
To begin ideation, mood boards were created to explore different designs of analog and digital watch faces, as well as different styles of weather graphics and weather data visualization.
Moodboard 1: Exploring Physical Clock Interfaces
Focus: the intricate elegance and playful creativity of traditional clocks and watches.
Moodboard 2: Exploring Digital Clock Interfaces
Focus: the functionality of digital clocks, what sets them apart from traditional clocks.
.png)
Moodboard 3: Exploring Weather Data Graphics on TV
Focus: how existing weather channel display information clearly and playfully, how much information do users need?
Moodboard 4: Exploring Weather Data Graphics on Mobile
Focus: how existing weather apps display information clearly and playfully, how much information do users need?
Moodboard 5: Exploring Modular world
Focus: Employing a module or modules as the basis of design or construction.
To initiate our exploration of the design language for our watch interface, I chose a term that would encompass the aesthetic we aim to communicate through our visual and motion design. My design inspiration stems from the word "MODULAR." For my mood board, I've curated images that draw inspiration from the flexibility, adaptability, and organization inherent in modular design principles.
Selected Word:
MODULAR
adj. flexible, adaptable
characterized by the use of standardized units or components that can be easily modified or rearranged: VERSATILE
This term reflects our intention to create a design that is not only visually appealing but also flexible and adaptable, much like modular design systems.
INTERFACE EXPLORATION SKETCHES
Hand-rendered sketches were created to investigate potential design options that integrated various layout ideas and visual representations of showing time and weather data.
HIGH FIDELITY WIREFRAMES
Various components from several distinct interface sketches were combined to create the final design. This shows how decisions have a ripple effect and are interconnected, which makes people reflect on the influence of their own decisions and think critically about the potential wider effects.
PROTOTYPE
The final visual design of the watch interface has a sleek, black appearance, with elements and features that are modelled by the modular movement and appearance of ripple effects.
NEXT STEPS
The next step in this watch interface design is to create interface designs for the other weather data widgets. Additionally, I will explore ways to integrate motion design and micro-interactions into these displays.