My Role


Research:

Market Research, Observations, Interviews, Surveys, Storyboards, Personas, Analysis

Design:

Paper Mockups, Wireframes, Prototypes

Evaluation:

Feedback Sessions, Usability Testing, Cognitive Walkthroughs


Prototype

Try it for yourself!




Features


ZipFit utilizes a tablet system that requires a revamp of the whole storefront layout and fitting room process.

Run Through of System Using Tablet

  • Users start with entering their name on the tablet.
  • Items' tags can be scanned by the tablet.
  • Product details such as color and size can be specified.
  • Users are given the option to continue shopping and scan more items or request a fitting room.
  • A fitting room will be prepared by the store associate with the items that the customer has requested.
  • Once the room is ready, the user will receive a message indicating their fitting room is ready.
  • Users can request item changes on the tablet and receive items all from within the fitting room.

System Features

  • Scanning Labels Capability
  • Product Detail Selection
  • Request Fitting Room
  • Wait Time Estimation
  • Request Item from Fitting Room

Research & Analysis


Introduction to the problem

We started out with specific stores within the Gap corporation umbrella that included Old Navy, Gap and Banana Republic. Through research, we realized that our final design would encompass and benefit NOT just the Gap brands, but similar stores across the retail platform. Therefore, we expanded our focus to incorporate general clothing stores.

The biggest issue that we found and wanted to improve was the fitting room process. Our research repeatedly found customers were 71% more likely to purchase an item after trying it on, making the fitting room a huge influencing factor when customers decide to purchase.

Our problem space was refined to developing a system that will help customers be able to choose an item and get a fitting room more quickly and efficiently, while improving customer service productivity and helping communication between customers and store associates.

Research Methods

  • Literature and market research

  • In context observations

  • Task Analyses

  • Comparative Analysis

  • Interviews

  • Surveys

Understanding the User

Interviews

Interviews were conducted to learn about users' shopping habits, pain points, and most importantly what they wanted to improve. The insights from people’s definition of and ideal shopping experience helped to develop our design concept.

Affinity mapping

Affinity mapping helped to analyze interview results, which revealed trends in the data.

Personas

Personas were created to help us target users needs and focus on helping users achieve their goals throughout the retail process.

Personas from left to right: Gary, Gabrielle, Gloria

Customer Journey Mapping

In-context role playing and observations helped us identify the pain points in the traditional shopping experience. The insight gathered helped us find potential areas that we could develop design solutions for.

Journey maps

Storyboards

Storyboards were used to demonstrate the shopping experience in order to clarify the problems we were trying to solve for.

Storyboards

Findings

Retail customers who visit the fitting rooms are 71% more likely to purchase items than people who just browse the sales floor. To us, this meant that fitting rooms play a pivotal role in customers' ultimate decision-making process.
We discovered various problems with how current fitting rooms operate:

  • In order to get another size, customers have to put their clothing back on.
  • Dirty fitting rooms make a bad impression
  • Lighting and mirrors aren't flattering.
  • Lines are too long.
  • Sometimes fitting rooms have item restrictions.

Design


Requirements

The core functionality of our design solution should deal with the following points:

  • Helping the user choose the right size and style
  • Having better physical features in fitting room facilities
  • Making customer services more efficient and flexible
  • Allowing customers to have more control over their shopping and fitting room process

Our final design solution should focus primarily on interactive technology that will help the general population of shoppers and attendants communicate about sizes and product availability more effectively and efficiently, while also giving the customer more control over the process of finding clothes that fit well to increase incentive to purchase them.

Ideation

During our brainstorm phase, we came up with three different ideas; a personalized customer service solution, an independent usage system, and a body scanner/kiosk system.

Personalized Customer Service



Tablet and Independent Usage



Body Scanner and Kiosk



Feedback

We presented our final three solutions to four participants, asking them various questions about our design ideas. A consensus appeared where many of the participants preferred design solution 2, the tablet focused solution. Based on their feedback, we re-designed this solution to incorporate some main suggestions and also wireframed the screens for a second round of feedback sessions.

Feedback Questions

  • Is this something that they would use? (Usability, does the system meet the user needs?)
  • Which feature would make you most likely to use it? (Does user perceive the benefits of the system?)
  • Do you think this system would help make customer service faster? (Identified user need from previous research)
  • Would this would allow you to have more control over your shopping and fitting room experience? (Identified user need from previous research)
  • Is there anything you want to change or add? (Usability, informing next design iteration(s).)
  • Which solution would be more useful? (Informing next design iteration(s).)

Feedback Results

  1. Independently Shopping vs. Shopping with Associate Assistance - Participants think the tablet or smartphone can give them more independence.
  2. Feasibility and Accuracy - The body scanning/kiosk concept was NOT as practical or achievable as the other two concepts.
  3. Come back later to try on - Provide estimated waiting time before customers confirm a request.
  4. Tablet or smartphone - Customers don’t want to download multiple apps for every store.
  5. Privacy - For the body scanning/kiosk concept, privacy is the biggest problem that we cannot solve currently.
  6. Store Associates - Having enough excellent associates could be difficult to achieve. How many associates the store can hire depends on the company.
  7. How can I find right size? - Trying on another size is still necessary for all solutions except the scanning/kiosk idea.

Prototyping


Wireframes

Screenflow



Wireframe Feedback

We asked four users to critique our wireframes, asking them the same set of questions that we used for the sketch designs in our ideation phase. During the wireframe stage, we also included a longer question with a 1-to-7 Likert scale where we asked the subjects to rate different features of the prototype:

On a scale of 1 to 7, with 1 being “Hate it” and 7 being “Love it,” how would you rank the following features?

  • Barcode scan
  • Product Details
  • Add to Bag
  • Try on Now
  • Wait Estimate
  • Confirm / Cancel option
  • Continue Shopping/Scanning options
  • Request Change
  • Confirm Change Request

While the responses were scaled, the subjects were still encouraged to “think aloud” and comment on the prototype. The purpose of this question was to gather user feedback to inform our design process as we iterated. User feedback on the various features helped our decision-making process regarding features and changes in subsequent iterations.


Accessibility

  • Language: Our system should provide language settings where users can select a prefered language.
  • Illiterate Population: One way to do this is to have an audio reader for the texts, telling them which button to press using visual indication, but using the same interface. The other way is to have the system switch to using an entirely auditorial mode where the customer interacts with the system using audio commands.
  • “Help” Option: We decided that we should include a tutorial for the system after we received feedback regarding this, but it is still useful to have a “help” option. This can be used to call assistants for service, getting tips for using the system, etc.
  • Color Contrast: Make sure colors are visible and easily contrasted
  • Font Size: Normal text is in 24 pt font, large text for important messages are in 30 pt font, small paragraphs and trivial information are in 18 pt and 14 pt font.
  • Text Readability: We are using Roboto for our font. Since there are no long paragraphs on our system, the sans-serif fonts allow better legibility.
  • Button Size and Status: We have the buttons big enough and easily differentiable for users to reduce their chances of making mistakes. The buttons will have a reaction when pressed to give users feedback of what is going on.


Hi-Fidelity Prototype

Welcome Page English

Welcome Page Chinese

Change Language Chinese

Change Language English

Scanning Tutorial

Scanner

Product Detail

Pulling Item

Fitting "Box"

Continue Shopping

Request Fitting Room

Continue Shopping with Wait Time

Fitting Room Ready

Cancel Fitting Room Request

Inside Fitting Room: Fitting "Box"

Product Detail

Product Detail Change

Cancel Change Request




Testing and Evaluation


3 Cognitive Walkthroughs

By using ‘expert’ users for cognitive walkthroughs, we wanted to determine whether specific tasks and their action sequences to complete the tasks were comprehensible and executable. We also wanted to determine if there was enough feedback given to the user for them to know that the task was successful.

Having ‘expert’ users test the system allowed us to hone in on specific key tasks within our design that we wanted to have evaluated. This gave us a chance to further define what was confusing, what was successful and what wasn’t. It also allowed us to understand the weaknesses of the design and how we could resolve tasks that resulted in failures for the ‘expert’ user. Ideally, this would allow us to refine the design before having real users test the system when doing usability tests, but due to time constraints, we were unable to do this.

Task 1

Select Item and Scan


  1. Enter name
  2. Scan barcode
  3. Choose color
  4. Choose size
  5. Send item to “bag”
  6. Request fitting room

Task 2

Cancel Request


  1. Cancel request

Task 3

Change Clothing Size in Fitting Room

  1. Choose item
  2. Select different size
  3. Request to change item

Questions asked after each step in the action sequences:

  1. What is the user’s task?
  2. Will the user know what the correct action is?
  3. Will the user be able to tell what action will achieve their task?
  4. Will the user receive any feedback regarding if the task was successful or not?

5 Usability Tests

Through usability testing, we wanted to get feedback from users to identify any usability problems and to collect quantitative and qualitative data to determine their satisfaction with our design. Specifically, we wanted to know if people could use our system easily and smoothly, if they were able to get the item they wanted, if our app solved their problems, and if there was anything that could be improved upon.

Usability testing gave us the chance to identify problems before the design is coded. The earlier issues are identified and solved, the less work is needed later. Through usability testing, we determined if users were able to complete specified tasks successfully and found out how satisfied participants were with our solution.

  • Roles: 1 moderator, 1 notetaker, 1 playing store assistant, 1 facilitator
  • Artifacts: We set up the physical space into 3 separate spaces: store-front, fitting room, back storage. We provided a tablet with our prototype implemented, and created fake clothes on hangers that were displayed as samples.
  • Procedure: We explained our prototype and the evaluation activity to participants. We gave them the same set of tasks that we used in the expert evaluation, but added in the physical interactions with store associates and artifacts to provide a more virtual, in-context experience. We asked participants to think aloud during the evaluation.
  • After users completed the tasks, we asked 2 probing questions to gauge their experience:
    Is this more helpful than a traditional system/fitting room experience?
    What would you like to improve or change about this process?
  • Users also completed a SUS survey.

Main Findings

  • Confused by what “call” means, phone number or name?
  • Don’t know whether adding more items will change the waiting time to go try on.
  • The system should suggest fitting rooms to be assigned to them when they send the clothes to store
  • Wait time is long.
  • Confused about where to find change sizes.
  • Want to see change size (color) option directly on screen once they get in the fitting room.


Iteration


User Centered Design

We utilized the user centered design process by first researching the problem space, then ideating and designing, prototyping, evaluating and testing and lastly iterating again and again. This method argues that this is always a formative process and it never reaches the summative process, because the solution can always be improved upon.

Improvements

ZipFit was only a semester long project. Given the opportunity to continue, here's what we would do to move forward with our design:

  • Launch a survey to help us determine understandable terminology.
  • Remove the wait time for pulling up items.
  • Enable the functionality to choose more than one size.
  • Make the change size or color option directly show up when in the fitting room.
  • Make the tabs for the main shopping page and item list more prominent, and highlight the selected tab with a better color contrast.

Reflection


Teamwork and Project Management

The biggest takeaway I got from this project was learning how to work in a team with people that had very different dynamics and skill sets. By utilizing a project progress spreadsheet, we were able to divide the work and plan deadlines for task completion. This worked well to organize the team and keep everyone on track.

Deciding on the Problem Space

Although the point of this project was to learn how to use the tools we gathered from class and not necessarily to develop a fully functional prototype, we were still encouraged to create a final solution. I found it extremely important to narrow down the problem space and hone in on users' needs based on data, and NOT diverge unncessarily. Although many different alternatives and paths are possible, at some point decisions need to be made. If during the process something isn't working, then you can start over knowing what didn't work, but to not start at all is detrimental to the iterative process.

Research Methodologies

Most importantly, this project allowed me to develop research techniques and has given me a well of resources and experiences to draw from. Designing is always about learning and continuing to learn and grow.