Created by The Windy City Lab, Glance is a smart mirror that delivers glanceable, unobtrusive information to high-performing individuals. We explored the branding and styling of their companion app as well as the visual interface of the mirror itself. Our main challenge was not only to create a beautiful and simple visual style, but also to apply that to the interface to create an unobtrusive, glanceable, helpful product.
KEY MOMENTS, CHALLENGES, AND SOLUTIONS
1. I used style tiles to design and solidify a minimal and friendly visual language.
2. Since Glance’s initial UX work, it’s display size had changed so I did a modified card sorting exercise to see how users would want to size widgets on Glance’s new display. With this, i created a grid for Glance that I used to size widgets and organize the display.
3. I used small contrasts in hierarchy to make clear distinctions between top-level and secondary-level information. This kept information glanceable, and kept Glance from becoming just another screen in the house.
4. My initial mockups of the app were black and white to match the mirror display - but were too sterile. I explored different ways to create texture and depth within the app in order to better keep the visual styling consistent between both the app and the mirror.
And now, in a little more detail...
1. How do we style a smart mirror?
Imagine you've woken up. You step out of bed and into your bathroom. As you grab your toothbrush and put toothpaste on it, you say, "Good morning, Glance."
What do you see? And how do you see it?
This simple, imaginary scenario stayed with me during my time working with Glance. I would imagine this often, and it kept Glance's main principles on the forefront of my mind. Is the information I'm designing glanceable or am I just creating another screen in the house? Will information be unobtrusive and help my user get ready for the day ahead of him? And will it be a visually pleasing experience?
This was the scenario I imagined coming out of our kickoff meeting. In addition to this, we left the kickoff meeting with a list of adjectives our client was looking for:
With all of this in mind, I got to work.
My first style tile was the safest route. It was simple, friendly, and clean; aimed at reaching the widest audience possible. I used thin, rounded line icons and small circles of color to highlight any updates or notifications.
For my second style tile, I imagined Glance was being used in a hotel. (One of Glance's features is to use voice fingerprinting to allow people to access their personal Glance from anywhere.) I imagined that the user has just woken up in their hotel room and is getting ready for a day of sightseeing. This glance also has location and hotel specific information. I designed it to be like a newspaper you might get with breakfast room service.
My third style tile was designed for the high-performing professional. I used a sharp font and kept everything much tighter. The user here is shaving, seeing which meetings he has today, and checking in on his stocks. One of my main inspirations here (and for most of the whole project) was Apple Watch. Especially for the high-performing individual, it was important to be able to minimally deliver important information.
Out of my three style tiles, Windy City Lab wanted me to move forward with my first style tile. They felt that it most closely fit their vision for glance. This style would inform look and feel decisions as I created both mirror and app mockups.
2. Can you have your widgets, your way?
After creating style tiles, we moved on to creating mirror mockups.
A few weeks prior, a UX team had created wireframes for the mirror and companion app. Since then, however, Glance's hardware had changed and now the display was only a 15 by 12 inch display within a 20 by 32 inch mirror. With that change, I felt that it was even more important now to pay attention to the sizes of elements within the display. I could have made the widgets any size that I felt like, but with this hardware change I wanted to design deliberately and make informed decisions. So, I did a "card sorting" experiment with users to see how big they would want their widgets to be.
On a whiteboard, I used tape to outline both the display area, as well as the mirror itself. I then called in users to draw out how big they would want their widgets to be.
After testing, I looked at my results and saw a few trends:
1. People preferred small time/date/weather widgets. These usually went on the top or in corners.
2. On average, these widgets were drawn to be 2.25 by 1.25 inches.
3. Larger widgets, on average, were drawn to be 3.4 by 2.7 inches.
4. When allowed to choose what they would/wouldn't use, most testers took out email, commute and events. Those who did this said, "I can see those on my phone." This was very interesting to hear, and solidified Glance's concept. Users aren't supposed to stand in front of the mirror reading emails or calendar appointments. Rather, they should see who's emailed them or see what's on today's schedule and then go to other devices to interact with that content.
With these trends, I decided to keep small widgets at 2.8 inches by 1 inch. I gave larger widgets a height of 4 inches, but kept them at the same width as smaller widgets.
Then, with these set sizes, I created a grid for a display that would allow users to dock their widgets in pre-determined spaces. If the whole mirror was still available for use, I might not have created a grid - but having a smaller space to work with can get messy quickly. Using a grid eliminates that issue.
Having users come in to draw up their mirrors, and using that data to inform my design decisions was one of the best moments of working on this project. When I went to build my mockups, I felt so firm an confident that I was headed in the right direction because I had done the research to back it up.
3. The (small) difference between a smart mirror and another screen...
...is how you interact with it.
For our first presentation, we looked at other competitors that are trying to do something similar to Glance. Most of these companies were effectively putting another screen into the house. Their products used many colors, and offered different interact-able features. For example, Samsung's smart family hub refrigerator had the ability to watch YouTube videos on its front monitor.
Glance sets itself apart from all of this extra noise. Instead of just a touch display behind a two-way mirror that you can watch YouTube on and browse the web with, Glance is unobtrusive, glanceable, and there when you need it.
But how does this translate into designing pertinent information? How do you interact with this?
Again, we place ourselves in our bathrooms, brushing our teeth and getting ready for the day. What do I need to see now? And how much of it?
On its topmost level, Glance shows an overview of basic information. A layer deeper gives you a little more detail, but not enough that you're standing in your towel reading up on who wants to add you to their LinkedIn network.
Keeping these ideas in mind, I designed various states of the mirror as well as what expanded widgets would look like.
Part of my decision to use white predominantly was because of the hardware. The LED background wouldn't display other colors as well as it could display white.
In terms of hierarchy, though, I wanted to keep things as simple as possible. I learned through designing these mockups that any more than two variable differences in contrast can be problematic for users. For example, if I were to show a contrast difference in content using size, color and weight, that would be to large of a contrast. On the other hand, keeping contrast differences to a maximum of two parameters (say, size and weight) helps keep hierarchy simple and easy to understand. At the core, UI is about communication, and having too many contrast differences hinders communication between the user and the product. By keeping hierarchy differences clear but minimal, I was able to design a clean interface.
4. How can I desterilize black and white?
In my initial mockups of the companion app, I had attempted to use only black and white to keep the visual language from the mirror consistent. However, as I quickly found out, only using black and white can easily make an interface look very, very sterile.
There were two major things I had to fix. First, was the background. Second, was how the mirror looked in-app.
For the first problem, I decided to take a picture of water, blow it up, heavily blurr it, and place it behind everything to create a glass-like texture.
The second problem was a bit trickier. At that time if I had to give a "color" to a mirror, it would have been white. But, as you can see above, that didn't effectively translate into UI.
After figuring out how to give some texture to the background, and taking another look at the mirror mockups I had already made, I wondered if I could somehow just bring my mockups over. What I found through experimenting a bunch, is that if you take a white rectangle and drop the opacity down to 5%, you get a nice layer on which you can put white text on top - and still have it readable. This, with the water texture in the back helped get rid of how sterile the app was.
Silence can be sterile, but a little background noise goes a long way.
5. At the end of this project...
...I found myself genuinely wanting to do more. I wanted to create more icons, envision different widgets, find a better way for users to interact with the companion app, or just see if the grid actually gelled with users. I learned that there's a sweet spot to hit between silence and noise. I learned that there's a way to design UI that's available, but doesn't demand your attention. And I learned that imagination goes a long way in framing a situation. Working on Glance has been one of the most rewarding experiences, and I'm looking forward to taking what I've learned here into other projects.
Thank you for taking the time to read about my experience working with The Windy City Lab and Glance. Although these are just some of the key moments from the project, I would love to share more about my work, so please don't hesitate to contact me.