• mail icon
  • LinkedIn - White Circle
  • Instagram - White Circle

Overview

 

Drobe is an application that would allow fashion-forward career driven women 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 create outfits, and find the right size & colour for each garment. 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 

8 weeks

 

Platform

Android

Role

Research & Strategy   

IA & Wireframing

Prototyping & Usability Testing  

UI Design  & Branding 

 

Problem Space

THE CHALLENGE

Due to inconsistent clothing sizing, it is necessary to try clothing on to make sure it fits properly. Trying clothing on in fitting rooms takes a lot of energy, time and effort.  There are currently no effective solutions to solve this problem, especially for women, who also often shop for their partners and children. 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 main goal is to create an application that will make online clothing shopping enhanced and improved by allowing users to shop for clothing 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 invest money in nice clothing, but they also have full time careers and little time to spend shopping.  I interviewed 6 women in this demographic about their shopping habits and experiences to understand more about their experiences shopping. 

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 instore 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 everyone said fit was their number one prioritythey hated trying clothing on in fitting rooms and each person had different habits to try to make the process faster and less painful. 

 

Here are a few things they said:

“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 is a display of a typical shopping day for Kim. I tried to understand what Kim was thinking, feeling and doing as I mapped this out. Through its development, I was able to pinpoint the areas of Kim's experience that were the most painful 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 tasks from small to large that Kim would want to do when she shops for clothing. I based this collection of tasks on the data I collected from interviews, and the experience map.  These tasks are called user stories. I grouped user stories together that had commonalities and put each group under a larger task name called an 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 Information

Send selfies to friends to help me decide on purchasing clothing pieces

 Easily find New Clothing

Locate the New Arrivals section so I can add trendy pieces to my wardrobe

 Save Item Purchases

Access previously purchased items so I can match them with new items 

THE FLOW OF THINGS

 

Once the user stories and epics were completed, I looked at the main epic and built out a Task Flow.  The task flow encompassed all of the user stories grouped in the main epic and helped me define what each step would be when I began to ideate wireframes and sketches for the development of the app. I eventually changed the task flow later on to the task of trying clothing on, but there will be more on that later.  

Concept Sketches

Sketching for Success

 

It was time to start visualizing how Drobe could look and work digitally. This was the starting point in visualizing a digital product that could meet Kim’s shopping needs. Putting pen to paper was a lot more difficult than I had imagined. To help, I looked for existing inspiration, I referenced a lot of mobile clothing sites and downloaded apps from popular clothing brands. I collected the best features and layouts from these apps and websites so my design would reflect patterns that online shoppers are already familiar with to make the usability more intuitive. This was my first sketch.

Second Attempt

 

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 style section of the game 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. 

Third, Fourth, and Fifth 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

after continued testing and iterating, I was ready to start advancing my wireframes into higher fidelity UI designs. I began this process by first creating a visual identity. I thought about what Kim would need in terms of look and feel for the app.  Because Kim leads a very busy life, and is fashionable and sophisticated, I wanted to create a look and feel that would be cool and relaxing and I wanted the clothing and Kim's body 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 wanted Kim to feel at ease and relaxed so a changed the moodboard to colours that were very neutral and modern. This visually worked much better with the clothing content as it didn't compete with it, and the muted tones helped reduce any visual chaos.  I also kept this minimal and neutral aesthetic in mind when creating all other visual branding.  I tested several typefaces, and fonts, and decided to use Futura Medium and Futura Book. These fonts are simple, stylish, and easy to read

Refinement

Reiteration Nation

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 and to the right side, but I wanted to test it horizontally to see if I could create a better visual design that would help simplify the necessary components.  When I tested the horizontal carousel it was more intuitive and gave 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 needed it to be. The design still looked too cluttered and I needed to come up with a solution.   

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.

Cut a Fine Figure

Because I was stuck on how to incorporate the the colour and size options in a simple way, 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 app for the brand MANGO 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

Ready to Web

Upon the completion of the current iteration, I decided to make a desktop version of DROBE. I imagine if Kim weren’t using her phone to shopping, she would squeeze in a lunch break shop on her laptop at the office.  There is an option in DROBE to take a new 3D image, to use an image that has previously been entered, or to use a body model that matches input measurements for people who may not want to enter their photo into the app. Having this feature would allow Kim the flexibility to shop on any device that would be convenient for her.  Below is the current desktop version. 

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!