Smart Mirror ApR 24 - MAY 24

The Smart Mirror is one of my interesting projects. During my UI/UX class, I along with two other students, decided to try designing an interface and experience for an emerging technology. We first began with the thought of a Smart Window that could be installed into homes and offices. However, through some initial concept testing and interviews, we recognized the need for a Smart Mirror instead. This change in medium led to a new set of user personas, use cases, and design choices. In the end, we designed a product that prioritizes productivity, entertainment, and socialization (our MVP, or most viable product) while also ensuring accessibility and encouraging engagement.

For this project, my team and I used the Google Design Sprint to guide our process.

Types of Design

  • User Interface Design

  • User Experience Design

  • Product Design

  • Interactive Design

  • Accessible Design

Tools

  • Figma

recognizing the problem

Most emerging technologies generally begin in niche parts of industries —- for example how autonomous cars began as taxis —- since it is easier to test how successful the said technology is. Once this technology proves to be successful, it spreads to other industries and is sold to everyone, not just businesses. We wanted to take one such technology —- smart windows —- & apply it to households.

“How can an emerging technology that incorporates an interactive interface be implemented within a household and/or professional environment from both a start-up and a user-centric perspective?”

01

Understand

02

Timeline

03

Sketch

05

Prototype

APril 10

APril 15

APril 17

APril 22

APril 29

May 01

Define

04

Decide

06

Validate

Understand

Name of startup: Smart Window

Assumptions:

  • Users have internet access to power the smart windows’ features

  • Users are comfortable with smart home technology

  • There's a market for windows with built-in displays

Design Directions:

  • Shouldn't overwhelm the view

  • Should be secure from hacking and prevent unwanted viewing

  • Shouldn't significantly increase energy consumption

Users: 

  • Tech-savvy people who want a personalized home environment

  • People who live in cities that want a nature view

  • Professionals who want information readily available

Competitors: 

  • Smart home device manufacturers

    • Google Nest

    • Amazon Echo

Once we have figured out the various elements of our problem, our next step involved taking our current knowledge to the next level by asking “How Might We” questions. As a team, we took some Post-It notes and each wrote 2 possible ways we could enhance our emerging technology. These include:

  • How might we enhance the usage of a window vs. inhibit people from enjoying the window?

  • How might we add multiple features while making an easily usable/learnable UI?

  • How might we display information to users?

  • How might we brighten up a mundane view?

  • How might we serve the user with smart window features?

—- Initial Ideas —-

In order to come up with any ideas, it’s important to finalize our target users and some potential user stories. For instance, what do we imagine our users to benefit from when interacting with our product? So, we followed our hypothetical user story, picked out some important moments and milestones, and wrote down the impact we’re looking for. The image below shows how we interpreted the exercise for the Smart Window.

—- Initial Sketches —-

Stemming from the previous exercise, my team and I sketched out some of our user journeys. The top image is a storyboard of a user using the Smart Window for efficiency and entertainment, as they are able to zoom into their view, take a photo of what they see, and share it to other devices. The bottom left image shows the user using the Smart Window for productivity, as he gets notifications and reminders about the day ahead the moment he wakes up. The final image on the bottom right shows an overall summary of the different use cases that applies to the Smart Window. These sketches allowed us to imagine all the different possibilities with this emerging technology and come up with our Minimum Viable Product.

—- MVP —-

An MVP, or Minimum Viable Product, is a basic version of a product with core features that allows you to gather user feedback early and iterate on the design based on their needs. Our MVP entails that the Smart Window has the following 3 abilities and characteristics: 

  • Productivity (The user is more efficient in their daily tasks, as the mundane is either replaced or improved by the window.)

  • Entertainment (The user is able to have fun and experiment features that don’t relate to improving personal or professional life.)

  • Socialization (The user can interact with others and use this technology to further personal bonds, either personal or professional.)

—- The Google Design Sprint: Day 1 —-

Before thinking about solutions or even figuring out what problem to solve, it is important to first understand the needs or missing links for both the user and the technology’s market. This begins with stating our assumptions of the problem, who we think our target users are, what possible design directions we can pursue, and who our competitors are. After all, the first step before moving forward is to have a well-rounded understanding of everything.

Define

—- The Google Design Sprint: Day 2 —-

With our MVP, we know what we want our project to do. However, anything is possible when it comes to what features we can include and how to make our MVP a reality. So, we wrote 20 different user stories —- where each user has a different job, lifestyle, and need —- and chose the top 5 mission-critical stories from there. We looked for how many users will be impacted by this story, how much value does the story bring to the customer, and how important the story is to the core effort of a user accomplishing a goal or a need. The 5 that we chose are listed below:

  1. As a busy full-time employee with children, I want to visualize everything I need to know for that day so that my family and I can together prepare for a busy day, no matter the weather or other circumstances. 

  • Users Impacted: Busy full-time employee, children.

  • Value to Customer: High. It streamlines morning routines by displaying all crucial information (schedules, weather, etc.) in one location.

  • Importance: High. Helps to manage a busy household with children.

2. As a large city dweller, I want to see nature as I work and live so that I can feel relaxed and I can view beautiful scenery to avoid feeling overwhelmed. 

  • Users Impacted: Large city dwellers, potentially others in the home.

  • Value to Customer: High. It provides a calming escape from the urban environment, reducing stress and improving well-being.

  • Importance: High. Allows for relaxation.

3. As someone who values privacy, I want to switch my smart window to an opaque mode when needed, so that I can ensure my privacy within my home.

  • Users Impacted: Anyone in the home who values privacy.

  • Value to Customer: High. It provides a privacy control feature for feeling secure and comfortable within the home.

  • Importance: High. Privacy is a fundamental need.

4. As someone with limited mobility, I want to control my window’s features through with my voice, so that I can easily adjust settings without getting up.

  • Users Impacted: Someone with limited mobility.

  • Value to Customer: Very High. It allows for complete and independent control of the smart window, promoting independence and improving quality of life.

  • Importance: Critical. Ensures the product is inclusive.

5. As a parent, I need to be assured that no electrical hazards exist so that my kids don’t get hurt. 

  • Users Impacted: families with small children 

  • Value to Customer: High, it is very valuable to people cautious around technology to be assured that there is no possibility of harm to children. 

  • Importance: Very important for the home dynamic aspect of the window.

Window

Sketch

—- The Google Design Sprint: Day 3 —-

With our 5 most critical user stories that follow our MVP, we have a better understanding of what our product is going to look like. However, before jumping into prototyping, it’s important to make sure that our concept is even worth pursuing. So, since we really liked our MVP and didn’t watch to change that, we decided to explore various media as our different concepts. More specifically, we wanted to know if a window was the best place for our MVP or if a door or mirror would suit best for our customers. We took to Google Drawings and began sketching out these concepts so we have some visuals for concept testing.

Mirror

door

Window

Decide

—- The Google Design Sprint: Day 4 —-

For our Concept Testing, we went to 5 USF students at random and showed them our 3 concept sketches. We printed out our sketches so our participants can freely mark what they liked and didn’t like. I, then, took these marked sketches and created a heat map that presents all of the results and patterns all at once. The results, shown in the images below, indicate that the mirror received mostly positive feedback, whereas the window and door have a mix of both positive and negative feedback.

Mirror

We also organized these results in a table format, shown below, along with details from what the participants said and why.

door

—- Concept Testing: Next Steps —-

  • Which concept or combination of concepts are you moving forward with?

    • Equal appreciation for the window and mirror concepts

    • Mirror received the highest votes on average 

      • Incorporate customizability (especially in the shape and size of the mirror), a feature every participant asked for.  

  • Have there been any modifications to your MVP? If so, what? 

    • There aren’t any major modifications to our MVP (productivity, entertainment, socialization)

    • Our original idea for how to implement our MVP’s (if at all) will be modified due to the change in form 

  • What are you looking to learn during the usability study? 

    • Use cases that will be applicable/appropriate to a mirror

    • What people are imagining could be (or should be) possible with such a technology

—- PRototyping Considerations —-

  • UI: Simplicity, visibility, accessibility, not distributive 

    • Single color with high contrast

    • Drop-downs (i.e. burger menu), lists, buttons that lead to new screens

    • Menu and additional info placed on side, so mirror is still functional 

  • Human interface/ material design:

    • Gesture integration

    • Defined buttons

    • Menu bar animation

Prototype

—- The Google Design Sprint: Day 5 —-

With the help of concept testing, we now know to place our efforts into prototyping a Smart Mirror instead of a Smart Window. The results of concept testing has also helped us figure out what kinds of features to add to our new product. Some of these key features include:

  • Basic onboarding with gesture guidance

  • Menu burger (where users can access the settings and all features)

  • Settings (where users can adapt the UI to their preference and connect the Smart Mirror to other devices)

  • Social (where users can interact with friends and family through the Smart Mirror)

  • Reminders (where users can enter and view important information and reminders for the day)

  • Entertainment

    • i.e. Filters feature (where users can experiment with Instagram-like filters)

The 4 images below show some examples of our first high-fidelity prototype:

Validate

—- The Google Design Sprint: Day 6 —-

At this point in the project, we came up with a start-up idea using an emerging technology, came up with ideas on how to apply it in various industries and environments, tested our concept with some potential users, and built a high-fidelity prototype based on the results of our test. However, building a prototype from the results isn’t enough; we need to make sure that our prototype is the kind of solution our target users are looking for. So, to validate our designs, we conducted one last user testing before finalizing our Figma prototype. 

—- Usability Testing Tasks —-

The following are tasks we asked our participants to solve when testing our prototype. The phrases in the parentheses are the actual features we are testing. More specifically, we’re testing how intuitive our design is for users to locate and use each feature. 

  • Show me how you would personalize the display. (display settings)

  • Show me how you would remind yourself that you have a test tomorrow with the mirror. (adding a reminder)

  • Show me how you would follow along with a make-up tutorial. (play a video)

  • Show me how you would receive the reminders from the mirror from your phone. (pairing devices)

  • Show me how you would talk with your friend. (social; video call)

  • Show me how you would listen to some tunes with the mirror.

  • Show me how you would try a filter on your face with the mirror.

—- Research questions —-

Through the usability tasks listed above, we wanted to ultimately learn more about the following 3 questions:

What challenges prevent users from completing installation and set up?

How easily can users set up a reminder without assistance?

How successfully can the users control the device?

—- Usability Testing Insights —-

  • Menu bar navigation:

    • The drop down menu wasn’t an instinctual action for most participants 

    • Most would prefer persistent apps on the home screen

  • Information Architecture:

    • We found that participants had a hard time navigating to specific locations like social and device integration because of the confusing hierarchical layout

    • They recommended breaking up larger categories into more recognizable apps

  • Iconography:

    • Some participants found the iconography for the profile and home confusing. 

Final Product: Video DEMO

After our last round of user testing, we took whatever time we had left to incorporate as much feedback as possible to best improve our product. This video demo will show a quick run-through of our final prototype for the Smart Mirror.

Reflections

—- Incorporating Learnings —-

  • Onboarding:

    • Used a walkthrough approach to display how to interact with the mirror

  • Human Interface Guidelines:

    • Followed guidelines for iconography 

    • Designed for accessible interactions and text visibility

  • Design-Pattern Guidelines: 

    • Used for input controls and menu design

  • Material Design:

    • Used for motion like gesture animations and prototype screen animations

    • Followed conventions for text hierarchy

—- NExt Steps —-

  • Closely simulate a mirror and how visuals would realistically be projected (i.e. blue & glowing text and icons to test contrast)

  • Find a way to integrate gesture and voice control

  • Design indications for when a feature has been selected (users should know where they are at all times)

  • Incorporate more of human-interface Apple and Android guidelines

  • Add any more missing screens and prototype a smoother and more cohesive user experience

  • Conduct one more user testing with participants other than students once the prototype is complete with all the necessary design changes

  • Find a way to implement the prototype on an actual mirror to test the media along with the user interface and user experience