Background
- Spring 2024
- Team Project (Group of 4)
- Skills: UI, User Research, Human Factors
- Tools: Figma, Paper
Overview
Prompt
Deliver a compelling interaction experience that encourages to use their appliance more sustainably.
Goal
Over three weeks, my team conducted preliminary research, created a paper and Figma prototype, and iteratively user-tested both paper and Figma prototypes to create an easy to use 2-in-1 washer/dryer interface.
Research
Determining product and target users
To start our research, we analyzed the market and noted common issues with 2-in-1 washer-dryers to determine our needed features.
Needed Features:
- Complete wash and dry cycle
- Variety in settings: account for different fabrics, different loads, different needs like wrinkle care or time efficiency
- Encourage cold water washing
We then interviewed prospective users:
| Demographic | Wants | Pain Points | What should you keep from existing devices? |
|---|---|---|---|
| Working Adult, age 27 | Time estimates Different options for the different types of clothes that they have (for example, sheets, delicates, sweaters all have to be washed differently) Machine that not only saves space but also conserves water and energy, contributing to lower utility bills and environmental sustainability | Existing 2-in-1 washing machines may lack durability or may experience technical issues, leading to frequent breakdowns or repairs | Space-saving aspect of existing 2-in-1 washing machines to cater to individuals with limited laundry space Versatility in ability to handle various types of loads and fabrics effectively, ensuring that the machine can accommodate different laundry requirements |
| College student, age 19 | Liquid or pod detergent options Different setting options (like temperature, light vs heavy loads) Words instead of confusing pictures Delayed washing options (wash in 6 hours) | Washer is usually a lot smaller than the dryer Unclear what “light” and “heavy” loads mean, no time predictions | Variety in different setting options A way to delay the start of wash, ability to dry a little bit more |
| College student, age 21 | Hand washing (delicates) option Deep cleaning option Her washer only has modes, and she wishes that she can adjust separate modes Dryer – having a mode that can be used for delicates. | Annoyed when the washer is done and has to move the clothes in the dryer Unclear of what modes of wash are appropriate for specific items of clothes (jeans, sweaters, etc) | Time predictions, variety of settings and modes Has a noise when the cycle is done to alert the user. |
| College student, age 21 | Ability to pre-fill the detergent and fabric softener without having to add it every single time, like an automatic soap dispenser -> in a way that it can input the right amount of soap based on the load type. Also smart dry, so it can detect when it’s dry (more environmentally friendly so it doesn’t dry for longer than it has to). | Currently her washer doesn’t have a quick wash mode or sanitation run to wash the actual washer after washing something that was really dirty. Doesn’t like having to go to the washer/dryer three times (1. To put it in, 2. To transfer, 3. To take it out). | Washer plays a song when it’s done. Maintain the simplicity and have a simple interface. |
| Mother, age 56 | Wants more accurate time estimates, as well as more information in general for where in the cycle the clothes are. Uses a multitude of different wash/dry settings for different types of clothes. Wishes the process would be faster, or at least less effort on her part. | Current process not only takes a long time, but she must be present to interact with the cycle. Also time estimates are always wrong and she gets little information as to where the clothes are in the cycle. | The many different wash/dry settings. Eco wash to save water/electricity. |
From our research, we then defined the product and its intended users:
- Compact, high-end washer-dryer combo tailored for urban dwellers, particularly working couples with limited space.
- Interface needs to support seamless transitions between washing and drying, customizable presets, and flexible controls for adjusting dry time or pausing and resuming cycles, ensuring both convenience and efficiency.
Storyboarding and Flow Diagrams
We then created storyboards, flow diagrams, and then a paper prototype to illustrate how our 2-in-1 washing machine would operate.
Paper Prototype of Interface
Wash and Dry Cycle Action:
Preset Action:
Accessibility Settings Action:
Maintenance Action:
We then tested our paper prototype for the actions we designed for.
Test Script:
- Wash and Dry Action
- Turn on machine
- Go to Wash and Dry Section
- Change options
- Go to dry section
- Change options
- Save as preset
- Go to Cycle Status
- Add 15 minutes to dry time
- Done!
- Custom Preset Action
- Go to Pre-Saved Options
- Delete option you no longer use
- Picked desired option
- Go to Cycle Status
- Done!
| User | Demographic | Notes |
| A | College student, age 21 | On Pre-saved options, instead of a vertical scroll bar, change it to arrows so it’s not fidgety |
| B | Shamim, TA | Maybe add a row in “wash” and “dry” to toggle specific materialsIcons are not necessary? |
| C | College student, age 19 | Had the suggestion of being able to do a custom additional time for drying cycle instead of static 15 minutes |
Overall, our testers successfully completed the actions outlined in our test script with relative ease. However, our design fell short in terms of effectively influencing our participants’ behaviors to reduce energy consumption, such as by encouraging the use of cold water.
Design Decision: add a Tips button to inform and encourage user to select cold water washing option.
Figma Prototype Testing
We then created a wireframe prototype in Figma with fully operable interactions and had 4 users go through testing.
Test Script:
- Wash and Dry Action
- Turn on machine
- Go to Wash and Dry Section
- Change options
- Go to dry section
- Change options
- Save as preset
- Go to Cycle Status
- Add 15 minutes to dry time
- Done!
- Custom Preset Action
- Go to Pre-Saved Options
- Pick desired option
- Go to Cycle Status
- Done!
Key Insights for Usability Testing:
- Customization Confusion: Some participants expected to edit personal presets directly from the Presets menu but needed guidance to find the correct process.
- Design decision: Originally, users could create unlimited custom presets, but to simplify the interface and reduce confusion, we limited customization to a single preset option.
- Navigation Challenges: Navigation issues with back/forward buttons—users didn’t realize the forward button would transition to drying.
- Design decision: change back/forward button so action would be more clear.
Final Design
Prototype Summary
Our washer-dryer interface is designed for a seamless, efficient laundry experience, ideal for modern young adults. This compact 2-in-1 appliance saves space while optimizing time and energy use.
Key Features:
- Touchscreen Interface: Easily adjust cycles and settings with a modern, intuitive design.
- Minimal Buttons: Power and start/pause for simplicity, plus text-to-speech for accessibility.
- Color-Coded Cycles: Blue for washing, orange for drying,
- Customizable Settings: Adjust wash temperature, load size, spin speed, and drying heat.
- Preset Cycles: Quick options for eco, delicates, sportswear, and more, with tips for best results.
- Cycle Progress Tracking: A countdown timer and progress bar for real-time updates (prototype set to 5-second test cycles).
- Adjustable Cycle Time: Add 15-minute increments for flexibility.
- Custom Presets: Save favorite settings, highlighted in pink for easy access.
- Error Alerts: Clear messages with support contact info in case of malfunctions.
Takeaways
Through this process, we explored ways to encourage sustainable laundry choices and applied market research on 2-in-1 washer-dryers to our own iterative design. User testing—from paper prototypes to the final product—helped refine our interface.
- User Testing Across Demographics: We tested both on-campus and off-campus users, gaining insights into different needs, including accessibility considerations.
- Iterating Custom Presets: The most revised feature was the preset options, balancing eco-mode encouragement with user flexibility.
- Technical & Collaboration Growth: We improved in user testing, applying feedback, teamwork, and Figma-based design skills.