The visionary folks at Deloitte Digital asked us to create a smart mirror prototype to showcase the potential of seizing digital opportunities in a retail environment.
How do you design an interface for a smart mirror? It’s a new concept so there isn’t much guidance out there - we know we looked! So how did we approach the challenge? We broke the problem down into a series of smaller problems. How do you orientate yourself? Collaborating with DD’s finest we put the together the basic components of the UI and tried to create as simple an interface as possible.
Project Length
2 Weeks
Team
Kazendi
Platform
Smart Mirror
How do you design an interface for a smart mirror? It’s a new concept so there isn’t much guidance out there - we know we looked! So how did we approach the challenge? We broke the problem down into a series of smaller problems. How do you orientate yourself? Collaborating with DD’s finest we put the together the basic components of the UI and tried to create as simple an interface as possible.
As it happens our first effort worked well. We used a 7 item menu down the right hand side. The key point was finding the right level for users of different heights. We discovered that users kept referring back to their online shopping experience when they used the mirror. It’s a design approach they were familiar with and proved a useful shorthand to discuss designs and improve the look and feel.
Positioning the images taken by the camera was interesting. We started out placing them under the main menu on the right, we then tried the top, before ultimately settling on the left hand side. The same happened with the order of the menu items. We tried something, we changed it, we learned.
Upon obtaining business requirements and running a stakeholder workshop, we promptly began to survey existing customers and customers that use competing products to better understand how they would use our product. We ran qualitative surveys, and card sorting sessions as part of our upfront user research.
To take one example a central consideration for the UI was colour. We established early on that the best approach technically was to use black as the core background colour, so that the mirror element of the product worked as effectively as possible. This places a significant constraint on the photos you can use on the system.
We couldn’t use black as a colour for UI elements since it would have shown the mirror - like a someone wearing green against a green screen - and therefore chose a bright white for important elements. How much does a mirror distract from the UI elements? The answer is a lot if you don’t get the physical and system light balance correct.
That took some calibration to get right. As it happened the biggest issue we faced wasn’t a design or build problem. The mirror was delivered several days late, so we had to improvise and test on a different mirror. That issue gave us setup issues - because we had calibrated our designs carefully for one mirror size then had to use another for testing. We rolled with it and, ultimately, it didn’t hold up progress.
The technical specs for the build were interesting. For the mirror itself we used a 55 inch monitor turned on its side with a one way mirror overlaid, provided by ProDisplay. However, the actual mirror display was only delivered 5 days prior to the event and due to the short timeline, we had to improvise.
From a technical perspective, we chose to create it as a web application since this would allow us to easily update it on the fly as well as take advantage of available mobile frameworks. In order to make the workflow easier, we have used Zeplin to extract the necessary information for our developers, simply import a sketch file and it automatically creates the css related infos and makes assets easily exportable.
This also theoretically allows the client to demo the app on different devices by simply accessing a link. In addition, we decided to use Foundation since it offers a good foundation for a modular app based on AngularJS.
We used an Intel computer stick to run the mirror because it was much less obtrusive than a laptop and to demonstrate the cost effective installation. In order to create a unique atmosphere for the user, we integrated Philips Hue Lights via IFTTT to allow the users to view themselves in the right light. Overall we found the Hue system to be a simple and reliable means of creating a easily adjustable, colour variable and pleasing effect.
In our second set of UX tests we refined the mirror’s UX. We found bigger buttons were more effective and that the font size needed to be increased. We had to decide where to put the camera and how to position the images once taken.
The image worked best in a smaller frame at the centre of the screen. We adjusted the branding and other design elements as they were finalised by the client. We also tightened up the whole experience by working through the few remaining niggles.
At the event itself the mirror formed part of a longer customer journey that showcased how a variety of technologies could dramatically enhance the consumer retail experience. Our rigorous testing proved its worth.
All the components of the mirror worked as planned! We succeeded because we stuck to what we know best, an agile development approach in close collaboration with our client to craft an effective solution based on what consumers indicated they believed worked best. We did six UX interviews and went through two major iterations and many smaller ones. A smart mirror from idea to practice in less than 10 days. Something new and exciting produced in a jiffy!
