Outline

Mirrorbot

designing a smart mirror and conversational agent assistant for mobile use

February 2024 - June 2024

Role: Designer in Team of 5

1.0 Introduction

A professional appearance is important to gain networking connections and standout for internship opportunities. This project focuses on helping students build confidence and develop a polished professional style through access to services related to clothing, haircuts and styling, according to a hypothetical brief from the University of Melbourne.

In this project, I was involved in:

analysing the personas and brief to identify key problem statements
ideation, creating 3 individual annotated sketches and 1 sketch combining of group members’ ideas that inspired the final design
developing and annotating the wireframes (designed the Homepage) and user journey map
documenting research methods specifically the desktop walkthrough, desktop system mapping, paper prototype and findings for both the application and conversational agent
developing and documenting the final conversational agent including later iterations of the conversational agent, error handling, accessibility and a demonstration video

1.1 Problem Statement

How might we guide students to more affordable and sustainable options for fashion and professional attire that align with their personal style?

How might we encourage students/alumni to share/exchange knowledge about professional and fashionable attire to help students build confidence in professional attires?

1.2 Solution

Mirrorbot is a mobile application which simulates a smart mirror allowing students to take photos of themselves in outfits or specific clothing items to get customised styling advice, find items they like at more affordable prices or more general style advice. Users help each other by providing review for items they’ve purchased which informs the future clothing item recommendations and advice.
‍
The application provides an affordable and accessible solution to the brief that affords users access to innovative technology - smart mirrors - otherwise unaffordable.

2.0 Ideation

ideation

2.1 Sketches

2.2 Storyboards

Initial Storyboard

Refined Storyboard

3.0 Research

research

A desktop walkthrough and desktop system mapping were conducted as moderated usability tests of the application.

The desktop walkthrough examined the physical access point for the service, whereas the desktop system mapping identified relationships between users, touch points and locations within the service. Participants were students between ~ 18 - 27, representing the target user group.

Desk research was conducted adjacently to explore potential designs for the service and consider accessibility. A paper prototype was also created to visualise the functionalities and considered alternative interaction flows.

3.1 Desktop System Mapping

3.2 Paper Prototype

3.4 Findings

The context of the physical service required clarification which may deem it unnecessary. The initial proposal focused on the Mirrorbot as an independent service and without defining the context of use. It is assumed the service would be available within a retail store on campus, however this introduces significant accessibility issues and a mobile device may be more useful.
There is no significant student interest in the product. Participants showed little interest in the service indicating a need to refocus on student engagement. This may be achieved by advertising the AR like features which was successful in similar products: DeWu, Wanna Kicks.
A mobile version should be provided to improve accessibility and allow for greater use cases. A physical location for smart mirror limits accessibility and use cases. Whereas a mobile application introduces new contexts of use - dressing rooms, at home - and a more customisable user experience.

4.0 Prototypes

prototype

4.1 Journey Map

4.2 Wireframes

Homepage

Photo Page

Review Page

5.1 Conversation Design Diagrams

1st Iteration

Problem: Buttons limit user control of flow and users attempt to bypass buttons inputting text requests

Solution: Buttons were replaced with open text input to allow users to input more details and customise requests

Problem: Voiceflow does not have the capacity to upload images

Solution: Image upload was removed and replaced with a Wizard of Oz approach, where an NLU imitates the product using written input

Problem: User would immediately give detail of their request after the introduction instead of Yes or NO

Solution: The script was adjusted to immediately prompt users for their request and validate the request.

2nd Iteration

Problem: The agent does not validate user input allowing errors or give users the opportunity to re-input details

Solution: Validation was added to check whether specific details necessary for responses were given and reprompts users if it is not given.

Problem: Users sometimes forgot what the agent can do, however this only explained at set times in the flow

Solution: A Voiceflow intent was added to listen for for when users want a refresh and reintroduce the agent.

5.2 Testing

An investigative rehearsal and iterative contextual interviews were conducted as moderated usability tests of the agent, where participants gave feedback on the script and prototype at different iterations. Participants were students between ~ 18 - 27, representing the target user group and staff educated in conversation design.

All information accessible within the application should be available within the chat bot. The initial script was an introduction to the service that would ultimately direct users towards the application. However, participants indicated they would prefer if all information was available within the chatbot.
The chatbot needs to account for edge cases and prompts outside the expected flow. Participants often initiated unexpected prompts in the investigative rehearsals ignoring the introductory conversation to jump to their request. It was necessary to adjust the script to allow for this and also handle request outside the agent’s functionalities.
Users enjoyed the thematic and friendly tone of the agent. Participants found the personality of chatbot, specifically the thematic jargon, enjoyable and indicated it improved their experience.

5.3 Demo Video

6.0 Evaluation

evaluation

Mirrorbot is a feasible solution to initial the problem statements. It provides students with affordable and sustainable options for fashion which may be customised to student’s personal style and encourages the exchange of fashion knowledge through reviews to improve student’s confidence. However, the current product is not a finalised iteration and would require further development to be effectively launched and become useful to students.‍

Further development would also provide opportunity for the integration and development of new features or improvements to the current design. Several improvements which could be made to the current design are:

The integration of APIs into the chatbot to provide a database for reviews and potential clothing recommendations
Training the agent NLU on student and staff feedback and advice on professional styling to provide feedback and advice that is more accurate and relevant to students
The development of a physical smart mirror which was not feasible with technical and time limitations of this project

Personal Reflection

This project was an important experience of collaborative design within a restricted timeline. Through this experience I learned important skills needed for designing in teams including learning to communicate effectively and consistently, remaining accountable, reconciling differences in opinion specifically learning to let go of ideas and delegating work fairly. I also learned new technical and design skills in Voiceflow and conversation design.

I became more aware of my own privilege as a designer without disabilities, realising my responsibility to create accessible designs and advocate for accessibility. This was especially impactful as I was unaware of how many details I perceive as small make a huge difference to the accessibility of services. I hope to use these realisations and skills to become a more inclusive designer and improve my designs.