Lies, Damned Lies and Statistics


I have a confession – I love statistics and how they can make sense of a seemingly chaotic world. You may have already guessed this from my fangirl post on Florence Nightingale and my geeky post on a company building 3D graphs. On the flip side of this is a hatred of misused and misunderstood statistics. […]

New try with Tableau path map

Path map_test

It was a good practice to add different icons in several spots. Thinking we need more chemical relevant icons. Also the first time to create a path map on Tableau combining the icon map.                    

2017 Tableau Visual Analytics Forum@HK


It was a great experience attending the 2017 Tableau Visual Analytics Forum in Hongkong last week. There were more than 700 Tableau users joined this event. Here are some highlights to share. Four sections of the conference -Visual Analytics and Innovative Thinking Two interesting case studies shared by TC Gan, APAC Presales Director First set of […]

TEST maps with Tableau

test 2

Some examples using ICIS palette and fonts. It is a good start!  



You may have seen an article called ‘This Google-Backed Data Viz Platform Was Designed For Non-Coders’ doing the rounds on social media recently. Intrigued?

Graphic Design Games

Screen Shot 2017-01-31 at 15.27.22 (2)

Method of Action has created some online games to help people master Bezier curves, colour theory and kerning. Have fun! In the colour game, move the black circles around the colour wheel to match the colour in the centre. From simple colour picking you move on to contrasts, analogous and triadic. But be quick – […]

Mobile interactivity


Small screens, full art, can’t lose: Despite their size, phones open up new opportunities for interactives Here’s how some top news publishers are shaping their interactives for mobile: “These devices are there, they have these capabilities built into them, so how do we use them in our storytelling?”

Touch to explore


Cool dashboard navigation type

Clouds Over Cuba


A stunning historical interactive documentary on the Cuban Missile Crisis, complete with timeline, documents and additional videos.

View Interactive

Interactive video: The rise of the Islamic State

Screen Shot 2014-08-13 at 09.54.50

The BBC have put together “an interactive” video, charting the recent turmoil in Iraq. Personally, at times I find the presentation suffers from information overload, but it’s certainly a good example of how to present videos with additional data and information using traditional HTML/CSS.

View Interactive

Visualizing Algorithms

Visualizing Algorithms

The power of the unaided mind is highly overrated… The real powers come from devising external aids that enhance cognitive abilities. —Donald Norman Algorithms are a fascinating use case for visualization. To visualize an algorithm, we don’t merely fit data to a chart; there is no primary dataset. Instead there are logical rules that describe behavior. This […]

Article & Demos

Alien Phenomenology (What It’s Like to Be a Thing) + Carpentry & Art


…Related to Infographics for Aliens

Humanity has sat at the center of philosophical thinking for too long. The recent advent of environmental philosophy and posthuman studies has widened our scope of inquiry to include ecosystems, animals, and artificial intelligence. Yet the vast majority of the stuff in our universe, and even in our lives, remains beyond serious philosophical concern.

In Alien Phenomenology, or What It’s Like to Be a Thing, Ian Bogost develops an object-oriented ontology that puts things at the center of being—a philosophy in which nothing exists any more or less than anything else, in which humans are elements but not the sole or even primary elements of philosophical interest. And unlike experimental phenomenology or the philosophy of technology, Bogost’s alien phenomenology takes for granted that all beings interact with and perceive one another. This experience, however, withdraws from human comprehension and becomes accessible only through a speculative philosophy based on metaphor.

Providing a new approach for understanding the experience of things as things, Bogost also calls on philosophers to rethink their craft. Drawing on his own background as a videogame designer, Bogost encourages professional thinkers to become makers as well, engineers who construct things as much as they think and write about …


Game Design – some thoughts from Popcap


Popcap: the 10 secrets of casual game design audio-visual feedback in a casual game provides the grammar of the experience for players who don’t speak the vocabulary of gaming. “Without the history of gaming at your finger tips, you’re not going to say, ‘okay, where’s my level up mechanism’, you don’t walk into it with […]


How & why Verdens Gangs transitioned its VG+ mobile app


General challenges to consider when choosing a HTML or the hybrid app approach: Weigh the costs of tweaking the HTML for each browser. The advantages of using a cross-platform language may soon be eroded if you need to customise your code for each browser version or operating system. Page rendering of Web content is not […]

Article Read more


Optimizing UI icons for faster recognition


Semiotic theory and structure of signs User interface, like any language or other communication system, is a construct, made using series of signs. Semiotics, a branch in linguistics that studies signs, defines a sign as being composed of two elements–a signifier (the form which the sign takes) and a signified (the concept it represents). A […]


Background on Katachi Magazine


It is very much a tactile experience, but not in the same way as print. It’s very hard to describe because we really don’t understand it fully yet ourselves. The best way I can describe it is as an x factor in the mathematic sense. We design something on screen and then put it on […]

[vimeoa id=”61088461″ mode=”normal” autoplay=”no” aspect_ratio=”16:9″]

Awards blurb
On Retina

Z-Axis: Designing for the Future


In geometric terms, the z-axis is the vertex that measures space above and below the x- and y-axes. Translation for those of us who napped through geometry: it’s how we describe panels and layers that sit above or below one another.


Looping Video Portraits

[vimeoa id=”77710860″ mode=”normal” aspect_ratio=”15:21″ parameters=”html5=1 title=0 byline=0 portrait=0 loop=1″] Jean-Yves Lemoigne is a French photographer who’s pushing the boundaries of what photography. Using a Red EPIC Camera he’s created these intriguing photoloops which feel like an evolution of Andy Warhol’s screen tests. Because of the expert styling and lighting these definitely feel like works of […]

[vimeoa id=”77710860″ mode=”normal” aspect_ratio=”15:21″ parameters=”html5=1 title=0 byline=0 portrait=0 loop=1″]

Interview Portfolio

Artic Interactive


This is the Artic – Greenpeace Interactive In ancient and up until recent times the arctic was believed to be a place of mythical power. today, the mythical tales stand pale in comparison to reports on the effect of climate change and oil drilling, but people visiting the arctic still speak


Winter Games in NYC – Concepts


Former Mayor Michael R. Bloomberg’s vision of new sporting venues across the boroughs fizzled, and New York lost its bid for the 2012 Summer Olympics. But what if the city had tried to get the Winter Olympics instead? It would probably take more hubris than even this city can muster, but the exercise provides some […]


New Media Narratives


A mix of newsgame & interactive storytelling.




Responsive design for Lush soaps by Method.


404 treatments

konigi 404

A 404 page is generally not helpful, but it could be if combined with search, site maps, and suggestions that help orient users, even when there is a problem with their original link. Some can look nice: But looks are no substitute for assistive functionality

404 Review

Speed Reading 2.0

Screen Shot 2014-03-25 at 14.32.24

Spritz’s mission is to change the way people read and make communication faster, easier, and more effective. Why it Works: Reading is inherently time consuming because your eyes have to move from word to word and line to line. Traditional reading also consumes huge amounts of physical space on a page or screen, which limits […]


Why do credit card forms ask for Visa, MasterCard, etc.?


You can tell if it’s a Visa or MasterCard based on the number it starts with, i.e. 4 for Visa, 5 for MasterCard.

Why do most billing forms request the type of card?

The Beatles US Albums minisite

Screen Shot 2014-01-23 at 17.15.35

A pretty cool side-scrolling presentation of The Beatles first tour of the US.

Not sure about the left and right buttons, but it makes good use of some archive footage/photographs.

Inception explained, with a bit of parallax scrolling

Screen Shot 2014-01-23 at 14.49.58

An undeniably cool parallax site that explains the plot and depths of Christopher Nolan’s Inception.

A Parallax Adventure in Space and Time


Did you know Doctor Who turned 50 years old this week?  Probably.

Anyway, here’s a nice little parallax website prepared by the BBC on the history of Doctor Who.

NSA Files Decoded – Guardian


A new multimedia extravaganza from The Guardian takes an in-depth look at what Edward Snowden’s leaks “mean for you.” It comes replete with plenty of high quality video, a gorgeous custom page layout, and lots of doodads throughout. It wouldn’t be inaccurate to say that it’s The Guardian’s volley in the “Snowfall” game first served up by my former colleagues at The New York Times.

Flat UI and Forms

As designers, we want to create great user experiences through simplicity and clarity.

What is simplicity and clarity? It’s the user knowing exactly what to do, and how to do it, with a minimum of effort. Achieving this kind of user experience means finding the right balance—not just going flat for flatness’s sake.

When it comes to forms—frustrating experiences even at the best of times—it means knowing that less isn’t always simpler.

A (Very Brief) History of Experimental Cinema

Most of the classic avant-garde films were not widely seen (remember, until recently there was no YouTube, or even home video, and anyone wanting to see these pieces had to seek out rare prints, or attend film schools that kept copies for study). Nevertheless, they were tremendously influential on narrative film and their stamp can be seen in modern cinematography, editing, visual effects, and aesthetics. Music videos contain some of the prime examples of avant-garde and experimental film techniques, and whether they are aware of it or not, all filmmakers are using ideas and techniques that come from the avant-garde.

Authentic Design


In digital design, authenticity means a few things, which can roughly be summarized as the following:

Embrace the digital look.
Do away with skeuomorphism.
Make the style content-centered.

IDEO & Bloomberg Dash


Envisioning the future and adoption of financial data delivery

The Bloomberg terminal is a staple in any financial institution, providing real-time data about pricing, analytics, and print and multimedia news across a number of financial markets. Despite an estimated 75,000 machines in use worldwide—including one in the Vatican—users find the aesthetic is dated and the interface synonymous with MS-DOS.

How to Design for the Gut & Visceral Apps and You


How to Design for the Gut

Visceral design may be hard to get right on the web, but we can learn a lot by looking at the work done by our design counterparts in the gaming and mobile industries. By delivering rich, juicy feedback to our users we can create that satisfying sensation of a visceral, gut-level reaction. Thought interactions and response mechanisms will create surprise and delight, which leave indelible, positive marks on our visitors.

Aireal – Interactive tactile experiences in free air by Disney Research


Created by the Disney Research group and presented at the most recent SIGGRAPH 2013, Aireal is a low cost, scalable haptic technology that delivers expressive tactile sensations in mid air. Aireal enables users to feel virtual objects, experience dynamically varying textures and receive feedback on full body gestures, all without requiring the user to wear a physical device. Potential uses include gaming and story telling, mobile interfaces, and gesture control among many others.

New way to explore a story


Deep water horizon news story – use of hotspots within video for more detailed content

New Poynter Eyetrack research reveals how people read news on tablets


Its all about touch …. click image to read full article

Oakley app


Great use of cover video, nested overlays, slide shows with buttons and image sequencing

Adobe DPS guru

Adobe DPS guru

Interesting & useful blog on Adobe dps, bugs, fixes, new tools et al

iPad colour profile


Important part of future image process – Ive downloaded the profile on to my image server as back up