GloMirror

Goal-Directed Design

A smart mirror with individualized features that caters to a user's beauty needs and routine.

Project Overview 📝

GloMirror is a smart mirror prototype designed to deliver a personalized experience tailored to help make the user's unique beauty needs and routine easier. Working collaboratively with a team of four, we utilized a design process called Goal-Directed Design (GDD) to develop this beauty smart mirror, grounded in extensive research. In order to effectively address both the needs of our users and business requirements, GloMirror was guided by the following objectives:

  1. Integrate technology with the reflective aspects of a mirror
  2. Create an effective skin analysis for users
  3. Provide access to entertainment and media for users’ beauty routine(s)
  4. Incorporate tutorials/guides for users with various skillsets and experience
Role

Team Lead, Research, User Interface, Interaction

Approach

Goal-Directed Design

Tools

Figma, FigJam, Illustrator, Photoshop

Project Duration

13 Weeks (January - April 2023)

Introduction: How it All Started 👋

For my capstone project in spring of 2023, we were tasked with utilizing Goal-Directed Design (GDD)—which we read from About Face (4th Edition) by Alan Cooper—to design a prototype of our choice.

My peers and I have designed mobile prototypes, and for our capstone project, we wanted to create something that would stand out. Additionally, as technology continues to get more advanced, normal everyday objects are starting to have a technological aspect being integrated with them. Thus, inspired by the integration of technology with everyday objects, I pitched an idea to my classmates of creating a beauty smart mirror called “GloMirror”. After several people expressed interest in this project, I became the team leader.

As team leader, I coordinated meetings and interviews, facilitated workflow, tracked deadlines, and provided support to my team. In collaboration with my peers, we designed a prototype that aimed to create a beauty smart mirror that solves a real problem for users.

Jessie Wu

Jessie Wu

Team Leader
Researcher/Designer

Tyler Hayes

Tyler Hayes

Team Member
Researcher/Designer

Nicole Kadom

Nicole Kadom

Team Member
Researcher/Designer

Keya Mehta

Keya Mehta

Team Member
Researcher/Designer

Sarah Subero

Sarah Subero

Team Member
Researcher/Designer

Our Approach: Goal-Directed Design 💡

To ensure our product was user-centered, we utilized the Goal-Directed Design methodology. This approach allowed us to identify our users' goals, needs, and motivations prior to creating the product, ensuring that it was designed with the user in mind. Hence, this process page outlines the different stages of GDD, how it has been adapted to fit the time constraints of our college course, and how we created this chain of evidence where our research feeds into each subsequent stage.

Goal-Directed Design Process

Phases of Goal-Directed Design

Research Phase: First Phase of GDD 🔎

In the Research phase of GDD, designers gather essential information about the project, including stakeholder expectations, user goals, relevant contexts, how the project will be used (in this case, the smart mirror), environmental considerations, and similar existing smart mirrors. This phase is critical for GDD because the insights gathered inform design decisions for the mirror and provide a foundation for traceability back to the research results.

The Research phase encompasses a Kickoff Meeting, Literature Review, Competitive Audit, Stakeholder Interviews, Subject Matter Expert (SME) Interviews, and User Interviews, ensuring a comprehensive understanding of the project. By conducting thorough research, we were able to make informed design decisions that align with the user's needs and goals.

Research Phase

Research Phase of Goal-Directed Design

Kickoff Meeting ✍️

The official kickoff meeting is typically held to establish a project by meeting with business stakeholders; however, as this is a class project, our team did not have the opportunity to meet with any potential stakeholders. To simulate a real kickoff meeting, we used a worksheet provided by our instructor to put ourselves in the position of a stakeholder. This allowed us to create a problem statement with various assumption statements, which we used to launch our project. During a detailed discussion about our smart mirror’s goals and future projections, we utilized the kickoff meeting worksheet to guide us.

Problem Statement
The current state of smart mirrors has focused primarily on reflecting a clear image from a glass surface with the integration of technology. Dimensions, materials, and reflection capabilities vary among these mirrors. What existing mirrors fail to address is how the reflective aspect of mirrors and the power of digital technology can be combined to be the most advantageous in the domain of beauty. Our smart mirror will address this gap by incorporating the user’s reflection into an interface with individualized custom features that cater to the user’s beauty needs and routine.
Assumption Statement Examples
What problems does our product solve?
Where does our product fit in the users’ work or life?
What changes in customer behavior will indicate our success?

Literature Review 📚

The Literature Review is a critical research step in GDD, providing designers with a thorough understanding of the product's context. It helps the team conduct effective interviews with Subject Matter Experts (SMEs) and stakeholders, and gain better knowledge throughout the design process.

Some Takeaways
Smart mirrors are connected to hardware with incoming data and cameras, and are typically semi-transparent sheets of glass over a digital screen. They have a variety of capabilities, such as displaying weather, traffic patterns, emails, and calendars, as well as responding to movements. AR technology is also commonly used, allowing users to preview how their clothes and makeup will look. When it comes to makeup, lighting plays a crucial role in achieving a smooth and even makeup application. To ensure the best lighting, natural light, LED lighting, and ring lights are highly recommended.

Competitive Audit 🤺

During the Competitive Audit phase of GDD, we analyze and compare existing competitors in the product domain. This process helped us identify potential competitors in the beauty and smart mirror industry and allowed us to incorporate features that competing applications lacked. We reviewed four smart mirrors. We then compared them side-by-side in a chart that illustrated several important features. This information was taken into consideration during the design process to ensure that our product had the necessary features to stand out in the market.

Comp Audit 1

Comp Audit 2

Competitive Audit Chart Comparing Various Features Across Competitors

We designed two different charts. One of them illustrates whether or not the mirror has the feature, and the second chart focuses on how effective that feature was implemented into the mirror. Color-coding was used to determine the effectiveness of each feature. Green means the feature is effective, yellow means it is somewhat effective, and red means it is not effective at all.

Stakeholder Interviews 🤝

As GloMirror is a class project, we were not able to conduct stakeholder interviews; however, we learned that stakeholder interviews are a valuable opportunity to gather more specific information from those with authority or responsibility for the product. These interviews can cover topics such as the product vision, budget constraints, technical limitations, and stakeholder perceptions of the users. If we were able to conduct stakeholder interviews, some example questions we would have asked include:

How will the beauty smart mirror help users with their makeup routine?
The mirror will have a makeup guide that can help users learn how to apply blush, concealer, contour, and more while also selecting the right shade for their skin tone. Additionally, an augmented reality (AR) makeup try-on feature can allow users to virtually test makeup products before purchasing.
How detailed do we want our skin analysis feature to be?
The system allows users to view the intensity level over time for various skin conditions (e.g., acne, blackheads, dark circles, etc.). Based on the analysis, it recommends a product or solution. The feature, however, does not include wrinkles, as they cannot be eliminated and the intention is not to shame anyone.

Subject Matter Expert (SME) Interviews 💬

Although not required for the class, we believed conducting a SME interview was essential. A SME is someone with extensive knowledge in a specific field, and we sought to gain a deeper understanding of both the technological aspects of a smart mirror and the beauty domain. As a result, our team conducted three SME interviews, two of which had experience in the beauty domain and one with experience in technology and working with smart mirror use cases.

Snippet of What We Learned ✂️

For one of our SME interviews, we spoke with Sandeep Mehta, a Senior Solutions Architect at Amazon Web Services. We learned about the two types of smart mirrors: general and specific use cases. Mehta explained that general use cases include basic features like checking the weather, viewing the calendar, etc. Specific use cases, on the other hand, are tailored to a particular use and have features that cater to that use. Mehta gave an example of a smart mirror she worked on with optometrists that had augmented reality (AR) features, which allowed users to see what glasses would look like on their face before purchasing them. Overall, Mehta's insights were invaluable, and with the information she provided us, it guided us to include general features for our smart mirror (i.e., weather, time, etc.). Our other SME interviews were just as informative in guiding our design decisions, but instead, it was catered towards beauty such as adding a lighting feature with different temperatures.

SME Mehta Mehta

User Interviews 📋

Persona Hypothesis

To begin user interviews, we needed to identify potential users and determine if they were suitable for our research. To achieve this, we developed a persona hypothesis, which involved brainstorming and identifying user types, their goals, needs, environment, and behavior. We started the process by setting up questions to define our ideal persona(s).

Persona Hypothesis Example Questions
What different sorts of people might use this product?
How many types of users will there be?
How might their needs and behaviors vary?
What ranges of behavior or types of environments should be explored?
Conducting Our Interviews

Our persona hypothesis helped us create specific research questions and identify potential participants for our user interviews. We conducted a total of eight interviews, both in-person and virtually using Zoom and Discord. To ensure the interviews were effective, we followed guidelines such as avoiding fixed questions, assuming the role of an apprentice, using open-ended and closed-ended questions, prioritizing goals over tasks, and avoiding leading questions.

Interview #1 via Zoom

User Interview #1 via Zoom

Interview #7 via Discord

User Interview #2 via Discord
Affinity Maps

After conducting the user interviews, we identified overlapping characteristics among them and created affinity maps for each interview. These maps helped us group key observations, behaviors, and thoughts while also identifying common themes and patterns across all interviews. The result was a set of clusters of sticky notes that represented the main takeaways from each participant.

Affinity Map from Interview #3

Affinity Map from Interview #3

Affinity Map from Interview #4

Affinity Map from Interview #4
Our Observations

During our analysis of the affinity maps, we observed that most participants desired a lighting feature due to the different effects of various lightings had on their makeup. In addition, the majority of participants preferred to use media while doing their makeup, such as listening to music or watching YouTube tutorials. Although we discovered some common themes, there were also differences in preferences, such as some participants being receptive to product recommendations while others felt like they were being pressured to purchase something. Overall, we gained valuable insights into the participants' characteristics, thoughts, and behaviors during the user interviews.

Modeling Phase: Second Phase of GDD 🧑

In the Modeling phase, we translate significant behavior patterns from our research into a persona. This creates a narrative for our users, helps stakeholders visualize our target audience, and keeps design teams focused on designing with our users' intentions in mind.

Modeling Phase

Modeling Phase of Goal-Directed Design
Identifying Behavior Variables

Our team analyzed the data from the User Research Interview phase and identified shared patterns of behavior among participants using the affinity maps, notes, and observations we collected.

Behavior Variable Examples
Product recommendations? (dislikes — likes)
Incorporate media? (unimportant — important)
Values lighting? (unimportant — important)
Mapping Interview Subjects to Behavioral Variables

We analyzed 26 different behavioral variables and created a scale for each of them. Next, we mapped each of our participants on a behavioral variable scale to identify any significant behavior patterns. After noticing a pattern between our participants, we categorized them into two groups based on their makeup and skincare knowledge: beginner (green) and intermediate (blue). Using these patterns, we identified characteristics and goals for each group, resulting in one user type with two personas. With this information, we synthesized personas for our product.

Mapping Participants

Mapping Participants

An Example of Mapping Our Participants

Our Personas

Our team created two personas using data from our interviews to model user behavior. These personas provide a simplified representation of our research and enhance our understanding of our users’ thoughts and actions.

Primary Persona

Secondary Persona

Now, Michaela, the primary persona, is the outgrowth of the green circles above, and she represents beginners in makeup and skincare, whereas Tatiana represents the more experienced and is the outgrowth of the blue circles. Michaela was chosen as the primary persona due to her alignment with the main behavior patterns identified. While the beauty smart mirror addresses Michaela's goals, it also satisfies some of Tatiana's needs. As a result, our team believes the mirror can help both personas without disrupting their experiences.

Requirements Phase: Third Phase of GDD ✅

In the Requirements phase, we created a context scenario and a list of requirements to determine what our primary persona, Michaela Lacey, needs to successfully meet her goals. By addressing Michaela's goals, we can also fulfill some of Tatiana's needs as our secondary persona. Our team is confident that this mirror can serve both personas without disrupting their user experiences.

Requirements Phase

Requirements Phase of Goal-Directed Design
Context Scenario

Our team developed a context scenario for our primary persona, Michaela, which outlines her typical use of GloMirror, and how it meets her needs. We held a brainstorming session to explore Michaela's motivations, actions, and thought process. As the team leader, I facilitated the meeting, and together we created the scenario.

Michaela's Context Scenario 👨‍💻

Our context scenario describes Michaela's typical day, starting with her getting ready for work and ending with her preparing for a party. It shows how she uses GloMirror's features to assist in her beauty routine. When Michaela notices a new pimple on her face, she uses the skin analysis feature to find a solution. she also uses the weather feature to help her decide what type of makeup to wear. While doing her makeup, she listens to music through the mirror. Later, when she's getting ready for the party, she uses the makeup assistance feature and lighting to achieve her desired look.

Context Scenario
Requirements List

After putting ourselves in our users' shoes, we identified requirements that our primary user, Michaela, would need for our beauty smart mirror. We used our context scenario and requirements list as the foundation for our prototype framework. Our general requirements include a home screen, skin analyzer, makeup assistance, lighting feature, magnifying feature, ingredient recommendations, problem area tracker, media casting, settings, and onboarding.

Requirements List

Requirements List

Framework Phase: Fourth Phase of GDD 🏗️

Once the requirements for our persona were established, we moved on to the Frameworks phase of our project. Here, we created pathways to help our persona achieve their goals, using a low-fidelity prototype. Once we determined the layout of the app, we then created a high-fidelity prototype of our wireframe.

Frameworks Phase

Frameworks Phase of Goal-Directed Design
Low-fidelity Prototype

To prepare for prototyping the smart mirror, we first created a low-fidelity wireframe using FigJam, a digital whiteboarding tool. This wireframe allowed us to establish the information architecture and layout of the mirror while referencing our context scenario and requirements list to identify necessary screens. Within the wireframe, we considered how our personas would interact with the mirror and mapped out the likely paths they would take.

Scenarios ‍👀

We identified our primary persona's key path scenario by utilizing the context scenario. The key path scenario, represented by the pink line, illustrates the primary persona's most common way of interacting with the mirror on a daily basis. In contrast, the blue lines represent validation scenarios, which are secondary tasks or less frequently used paths that the user may take with the mirror.

Low-fidelity Wireframe
Our Prototype

After completing our wireframe, we moved on to building our prototype in Figma. Our plan included dividing the prototype into sections, assigning each team member a specific part to work on, establishing a design system, and implementing an 8pt grid that will be used as our redlining. After this phase, we moved into Refinement, where we conduct usability tests to further enhance the prototype.

Our Styles 🌈

To maintain a consistent aesthetic throughout the mirror, I collaborated with my team members and we created a design system with various headings and colors.

Styles

Screens I Designed

The following are some of the screens and sections that I’ve designed for the prototype:

Use of Redlining

Redlining is a crucial approach in the handoff process to developers that involves documenting the elements of a design with distances shown between content. My group used an 8pt grid ratio to maintain consistent spacing throughout the project.

Redlining

Example of Redlining

Refinement Phase: Fifth Phase of GDD 🔨

After creating our prototype, we conducted eight usability tests. To ensure optimal results, we followed Jakob Nielsen's recommendation that 5 users provide an 85% return of the findings to be uncovered. Further testing may result in repeating findings.

Refinement Phase

Refinement Phase of Goal-Directed Design

We utilized various methods during our usability tests including the think aloud protocol (TAP), A/B testing, and assigning task-based scenarios to each participant. As we conducted the tests, we carefully documented the feedback and made necessary modifications to the smart mirror prototype. Through this iterative process, we were able to make significant improvements to enhance the overall user experience.

Snippet of Our Findings ✂️

Scenario: Our research revealed that beauty smart mirrors should include both a skin analysis and a skin tracker. The skin analysis would evaluate the user's skin and identify problem areas, while the skin tracker would monitor changes in the user's skin over time.

Problem: We observed that many of our users were confusing the skin analysis and skin tracker screens, and were anticipating to find solutions and explanations for their skin on the skin analysis screens instead of the skin tracker.

Solution: As a team, we decided to revise the design of our skin analysis and tracker screens due to user confusion. Our new approach includes displaying the user's most recent skin analysis results in the skin analysis screen, with potential solutions for identified problem areas. The tracker feature functions as a calendar, allowing users to monitor changes in problem areas over time and take photographs of those areas.

Usability Test

Conclusion 🏁

As the course came to an end, we were proud of the final product that we created together. We challenged ourselves by building a smart mirror instead of our usual websites and apps. As the team leader, I learned the value of effective communication and building relationships with my team members. This experience highlighted the importance of thorough research in creating a product that delivers an enjoyable user experience. It was gratifying to work with an enthusiastic team that evolved our product from research to prototype. Overall, this project was a rewarding experience.

Key Takeaways 🔑

Aside from the importance of communication and building relationships with my team members, I also gained other valuable insights:

  • To delegate tasks effectively, it's important to have a clear understanding of your team members' strengths and weaknesses.
  • Be attentive during discussions, it's possible for voices to be overlooked or overshadowed.
  • Conducting usability tests on low-fidelity prototypes allows you to save time and fix errors early on.
  • Try to follow existing conventions even if you're doing something different.
  • Setting clear deadlines and communicating often creates less confusion when working with a team.
  • If time allows, conduct more usability tests — especially if you are making a lot of changes.
  • Gather as much information as possible through interviews and research. The more informed you are, the better design decisions you can make.
  • Don't be afraid to learn more about the domain especially if you're not familiar with it.
  • When building a physical product, use materials that can be shaped and measured easily as a starter prototype (e.g., cardboard).