Design of Understanding 2013 – a review

For the third year running, The Design of Understanding dedicates itself to escaping the ruins of the Cartesian project. René’s rules of science that helped kick-start the enlightenment project “to divide each of the difficulties [...] encountered into as many parts as possible” [1] enabled humanity to decipher the earth, the universe and the human body at a speed never seen before. Yet as it now slowly starts to dawn upon us, this idea of dividing does not help much when we have to unwrap the complex system of our current world and even less in suggesting what should be done to create positive change in the future. Mapping the old theory of science on the complexity of the world leads to a situation once humorously explained by Borges through a fictional Cartographers Guild:

In that Empire, the Art of Cartography attained such Perfection that the map of a single Province occupied the entirety of a City, and the map of the Empire, the entirety of a Province. In time, those Unconscionable Maps no longer satisfied, and the Cartographers Guilds struck a Map of the Empire whose size was that of the Empire, and which coincided point for point with it  [2]

If Descartes’ rules don’t bring us any closer to understanding our now and building our future, what should we do? Some try to find the answer in ever more data points, others turn to new-age religions and yet others start to play with the information at hand. In this quest for a post-Cartesian understanding of what the world is, could, and should be, the Design of Understanding provides a helping hand.

Luckily, these ‘as many parts as possible’, be it words, atoms, bits or people, behave, although not perfectly predictable, also not entirely at random. The Lorenz system (see image on top) as shown by Beeker Northam is a great visual representation of this.

Matt Cottam tells the story of Tellart, a 21st century industrial design company, who worked with Google to create an installation to make the internet understandable. Moving from the digital to the physical world came with unexpected constraints. Lawyers pointed out that children needed to keep their privacy; how though can you do this whilst also allow them to connect their museum visit with their computer at home? A colourful personal logo-card turned out to be the solution. Physical scale started to play a role too: you might be able to make a hundred thousand facial drawing print-outs for actual visitors, but what about a hundred million web visitors? Suddenly virtual turns out to be not so virtual at all and take lots of material and maintenance. To make sure the Amazon rainforest had any chance of survival they skipped printing on paper and invented a sand-drawing robot and also the world’s first whiteboard eraser robot.

Joe Parry, builder of the network visualisation tool Keylines, mentioned how hard it is to understand networks. We cannot understand a network unless we see it, and even when we see it we cannot understand anything with more than a 1000 nodes. Because of the size and complexity of networks in a remarkable amount of cases the easiest way to gain understanding is by printing everything out and placing it on the wall. His tool Keylines allows users to go through large datasets with more ease and at higher speed. It allows to answer questions such as: who are the network leaders, who are effective communicators, what are the effects when person x leaves the network? Ultimately understanding the network means understanding the place of each node in the network and being able to explain the network in both in and at a high level.

Phil Gyford tells the story of his decade-long project of blogging Samuel Pepys’s diary at the speed of one entry per day, laughingly quoting Steward Brand “A building is not something you finish, it’s something you start”. He also noted the ability of a web-based diary to map the world in time and space, and wondered where do you stop explaining: there are always more maps, paintings and articles –more context– you can add.

Llyod Shepherd, writer of historical fiction goes through his process of note-taking. With better tools and more information at our disposal note-taking has become easier. Choosing which notes to take though has become a lot harder. And the act of sense-making has become an ongoing tour-de-force. To deal with an abundance of data, note-taking ultimately becomes a personal and aesthetic act.

Justin McGuirk shows various Latin American architecture projects, demonstrating that designing houses is the easy part. For architects the hardest part and the part where they can make the biggest difference is in influencing the system: talking to politicians, to neighbourhood committees, to lawyers and the police to make it possible to not only build new housing but to change the infrastructure and the way the city functions. He shows an example of a project where instead of building the conventional solution of a road to connect the suburbs to the center, the architects managed to build a cable car cutting down the transport time from two hours to nine minutes, all without massive physical changes to the urban environment. He ends with a set of guidelines that are as true for architects as they are for designers: to achieve the impossible you have to focus on redesigning the system by being an extrovert, a catalyst, a connector of the informal with the formal and a performer in a show of policies, laws, developers and inhabitants. What you design is not so much the object as the system in which this object can exist.

More reviews:
Design of Understanding 2013 — Aden Davies
Design of Understanding 2013 — Rodcorp
Design of Understanding 2013 – Mark Barratt
Sketchnotes — Eva-Lotta Lamm
Sketchnotes — Boon Yew Chew
Lanyrd page
Last year’s review


Manual for a stranger world

We’ve become too practical
I’m a big fan of agile, prototyping and lean. I think a hands-on, iterative and getting-things-done process is great. But we’ve lost something. The obsession with making things real limits the scope of the things we can make real. It limits us to what is possible within the constraints of our current understanding. Companies due to their nature, are obsessed with tangible details and their delivery focused operations keep us on the path of incremental innovation. We get what we optimised for, an endless series of extrapolations: faster, lighter, bigger, cheaper. All very useful, but what about a different world? A space far beyond the horizon of the next sprint, the next launch, the next round of funding? A world of dreams, of ideas, a stranger world?


Experience Design project with Hatch – Case study

Recently I was approached by Hatch – a startup run by a good friend – asking if I could do some UX for them. Since working with startups has always been a great experience, I was more than happy to help. To find out how I could bring their product closer to their ambitions, I outlined a plan that allowed me to understand the product and the business vision, the current and potential customers and the environment in which they want to place themselves.

Understanding the business and defining the project goals
When I came in, Hatch was already six months in development and wanted to strengthen their focus on agencies and partners and make it a pleasant experience to build applications on top of the platform. This helped me formulate a goal for the two weeks of work: to understand the audience, to address usability issues, to create items for the roadmap and to start with a redesign for the home page.

Find potential customers to test and interview
First, I split up ‘the user’ into several distinctive roles (designer, developer, community manager) and outlined their presumed workflow. Second, I approached some people in agencies to take part in usability testing and contextual interviews. I made some short scenarios and a set of questions to create a framework for exploring and discussing the platform. The tests  helped us uncover expectations and a list of enhancements. This allowed Hatch to better prioritise their road map and to immediately update the platform based on the findings.

What we found
Interviewing our participants lead to two interesting findings. First, for their own projects people prefer WordPress, a blogging platform, over specialised CMS platforms such as Drupal and Joomla (something that matches general statistics). The second finding especially useful for the communication is that the platforms agencies worked with, Sharepoint, Lithium, SiteCore, were often not their choice but a platform already chosen and paid for by their clients.

Results
The short schedule created a strong focus, testing and interviewing users early on and during the whole process enabled us to focus on addressing the things that mattered, which were often different from those we had thought were important. The schedule of one testing session every other day allowed to test all the changes directly. The results from the interviews made it possible to outline the features and benefits our participants deemed most essential and therefore should be communicated  in the site redesign.

Conclusion
Two weeks might not sound like much, but when you have direct access to developers and customers a lot can be done. The main thing to focus on is not the artifacts but effective communication. Since the developer was sitting next to me, creating sketches for items he was working on and enhancement and bug reports for things he would be working on in the weeks to come was enough of a deliverable to keep things moving forward.


Exploring eternal questions through interaction design

This is a write-up of a talk I gave at Geeky

Thanks to a side project on  time mapping I became interested in the design implications of a set of questions that are collectively known as the eternal questions.

1. What are eternal questions?
Eternal questions are concerned with meaning. They arise from people’s experiences with the world, and have no definitive answer. Famous questions are: what is the meaning of life? What is a good life? What makes a good person? What is beauty? What is love?

Although they cannot be answered definitively, this doesn’t mean that they cannot be productively discussed. Through the centuries countless people have come up with answers. Some believed they answered a question once and for all, others were more modest and saw their answer only as one of many possibilities.

Many of us are familiar with Douglas Adams’ answer from the Hitchhikers Guide to the Galaxy: “42″, the answer to life, the universe and everything. But there are many others:


Where do we come from? What are we? Where are we going?

Inspired by the simple and colourful life of Tahiti, Paul Gauguin wondered: Where did we come from? What are we? Where are we going? And came up with a surprisingly colourful answer.

In what turned out to be his final work, Dostoevsky created The Brothers Karamazov  a story about  three brothers and a father with very different ideas about what makes a good life.


dConstruct 2012 – a review

The digital world has no shortage of big ideas: the social revolution, ubiquitous computing, exponential growth until we hit singularity, to name a few. In his talk Jason Scott warns programmers not to be too light-hearted with their creations. Although the twenty-something creators of Facebook might think that time is of no consequence, and take no particular interest in the history of their site, by being the world’s largest photo archive they have a responsibility to their users to care for this data. It’s not just a cost on the balance sheet that has to be kept under control, it is real memories of real people that we are talking about. And although start-up fans might admire the phenomenal success of a certain gaming start-up, when you build a game that “scoops the brain right out of little children” that doesn’t make it OK. Furthermore, if you create a service that allows users to save things, they give you their trust. Respect this trust and treat them and their data with respect.

James Burke warns about the opposite problem, too much focus on the details. In the centuries since Descartes wrote down his second rule of science “to divide each of the difficulties [...] encountered into as many parts as possible” science is now broken up into ever smaller compartments knowing less and less about the world as a whole. This approach brought the Western world a living standard previously unimagined, but, Burke believes, has run its course. We can no longer expect radical innovation by devoting ourselves to even smaller areas, even smaller tasks. We need to go broader, higher and wider, “innovation will come from the no man’s land between the divisions.

It seems to be a human tendency, that, in our aim to be as exact as possible we either go too abstract or too detailed. Italo Calvino wrote about this quest: “[it] was branching out in two directions: on the one side, the reduction of secondary events to abstract patterns according to which one can carry out operations and demonstrate theorems; and on the other, the effort made by words to present the tangible aspect for things as precisely as possible. [...] I continuously switch back and forth between those two paths, and when I feel I have fully explored the possibilities of one, I rush across to the other, and vice versa.”

By connecting the tangible aspect of playing with the abstraction needed for toymaking, Tom Armitage, proposes a solution of understanding through discovery. Each toy is a little pocket universe, a small concept that can be played with, a way that allows you explore abstraction through play. His idea sounds similar to the idea of the hermeneutic circle, a reading concept where the reader admits that: “neither the whole text nor any individual part can be understood without reference to one another.” Armitage continues: “Toys are a fertile ground for creators to work in. They offer a playful space to experiment and explore. They are a safe ground to experiment with new techniques, skills, or ideas. [...] Toymaking ranges from making realistic simulations of life to producing highly abstract playthings.” Just like design challenges, toys are both defined by that what they highlight and that what they leave out. We cannot understand the world through abstract theories, nor through an endless series of tangible details. The only way is to understand is to take all that is abstract and all that is tangible and mix it in a never-ending process of creation, discovery and reflection. As Armitage ends “through toy making you end up playing yourself” and that might be the biggest opportunity we have.


Create high fidelity prototypes in hours – 6 simple steps

When you’re working with mockups to test your ideas, speed is crucial. You don’t want to spend days working before you can gain valuable feedback. For that reason Photoshop is often ignored in favour of sketches and wireframes. Using Photoshop, however, to create high fidelity prototypes doesn’t need to be time consuming. Many of the components graphic designers use are freely available on the web and can be quickly remixed to create almost any interface. In this article I’ll walk you through a process that enables you to mock up high fidelity prototypes in a matter of hours instead of days.

Before you begin
To make this work you need:

Step 1: Grid and baseline

Grids make it easy to make decisions on what to place where. One of the most popular grids in the 12 column 960 grid that you can download from  960.gs. Pick the psd file from the zip and use it as a starting point for your document.


Opened the 960.gs grid and added a baseline – available for download in the mock-up template.

Bonus: Marc Boulton wrote a lot on designing with grids.
Bonus: Teelax has created a psd file ready with columns, baseline and some text.

Step 2: Background pattern

Add a little more character to your mock-up by using one of the quiet patterns from Subtle patterns.


Added wood pattern – this one and 5 others available in the mockup template.

Bonus: how to make a pattern in Photoshop.

Step 3: A typeface with character

Use Font Squirrel to find a typeface that will give your site a bit of extra character. You can use it for the logo and important headers. The rest of the copy can be in Arial or Helvetica and you can use Lipsum to quickly generate some copy.


Added these typefaces: Bebas, ChunckFive, CabinSketch, Josefin and Pacifico – all 5 typefaces are available  in the mockup template.

Bonus: more on selecting typefaces.

Step 4: Add the interface elements you need

If you look at Dribbble you see that some people are obsessed with creating interface elements. Luckily a group of these people has made their work available for free. You can find many of these elements on 365psd.com.


Added navigation and button

Bonus: the web is obsessed with icons, here’s a good set, and a blog post with more.
Bonus: there are some attempts to create a complete sets, here are some examples.

Step 5: Add some bold photography

If you’re looking for some great photos to add to your mock-up, the easiest thing you can do is go to Flickr’s advanced search and check the ‘search in Creative Commons’ photos box, for example these landscapes.


Combined the video player plus a spices image.

Step 6: Make a clickable prototype

By using a service like InvisionApp you can easily connect  your screens and click together a prototype.


Linked two screen together in the Invision app, you can try it here.

Bonus: a free option to connect images is connect a sketch.
Bonus: If you plan to use the mock-ups in a presentation instead, here are links to an iPhone template and a MacBook Air template.

Finally you can download one zip with the grid, 5 backgrounds and 5 fonts via this link:
Download the mockup template zip here

Let me know how it goes, and leave a comment if you know more great resources.