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
Research - Interview with business owner, Competitor Analysis, User Survey, User Interviews
Synthesis - Empathy Map, Persona
Ideate - Sitemap, Wireframes, Branding, Prototyping
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
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.