MOA Smart Watch
The brief
This smart watch concept explores the possibilities of a bespoke UI designed specifically for a round watch face. For an understated style and energy efficiency, the visual design language is very minimal. We were appointed by an undisclosed client to execute concepts, participate in UX and design UI.
User journeys & wireframes
After initial competitor and user research to establish what mattered most in terms of features and experience, we referenced personas and stories created by the client before sketching out user journeys, wireframes and the basic navigation structure for the watch. This was continually refined throughout the design process.
Interaction
Once it was established what features would be included on the watch, we could start to look at the overall interaction model and determine how best to navigate the watch using just the screen and a single button on the side. This was then further refined based on the initial user testing of basic prototypes.
Navigation
Considering future scalability the main menu works as vertically paginated 3-icon slides that animate in and out around the radius of the watchface which pushes out to the left of the screen. Consistent with the main menu the quick menu also uses paginated 3-icon slides. Buttons were scaled to an optimum size for tapping.
Watchfaces
We designed a collection of watchfaces ranging from restrained, minimal and elegant styles to more experimental and expressive layouts. They were all limited to the use of a maximum of two colours and a simple key-line style for visual consistency. The watchfaces were an opportunity to introduce some creativity.
World time
In keeping with the ultra minimal visual language for the world time feature the user swipes along a dot-style world map to select their time zone. Tapping on the selected time zone then takes the user to a scrollable list to select their country. This had to be very simple given the limited screen space.
Schedule
Designed to be highly glanceable the schedule shows the event, duration, time-until-event and the current time highlighted around the outer digits (marked with a dot within the hour). Tapping on any event from the Schedule screen takes you to the details view to read the full content of the event.
Introducing colour
We also explored the use of a restricted colour palette for the icons and for colour-coding text and visual elements, just enough to add a little personality without detracting from the overall minimal design language. This worked quite nicely for icons like the bike where elements could be distinguished by colour.
Grids, buttons & typography
All screen elements and typography align to a 6dp square grid. To work in harmony with the 6dp grid, we have 8 type sizes that scale by either 3, 6 or 12 so there is always a rythm in the layout. To create an elegant look and feel the button states are very subtle with just enough differentiation to indicate interaction.
Let’s work together
→ Say hello →