VCIII: Water Project – Droplet’s Journey

.: Research :.

Our group started out studying bottled water: how it is marketed, packaged and its impact on the environment. Following that, the irony between copy and reality, which hides aspects of our interaction with water began to interest me. Thus, subsequent research pursued this direction. As the project moved forward, the idea gradually evolved and distilled into this: how we treat water.

Man’s relationship with water is one where we are greatly dependent on water. It is one-sided relationship, really. But it’s weird that we don’t treat water that well… We prize clean water because it is essential for life. It is so important that history has recorded mankind fighting over ‘rights’ to this resource time and again. But we also misuse it, take it for granted, and pollute it. Deliberately. 

Thus, this project tries to articulate the many relationships mankind has with water, via the perspective of water’s journey through different countries. It is presented in the form of a ‘choose-your-own-adventure-esque’ application. There are happy endings, sad endings, and a few with lingering uncertainties, to prompt us to critically evaluate our relationship with water.

.: The Project :.

The first section of this post will discuss the final deliverables. The process will be included at the end. If you aren’t a huge fan of words, browse the gallery 🙂


The main deliverable is a ‘choose-your-own-adventure’ application. The attractiveness of choose-your-own-adventure style stories/games is that the reader makes choices that decide the progression of the narrative. The ending achieved is dependent on the nature of the reader’s choices.

For the purpose of provoking critical thought of our present relationship with water, all story-lines are based on real-world issues. With Professor Nanci’s knowledge and guidance, we narrowed it down to 6 main areas: Malaysia, Singapore, China, UK, America and Africa (not a country, but many nations on this continent face very similar issues regarding water). However, within the project time frame, I could only do 3 (and code only 2) ;-;

The final 3 (China, Africa and America) were selected based on the breadth/type of water stories they had, which appears to be closely connected to the level of development as well. As of now, all illustrations are completed, but only the first 2 have been coded into the application. 

If you’d like to try the application, please visit:

Advertisment & Plushie

As supplements to the main application, the advertisement, well, advertises the application. It is square format and runs for about 15s. The plushie is in Droplet’s image, measuring 46x50cm. The plushie is made to be cuddled and loved. Treat it with care 🙂

On another note,

The rain falls outside my window as I type this. How fitting.
I wonder where Droplet has landed now. What sort of adventure will it encounter? 

.: Process :.

Application: Process

81 illustrations,
A flair for the dramatic,
Beginner coding abilities,
And a few pairs of eyebags to tide the day(s) by

In terms of character design, Droplet was designed to appeal to people’s protective instincts 😉 it appears to be working…? Also, the other characters are also not created to ‘bad’, they have no knowledge of (or agency over) their effect on others. It should be observed that this is the premise which the stories are built upon: man is often the one who has agency, and is also the one to benefit, or suffer, from the state of water, which is affected by our choices and actions. This is why Droplet has no hands; no agency. Also, Droplet is naive and innocent, which is why it is so helpless against the perils of the world (and why the player has to make the right choices to help it!)

Before getting to the meat of things, Prof Nanci had me do a user experience prototype, so as to gauge the duration and detail for the story lines. This was a really helpful process!! I got to storyboard (kinda) and try it out on people (hurhur) without having to code.

But since one of my recent goals is to learn to code, I tried my hand at it for this project! I’m super delighted that the code actually works! Okay, honestly, it’s quite a simple code (though tedious), but to beginner me, I get very confused with all the lines and stuff. Really thankful for the ‘block’ system had that made things easier to understand. The loops/skips in some parts of the story, make me feel even more confuzzled… learnt somethings though, so that’s good.

Ad: Process

Blinking Droplet,
And a do-or-die attitude :p

It was my first time using Adobe AfterEffects. An interesting experience, and could still be improved on. But my primary focus was on the application, so the ad didn’t receive as much attention. The purpose was simply to advertise the application, and give users some idea about what the application is about.

Plushie: Process

1/2 metre of soft blue cloth,
Ruined fabric pencil,
Helpful neighbour who has sewing machine,
And a set of numb fingers

Another reason why the ad was less loved is because of the plushie 😉 I made prototypes of varying sizes, and it more than doubled in size each time. So the final plushie is the size it is (46x50cm). It should sit pretty comfortably in your lap and still be nice to hug. Went shopping for materials with Christy (see her post here!) hehe it was great fun! We had to conduct #facetest to evaluate the suitability of cloth for our plushies.

In conclusion,

This was a very demanding project. I was far too ambitious at the start ;-; it’s a real pity the application isn’t complete yet. However, I did learn a lot from this. Knowing my limits for one, dabbling in a few new skills (coding and aftereffects) as well as an increased awareness of our impact on the environment ;-; sometimes, ignorance is bliss, other times, not so much.


Fill in the blank: I’m feeling whaley _______ today.

It’s the weekday, and the offices that were quieter during the weekends surge with the hustle and bustle of life once more. Or so would be, if the workplace were in the CBD. But not the hospital. Regardless of the time, there is always someone working, someone tending to the patients, someone waiting anxiously for news.

=Therapeutic Graphics=

Project goal: To create a welcoming and soothing environment through design that can potentially promote healing in the hospital.

Below is the space which will house the work:

The J-Walk
The J-Walk

More specifically, the square window this elderly gentleman is moving past:


=Notes on the space=

  • Ceiling to floor glass windows that allow light to stream into the walkway,
    • which is a wide, mostly empty space (especially in the middle),
    • with travellators on the sides.
  • The overall design/feel of the space is industrial. Gray tones of metal and tiles and blocky pillars add to this feel.
  • Directly outside the windows are bars that run horizontally along the walkway.
  • Beyond which is a street view that includes quite a bit of greenery and glimpses of nearby malls.

=Talking to the auntie=

Marianne and I approached an middle-aged auntie in uniform. She is one of the cleaning aunties, to whom the clean and presentable environment we saw can be credited to.

When asked what she thought of the place, her reply (in Mandarin) was that it “resembles a prison”.

I was surprised. The open space and soft sunlight were plenty positive things to me. I could breathe more easily along the walkway compared to the confined space of the mall or hospital corridors. “Prison” was not what I was expecting.

It took a second look at the space for understanding to dawn upon me, and is an issue that a number of my classmates pointed out most concisely: the individual’s emotional/mental state that influenced their perception of the space.

I entered the space as a student, fresh out of a long summer holiday (or not, but it was a break nonetheless), anticipating a new project in a new module. Sunlight and space are nice.

On the other hand, many of the people who use this walkway enter it differently. Many probably have not had a holiday in a while, some just completed shifts, yet others miles from their home country. Without a doubt, the hospital environment can be a high-stress environment regardless of the identity or role of the person who enters. Surgeons rushing to the operating theatres, nurses hurrying to assist  patients, office staff up to the neck with paperwork, cleaning staff upholding the enormous task of keeping the space suitable, and even visitors worried about family or friends. In this situation, the grey of the space might stand out. Harsh and unforgiving. Bars seem to follow you as you move through the walkway, but they stretch out farther before you, as if moving quicker, more efficiently; mocking all the effort you’ve put into everything. Then again, these same bars recall the bars of a prison cell, acting as an obstacle to the comparative peace of the outside world, trapped.


Likening the walkway to a prison generally connotes something negative. It implies a sense of dreariness, monotony, imprisonment, stress. 

Contrasting words to this would be fun, playful, vibrant, full of life, exuberant, bright, active and engaging.

The goal of these designs is to provide respite mental/emotional from the toil of work, a period of relaxation as they hurry between different locations. Ideally, due to the large target group (from children to elderly, shoppers to doctors, and everyone in between), the graphics still resonates positively with them.

Hence, I’ve explored two main types of ideas. The first is modifying the perception of the bars. That is, to somehow integrate the bars into the design, thereby altering the understanding of “bars = prison”. The second collection of ideas finds its roots in the contrasting words and the exploration of lighthearted humour in the first group of sketches.

=Horizontal bars, or not?=

Anyway, I don’t usually work well with mind maps(referring to the typical mind map). My equivalent of a mind map happens to look like chunks of notes instead. In this case, notes on the side of the sketch. They are mostly ideas that suddenly pop up, or grow from a related idea. Yes, in essence it’s the same as a mind map. It just doesn’t look like one… somehow…

Sketches: street, pac-man, ecosystem on the bars, and a bunch of note-making
Sketches: street, pac-man, ecosystem on the bars, and a bunch of note-making

The sketch that tickled my sides was this one:

the (not-so-)great escape
the (not-so-)great escape

Up until this sketch, I had mostly been thinking of just visually appealing images. Images that were relaxing and comfortable to look at. But this reminded me that therapeutic graphics goes beyond just looking good. It should have something that resonates with the viewer. I had tried to do that with “Pac-man”, but it isn’t a universally appreciated game. This sneaky person, on the other hand, has a quirk of humour, something that reaches out to the audience.

(I personally did quite like this idea hahahaha.) But Michael mentioned that this design could more likely accentuate the bars instead of distracting the viewer from their prison-ness. Classmates also voiced concern about how it can be executed. And I agree. So yup, it’s a no-go.

=Idea Number Two=

Then, what else can speak to the people traipsing along these hallways? What can lift their spirits? 

Nature is definitely a recurring theme for many of us. I can’t think of anything particularly universally funny either.

And by this time, I’ve already a particular feel/vibe that I’d like my work to have. It has to be something relaxing, free, colourful, and light at the same time. Searching from inspiration everywhere, I remembered a text my friend wrote a couple years ago for a school publication, Non-Sequitur. Exactly what I needed.

The following is the first third of Wanderlust

Written by Winnie Fok

The whale has arrived at my doorstep. She is a lovely turquoise, a shade I’ve never seen before. I feel the need to be polite and bow first, so I do, before I clamber on to her back. So smooth it feels like silk. Makes me want to slide down her side and fall off into the abyss. I wonder where the ground is. I wonder what hitting the ground feels like. But before I can make that a reality funny I should use that word she takes off. There is a soft intake of air, like someone breathing in quickly. I look up to see the balloons moving up, like they are being pulled by something. It takes me a while to realise that she is moving with the balloons. Up, up into the clouds. We are going. Where are we going? I don’t know where, but we are headed there, and I like that.

We are in the middle of the clouds. It’s like ghosts and wisps whispering into my hair, except they dissolve into morning dew and dragonfly tears on my face. I can’t see very much, but I like that. The clouds are cold and the wind is cold and I have never felt more alive in my life.
I am full of

It’s everything I was looking for and more.

Whimsical, lighthearted, with a singsong quality that just emanates from the writing. I love it. <3

What’s even better is that it already contains distinctly graphic elements that most people would associate with comfort. Despite their large size, the gentleness of whales is well-known. And the beautiful blue (or in this case, turquoise) has already been on my mind as a staple for the colour palette of “therapeutic”. Perhaps it’s the cultural thing about cute huggable whales that’s eliciting the “awws” as well! Moreover, there is a human character whom people can relate to.

I’m hoping that it can become some sort of a series. A lighthearted, whimsical narrative through which people can adventure with the main character as they move by from location to location.

Preliminary sketches
Preliminary sketches

I also considered cutouts that could allow light to pass as little glimmers of fireflies and wisps, even adding some glow-in-the-dark so that it can be viewed after the sun has set (since there are people working in hospitals even at night). This is an idea that I might included into the final illustrations.

=Designing the characters=

Officially starting on Idea Number Two!

More sketches
More sketches

Working out the main character’s personality and features. I’m inclined to make the girl a little bit like the writer, slightly shy, yet adventurous and more than willing to try new things. She’s got this child-like wonder, and is amazed by what she sees when flying on the whale’s back.

House/doorstep design. Compositional sketch for the doorstep scene
House/doorstep design. Compositional sketch for the doorstep scene.

The first “house” that came to mind was very English looking. But this is Singapore, not the U.K., and thus, I tried to design a house that was a little bit ore similar to the shophouses that lined (and still line some) streets in Singapore. Due to the wide range of audience, I want something that can reach out to the different age groups. In this case, the older generation will relate better to the visual of a shophouse. Inspiration was taken from the following images:


Next is the whale!

I chose to use the humpback whale because it’s potentially the most expressive whale. Why? Because it’s mouth can be drawn to quirk into a very endearing smile:)

Whale colour sketch
Whale colour sketch

And I’m hoping to make a whale and sky piece, something like this:

Whale in the sky
Whale in the sky

I really love the whimsicality in this piece. The mix of ships and submarines and a whale all flying together in the night sky is somehow very dreamy.

Or this:

Happy whale in the sky

With a little bit more loose-ness in the execution like this:

JosephBlake_A_Whale_Named_Wheelie_watercolor_illustrationSlightly looser appearance so that it gives the viewers a sense of space, that the characters are not confined by lines (or bars), thus brings out the lightness I’d like the final illustration to have!

mood board
mood board

Blue seems to be the most effective colour to achieve a calm yet endearing atmosphere.

Well. It took a while to realise that the final should be digitised and printed 😡 but I still really wanted the watercolour look. The looseness of it gives a sense of space and freedom, some rather therapeutic elements! Being pretty green to digital work, I’m clueless as to how to have a watercolour effect on the computer though, so I decided to scan in the whale first. However, the blending of paint wasn’t retained after making it into a vector (a limit on 16 colours, I think?), and thus line work and textures had to be scanned in separately, then put together digitally.

So then, here goes the recounting of great pain:

whale #2: just an outline
005 (attempting clipping mask)
attempting a clipping mask of some sort. but it was “too complex”.
006 (but for some reason, it just keeps disappearing)
so the clipping mask attempt failed miserably. whale #2 kept disappearing!
eventually figured out a way to break down the whale into simpler shapes. this allowed for playing around with different colours/textures! However, I wasn’t satisfied with the quality or colour of images online, and endeavoured to experiment with my own

collage - textures and colours

tried different combinations to find a combination that could be comforting to look at

While working with whale #2, the shapes proved far too complex to work with, and it seemed difficult to weave in the little girl character who was to interact with the whale.

And thus, the final composition started to take more concrete form:

Changes made are 1) simpler shapes, 2) solid outlines

Joy and Amy had both commented that it might be nice to have a whole whale swimming alongside the people as they travelled through — and I really liked the idea! It’s as if they would be temporarily transported into someplace else, an aquarium/underwater world, for example! Plus, the large form of the whale would unify the thin horizontal bars, making the space look less long and intimidating.

collage whale and girl outlines
outlines for whale #3 and girl. yes, the whale had to be scanned in separately~
breaking up the whale into shapes so that the clipping mask can work
close up of the girl on whaley’s back
final composition with a few fluffy clouds


Privacy Policy