--- title: "LaundryWeb" bannerId: "laundryweb-img" logo: "" platforms: - "web" actions: - text: "View Source Code" mode: "desktop" icon: "fa-brands fa-git-alt" url: "https://git.altafcreator.com/victoriahall-laundryweb.git/" bottomBar: true bannerBar: true - text: "Source Code" mode: "mobile" icon: "fa-brands fa-git-alt" url: "https://git.altafcreator.com/victoriahall-laundryweb.git/" bottomBar: true bannerBar: true --- +-+-+- # LaundryWeb {: .heading } A simple laundry timer website/web application for all Victoria Hall boarders. Do check out the source code [here](https://git.altafcreator.com/victoriahall-laundryweb.git/)! ## Purpose {: #purpose} I created this app because I noticed a fairly frequent problem, or frankly an annoyance, in my student hostel. Oftentimes, especially in the male block, residents are found to leave their laundry inside a machine for extended periods of time despite having their laundry fully washed or dried. When another person wants to use that machine, they will need to take out the previous person's laundry and those clothes often end up on top of machines and floors. This creates annoyance and a slight delay for the next person wanting to use that machine, and also makes the place less hygienic and more cluttered. Perhaps this may be caused due to people forgetting their own laundry. Personally, I'll always bring my phone to start a 25-minute timer whenever I start a new laundry cycle, so that I won't forget about it. It's pretty quick to do, but it may still be an additional friction for some people, so people may choose not to do that at all. Thus, I proposed a new website project for a simple laundry timer that is easily accessible and very quick to use for residents wanting to wash their laundry quickly. When their laundry is finished, they will be notified and can promptly take their laundry. The aim is to make starting a timer to notify yourself about your own laundry **as frictionless as possible**. ## State of Project (Update/remove soon) Currently, the project is almost finished. All the main features of the app are finished, and I think it's ready for production. Therefore, the next steps of LaundryWeb's development is testing the application with real users, especially iPhone users, and also consulting with Hall Office for deployment and logistics. -+-+-+ +-+-+- The following section is about my personal notes and reflections of what I've learnt from making this project. {: .info-box } # Developer's Notes and Reflections Here's what I've learnt from the development process of LaundryWeb. ## Human-Centric Design During the making of this project, user-friendly design was the main focus. I wanted the app to be as efficient to use as possible as I know there are a lot of users using my hostel's communal laundry rooms, and people don't want to spend extended periods of time just starting their laundry. Ideally, people should be able to scan a LaundryWeb QR code, and immediately know how start a timer and receive notifications of their laundry within 30 seconds without reading a manual. This project really exercised my design skills to create a good and intuitive user experience for the app. ### User Journey ![User Journey using LaundryWeb. Put in laundry into machine → Scan QR code → Enable notification permissions → Start timer → Done.](path/to/file.png)
First, I'd want the simplest, quickest, and most intuitive user journey as possible. This is to make the process of using the app, and hence using communal laundry rooms as frictionless as possible. If the app instead adds additional friction in doing laundry and starting your own timer, then it **defeats** the whole [purpose](#purpose) of this app. In the end, I created this flow ### UI Design {{{
The User Interface (UI) design is also a major part of making the user experience as intuitive as possible, aligned with my aims to make [starting a timer to notify yourself for your own laundry as frictionless as possible](#purpose). In fact, user interface **is** part of the user experience, hence making sure LaundryWeb has "good" UI design is also very critical for my aim. I settled on these design philosophies for LaundryWeb's UI that I think aligns with my UX goal: **simple** and **humane**. Every page of LaundryWeb should be **as simple as possible**, both in terms of the tech behind and what is shown to the user. This is so that the user can immediately finish the task that they want to do, whether starting a timer or confirming laundry collection. For instance, each page should have a clear, singular purpose, and each element in the page should align to that purpose. If not, cut it. Navigation should be as simple as possible. In fact, the user should not need to navigate through different pages just to do one task. Make navigation as minimal as possible, and again, if needed, make it simple. At the same time, the design should still feel **friendly** and **accessible**. Even though I aim to make this app to be used very quickly, I also want the experience to be pleasant, so that users won't feel "forced" to use this app. To achieve this, I decided to create sea green colour palette that in which every element must use. I also decided that elements should have rounded corners, to make the app feel more "welcoming", and it's also a pretty familiar feature that users have already seen all across the internet. Fancy but unnecessary elements should be minimised, so that a wide range of devices can render the app properly, and so that accessibility tools can parse the website well. An example of my attempt to apply my UI philosophies is at the very first page a new user will see, the start timer page (`/start/`). This was also the very first page I designed to have a feel of what I want the whole app to look like. I think this page has manifested all of my desired design philosophies.
![Screenshot of LaundryWeb start timer page](path/to/file.png) {: .flex-300 } }}} ### Thanks, Apple. Like every project, things may not go according to plan. Like everything I do in life, I'll do this section later. ==TODO :)==       -+-+-+