Munson Cleaners: Responsive Web Design

Overview:

Munson cleaners is a dry cleaner located in Lathrup Village, Michigan, and provides services including dry cleaning, laundry, pressing, and clothing repair/ alterations. Their main demographic are professionals who come in on a regular basis to get their work clothes cleaned, senior citizens, and uniformed workers. They do not have a website and wanted to have more of a web presence.  We needed to decide what should be present on this website, and what features would really make a difference for their customers. Especially during this time, where Covid-19 makes people weary of being in close contact with one another.

Challenge:

Create a responsive website for Munson cleaners that accommodates their target audience, and solves the issue of being in close contact with people in the dry cleaners.

Role

Remote UX/UI Designer

Timeframe

4 Weeks

Process

  1. Research - Interview with business owner, Competitor Analysis, User Survey, User Interviews

  2. Synthesis - Empathy Map, Persona 

  3. Ideate - Sitemap, Wireframes, Branding, Prototyping

  4. Test/Iterate  - Two Rounds of User Testing

Research

Talking to the Business Owner

I started out speaking with the owner of the business in order to get an idea of the background of the business, what they found their biggest issues to be were, and to get more insight into their current customer base. 

The biggest issues as explained by the business owner

  • People bringing worn clothes and saying that they weren’t cleaned properly

  •  Customers losing their ticket number

  • Customers not knowing the hours of operation

  • Customers not wanting to be in the small dry cleaners around other people due to Covid-19

Customer Demographics and habits according to the business owner

Working Professionals: Their habits vary in terms of how often they frequent the cleaners. How often they come in ranges from every other day to coming once a month, and dropping off/picking up 30 shirts at once

Senior Citizens: Some seniors have trouble washing their clothes at home. They primarily bring in pants and sweaters.

Police Officers: Officers have a limited number of uniforms which they come in and get cleaned once a week, or once every other week.

 Competitive Analysis

Before beginning the user research I wanted to get a better understanding of Munson Cleaners’ competitors within a 20 mile radius.

Talking to Users

I wanted to find out

  • How often people go to the dry cleaners

  • What services do they typically use?

  • What are their current pain points?

  • What are opportunities for us to improve their experience?

Methodologies Used

  • User Survey (20 Participants)

  • User Interviews (3 Participants aged 28, 35, and 50)

Synthesis

 I created an empathy map using the research findings in order to find out trends in user behavior, feelings, and pain points.

 

What did I find out

 
 

What is important to users?

  • Clean clothes 

  • Friendly service, and fast

Main Pain Points Identified

  • Don’t have time to go to the dry cleaners

  • No notification when clothes are ready

  • Clothes were still dirty

Key Research Findings:

  • The most important factors when deciding what dry cleaner to go to are the reviews and location

  • None of the interviewees are too concerned about price, because usually there isn’t a big discrepancy in the prices of each individual piece of clothing.

  • The item which is dry cleaned the most are button-down shirts

  • The biggest concern about going to the dry cleaners is having the time to go.

Using findings from the initial interviews with the business owner and the empathy map, I identified the following persona. Cameron is a 33-year-old from southern Michigan who works as a systems analyst and likes to get his clothes dry cleaned every other week.

User Persona

POV Statement:

“Cameron needs an efficient way to dry clean his clothes because he has a busy schedule.

Ideate

 How might we…

How might we allow Cameron to spend less time worrying about picking up, and dropping off his dry cleaning

How might we make customers not need to come into the store at all

How might we deliver cleaned clothes?

How might we set up same day service online

How might be notify the customer as quickly as possible that their clothes are ready

Possible Solutions:

I ideated possible solutions with the business owner because I thought it would be a good idea to have him be part of the process, since he would be able to give me an initial idea of whether the ideas were feasible given the employee bandwidth they have at the dry cleaners. I got on a zoom call with the owner and we brain stormed out loud.

Initial Ideas

1) Include a drive-through service where customers can drop off and pick up there clothes.

While this solution did solve the problem of Cameron not being in close contact with other customers in the store, Cameron would still need to drive to and from the dry cleaners. The business owner also was not sure if they would be able to install a window that would allow drive-through access for customers.

2) Partner with a ride-sharing app to have clothes delivered

The rides share app would take too much money from the cost of delivery that it wouldn’t be worth it for the business to go this route

3) Create a website where customers can book when they want clothes picked up/dropped off, and have employees of the dry cleaners make these deliveries.

This solution allows Cameron to save time by not coming to the store while also allowing the business to keep any additional capital accumulated through delivery.

The owner of the dry cleaners and I decided to proceed with the idea of having employees of the dry cleaners make the clothing deliveries to customers.

 What Features Should be Included?

In order to decide which features to prioritize, “The Must haves” included features that would make it very difficult to do business properly if they were missing. The “Nice to haves” were features which would be considered perks to larger groups and/or returning customers.

 

Product Roadmap

Keep it simple

The next step we took in order to start building our prototype was creating a sitemap. The majority of the inspiration for this sitemap came from the competitor analysis and seeing how they had their websites were set up. User research indicated to us that having reviews/testimonials was very important to users when deciding which dry cleaners to go to. Therefore, I decided to include a page of reviews/testimonials section in the site sitemap. I wanted the website to be relatively simple and only have required features in order to not overwhelm senior citizens who might be turned off by a complicated website. The simplicity of the website was also crucial so that it would be easy for the business owners to maintain it.  

Sketchin’

Taking the solution and sitemap into consideration, I created low-fidelity wireframes that featured a homepage where the main feature was to have the user sign up for the dry cleaning delivery service.

The layout is relatively consistent with industry standards in terms of having the have the main features in the top navigation. However, since the main purpose of this website was to allow the user to book a pickup for their dry cleaning I kept that front and center on the homepage.

Low Fidelity Wireframe - Homepage

Low Fidelity Wireframe - Services Page

Brand Style

I initially wanted the branding to include photographs of actual people at the dry cleaners and photos of business casual clothing. However, even though this targets the main demographic, I thought it may make others feel like they aren’t included. I wanted the branding to be more inclusive. I decided to use more whimsical images which I felt could appeal to a wider range of people, and create a more friendly/ light-hearted atmosphere for the users

Original Style Tile

Updated Style Tile

Updated Style Tile

Logo

I wanted the logo to be simple. If there is to be a mobile app created down the line, I wanted the image associated with the logo to be able to be used as an app icon. The logo represents the time being saved by coming to Munson Cleaners. I went with the one in the bottom right corner.

Logos

The low fidelity wireframes gave me a general idea of how I wanted the mid-fidelity wireframes to be laid out. I used Sketch to create the wireframes and followed the low-fidelity wireframes pretty closely. The layout of the navigation is pretty consistent with industry standards. Whereas the layouts of the scheduling page were inspired by booking experiences which I found simple and straightforward. I wanted as few clicks as possible on the scheduling page. At this point, there were 5 clicks in order to set the pickup and drop off times (Pickup date, pickup time, drop off date, drop off time, checkout).

Mid Fidelity Wire Frames

Using the images I gathered during  branding, and the mid-fidelity wireframes I put together High Fidelity wireframes which I used for the first round of user testing

High Fidelity Wireframes

Test/ Iterate

First Round of User Testing

Test Objectives

  • Test the flow of the design

  • Test Where in the flow users think the price should be

  • At what stage of the process should prices be determined

  • Should prices be on the services page

  • Should pickup/dropoff times be so specific

Five participants between the ages of 22 and 62 took part in the usability testing. Ideally, test participants would have been to the dry cleaners in the last year, or have experience with ordering items online for delivery

Tasks

  • As a guest schedule for your dry cleaning to be picked up from your home on December 6, 2020, at 2:00 PM and dropped back off on December 9, 2020, and 3:00 P.M.

  • You are not sure what other services this dry cleaner can provide for you. Find that information

  • Find out the cost of the services provided

Using the results from the user testing, I created an affinity map in order to organize the results, and get an idea of how to move forward with improving the prototype.

Affinity Map: Round 1

Updates that needed to be made based on the user testing

Next Steps: Round 1

Biggest Problem Solved During User Testing

The part of the user flow that was giving me the most trouble was whether users should input their exact order and be given an approximate price before they checkout OR if they should not input their order before, and be told the price is “TBD”. However, the dry cleaners would pick the clothes up, count them, send them an invoice through text/email, and payment would not be taken from the customer's account until they confirm the invoice.

Benefits of the customer inputting their exact order before the pickup

  • Customer has a better idea of what the price will be beforehand

  • Can be used as a reference if they think clothes are missing on the return

Negatives of the customer inputting their exact order before the pickup

  • User flow is more clunky, and includes an extra step asking the user to input clothing items into a form before checking out

  • Customers may not realize that certain clothes are of special materials and are priced differently from what they expect

  • Total price may be a complete surprise to customers once they do receive the invoice

Solution: Users receive the exact price only once the dry cleaners has counted the clothes for them and emails/texts the customer an invoice. Funds are only taken from the customer's  account once they accept the payment

Why: Majority of the users preferred to not have to fill out  a form indicating their exact order because they said when they go to a dry cleaners they usually don’t know the exact price of their order until someone at the dry cleaners counts their clothes and gives them the price. This was also in line with how customers who come into the dry cleaners typically behave according to the business owner. The solution presented is consistent with how customers operate when going to the dry cleaners in person.

High fidelity wireframes after first round of user testing

Second Round of User Testing

Another five participants tested the updated prototype. The test objectives, methodologies, and tasks the users were asked to perform were the same as the first round.

Test Objectives

  • Test the flow of the design

  • Test Where in the flow users think the price should be

  • At what stage of the process should prices be determined

  • Should prices be on the services page

  • Should pickup/dropoff times be so specific

Tasks:

  • As a guest, schedule your clothes to be picked up from your home on December 6 at 2:00 P.M.

  • You are not sure what other services this dry cleaners can provide for you. Find that information

  • Find out the cost of the services provided

What was done well?

The results from the second round of usability tests were synthesized using an affinity map in order to see what actionable next steps would be.

Affinity map after first round of user testing

Majority of the updates which are to be made based on the second round of usability testing has to do with making certain sections more specific, changing certain language, and UI related

Next Steps: Round 2

Final prototype after updates

Next Steps

  • Present design to the business owner in order to make sure it meets their business goals, and that they are happy with the branding.

  • I would like the make a mobile app down the line for the pickup/delivery service for the dry cleaners if that is something the owners of the business are interested in.

Reflection

If I had more time I would have  had user interviews with more users, as opposed to only 5. However, I feel that I got a wide range of people for the round of user testing who matched the main demographics relatively well. 

The most challenging part of this project was figuring out the right balance for the checkout flow. The research suggested that users wanted the to have an idea of how everything is priced during the checkout flow,  but at the same time did not want to fill out a form listing out all their specific clothing items being dropped off. I think that the solution proposed solves this problem, and overrall creates a simple experience for users to pick up, and drop off their clothes. Which is important for our main demographics who are either very busy, or have trouble getting around. 

Previous
Previous

Feature Added to Home Depot App

Next
Next

ZEIT: Responsive Web Design