Design chirps

Your awesome Tagline

1 note

The Grand Finale - Cuppa Anyone?

buttonsThis blog documents the production journey of my final project - an interactive information design for a touch screen. I named mine Cuppa Anyone? as it’s an interactive visualisation of Coffee, Milk and Sugar consumption levels in 6 countries (Australia, United States, United King, China, Japan and South Africa) from 1975-2007. 

A quick snapshot of the main page (first frame):


0 notes

#2 Influences + data sources

I’m inspired by everything and anything that’s highly graphical with outstanding visual presentation, in other words, “boring data” turned wow-ing-ly amazing. These are few of the many information designs that had significant influence on my conceptualisation process:

  1. How much CO2 is created by… This visual design caught my eyes almost immediately. I love how clean it looks with just two colours (green and purple) on a white canvas. Its interactivity is a key win, I must say. The options of dragging, clicking and switching enables effective user interface. The only let down is how soft the colours are, almost blending and fading into the background. 
  2. National Geographic Magazine surnames. Alright, maybe this is not THAT interactive but I’m very impressed with the level of detail of its graphics. It’s not easy measuring and matching the sizes of those surnames in InDesign and more so, fitting them into a confined space of US’s map. 
  3. Caffeine and CaloriesThis is mind-blowingly amazing. Yea maybe I’m exaggerating but I truly love this to bits. Not interactive? Who cares. Brilliant information design, I would so get this printed and stick it on my wall. OH if only it would move…

Data sources – where from?

After navigating through many common and reliable data sources such as Gapminder, Australian Bureau of Statistics, Australian Government Data, I’m lucky enough to stumble upon the data site of United Nation’s Food and Agriculture Organisation (FAO). To inspect its reliability and accuracy, I did some mini online research and found that the same data set is also published by World Resources Institute through Earth Trends, its environmental information portal. Definitely a yay to go on with it. The props of FAO’s site is that it works like a search engine, in which every search can be narrowed down according to the food type, number of years, countries, and unit values. A .csv file, .excel file or .xml file will then be generated and available for download.

Source used: FAOSTAT’s food supply data library

Other sources that I’ve considered:

0 notes

#1 Decisions, decisions, decisions

I hung around the contemplation zone for a fair few weeks – not because I love juggling with ideas but I was ensnared by the silent knowing that “the choice” would either set my design journey on a field of roses or a never-ending toil of turmoil. What kept me on track was the firm notion that it must be something fun, creative with a great lean to graphics and visualisation, yet something realistic.

My initial set of data choices ranged from world population and demographics, everything from the Royal Wedding analysed and quantified in number (including number of cupcakes served, number of cheers, etc.) to an unimaginably-crazily-massive data set of public toilets locations in Australia - which to my surprise, was made into multiple iPhone apps for the ease of locating public restrooms when people are out and about. My unfiltered list of data options differs distinctively from my ideas earlier in the semester, of what I thought I would be doing – OH talk about likelihood. Design is a surprising journey.

coffee cup

After many doona days, I’ve finally decided to narrow my options to statistical data related to food. I chose coffee, milk and sugar as they’re the very ingredients of a cuppa (duh!), which I enjoy every morning. Working on something that I’m absolutely passionate about, to me, is utterly important. The virtual aroma of coffee became my motivating factor.

0 notes

#3 The use case scenario+design perspectives+underlying assumptions

"A picture is worth a thousand words. An interface is worth a thousand pictures" (Ben Shneiderman, 2003).

This very first quote from the first lecture still vividly resonates in my mind. At this point I’ve come to the realisation that the outcome of my interface design is largely dependent on #1 the effectiveness of visual communication #2 user’s perception and user experience. I’ve got to ensure that my design does strike a cord. But then, wait - what cord? And who, how, when?

The use case scenario

Cuppa Anyone? is created for EVERYONE and ANYONE who has (even) the slightest interest in information (and coffee, of course). My firm belief is that everyone is interested in information, thanks to our human nature - the wonder of new things! As long as information is presented in a clever, orderly and visually appealing manner, people of all cultural groups, age groups or nationality will be drawn to it.

Coffee, milk and sugar are three food types that will undoubtedly strike a cord with ALL audiences. Tell me, who doesn’t like coffee? - oh well, maybe I went a teeny bit strong on that - but even so, no one could escape from milk or sugar, could they?

Base on this firm notion, my idea was constantly refined and built upon through a series of experimentation, trips and bumps. Problem and solution, signifier and signified, addresser and addressee - it’s all about getting the message across in the most effective way possible. 

First things first, I set a list of must-haves for the project to keep myself on track. Technical aspect must-haves:

  • multi touch drag-and-drop
  • comparative multiples (variation in scale, proportion and colour)
  • filtering
  • layering data detail
  • slider component for interactivity

Infosthetics explained - form, composition, content, context:

Coffee chart - duplication of small multiples, fixed spectrum (brown tints and shades), colour coding (dark brown beans vs. light brown beans)


Milk chart - chart visualisation, gradient to show hierarchy and a sense of transition, colour coding (white=milk; blue=non-informative zone), flowy line across embedding a secondary meaning of milk in a glass


Sugar chart - chart visualisation, jagged bars (top only) hinting out loud “my name is sugar!”, colour code: light brown=sugar

0 notes

#4 Experimentation + Wireframes

Here’re some of diagrams, sketches and doodles I’ve done in the conceptualisation and development process:

Picture below: My initial idea of integrating coffee, milk and sugar data in a graphical form (coffee cup) with partitions dedicated to each data set. This is still my favourite (and most ideal) visual representation. I abandoned the concept as it’s extremely difficult to formulate with actionscript coding in Flash (at least, according to my current scripting ability).

Below: Chart sketches and information display methods


Below: Another visualisation in a story-telling form. In this case, sugar in a measuring spoon. Again, it’s not being developed due to technical constraints.


I actually ended up using the coffee chart idea (bottom left) as it’s the most workable option out of all the sketches I’ve done. I’m quite fond of the ‘milk-in-a-glass” idea (bottom right), but later on figured that it could be presented in a better manner. 

After my initial sketches I moved on to drafting my concepts in InDesign, which turned out to be a rather quick and smooth process (probably because I’m familiar with the workspace as I use it at work every day). Below are some of my InDesign concepts and experimentations:

Exploring information design and data display options:

A trial on how a world map view would look like (and quickly decided that it wouldn’t be a good idea - it looks dull):

Playing with circles, overlay settings, colours, tints and shades:

The milk chart I developed (rather speedily) - it’s very close to the final milk chart in Cuppa Anyone? The blue gradient background signifies hierarchy and a sense of transition.

My pre-coding workflow:

  1. Hard sketches/doodles
  2. InDesign concepts and mock-ups
  3. Refine designs in InDesign
  4. Export as .fla file
  5. Layout graphics in Flash

Yellow Screens/ Wireframe - a very simple one. I’ve decided not to spend too much time on this as I already had a clear idea of how the charts are linked, wired, displayed and animated. This four-frame storyboard projects the overall flow and serves as a reference concept map while I arranged the graphical elements in Flash. 

    0 notes

    #5 Bumps, bruises and bloopers

    Overall, I enjoyed the design process (especially when the final working flash file is produced!). The most painful part, I’ve got to say, is coding. I spent two weeks working on the codes, which failed countless times, as opposed to the short-and-sweet two days of developing graphics for the project. 

    What would I do better if I were to do this again? If possible, I would prefer working with a programmer (or someone who’s familiar with scripting) for a MUCH better outcome. If from the start I could sit down with a programmer, throw him/her all of my ideas and work out which is the best or most feasible, I wouldn’t have tumbled and fumbled along the way and compromised on the many brilliant designs and options. 

    Regardless, I’ve gained a lot out of this project and this unit. It’s absolutely one of an experience to produce oh-it-actually-moves graphics! 

    0 notes

My 10 daily depictions - drawn from scratch in InDesign. The ‘cosy abode’ concept ties everything together as a converging point of all the activities in the day. Various shades of pink and a hint of translucent gray gives a girly and modern touch to the overall image. Here’s my initial concept sketch.

    My 10 daily depictions - drawn from scratch in InDesign. The ‘cosy abode’ concept ties everything together as a converging point of all the activities in the day. Various shades of pink and a hint of translucent gray gives a girly and modern touch to the overall image. Here’s my initial concept sketch.

    0 notes

    Final project concepts

    Cube sketches

    Concept 1: Generational Genealogy Chart

    From baby boomers to Generation X, Generation Y, Generation Z and now Generation Alpha. This Genealogy chart lists everything you need to know about each generation, from X to Alpha in chronological order. Some key pieces of information includes: birth year, historical events, social icons, social trends and characteristics of each generation.

    Concept 2: Palettes

    Palettes is graphic-based interface uniting the basic semiotics, concepts and rules of colours allowing the user to dynamically select colour sets for their personal projects, home or work. This will include colour theory, design utility, flickr images to demonstrate use of colours, magazine links and twitter @Mentions. The page will flow out from a plain palette with blocks of colour in varying sizes.


    Concept 3: Pets alliance

    Pets alliance is a purely informative interface listing statistics of pets around the world using a world map view. Coloured translucent circles will mark location data, laid out as “hot spots” on the map.  Other information will include the types, breed, origin of pets people keep and list the number of pets by location.

    0 notes

    My mash up

    The first lecture that we had reminded me a lot about visual form, composition, content and context - it’s all about my role being an effective visual communicator. As a graphic designer with relevant experience in information design, all these while I had thought that I have a solid understanding of the field — not until that I realised semiotics now has a new meaning as data boldly marches into every aspect of our lives. Even websites will soon be outdated. Information design no longer stands alone. Interface design has become a must AND a need. 

    My mash up journey

    So, what about mash ups? In my understanding, a mash up is not just a one-stop webpage offering new user experience/ services by combining sets of data sources; a good mash up, rather, is one that effectively presents the sets of data in a visually stimulating, inspiring and thought provoking manner (not ignoring the technical elements of course, as they form the backbone of all mash ups). In my own time I find myself doodling a lot and here are some just from my lecture notes:

    Random doodles

    Here are some mash ups/ info graphics that I really like. I love the pictorial approach in Caffeine and Calories, good and appealing information in The hierarchy of digital distractions, and last but not least, the popular Snake Oil diagram.

    Mash up concept

    I’m thinking of doing something in between Caffeine and Calories and Snake Oil, taking the props from each. My initial idea was just to present sets of data that people would be interested in, in a simple yet engaging manner. I came to this idea of doing a generation genealogy chart in chronological order (Generation X, Y, Z and now Generation Alpha) but soon realised that the data sets I’ll be dealing with is way too complicated. I’ll leave that as one of my final project ideas instead. 

    Then, I landed on this decision to work on a fashion mash up site titled “what’s hot this season?”. The mash up will incorporate visual representations (e.g. shoes, coats, blouses, hats) of data sets (the hottest fashion, celebrity styles, magazine links, twitter @Mentions, etc.). Here’s a basic mock-up of the page:

    My mash up

    "What’s hot this season" proof

    0 notes

    Mash up - PHP

    Having trodden the process of exporting pipes using PHP, I’ve got to say that PHP is much trickier and complicated compared to the javascript “badges” method. Nevertheless, it does allow extensive control over pipe data and information bridging.

    This, rather simple PHP mash up is an expanded version of what we did in class - a list of flickr image search results with extended function to limit the number of images displayed. With the user input field (based on three fields in the original pipe), the user will be able to define individual search fields to obtain relevant information. Formatted as a drop down list layout, the page is styled with CSS for a sandstone effect. 

    Technically, this mash up is definitely not the loudest of all. I treat this exercise as an experimentation to explore the options of exporting pipe data. There’s more room for practice and improvement. Nonetheless, I’m glad that I’ve learned this technique.