Enhancing In-Store Shopping with a Smart Outfit Builder
➜
➜
Project Goal
To conceptualize and design a new product that combines the best of both the in-store and online clothes shopping experiences.
Team: Small group of student designers and developers
My role: UX research, UX design
Timeline: 01/2019–04/2019
Tools: Adobe XD, Illustrator, Google Forms
Contents
Click to navigate
➜
➜
User Surveys
Competitive Analysis
Wireframing & Prototyping
Color Palette
Testing & Iteration
Background
Inside a large, busy clothing store, customers can easily feel overwhelmed and in need of some guidance. The plethora of items available can be intimidating when one is just trying to find simple clothes that work well together.
Customers are increasingly finding online shopping to be faster, easier, and more personalized. But online shopping cannot replicate the invaluable experience of seeing merchandise in-person and trying things on in a dressing room. We wondered if there was a way to get the best of both the in-store and online shopping experiences simultaneously.
There must be a better way to shop for clothes in-person than having to sort through confusingly organized racks to find each item one is looking for.
Research
User Surveys
To identify an area of the shopping experience that we should focus on, we conducted a survey to find out what our peers’ shopping habits were. We sent out a mass email, primarily to other Northeastern University students, presenting them with a variety of questions. Seventeen students answered the survey. Below are some of the results, along with the inferences we drew from them.
Where do you usually shop for clothes?
Despite all the conveniences of online shopping, the vast majority still prefer the more reliable in-store experience.
How long is a typical in-store shopping session for you?
About half of those surveyed are willing to spend more than an hour at a time making sure they pick out the right clothes.
What is your biggest difficulty with in-store shopping?
It looks like customer service isn't where most clothing stores are lacking – rather, customers simply struggle to find the right items.
A clear takeaway from these results is that many young people still value in-store clothes shopping, and they spend hours in stores struggling to find the right clothes. We thus decided that we would like to build a product that would make the in-store shopping experience more efficient and enjoyable.
Competitive Analysis
We found that many big box retailers are implementing new technology in their stores to make finding and trying on products more convenient.
Lowe’s has built an AR-based app that creates in-store directions to guide shoppers to the product they’re looking for.
Sephora has technology that matches customers’ skin tones to the right foundation makeup, and even allows them to try on makeup virtually.
Companies such as Stitch Fix provide personalized fashion boxes to customers based on their responses to preferences surveys.
After reviewing these differing services, we wondered if there was a way to combine them: Gathering a personalized set of items, but making that available for the customer to try on right in a store. We all became excited about this idea, and decided to pursue that for this project.
The business impact of personalization
To understand the potential value of building an application incorporating personalization, we wanted to see how well existing recommendation engines drive sales. This detailed report provides some impressive statistics, like the fact that algorithmically recommended products on e-commerce sites convert more than 3x as many orders as other product listings. A business model in which clothing stores would license our personalization service – for the benefit of both their customers and their sales numbers – thus became our underlying concept.
Planning
To take the fashion box service and radically simplify the customer experience, we wanted users to be able to quickly select a personalized set of clothes (without having to pay for or sign up for anything), and then try it on immediately. To do this, we realized that we would need:
The right hardware configurations
After initially planning to create a smartphone app, we realized that it would be more convenient for customers to be able to simply walk up to a kiosk designed just for this service. The larger, tablet-sized touchscreen of such a device would also make it easier to present a variety of inventory for customers to quickly sort through.
Intelligent, well-designed software
We knew good algorithms would be necessary so that the user’s survey inputs would reliably produce clothing items they would be interested in. We also recognized the importance of making the user experience as efficient as possible, to allow users to go from first approaching a kiosk to entering a dressing room with their desired items in just a few minutes.
Strong partnerships with stores
Key to the successful implementation of this service would be store integration. The kiosk would need to be conveniently located within the store, and store employees would need to well-trained on their own back-end software for quickly pulling the items each customer is looking for.
A great selection of in-stock inventory
This would be another important factor in allowing customers to obtain exactly what they’re looking for without hassle or compromise. For demonstration purposes, we chose H&M as our store due to its wide selection of products and largely affordable prices.
Design
Wireframing & Prototyping
The goal with the first wireframes was to build out the user flow as straightforwardly as possible.
Our team all felt that the process should begin with a few survey screens, then move to an item selection interface, then a results screen, and finally a confirmation screen directing the shopper to the dressing room.
Some team members felt that a scrolling grid of items would be overwhelming for shoppers. This wheel-style interface that I mocked up addresses that concern by focusing the attention on one item at a time within each category.
After we reviewed the above wireframes, we realized that there was still too much information being presented to the user on each screen. Asking multiple questions simultaneously, and then showing tons of items to choose from, would make using the kiosk feel lengthy and complex. We discussed a number of ways to simplify the layouts, and started implementing them in the prototype below.
Singular survey question screens: Asking the user only one question at a time makes the process feel more approachable, simplifies the interactions (no more “next screen” button needed), and allows for room to display large images of each option.
A singular set of results: To simplify the results screen, only a single item is presented for each category, and item names and prices are clearly labeled. The shopper selects the pieces they like and “regenerates” the unselected categories until they like their entire potential outfit.
Color Palette
We experimented with a variety of color schemes – light, dark, monochromatic, and brand-based.
We found that strong colors could be too distracting from the clothing items, so we ultimately settled on a simple, unobtrusive palette of grays and blacks.
Companion app for employees
Although our primary focus was on the kiosk application for customers, we also mocked up a companion smartphone app that store employees would use to fulfill orders. As shown below, they are presented with a simple stack of incoming orders, and can expand any with a tap. Additional tabs present options for seeing all requested items together, for viewing a map of the store, and for communicating with team members.
Testing & Iteration
As we began testing the prototype, we found that the process of selecting desired items and then tapping “Regenerate Based on Selected” felt cumbersome. We also realized that it almost suggested that multiple items should be regenerated, and thus implied that the initial batch of items presented isn’t very good.
To address both of these issues, we replaced the select and regenerate process with a Find New Item button for each category. With this change, the UI went from feeling like a semi-smart slot machine to an entirely smart outfit creator.
Developing the application
Click here for a detailed description from the developers on how they built the final working application.
Conclusion
Our application is a nice proof-of-concept for an in-store experience that incorporates the convenience of digital shopping. For further development, we would consider additional parts of the user flow, such as what happens if a user is unsatisfied with one or more of the items they’re trying on. (Would there be another kiosk inside the dressing room?) From a business perspective, we would consider which other brands would be able to utilize this product, and what adjustments would need to be made to both the user interface and the algorithms to accommodate them.
Final Screen Recording
Here is a screen recording of the final application, as it uses the style
algorithm and real inventory from H&M to create a mens work outfit.