Banner of smart mirror mockups.

Urban Outfitters Smart Mirror

A fitting room mirror that helps integrate the convenience of online shopping in-store.

The problem

It can be difficult to shop in-stores when there’s a large number of products. It takes time to browse around the store to try to find what you’re looking for and the staff may be too busy to lend a hand.

The goal

Help customers find products easily, get recommendations, and overall make the shopping experience more effortless and personalized.

Generative research

We began by conducting research about current trends in the retail industry to get familiar with solutions to common issues faced by in-store shoppers.

What we found:

  • Buy Online / Pick Up In Store

    • Good especially for busy parents who don’t have time to grocery shop and/or have young children that may not behave while shopping

  • In-store navigation

  • Augmented reality / try before you buy

  • Self-checkout

  • Ex: Uniqlo has a self checkout where users place items in a basket and it detects the items without having to manually scan each item

  • Apps

    • Many people use their phones while shopping in-store to look for product information

Service safari

With this knowledge in mind, we went out into the real world to get the Urban Outfitters in-store customer experience.

My notable observations:

  • No staff greeted us upon entering the store

    • Context: two people at register and one in fitting room, didn’t see any staff on floor

  • No line for fitting rooms

    • Rooms were very plain on the outside and inside

  • Store was pretty big, probably would be difficult to look at most/every piece without spending a significant amount of time looking

    • Honestly a little overwhelming, lots of stuff to look at

Ideation

Combining our online and in-person research, we focused on trying to make the fitting room experience easier and more enjoyable by including fun features that tie in to UO’s brand as a whole.

Our ideas:

  • Add features of shopping online in physical stores

    • Finding recommendations/similar items

  • Make locating items in-store easier

  • Personalize dressing room with UO home furniture 

    • Align more with the rest of the brand and store (cool, edgy, bold)

    • Showcases products

  • Request sales assistant

    • Can bring items in a different size or new items so the customer doesn’t have to hunt for them

  • Virtual try-on for items not in-store

Using these ideas, we decided to create a smart mirror that would be in the fitting rooms.

Initial designs

We initially created the screens for an AI “UO Stylist” that can find clothing based on verbal prompts, a mix and match tool to browse tops and bottoms together as outfits, scanning items to see their information, a photo booth, and music selection to play while in the fitting room featuring albums that UO sells.

Quick tutorial screen.
Low fidelity design screens for smart mirror.

Prototype

Our mid fidelity designs added the ability to order items from the mirror if not available in-store, do a virtual try-on, request assistance from a store associate, an end screen for the experience, and a tutorial on how to use the mirror.

Mix 'n match screen with women's sweaters and cardigans and women's bottoms.
Try on screen with a person posing behind two buttons, one for scan item and the other for camera.
Request assistance screen.
End screen that says "see you next time! You virtually tried on 13 pieces, you listened to 3 songs, you took 2 pictures."
Ask a question screen with a microphone icon and the text "listening...".

User testing

We conducted concept testing to see if our idea was something that UO customers would actually use.

Our ten users went through the prototype with minimal guidance and were asked questions about their experience with Urban Outfitters, their shopping habits, and what they thought about the concept.

What people said:

  • Helpful for people who may be scared of asking for help

  • Music is fun

  • Make smart mirror optional

  • Camera might be uncomfortable since it’s in a changing room

  • Buttons may be hard to reach

  • Verbal cue not great, some may not want to speak and some can’t speak

  • Save outfit choices, link UO account

Camera screen with six different background images.

Next steps

Dot plot of the users' frequency of shopping compared to age.
Infographic of user testing results.

Overall, most users found the smart mirror easy to use and would be likely to use it if it were in-store. The most appealing feature was being able to request assistance from a sales associate.

Based on user feedback, we went ahead and added an option to use the smart mirror or a regular one. We also added the UO logo at the top for more branding.

If we had more time to work on this project, we’d implement:

  • A sidebar menu navigation that collapses and can be dragged by the user to fit a comfortable height for them

  • A way to disable the camera/”camera off mode” to give users peace of mind that they aren’t being recorded while changing

  • The ability to type instead of speak to the “Ask” feature

  • A way to login to a UO account to save outfits

Reflection

Browse screen with options for mix 'n match, new, sale, and other categories.
The music shop screen with Chappell Roan's The Rise and Fall of a Midwest Princess album cover.
Mockup of smart mirror with greeting screen on a tall mirror with wooden trim.

This was my first time designing an interface that isn’t mobile or desktop. At the beginning, I was very unsure of what steps to take as I’m also not very familiar with smart mirrors and their capabilities. I’m glad I was able to continuously learn throughout this experience how to approach designing for a different type of interface.