Date: Mar. 2017
Course: Advanced Prototyping & Design (practice in agile designing)
Team: Nadia Shamsedin (me), Todd Mihlbauer, Stacey Seronick, Katie Jones, and Megan Cody
Roles: UX/UI Designer, Content Strategist
Tools: Sketch, Mural

Background: Our team was given two weeks to conceptualize and design a mock-up for a novel digital product or experience, with one of our members (Todd) acting as the "client." The product could be anything. I am frequently frustrated with the experience of online clothing shopping because of lack of information when it comes to sizing. Women's bodies in particular are so variable, knowing if a clothing item will fit properly is difficult. With so much e-commerce in the fashion industry these days, I wanted to develop a type of "virtual fitting room." How can we revolutionize the online shopping experience to maximize the user experience while online shopping?

Goal: Design an holistic experience that will greatly enhance the online shopping experience so consumers can be more confident that the clothing they purchase fits accurately.

Final Product: View our low-fi mock-up documentation here


View our entire process report here

Since this was a two-week challenge, our process was condensed quite a bit. Our main focus with this project was on developing the entire concept of PerfectFit for the user. We did not have time to work out all the details of PerfectFit, such as all the interactions. 


Step 1: Conceptualization

Goal: Conceptualize the overarching user experience for PerfectFit.

Approach: brainstorming sessions

Our first order of business was figuring out the entire user experience for PerfectFit. How would our users actually put their measurements into our interface? What would our interface even look like? Do we need an actual UI? How would our UI integrate with our consumers, the clothing companies themselves?

Well, we decided to take the name PerfectFit as seriously as possible. We know people trying to take their own measurements and self-enter that data is rife with the possibility of human errors. The whole point of this PerfectFit concept is to see how clothes will fit you digitally as closely as possible before purchasing garments. If there are errors in the data, then the fit of the clothing will be off. Thus, we came up with the idea that we will have standalone body scanners that clothing companies can purchase and locate in their stores, as well as integrate our technology with their online stores. Once a person gets body scanned, that data is uploaded into the PerfectFit database, which will render a 3D model of the user.

Users can be body scanned whenever they want. We know body measurements can fluctuate at any time, especially in certain cases like pregnancy, So, ensuring there is no limit on body scanning was important to us.

Thinking through the entire experience of how users would actually engage with PerfectFit was illuminating and helped us focus on the big picture. PerfectFit: the virtual dressing room.


Step 2: Exploration 

Goal: Explore different potential functionalities and features of how PerfectFit technology would integrate with online clothing retailers

Approach: Information architecture, system requirements

The body scanning portion of the PerfectFit experience is just the beginning. We had to decide how we would leverage the body scans to satisfy our users the most. After some back and forth discussions, we decided that online clothing retailers could opt-in to integrate into the PerfectFit database. The database would have a list of participating retailers. Users could log into the system using their PerfectFit usernames. A 3D rendering of the user would then appear and once users click on an item of clothing and a size, the item would appear on the 3D model. 

We also had to ensure we were incorporating all of the user's needs into PerfectFit Experience. We had to account for all the small interactions that would occur, such as trying to swap out sizes and "trying on" multiple items at once to make an outfit. We wanted this experience to mirror a dressing room experience as much as possible, while being as seamless and intuitive for the user as possible. We had to strike a balance between implementing the best features possible, without over-stimulating the user and/or over-complicating the process.

Step 3: Refinement

Goal: Honing in the scope of the project and just designing essential features given our 2-week time limit.

Approach: sketching

We brainstormed so many ideas for PerfectFit, but ultimately our time constraint meant we had to hone in on what was important. Since we want PerfectFit to be a virtual dressing room, we kept our scope centered around that and what essential features we needed at the current time to give users this dressing roomexperience.

Digital whiteboard (created using Mural) where our team collaborated on all of our ideas throughout the process.

Step 4:

Goal: Re-iterating design ideas for the interface

Approach: sketching reiterations

The feedback from the client on the initial sketches led to second round sketches with refinement on the core aspects of the website involving the model and the try-on functions.


Step 5: Wireframing

Goal: Begin to showcase the online experience for PerfectFit

Approach: wireframes with reiterations

Initial wireframe screens to show main functionality and interactions (click to enlarge).

The wireframing process was key in determining all the interactions we needed to account for within our scenario. We also designed a way for users to try on multiple garments at once and then be able to add the entire outfit to the cart in one simple click. Users can also see how much an entire outfit will cost on the bottom right hand so there is no guessing or calculations involved on their end. We want PerfectFit to be as transparent and user-friendly as possible.

We also decided that we needed to indicate to users that they are able to rotate their 3D model so they can see how garments fits on all aspects of their models. People in dressing rooms can assess clothing on every aspect of their body, and we need to ensure our users know they are able to do that virtually as well. 


Step 6: Mock-Up

Goal: Create a walkthrough mock-up of the PerfectFit prototype based on the scenario of a user selecting an outfit through the purchasing process.

Approach: prototyping

Throughout the wireframing and prototyping phase, I kept coming back to the idea that we should actually be trying to create a user experience that is potentially better than physically shopping in a store. What kind of details can we include in the PerfectFit experience that would really elevate it above physical shopping? This realization is when I thought of the "recommended for you" section. Using machine learning technology, PerfectFit could remember what customers bought previously through its database and then display personalized recommendations custom to each user. This experience would rival having a personal shopper, a service many people cannot afford. 

I wanted the PerfectFit experience to be a revolutionary online shopping experience, and I believe all the features we designed would do that.

Finally, we created a lo-fi prototype mock-up (with plenty of iterations) to follow along the scenario of a user trying on an outfit and purchasing it. This mock-up is just a version one to showcase the concepts of PerfectFit.

Some screens from our first round of mock-up development (click to enlarge).


View our mock-up walkthrough of PerfectFit and its key features here