Laundry Assistant

Figma Model

APP Poster

About

This is an elective course project about UI/UX design, and the whole class was divided into groups of 3 ~ 5 to design the UI/UX of a mobile APP, website, etc. Our Group, Jiakun (Jack) Zheng, Yinzhe (Shaun) Xu, Yucheng (Simon) Luo, and I, was interested in making an APP for the autonomy of laundry services. Back then, I haven’t been to Pittsburgh and didn’t know there are existing APPs like CSCPay Mobile Coinless Laundry, plus Hong Kong doesn’t have any laundry APP(as far as we knew), so we thought that this is very practical.

Design Process

The idea came from our existing laundry experience in UG Halls:

• Laundry machines are always self-served, first-come-first-served, and most critically, limited in availability.
• If all the laundry machines are occupied, we have to either wait until there’s one available, or return to our room, but newly available machines might be used by other firstcomers.
• If some machines finished their job, but clothes are left unattended, we have to either wait for the owner to come and collect them or take them out personally, which might violate some people’s hygiene habits. Oftentimes, we have to choose the latter one.

However, these are just our subjective opinions, and might not be the same for every resident of UG Halls, so we conducted extensive User Research through a mass questionnaire survey using Qualtrics and in-person interviews. The results of the questionnaire are available here.

User Research Summary

1. People use the laundry room very often. (market size)
2. People encounter queuing problems very often. (pain point)
3. A booking system is very desirable. (very painful)
4. People forget to pick up their clothes easily. (reminder is useful)
5. People don’t like penalties. (powerful reminder may be better)
6. People care about cleanliness a lot. (may have cleanliness ranking)
7. The time/temperature recommendation is useless. (fake user need)
8. People are suffering from the current payment system. (Octopus/Alipay)
9. One-click to report malfunctioning machines is useful. (pain point)

Volare Shell Model 1

Requirement: Machine hygiene indication   Requirement Type: Functional   Event/use case: machine selection

Description: Provide a platform for users to know about the hygiene situation of the washing machines.

Rationale: Users care about hygiene a lot, but there is no effective way to know about it besides checking it on-site.

Source: User interview

Fit Criterion: It affects the laundry service experience.

Customer Satisfaction: N.A.       Customer Dissatisfaction: N.A.

Dependencies: possibly a community/ machine ranking system

Conflicts: none

Supporting Materials: questionnaire results, interview journal

History: V0.1, a new requirement

Volare Shell Model 2

Requirement: Monthly booking   Requirement Type: Functional   Event/use case: booking machines

Description: Provide more flexible booking operations to lower interaction costs.

Rationale: Some users use the laundry service with a fixed and regular usage pattern.

Source: User Interview

Fit Criterion: It can lower interaction costs for some users with fixed and regular usage patterns.

Customer Satisfaction: N.A.       Customer Dissatisfaction: N.A.

Dependencies: a complete booking system

Conflicts: none

Supporting Materials: questionnaire results, interview journal

History: V0.1, a new requirement

We then generate a primitive design, made a paper model and a Figma model, and conducted an in-person Usability Experiment to test our UI design.

Usability Experiment Summary

Functional Feedback

• Clearly indicate the purpose of Scanning the QR code, including where to scan
• Emphasize QR-code scanning, move the “Scanning QR-code” button outside
• Enable multiple machine booking functions: for users with lots of clothes to wash
• Show all relevant information before payment, including estimated waiting time
• Forget to bring detergent, but the washing machine has locked (more hint)
• Forget to bring detergent, but already unlocked the machine: provide choices: 1. bring the detergent in five minutes 2. buy one-time detergent with 2 HK$
• Left the clothes in the washing machine for too long: Dedicated personnel to take the clothes out, and remind the user of this.
• Waiting time count-down

UI Feedback

• Font — formality(app use), consistency:
  • 20 — small detail
  • 40 — body
  • 48 — alert
  • 96 — title & number
• Icon — consistency: color, style, position, need a design library
• Margin — Appropriate, not too narrow
  

Final Results

After all these feedbacks and adjustments, we made our Final Figma model.

After I used CSCPay Mobile Coinless Laundry in Pittsburgh, I noticed that it has most features, but doesn’t have a queue to ensure fairness in peak hours. This is quite reasonable since laundry machines’ availability is not as limited as in Hong Kong.

All designs have to satisfy their main users in their local area, unless we want to expand the business and generalize the design. 😁