Focals are smart glasses that give you instant access to the people you care about and the information you need so you can have peace of mind, wherever you go. They are custom-built glasses with a holographic display that only you can see. Controlled by a ring on your finger, Focals allow discreet and glanceable access to the right information at the right time - giving you control without pulling you away.
As the lead motion designer on the UX team at North, I had a key role in defining Refraction, the design language system for Focals. Refraction aimed to convey an authentic-to-the eye experience, while leaning into the hardware constraints and limitations. Designing experiences for a transparent floating display was a welcomed challenge.
Soft, round, borderless, transparent. There is no background. Design with the world as your canvas.
Be true to the display. The world is your background. Embrace additive properties of light.
Use distinct colours and gradients to add personality and create a branded experience.
I designed a stylized motion effect called Plax as a way to help guide the user’s eye and call attention to important elements. The effect is inspired by the way light bends and refracts when passing through a lens. When a Plax element moves the colours separate and bend to create a light streak along its path. The colours recombine when they reach their destination. The individual colours are only made apparent when in motion. When the UI elements are still, the colours combine in perfect alignment to produce a white shape. Plax was designed in a way so it could be applied to shapes, icons, and text.
Aside from being a unique aesthetic that can be applied to a multitude of visual elements in the product, brand, website, etc. it also helped address a hardware limitation. Due to the nature of the display, we needed to use colours within a certain brightness value in order for them to maintain colour accuracy. If the colour brightness was below a certain threshold it degraded the colour accuracy and produced undesirable display artefacts. This made it challenging to gradually fade content in or fade out. Embracing the design tenets, Plax allowed for UI elements to animate in and out in a natural fluid and playful manner being painted to the display, all while avoiding the low brightness limitations.
Along with leading the motion design efforts for all experiences on the glasses, I was a key contributor in helping define the interaction model, and supported visual design needs. Here are some of the Focals experiences that shipped where I was either the lead designer, or key contributor: System Architecture, Music Controls, Explore & Navigation, Calendar, Smart Notification Delivery, Incoming Notifications, Alexa, Fitness, and Morning Briefing. In addition to my role designing for smart glasses, I also led the motion design efforts for other areas in the company including the Focals mobile companion app, retail sizing experience, retail demo display, as well as brand and marketing needs.
System Overview
Music Controls
Explore & Navigation
Calendar Today
Smart Notification Delivery
Alexa
Fitness Tracker
Morning Briefing
Incoming Notifications
Focals experiences were designed with a "there when you need it, gone when you don't" mindset. A successful product wasn't measured by how much time you spent glued to the screen. Inversely, success would be giving you back your attention. With guiding principle to respecting the user's attention, we focused on distilling features and content to the essentials. At the same time, we worked to elevate those experiences by injecting elements of personality and delight using motion design in the form of micro-interactions, animations and transitions.