<p>Published on <a href="http://ift.tt/2olRJby">| Prototyping: From UX to Front End &mdash; Medium</a> Rahul Jain </p>
<h3>Prototyping Smart Mirror — UX Case Study</h3>
<h4>Conceptualizing, designing &amp; evaluating an interactive IOT device</h4>
<p><img alt="" src="http://ift.tt/2nY5Lyp">Photo credits: Unsplash</p>
<h3>Introduction</h3>
<p>In our<strong> ‘Prototyping Interactive Systems’</strong> class, we were asked to design an interactive physical prototype around the Internet of Things, which can be either<em> tangible user interface </em><strong>or</strong> <em>ambient information display</em>. We had 2 weeks to conceptualize, build &amp; evaluate the prototype.</p>
<p><strong>NOTE:</strong> Though research is an quintessential phase in every design process, the focus here was more on <strong>learning + using</strong> a variety of the sketching and prototyping techniques from ideation to the implementation of a system/experience.</p>
<h3>Problem Statement</h3>
<blockquote><p>How can we make an ordinary object into a personalized interactive device which displays electronic information in a real-world environment in a subtle, non-distracting and fun way, all at one place?</p></blockquote>
<h3>Why Smart Mirror?</h3>
<p>While brushing teeth, admiring our beautiful visage in the morning, or whether we are getting ready for work and even for a night out with friends, a mirror is an important object which we use everyday. With the IOT devices being more and more ubiquitous, the modern smart home needs a hub — so why not make a mirror into a personal assistant which can show more than just your reflection.</p>
<h3>Exploring Ideas &amp; Sketching</h3>
<p>We started by brainstorming ideas and concepts with low-fidelity sketches of smart mirror concentrated on several aspects: Customized music or news articles after facial and emotional recognition; the means of interaction with the mirror, for example, physically tapping the mirror. The first sketch shows how users would interact with the mirror, context of usage, and several key features such as facial recognition and a map showing routes.</p>
<p><img alt="" src="http://ift.tt/2omgea4">Best tools for sketching: Pen, Paper &amp; Whiteboard!</p>
<p>For the second and third sketches, we brainstormed ideas as a group to specify on what kind of information should be displayed on the mirror. Our ideas included customized messages such as notifications that were generated after facial recognition; news and music feed based on emotion recognition; sleep analysis of the night before based on the connected devices such as waistband or a health app.</p>
<h3>Version 1.0</h3>
<p>We built the first version of prototype after the brainstorming sessions. We decided that the users would generally interact with the mirror by voice and not touchscreen as they would not likes fingerprint marks on their mirror. The user journey starts with a facial recognition by the camera on the upper side of the mirror. Then a customized sentence such as “Good morning, John” appears on the screen. Then a system message such as “What can I help you today?” appears to guide the users to interact with the mirror. Lastly, the users can perform actions such as opening an app, calling someone and receiving and sending a voice message.</p>
<h4>1. Facial Recognition:</h4>
<p><img alt="" src="http://ift.tt/2nY4O98">Users can maintain their privacy with biometric login. (Facial recognition in this case)</p>
<h4>2. Voice interaction:</h4>
<p><img alt="" src="http://ift.tt/2omsmYB">Integrating Amazon’s Alexa with our device to interact with users.</p>
<h4>3. Making phone calls</h4>
<p><img alt="" src="http://ift.tt/2nY44AF">Users can use Voice and Video calling feature with this device.</p>
<h4>4. Receiving and sending voice message</h4>
<p><img alt="" src="http://ift.tt/2omnliH">Users can send, receive voice &amp; video messages</p>
<h3>Key findings from initial critiques and walkthroughs</h3>
<p>After initial critics and walkthroughs, we made several changes to the interfaces and decided to use gestures instead of voice as major interaction. Some people may be reluctant to use voice because they do not want to disturb other people nearby or they find it more comfortable to directly manipulate their devices. We also considered accessibility issue and concluded that having multiple options to interact with the device would help the product reach a broader audience, who may have weak sight or difficulty of speaking.</p>
<p>The changes are summarized as follows:</p>
<ul>
<li>Decide on gestures for users interaction such as scrolling the pages, opening the menu, and launching an app. The main gestures are displayed in the image below:</li>
</ul>
<p><img alt="" src="http://ift.tt/2nXYtdG.">Selected gestures for interaction with the mirror</p>
<ul>
<li>Change real time weather forecast and add “to do list”, making them visible on each page.</li>
<li>Adding menu icon in the main page and change the icon of sleep analysis as it was not clear what it means.</li>
<li>Minor changes on the layouts to make it look more clean, compact and aesthetically pleasing.</li>
</ul>
<p><strong>Significant Changes From Earlier Rounds</strong></p>
<p>Since we didn’t have time to iterate on the physical device, most of our significant changes came from the digital prototype that we designed using Sketch and Flinto. Here is a shot of the before/after of our prototype:</p>
<p><img alt="" src="http://ift.tt/2omyhgr.">Adding features like menu, real time weather forecast and add “to do list” based on our initial testing</p>
<p><strong>The new version of the interfaces are shown below:</strong></p>
<p><img alt="" src="http://ift.tt/2nY0AOT"><img alt="" src="http://ift.tt/2om4PHc">smart mirror recognizes the user to display customized data such as schedule and sleep pattern as well as providing weather forecast. By using applications installed in the mirror, the user can also listen to music, answer a call, and perform numerous other activities.</p>
<h3>Implementation</h3>
<p>We found some <a href="https://www.youtube.com/watch?v=fkVBAcvbrjU&amp;t=481s">YouTube videos</a> of people who had already created similar products and went through similar steps. Basically, we needed a <strong>monitor</strong> and a <strong>two-way glass mirror</strong> to create our device. In the video we found, the person used wood to cover the monitor, but we opted for a less expensive alternative and used foam instead. Here is a photo of what we used:</p>
<p><img alt="" src="http://ift.tt/2nY6CyK">Using a monitor &amp; two way mirror to create a functional prototype</p>
<p>Once the mirror and monitor were crafted into a single device, we needed a digital prototype to put on the screen. We made our prototype using <strong>Sketch</strong> for UI design and <strong>Flinto </strong>for motion design. Once the prototype was ready, we plugged our computer into the monitor and had a mirror through which you could see a screen as well.</p>
<h3>Final Prototype</h3>
<p><img alt="" src="http://ift.tt/2ombGQU.">We used Wizard of Oz while testing the prototype with the participants.<img alt="" src="http://ift.tt/2nY43wB."><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F4ZkCPhiBmjA%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4ZkCPhiBmjA&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F4ZkCPhiBmjA%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2ombG3m">http://ift.tt/2ombG3m</a></iframe></p>
<h3>Evaluation &amp; Testing</h3>
<p>After analyzing basic use cases of the Smart Mirror, it came to our attention that further analysis and a test with real users is crucial for improving the overall usability. After thorough preparation of test scripts, we gathered a group of few participants, who used a current version of the product. We invited these users for the testing of our product. During the private sessions, we recorded their interaction with the product while they were performing typical tasks. In addition to evaluation with participants, we also conducted heuristic evaluation inside the group. We used Jakob Nielsen’s “10 Usability Heuristics for User Interface Design” for this evaluation.</p>
<h3>Key Takeaways</h3>
<ul>
<li>First of all, we learned that our participants preferred <strong>voice commands</strong> over gesture in controlling the mirror. But the participants also reported that it was fun to use gesture and they would feel comfortable with using the gesture once they learn it. Therefore, now we can be more confident with our choice of keeping both gesture and voice as means of interaction.</li>
<li>From the testing, we learned that our product needs a <strong>tutorial</strong> that explains each gesture or voice keyword and meaning of icons as a part of <strong>on-boarding</strong> process. As most of use were Mac users, we did not take into account the possibility that the users would not know what each icon meant.</li>
<li>Furthermore, we also discovered that some participants felt there were <strong>too much information</strong> in the main screen. This feedback was also valuable as we did not realize the layout could be overwhelming for some users.</li>
</ul>
<h3>Lessons learned &amp; Conclusion</h3>
<p>Throughout our design process, we could discover several problems we had not realized in the earlier stages. For example, we originally considered touch-based interface, but we realized the users would not like the mirror to be covered with fingerprints. We also dropped the idea of emotion recognition system because it seemed most users would be always feeling tired in the morning, which leads to same cheer-up messages and music from the system that can be annoying after some time. We learned that taking a second look at the ideas is important, as we did not see any problems with those ideas when we first thought of them. We also benefited greatly from discussing ideas with each other, as it ensured not only more ideas flowed out but also a person who could point out problems that were usually not seen by other people.</p>
<p>In future iterations, we would like to implement additional features we could not include due to time constraints, such as writing — or drawing — a memo on screen, selection of news headlines according to personal preferences, weather and time information in different time zones, detecting facial expressions, makeup tutorial, health statistics (connected with wearable device), and AI technology applied to the mirror for more personalization.</p>
<blockquote><p>Thanks to the amazing team: Kenzo Nawa, In Kwon Choi &amp; Sisi Jin</p></blockquote>
<p><img src="http://ift.tt/2nXHU1I" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2omjouJ">Prototyping Smart Mirror — UX Case Study</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Prototyping Smart Mirror — UX Case Study

Prototyping Smart Mirror — UX Case Study

Conceptualizing, designing & evaluating an interactive IOT device

Introduction

Top Stories