Final Project Post – HAKO – Yukie Miyazaki, Johan Ng, Muhammad Hazzry

Online Documentation:

Print Documentations:

Week 7 Basic HTML and CSS workshop – Johan Ng and Hazzry

Our workshop on HTML and CSS was conducted in week 7 during class time. For this workshop, Johan focused on the theory aspect while Hazzry went through the tutorial of making a student profile with the class. 

Sequence of Workshop

  1. HTML Structure
  2. HTML Tags
  3. Formatting elements
  4. CSS
  5. Creation of Student Profile
Hazzry going through making the student profile
Workshop in progress!
creation of student profile from class

For those who are interested in what we did, you can download the workshop slides and instructions from the links below!

Small Design Decision – Rachel, Xin Yee, Johan and Hazzry

The movie that we watched together was Okja. One small design decision that was incorporated was a meat extractor gun, used to extract meat samples from live pigs (in this case, superpigs), without killing its subject. The procedure was briefly explained to us via the iPad scene, where visual instructions were displayed on the screen; and the end product was shown in the following scene to give a complete visualisation of the futuristic product that was introduced. It other than the main movie detail of the “superpig”, the introduction of this device allow us to understand that the movie’s storyworld is different from the world that we are living in. 

Share Your World – Yukie, Johan, Hazzry


There is extreme economic inequality in the nation, small industries are dying out at an extremely fast pace due to the nation’s push for the technology, machine learning, artificial intelligence, etc. Art is increasingly being overlooked and shunned, and practitioners such as clay jewellers are doing their best to survive such that they have to work 24/7, even when they are on-the-go.

Chilli has also become a staple in modern day Singapore and is found in every food item in Singapore. Being fully aware of this fact and the potential that it can bring, clay jewellers has decided harness the power of chilli even after its consumption – to use it as an indirect heat source.

What they did was to create a workstation that they could carry on their backs, deployable when they carry it on their front, allowing them to work on-the-go and even baking their clay jewellery through harnessing the heat source coming from their tummies – a result of their chilli-centric diet.

Cover art

Microfiction #1 – Yukie Miyazaki

Staring intently at the piece of clay in my hands, I feel contentment rise up within me.

The coloured specks sit on the clay perfectly and look amazing.

I blink a few times, trying to ease my eyes from the strain of being too focused. I look up and the bright lights hit me a bit too suddenly. My eyes begin to water as they tried to adjust, and slowly, I’m aware of the chatter and the life of the environment around me.

Ah, life. Something I haven’t had the chance to enjoy in such a long time.

Opposite me stands an older lady, busy knitting away. The yarn is dangling off her arm and almost touches the floor. She sighs, her eyes fixated still.

*Ding dong* “Next stop, One North.”

One more stop to go. My tummy begins to grumble. It took me awhile to get used to all that spicy food, but it’s worth it. I’m finally adjusting, and I quite enjoy it actually. The tummy aches occur less frequently now. I may even be able to try outdoing myself this time.

I start packing up to get ready to alight. I look around once more and catch a glimpse of the lucky few, those that can afford to simply do nothing. They don’t realise how good they have it. But who do I have to blame? No one but myself. I should count my blessings while I still can.

Microfiction #2 – Johan Ng

“Hey mom, can we please have something else for dinner?”

“Honey, you know that this is all we have, now be a good boy and eat your dinner.”

“But it is too spicy and my stomach hurts….”

“That’s the point, you will have to get used to it eventually. Now, come over here, ill get that fixed up for you.”

Mom places a thin patch onto Thomas’s stomach. The colour of the patch turns rapidly from brown to bright red. Thomas heave a sigh of relief and mom gave a huge smile.

“Seems like today the output is good as usual.” Mom removes the patch and attaches it to the worn-out television.

Bzzt* Bzzt* ….. Bzzt* Bzzt* …. Static noises comes out from the television and colour slowly returns to the screen. The broadcast seems to be the ever so famous cooking show called C Padi’s kitchen, featuring all sorts of cuisine that could be made with the wonder spice of chili.

Microfiction #3 – Muhammad Hazzry

Life is good. Business is booming, money is flowing, food is always on the table, family is healthy and living without any stress. In fact, life is grea- *BAM*, someone walks into me at full speed. DARN IT, just when I was about to feel good about life in general, something had to dampen my spirits.

“Oh? Jewellery made of clay? Wow I can’t remember the last time I saw these, or any form of art, for that matter”, I thought to myself as I observed the lady hastily picking up her work; some of which did not survive the fall. I decided to set my anger aside and help her instead.

“Thank you, you’re very kind.”

“Hey don’t mention it, just watch where you’re going next time yeah? It’s a good thing neither of us got hurt.”.

“O-oh… okay, sorry. I should go. Thanks again.”, as she rushes off, continuing on her craft, or at least what’s left of it. After what just happened, you would think she would just focus on the commute no? No, she STILL decides to work on-the-go, as she fades into the distant crowd. Unbelievable.

Anyway, where was I? Oh yes, life. Life is great. I continue to stroll towards my workplace, just a two minutes’ walk away from the MRT station. Thank god for the fully air-conditioned pathway as well; I don’t know how I could survive in the modern heat, especially after that hotter-than-usual pancakes this morning. But it’s fine, that is how life is now, and it’s great.

Explore Practitioners 3: Johan Ng

My cousin is a wedding make-up artist and I got the opportunity to ask her about her profession. It is interesting to see the large number of tools that she uses, and the time needed for one make-up.

Her most recent make-up


  1. Preparation: Trim eyebrows, moisturize and prime, eye cream, lip balm
  2. Foundation – depending on client skin type, e.g oily/dry/sensitive
  3. Eyes – Eyeshadow, eyeliner, false lashes
  4. Fill in eyebrows
  5. Concealer for undereyes and blemishes
  6. Powder and set makeup
  7. Highlight, blusher, contour
  8. Lipstick
  9. Setting spray to lock in makeup

Worksite Documentation

Her make up trolley
Her make up trolley when opened up

She typically does weddings, so it will be either at hotels or the customer’s house. She doesn’t usually require a large amount of space as she take things out from her makeup trolley and put them back after use.

Tools used

various tools that she uses
various tools that she uses

Mainly brushes and sponges. Others include tweezers, scissors for cutting eyelashes, eyelash curlers. She stores all her tools under a makeup trolley with compartments.

Pain Points

Need clear compartments for different things e.g storage of lipsticks, eyelashes and eyeshadows. As there are a lot of tools involved, it may get difficult at times when she is pressed for time.

Explore Practitioner 2: Johan Ng

I had the opportunity to interview a hawker vendor as part of a film project and I took this opportunity to observe the chef cooking up his specialty, prawn noodles. It is interesting to see behind the scenes as to how it is being prepared and done. Something interesting about this prawn noodles is that it is no ordinary noodles but an innovation from the original.

Process Documentation

The process starts with the order from the customer and the chef proceeds to prepare the order. The chef goes on to do the necessary steps for the dish that the customer order. In my case, it was prawn noodles. The preparation sequence goes as follow; first cut the pork slices, then the chef will prepare the noodles. After which, he goes on to blow torch the pork slices and adds the rest of the condiments inside the bowl of noodles. This marks the end of the cooking process.

explanation of the process
blow torching the pork slices


  1. Orders from the customer
  2. Cutting of the pork slices.
  3. Preparation of the noodles
  4. Blow torch the pork slices
  5. Add pork slices into the bowl of noodles
  6. Add half boiled egg and prawn into the bowl.
  7. Add additional condiments into the bowl.
Final product 

Worksite Documentation

The worksite features a typical hawker vendor store space with the unit having just enough space for at most three people inside. During the entire process, there was not much space for other people to move in and out of the unit. The worksite though has many parts to it, from a space to cut things; to the storage fridge; and the place to cook the noodles. There is a lot more than it meets the eye for the place.

Tools Used

tools used in the process

I was actually surprised at the number of tools needed to prepare one bowl of noodles. There are actually more tools that are used in the preparation phase but the ones that I drew here were observed during the cooking phase of the noodles.

Pain Points

Due to the limited space in the kitchen, there is no space for rest. The chef mentioned that it gets tiring especially on days whereby there is a large influx of customers. Having to stand the entire time, it gets quite tiring at times.

Explore Practitioners 1 – Johan Ng

My desktop encountered a problem last weekend and I went to find a technician to fix the problem. I took this opportunity to ask the technician whether I could observe and had a little chat with him as well. Thankfully, he agreed to let me sit in and observe his practice while he tries to identify the issue with my desktop.

Process Documentation
The process begins with the problem, in my case, I could not turn on the power on my desktop occasionally. The problems may vary, from power issues to the dreaded blue screen of death. Upon the request of the client, the technician then goes on to identify the problem. For my situation, it was a simple failure of the power supply unit, but he needed to test it out to make sure that the problem was indeed the power supply unit. By replacing my power supply unit with his testing kit, my desktop was able to power up and the problem was identified as a faulty power supply unit. The entire process lasted roughly an hour long.

Trying to identify the problem


  1. Listen to client problem
  2. Diagnosis of problem
  3. List down options of repair (replacement of part, change wires etc)
  4. Removal of problematic part
  5. Clear the unit of dust
  6. Replacement of problematic part
  7. Test and see if the PC runs normally.
End result of the replacement of the power supply unit in the top left hand side and fully dedusted desktop.

Worksite Documentation

The area used is rather small and messy with a lot of different spare parts to use and diagnose the problem of the PC. There is a small working space to place the faulty desktop and work on it at the same time.

Workspace to repair desktop

Tools Used

Spare part to identify the problem – It is dependent on the problem of the user, if the technician suspect that it is an issue with the power supply unit, he would use a replacement power supply unit to check whether the computer is able to power on normally with another power supply unit.

Air cleaner – This tool over here is to clean the dust that accumulates inside the interior of the PC unit. Unsurprisingly a lot of dust gathers inside the unit and by cleaning up the unit before the actual replacement of tool

Other tools include a monitor screen, many types of screws, screwdrivers, pliers, mouse and keyboard.

Pain Points

Due to the wide range of problems the client may have, it is impossible to have all the different type of spare parts at hand in the same space to test for the problem. Space is a large issue as there is limited space in the workspace but many possible problems. Another issue is dealing with the small screws that secure the desktop. As these screws are fairly small, a possible problem would be missing screws. Another pain point is during the diagnosis of the problem. As mine was fairly simple, a one to one replacement of the power supply unit would be sufficient, but there could be other problems that may take many more days to diagnose and solve.

Practice Storyworld – Johan Ng


Set in the year 2330, no one knows why but it is prohibited to leave the house with their bare face. People are now required to put on a mask called the Identity passport or IP for short. With the IP, everything that you need to know about a person can be put on display through your IP. Life still goes on normally thou no one knows when exactly the IP was created or made. People just came along with it. Throughout the different ages, people go to the place called the Centre to maintain their IP.

The world is now determined by their IP standings. Since it is public, people know how each other fare and treat each other according to their ranks. A class “A” citizen is entitled to higher education, priority treatment and many other benefits whereas a class “F” citizen is only entitled to public housing. These rankings are determined from birth and are dependent on the parent’s status. Though it is possible to change classes, it is uncommon for people to pursue change as the life that people live are predetermined and everyone has a role in society. No one ever questions the system as the world now has no problems and people get by with their classes.

Genre: Adventure / Identity

Story: Tim, a class “B” citizen has nothing but issues with his IP. He hates how uncomfortable it is, but still put it on whenever his parents tell him to. He goes around the house bare-face but has never seen his parents real face before. He once took off his IP in public by accident and saw things that he had never seen before. The siren rang, and he never dare to take it off ever again. By a stroke of luck, he spots someone with a mysterious IP, one that he has never seen before. It was different from the rest, almost as though the person was not wearing it. Curious to find out what lies beyond the IP, Tim decides to follow that person in search for an answer.

Method: Through a comic or an animation.

Wearable Research – Johan Ng

Hairdresser Tool Belt

Practice it works in

As the name suggest, the purpose of the belt is to keep all the tools the hairdresser needs in place and use them as and when it is needed.

Its specific use

The belt allows the hairdresser to store all sorts of hairstyling tools which normally compromises of various types of scissors and combs. This helps the hairdresser save time in finding the necessary tools needed during a haircut and smoothen the process.


As it is strapped usually by the side of the waist, it does not really obstruct movement in any form or way. However, if there is a huge number of hairdressing tools strapped to the side, it may obstruct some movement.

Utility VS Fashionability

It is a very convenient tool as the hairdressers can change hairdressing tools without moving around to get another. Also these belts generally do not have a fixed number of pockets and can be customizable to fit the hairdresser needs. In terms of design, it does not stand out much but the belt allows people to identify the user as a hairdresser.    


Practice it works in

The device was suggested for gardeners however it could be used by anyone who does not want to get sunburnt.

Its specific use

The device tracks the user’s exposure to the sun and alerts the user when they have exceeded the recommended amount of sun exposure.


It is simply a wrist bracelet with a device and does not obstruct any form of movement.

Utility VS Fashionability

The aesthetics of June resembles any ordinary hand accessory. Perhaps the purpose of the device is to track sun exposure and at the same time look fashionable. The device does not stand out as a tracking device and could be used just simply for fashion.   

Johan Ng (A0139660B)