⬅ Return to Home Page

Laundry Knights

Team Members

Stella Thompson, Clark Glymph, Eva Cao, Harry Xun

Project Overview

Laundry at Carleton is tough—finding an available machine, setting a timer, and hoping no one interferes with your load. Once the wash is done, you rush back, hoping for an open dryer, but delays often force us to wait or take wet clothes back to our dorms. A laundry tracking system would benefit both students and staff managing these spaces.

Dorm selection page with buttons that enable users to select their dorm buildings

Dorm Selection Page

Homepage when user is not using any machine. There is a machine tracker frame and a using machine button.

Homepage when user is not using any machine

Homepage when user is using machines, a timer of the machine used is added on the top.

Homepage when user is using machines

Prototype Description

Through interviews with users, we discovered that users primarily want to know whether there are available machines in their dorm building and how much time remains for their laundry cycle to complete. Based on these user needs, I developed a simple system prototype. The first page serves as the initial interface where users select their dorm building. Once selected, users are directed to the second screen, which presents a clear and visually intuitive display of available machines in their building. When a user clicks on a machine to start a cycle, the interface transitions to the third screen, featuring a prominently displayed timer to keep them informed of the remaining time.

Final Three Requirements

UX Research Process

We designed a detailed semi-structured interview protocol with a question list, and a fictional inquiry protocol. We then conducted two semi-structured interviews and three fictional inquiries, collecting a total of two hours of audio recordings and 40 pages of transcripts. In all five interviews, participants mentioned the three requirements we identified, highlighting their significance for laundry users.

Analysis Process

After completing the interviews and transcriptions, we assigned two team members to analyze each transcript, identifying key points and summarizing them using an axial codebook for classification. Following this, we used Figma sticky notes to organize and analyze the different codes, creating an affinity diagram as shown in the figure below. Through multiple rounds of discussion, we ultimately identified the three most important requirements.

Affinity diagram of our team.

My Prototype

GIF showing the interaction flow of viewing available machines

Description

This is the interaction flow for viewing available machines. The user first selects their dorm building, and then the availability of each laundry machine is displayed directly on their phone. The status of each machine is clickable, allowing users to explore more details and access additional features. Additionally, a dorm selection option is placed in the top right corner to improve error tolerance.

How It Addresses Requirement

Users want to minimize the effort and time required to find an available machine, and my interface is designed with this in mind. With just a quick glance at a few words, users can locate their dorm, tap a button, and instantly see the machine status—all within two seconds. The status display is also designed for clarity. By using large text and strong color contrasts, users can quickly differentiate between machine statuses, ensuring that their needs are met efficiently.

GIF showing the interaction flow of tracking laundry

Description

This is the interaction flow for Keeping Track of Laundry. On the checking status page, users can tap on any available machine, which will trigger a “Do Laundry” prompt. Once tapped, the system redirects the user to the laundry settings interface, where they can select the wash duration and preferred laundry settings. After clicking “Start”, the system begins a countdown timer.

How It Addresses Requirement

Users want their laundry progress to be clearly trackable, and my design emphasizes this by placing the timer in the most prominent position. Additionally, the slider interface simplifies the user’s effort in setting up their wash cycle. Moreover, as seen in the previous interaction flow, anyone can quickly check how much time is left for a running laundry cycle. This effectively meets the users' needs.

GIF showing the interaction flow of avoiding conflicts

Description

This is the interaction flow for Avoiding Conflicts. On the checking status page, users can tap on any in-use machine, triggering a prompt informing how the owner of the clothes would like to handle the clothes inside. Once the in-use timer reaches zero, tapping the prompt confirms that the user has properly handled the previous load, making the machine available again. Additionally, when doing their own laundry, users can use a slider to pre-set how their clothes should be handled once the timer expires.

How It Addresses Requirement

Through interviews, I found that most users prefer not to communicate directly via text but would rather use a system-generated tag instead. To accommodate this, I designed a simple slider that streamlines communication while ensuring that every user properly handles previous loads before starting their own laundry. By enforcing this confirmation step, the system helps prevent potential conflicts.

Link to my mid-fidelity prototype: Open Figma Prototype

UX Evaluation

UX Evaluation Task

For the UX evaluation, I primarily tested three tasks:

UX Evaluation Process

I conducted interviews using the Focus Group method. My two interviewees were residents of Musser Hall—one was a freshman, and the other was a sophomore.

UX Evaluation Result

Overall, users found the format and styling to be well-designed. They were able to quickly locate the information they needed. However, some functions were not clearly displayed. For example, the return button could be more detailed, and certain functional buttons, such as "Report Issue," were not easily readable. Users occasionally felt confused about these buttons.

UX Metrics

User Quotes & Feedback

During the interviews, users provided several specific suggestions and feedback. Some of their quotes are highlighted below:

“It would be better to have a clear exit or return button. At first glance, I wasn't sure where the return button was. Maybe placing it in the upper left would make it easier to find.”
“Some buttons are still unclear. Like, I can use them, but they don't stand out. And some functions are missing—users might need an alarm button to remind them when the machines or dryers finish. But overall, the interface is really clear and easy to use.”

How My Prototype Improved

Based on user feedback, I made several modifications to my prototype. Since I had already completed the overall styling and interaction flow before conducting the UX evaluation, and users provided positive feedback on these aspects, I did not make significant structural changes.

However, some users found certain functional buttons to be confusing. To address this issue, I modified the descriptions of buttons that appear after selecting a machine. For example, I changed "Report Issue" to "Machine Not Working?" and "Leave on the table" to "Use the Machine." These changes aim to make the buttons more intuitive, helping users quickly identify the correct option based on their specific needs.

The biggest modification I made to the prototype was in the "Keeping Track of Laundry" section. When users select a machine to use, all other machine icons now turn gray, highlighting the chosen machine. This change was made based on user feedback indicating that they were sometimes unsure which machine they were using.

Additionally, to address the issue of users not being able to find the return button on this page, I designed a highly visible return button and placed it in the upper left corner, following user recommendations. This improvement should make the interface more intuitive and easier to navigate.

High Fidelity Prototype

GIF showing high fidelity interaction for viewing available machines

View Available Machines

GIF showing high fidelity interaction for tracking laundry

Laundry Status Tracking

GIF showing high fidelity interaction for avoiding conflicts

Avoiding Conflicts/Issues

Future Plan

Based on user feedback from the UX evaluation, there are still many features and design elements that could not be fully represented in Figma.

First, Figma does not provide the same level of interactivity as HTML/CSS. For example, when users tested the laundry alarm feature, they were unable to experience what the system interface would look like when the timer reached zero. This caused confusion, and some users complained about the lack of completeness in the feature. In the future, I plan to improve this by making the alarm more noticeable and incorporating lock screen notifications to align with the nature of mobile apps.

Additionally, we initially designed the homepage layout based on dorms with only a few machines. However, some dorms, such as Burton, have over ten machines. Users suggested that for these larger dorm buildings, it would be more effective to split the interface into two separate pages: one dedicated to washing machines and the other to dryers. This is a design improvement I will consider for future iterations.

Lastly, some users mentioned that they occasionally use this product on a computer. To enhance compatibility, we need to design a desktop version of the system to improve usability across different devices.

Link to my high fidelity prototype: Open Figma Prototype