Oscar Leung's Playground

Hi, Nice to meet you. 🎉

Group project 1 - Clever Washer on the campus

Published: 26-2-2022

Where we started?

We have asked the pain point of living in campus to some of our friends and among ourselves. Their feedback was the like the queuing problems in the library and the canteen, as weel as the laundry problems.

Therefore, We have decided to make an app design with the idea of 'Smart Laudry'. The reason behind this is that, we found ourselves all have the idea to improve the laudry rooms on campus. The thing is, everytime a student goes down to laudry rooms, he found no machines available, and have to either wait or go back to his room with no luck. Another thing is, many students they just forgot to take their clothes out even the washing is finished anyway.

the Persona POV

Think of a persona, we got a busy student, he has many deadlines coming, there's not really much time left, how can he even bother with washing clothes?? He suggested should be a better solution to this! He want to know the status of all washer/dryer in his hall in advance, so he can go to laundry room without wasting his time checking the availability. Also, he wants the other students to take all their clothes out of their washer immediately, so he can use their machines.

Our Decision

We decide to show the realtime status of the machines, students could queue on the machines that are about to complete. It will be presented in a app, student also get their notification for completion of the clothes via mobile app. Altogether with other functionalities.

In developement, My learning

I joined the task on making the apps on a website called 'figma'. We tried to implement some of the UX/UI designs feature here. Including a dark theme + round corner design. Let's see what's in our app. you can see the basic design theme of our app, including the washer list, timer, the blue lines are for the control/function flow(more on that later).

Figma Design

Figma Design

the Challenge

The real challenge, however, comes when arranging that many elements inside figma. So we have 3 peoples working together on this. But we all agreed that when it comes to editing the figma elements, it's very complicated. The objects have different depth, layering, makes it very hard to click, edit. Luckily, we group the things in a organise manner, making it a lot easier to change, the downside though, is we need more time to explain it to other members on the organisation.

Gettings hands on

One thing about Figma which is good though (thanks you to Elizabeth for recommending such tool) is the ability to implement simple flows. For example, we have designed many sub menus, tips, and other funcitons inside our app. How to we navigate inside these functions, we think by using a menu(or 'Hamberger' if you prefer that name). The menu will have 4 elements, and the user can interact with them.

Page Flow

Page Flow

Yeah...The blue lines are very messy, but they are the backbone of our functionalities. The blue link are the flows of our control. It's like, if we press one of the button, it will follow the lines from that button, to the page we *point to.

Transition Settings

Transition Settings

The functionalities are mostly done via linking pages together with this flow function shown in the picture. Also, we had a hard time tuning the rounded corner elements and the relative position of elements.

Experiences

In my opinion, I think making a balance of intuitive control to the user and the aesthetics of elements&color scheme is a interesting topic. You can make the colors contrasting very well, that will make the whole app ery intuitive to the users because they know the elements are different things from the fact that they have different colors. But, that will destroy whole balance in color scheme, aesthetics area of the app will be ruined. On the other hand, using coherance, paired color is good, but it is not so inituitive to users, or epressing our intended idea by that color&shape. So in this case, different shapes are needed to indicate the elements are different. But then we have to think again our shape scheme (Remember the rounded-corner thing I mentioned before?)

Anyway, It is a fun group project at the end. I know how to balance my own idea in the functionalities of the app, with our teammates, after working with them. Adding too much complex functionalities on a simple app (which is our start point) can sometimes be a bad thing (not to mention whether our tech allows it), but, too least function also makes it not attractive. Here co-operation is great for such situation, we can discuss and found a balance sweet point with each of our own reasonings.