Ultraleap
WEBSITE REDESIGN LAUNCHED IN 2019 Q4
ROLE: Product Designer
RESPONSIBILITIES: User Research, Strategy, UX, Rapid Prototyping, Visual Design and engineering handoff
TEAM: 1 designer, 2 PM, 8 software engineers, 1 data scientist
DURATION: 9 weeks (Summer 2019)
As a leading hand tracking and haptics company, how can we create a brand more consumer facing and embodies the brand language of natural interaction and intuitiveness?
PROJECT OVERVIEW
Motivation behind the project
When I first started as a web designer at Ultraleap, the company was undergoing a massive transformation from Ultrahaptics and merging with hand tracking company Leap Motion. Thus, there was an immediate need for a complete redesign of the website that could capture the core mission of natural interaction while also able to create a visual language system that embodied both hand tracking and haptics softwares.
As a result, by working closely with frontend engineers, unity application engineers, users researchers and PM, I helped designed and rolled out the redesign of the website.
By focusing on main goals like selective color to showcase instinctual interaction, bold use of colors for product demos and interactive animations, we created a new landing page that could encompass both of the companies goals and moulded them as a leading hand tracking and haptics company that is consumer facing and products that are user friendly.
In this particular case study, I would want to share some of the design process that involved in recreating a branded website for Ultraleap, making hand tracking and haptics more dynamic, informative and fun to users.
DESIGN PROCESS
The design process was a combination of interviews in order to gauge an accurate understanding of how the suite of products work in Ultraleap, from hand tracking to haptics module like Inspire in order to record and design project demos that best captured company's mission. In particular, here were some quick interview sessions to inform my design decisions:
-
40+ Contextual Interview with cross functional internal partners to learn about haptics UX and leap’s tracking devices and record products' function
-
6+ Light Competitive research on competitors like Magic Leap, Oculus
-
20 Usability Testings (ie System Usability Testing + User Experience Questionnaires) for iterations and finalization of design specs for engineering handoffs
Deconstructing complex haptics as single molecules
As you scrolled through the website, you might start to realize that there is a pattern of hands animation that showcases the concept of virtual touch from STRATO Explore that created tactile feeling in mid air to our motion sensor that provides optical hand tracking module. Since hand is such an integral part of the brand, it has been used constantly to visually communicate our product ideas and inform every design decisions across the website, products and blogs.
It all started with understanding the sensations of the various tactile feeling and rethinking how we can best communicate the idea of haptics. After several sketches and iterations, I landed on the simple design of circular waves that best captured the idea of tactile effects in mid air. I reversed engineered the whole complex hand tracking process and found the most simple, core element that built haptics feedback: air molecule.
It started as a molecule and eventually evolved into the waves of air molecules that you see below. While purple color can inform a more inviting and optimistic tone to our products, the circular waves can be deconstructed and fit into different modalities of hand interactions. From click, hand dial to ripple effect, these circular molecules could best morph into different shapes and adapted as pressure points for both haptics and hand tracking products.
Making ultrasound visible with unlimited tactile effects
After creating robust hand interactions with mid air molecules, me and the team then looked at possibility of creating more interactivity to showcase haptics and ultrasound possibilities so that viewers can intuitively get a sense of how tactile feelings are created in these small ultrasound speakers.
The animation focuses on showing visible feelings and control towards ultrasound effects
In order to effectively depict other tactile feelings that came from the ultrasound emitted by the camera fermerate, I faced the challenge to synthesize these haptic feelings into just a few main effects. By talking with hand tracking experts and unity application engineers, I was able to derive some core tactile effects that emitted by these modules.
By relying on simple shapes and lines, I was able to recapitulate the 3D virtual shapes formed in mid air and utilized them as the central embodiment of the product's functions. We tried to translate complex ultrasonic waves into a simple, expressive shape like click, dial, lightening and ripple that captured all the effects of the haptic modules.
Making shape as the core building blocks for different tactile feelings
Bringing animation into a dynamic product page
The final part of the whole landing page design is to add subtle animation into the website like fade in effect to create a sense of delight. Revealing information one by one and using anchor menus to differentiate different unique selling points of the product made our page more interactive and digestible to consumers. Several rounds of iterations were used to determine the right animation speed and easing curve. Display size of product captures and typography were intentionally matched with the animation to make content consumed one by one by the user as he or she scrolls.
The animation focuses on showing visible feelings and control towards ultrasound effects
Crafting a cohesive visual langage to explore natural interection
By investing in main colors like purple and green, we wanted to create a more attractive and visually interesting branding for Ultraleap. Thus, large contrast between rectangular blocks and images made the products stood out to users. Larger, bolder and grey fonts made both the text easily scannable and created sufficient contrast for content differentiation. The menu anchors at the left (indicated down below) also created a visual hierarchy. Different lighter colors like orange, yellow and light green were injected into the enteprise page to make haptics natural, inviting and fun to our consumers.
Using Serif fonts that bought visual simplicity, rectangular blocks to make design stand out and dynamic menu to navigate at ease
BUSINESS OUTCOMES
After completing usability testings on the website, we were able to roll it out for launch when Ultraleap was established in 2019 summer. Here are some early customer feedback we got during product launch:
-
12/15 customers found the hand tracking and haptics intuitive and would love to try it out after learning the information on our website
-
15/15 customers are delighted by the animations and were able to recall some of the functions of haptic modules and hand tracking sensors
-
14/15 customers were able to navigate between different sections and find information that interested them.
KEY LEARNINGS
Breaking complex technology into simple concepts
One of the challenge I faced while designing the landing page was the complexity in hand tracking, haptics and ultrasound. However, by breaking them down using first principle and numerous interviews, I was able to boil the technology into few important concepts and ultimately create animations and features that best capture its value.
Drawing inspiration from daily lives
Since Ultraleap has a big emphasis on natural interactions, I took a lot of time to draw inspirations from daily lives like creating the molecules transitions and using rectangular boxes to accompany text copy.