DROBE
Personal Project
2018
Designing an AR virtual fitting room to view which sizes work best for your body
OVERVIEW
Drobe is an application that would allow fashion enthusiasts to browse their favourite stores and realistically test the look and fit of clothing without having to physically try anything on. An AR-Mapped image of their bodies would be used to easily visualize outfits, and find the right size & colour of each garment for purchase. The app could be used by shoppers directly, or could be used in-store by retail associates to assist customers in finding their perfect item.
PROJECT DURATION
October - December 2018
8 weeks
PLATFORM
Android
ROLE
End to End UX
Research & Strategy
IA & Wireframing
Prototyping
Usability Testing
UI Design & Branding
THE PROBLEM SPACE
Due to inconsistent clothing sizing, it is mandatory to try clothing on to make sure it fits properly. Trying clothing on in fitting rooms takes energy, time and effort. There are no effective solutions to solve this problem. There are two options; try clothing on in store fitting rooms, or try online orders on at home, then go through the process of returning items if they don’t fit. There have been apps developed to try to address this problem but nothing has been developed yet that really addresses this issue in an efficient and time saving way. For this design challenge I focused my project on answering this one main question, “How might we make clothing shopping more convenient for fashion forward women, by allowing them to virtually test the look and fit of garments?”
THE GOAL
The goal is to create an app that will make online clothing shopping enhanced and improved by allowing people to shop using a tool that will let them to see exactly how garments will fit their body so they can buy the correct size and colour. To achieve this, body mapping and augmented reality technologies would be used to create an online fitting room.
RESEARCH
FINDING THE RIGHT FIT
As a fashion enthusiast, and and experienced storefront window designer I’ve had to dress mannequins, models, customers, and friends. Finding the right size and fit can be very frustrating, it requires a physical effort to actually try items on, which can be time consuming and demoralizing especially when something doesn't fit very well. Based on my professional background in fashion retail, I based the primary demographic on who I believed to be most affected:
-
career driven women
-
between the ages of 28-45
-
income of 60-120k per year
This demographic is the most affected by this problem space because they typically invest in clothing, but have full time careers with little time to spend shopping. I interviewed 6 women in this demographic about their shopping habits to understand their experiences.
THE OTHER SIDE OF THE CURTAIN
I took a casual approach with the tone of my interviews so the interviewees could feel comfortable opening up about their experiences. These are the main topics I focused on during the interviews:
-
What a typical online and in-store shopping experience was like for them
-
What they liked and disliked about their experiences
-
How they felt about shopping and their experiences
-
How shopping affects them socially
-
What types of interactions they have with friends/partners while shopping
I looked for pain-points, successes, patterns, differences and similarities in the interviews. The main insight was that fit was the number one priority, they hated trying clothing on in fitting rooms, and each person had different habits to try to make the process faster and less painful.
A FEW THINGS THEY HAD TO SAY
“I don't like the process, but I like knowing what I am buying fits properly, and that I’m buying clothing in the right size”
“ When you can see the item looks good, it helps you feel confident in your purchase. Fit is my number one priority.”
“I don’t like waiting in line, or when there are no mirrors, changing in public, or dealing with staff waiting on me. I don’t like the entire process of interacting with people in the mall. I don’t even go to stores like Zara because I know lineups will be crazy.”
“If the fitting-room line up is long I will straight up undress in the store. I do that all the time. If I only have one item, I won’t bother to try it on. I will usually leave one item. It would have to really convince me.”
CUSTOM TAILORING
I created a persona based on the synthesized information from the interviews. I used this persona as an anchor and kept it in mind while making all design decisions for the creation and development of this project.
THE FASHION VICTIM
This journey map displays a typical shopping day for Kim. I tried to understand what Kim was thinking, feeling and doing as I mapped her experience out. I pinpointed the areas of Kim's experience that were the most frustrating for her, like: trying to find a parking spot, navigating through a busy mall, lugging around clothing, shopping bags and coats, waiting for a fitting room, feeling rushed and vulnerable behind a curtain that doesn't fully close, waiting in line to make a purchase, and sitting in traffic on the drive home. Creating this map gave me an exact understanding of where Kim needed relief and also highlighted the areas that made her happy. Knowing these pain points and successes informed me on what my product required to make it useful for Kim.
THE COLLECTION
I made a list of 60 user stories from small to large that Kim would need to do while shopping. I based this collection of stories on the data I collected from interviews and the experience map. I grouped stories together that had commonalities under epics and built a task flow of the main epic. Here is a sample of some of the epics and user stories that Kim wants to do.
Try Clothing On
See how clothing fits so I can decide if I want to make a purchase
Share Photos
Send selfies to friends to help me decide on purchasing clothing pieces
Easily Locate "New Arrivals"
Locate the "New Arrivals" section so I can add trendy pieces to my wardrobe
Purchase History
Access previously purchased items so I can match them with new items
CONCEPT SKETCHES
The most challenging part of designing screens for this task flow was figuring out how the “fitting room” tool would function. Nothing like this has ever existed which made it difficult to find inspiration in conventional fashion apps, so I had to think outside of the box. The best and biggest piece of inspiration I found was actually in the avatar section of Pokemon GO. In Pokemon gamers can select pants, tops, hats, bags, and accessories. I tried to imagine how that could work with a 3D image of Kim, and how she would want to view the clothing items she had selected.
SECOND, THIRD, AND FOURTH ATTEMPT
The Pokemon Model was not efficient enough and it would force Kim to spend too much time to get her tasks done. I had to keep experimenting. I did a lot more sketching to try to crack what might be the best way to lay out this fitting room interface. I wanted to give Kim’s 3D image lots of room, speed and relaxation while browsing through her selected pieces, make all of the key elements visible, and at the same time have it be intuitive. I wanted the interaction of trying clothing on to be not only efficient, but also fun. This was the last round of sketching I did before starting my digital sketches and wireframes.
WIREFRAMES
GETTING DIGITAL
Once the sketches were developed into a solidified flow, I started to build out the first set of wireframe screens. I designed low fidelity wireframes to see if my layouts were intuitive without spending too much time on developing high fidelity UI because I knew I was going to be making a lot of changes after testing. I wanted to be able to quickly make adjustments based on the usability test results.
QUALITY CONTROL
I user tested the first lo-fi iteration on 6 people that were all avid clothing shoppers between the ages of 25-32. Although the browsing and adding to cart actions of the flow were intuitive for most, the fitting-room screens were not as intuitive. After the first iteration test round was complete, I made some well needed changes to the design layout and changed my task flow to strictly test the fitting room feature.
I user tested the 2nd iteration on 6 people in the same demographic. I was glad to see that a lot of the changes were intuitive to my test subjects, but not all my changes were a success. I needed to keep iterating and testing to get the design to a place that was visually much less cluttered but still intuitive and functional. This would prove to be one of the biggest challenges.
VISUAL IDENTITY
SETTING THE MOOD
I thought about what Kim would need in terms of look and feel for the app. Because Kim leads a very busy life, is fashionable and sophisticated, I wanted to create a look and feel that would be cool and relaxing and I wanted the clothing on Kim to be the focal point. At first I thought I could achieve a bold and sexy feel that aligned with brands like Revlon, or Sex and the City by using black, white and dark pink as an accent colour, but once I saw the moodboard, I felt that it wasn’t as sophisticated or relaxing. That colour combo stressed the trendy, fun, fashion aspect of the app rather than the actual feeling of calm I was trying to achieve. I changed the moodboard to colours that were very neutral and modern. This worked much better with the clothing because it didn't compete with it.
LO-FI WIREFRAMES
One of the biggest challenges I faced, was trying to figure out where to place the carousel of the clothing items Kim added to the fitting room. It was intuitive in the initial tests to have it vertically, but I wanted to test it horizontally to see if I could simplify the UI. When I tested the horizontal carousel there was more space for Kim’s 3D image, which is the main focus.
Figuring out how to display the colours and sizes in a clean and minimal way was the next challenge. Initially I tried displaying them on the left, then the right, then below the model, and then as a pull-up menu from below. None of these options looked right, and they weren't as high functioning and efficient as I wanted.
Another challenge I faced while user testing was that users found it difficult to understand what to do once they entered the fitting room portion of the app. To solve this problem I implemented coach marks after they were suggested to me in a group critique. This helped users dramatically after additional testing was conducted.
FINAL DESIGN
I was stuck on how to incorporate the the colour and size options in a simple way, so I went back to research more fashion apps to see if something would inspire me. I looked at various apps like Prada, Channel, Forever21, and H&M, but it wasn't until I came across a google suggestion for the MANGO app that I found a unique pattern that might work with my layout. The MANGO layout had a very usable and simple way of showing the sizes and colours. I tried a similar pattern in my design and it finally looked clean and minimal. I tested the new layout on 5 classmates and received positive results and feedback. Finally my design was intuitive with a simple interface.
CURRENT ITERATION
CURRENT ITERATION
CURRENT ITERATION
WATCH DROBE IN ACTION
RESPONSIVE DESIGNS
FRESH TO MARKET
I designed a responsive marketing page for web and mobile, for when Kim discovers the DROBE app. I imagined that Kim would come across an advertisement for DROBE while she was scrolling through her instagram feed. It is here, where Kim would decide to download it and take the next step to improving her clothing shopping experience.
A DEEPER EXPLORATION
THE FUTURE OF FASHION
In concluding Kim’s journey of finding and downloading the DROBE app, it made me think of how Kim’s experience using the app could affect how large populations shop for clothing. If the usership of DROBE dramatically increased to a mass level, how could that shape the future of fashion commerce?
Throughout the process of building this app and even before I started this project, I wondered what the fashion industry might look like in the future. On a grand scale I feel like the DROBE mobile app could have a massive effect on how we shop for clothing. It has the possibility of dramatically increasing online shopping sales, but it also could have a beneficial effect to B&M stores where associates could use the app to enhance in-store shopping experiences by allowing shoppers to see and touch the item and give them another option to see how the items fit without having to go through the process of trying clothes on. It could give a greater ease of access to shoppers who live in rural areas by giving them a way to order and try on clothing from their favourite brands without travelling. This would also be hugely beneficial to people with mobility difficulties, or perhaps people going through a gender transition and find it more comfortable to shop for clothing at home.
Going into a store with a ton of stock on the sales floor is overwhelming for most shoppers, and if you examine the trendiest stores in Toronto, LA and New York, these boutiques have a lot of space and breathing room. Stock is dramatically reduced and its very easy to browse and look at items. When there is space for the product to breathe, it makes the product look more valuable. (Drake’s OVO store is a good example of this) If fashion retailers used this app in conjunction with their B&M stores, they could have fewer items on the sales floor and customers could try on and order clothing items directly from the app and have it delivered to their homes. This could give B&M stores room to feature and really display their product by having a minimal aesthetic which makes choosing items much easier in a shopping experience. It would also allow the shopper the freedom of not having to carry items around during their shopping trips.
Upon further technological development, clothing could be ordered by consumers from the app, then manufactured, perhaps even through 3D printing locally, and then delivered. Currently fast fashion constantly churns out massive amounts of cheap and low quality clothes, accelerating carbon emissions and global warming. United Nations Climate Change News states, the fashion industry contributes 10% of global greenhouse gas emissions, and second to oil, the clothing and textile industry is the largest polluter in the world. If people could order and have their items made and delivered, it could drastically reduce the amount of wasted and unpurchased clothing these fast fashion companies dump into landfills every year (12.8 million tons annually), reduce the transportation emissions in the supply chain and potentially reduce manufacturing pollution and the water consumption it requires to grow cotton and other materials. Fast fashion companies lose millions of dollars every year due to unsold stock (30%), and paying for it's disposal. Giving these companies this option, which I hope will be much more available in the near future, would save them money, and reduce waste and pollution in the process.
THANKS!
Thank you for diving into the journey through the development of DROBE. I hope you enjoyed reading about the process from the very first concept to where it has finally landed. Come back to see my next steps, they include building out the Wardrobe feature of the app. Kim will be able to save outfits, share looks and get votes from friends on outfit selections to help her decide, and pair new potential clothing items with items she previously purchased to create perfectly matched outfit. Stay Tuned!