hero-image-blueprint-sketching
Article
0 comment

A behind-the-scenes look at the illustrations for Blueprint

Net neutrality! Countries spending millions on social media advertising to subvert elections in other countries! The intersection of society, technology, business and government is getting more and more complicated.

Blueprint is an annual industry forecast by Lucy Bernholz, that looks into these sorts of issues, and a whole lot more. Blueprint is published by the Center on Philanthropy and Civil Society at Stanford University, about the ways we use private resources for public benefit. The Huffington Post calls Lucy a “philanthropy game changer” and Fast Company magazine named her blog Philanthropy2173 “Best in Class.”

You can download the 2018 edition of Blueprint here.

This year I was privileged enough to be asked by Lucy to do the illustrations for Blueprint. I thought it’d be helpful to show a step-by-step look at how I did them.

The all-important brief

The first thing I did was to take a brief from Lucy and the team, about the scope and nature of what they were after: who is the audience? What context do they bring to how they read Blueprint? What are the main messages to be communicated? What is the desired visual character and tone? And when does it all have to be done by?

Previous issues had used a mix of stock imagery, digital boxes and arrows and custom illustrations, so the set of each issue’s illustrations didn’t really have a visual coherence. I wanted to fix that.

Estimating for this sort of work is notoriously hard, mostly because I couldn’t know how many specific illustrations would be needed until I had read the draft of Blueprint and we had discussed a rough number and placement. To tackle this, we settled on a rough amount of time I would spend, where I would produce as many illustrations as I could within the directions of the brief and within that time.

Microsoft Word - Illustration styles.docx

I also provided a page of sample illustration styles I’ve done in the past; it’s much easier for clients to point to a visual style they like rather than describe it. The team preferred the sketchnote style.

Initial sketches

I read the draft version of Blueprint, as well as several back issues, to get a feel for where illustrations would benefit the most. Lucy also had some specific illustrations and placements in mind, too, which helped tremendously. I then spent some time just doodling and sketching up lots of different ideas to help enhance the text using Procreate (an amazing work of genius software made in Australia) on my iPad Pro (set to ‘HB pencil’ / Black).

Microsoft Word - Illustration styles.docx

The sketches above use three different kinds of representation:

  • Literal representation – all three images display some concepts as real-world objects, e.g. security cameras, people, and a dustpan and brush. They’ve been abstracted, but nonetheless are depictions of real-world objects
  • Diagrammatic representation – the first image displays literally represented elements grouped as three entities (civil society, government, markets) by circles, separate from one another. The circles belong to Venn diagram visual language, which our brains recognise as meaning separate non-overlapping entities.
  • Metaphorical representation – the second and third images are using metaphors to communicate their meaning. The second image has a fence around the figures, meaning that they are bound by something and can’t escape. The third image equates the digital traces we leave from our digital activity as tiny pieces that are inspected (magnifying glass), collected (dustpan and broom), and stored (bin).

Some of the draft sketches were fine as-is; most needed refining (as far as clarity visual meaning went), and some were just downright off the mark! But some of the off-mark drafts still triggered new ideas in the team for other illustrations to try. I always enjoy this stage, for those moments of serendipitous creativity.

Refining and finessing

Often the biggest challenge I find with freelance work like this is not being able to be physically in the room with the team. Sure, there’s lots of great digital tools we could use, but ultimately the most effective efficient way of sharing my work and gauging steering and feedback was just to email them in batches, and either have a group discussion (through Google Hangout) where I would capture their feedback, or an email chain.

By reducing each ‘HB pencil sketch’ layer to 50% in Procreate, I’m able to sketch over the top in subsequent layers, using it as a guide. I used the ‘Studio Pen’/Black setting at about 30% width, to get close to the sketchnote style they had seen (which was actually done with a real marker and pen).

bencrothers-sketching-iPad-Procreate

In the photo above, you can see the layers palette open, and the ‘pencil’ layer showing ‘underneath’ the black Studio Pen drawing.

Microsoft Word - Illustration styles.docx

At this point, I started to refine an overall visual style and character to apply to all of the illustrations. I parked the choice of colour initially, while exploring other elements to use. I ended up using a loose sketchy style overall, and a white grid in the background to be a uniting visual element.

Several of the sketches incorporated some text as well. I thought about just using my own handwriting, but in the end I opted for a font that was similar to my own handwriting (Draftsman), for consistency and ease of editing.

The final result

The colours in the style guide for the Center on Philanthropy and Civil Society were basically black and red; I wanted the illustrations to have a complementary colour to the red titles and call-outs, so I showed the team a range of options. I also showed them what they would look like using a dummy in-situ sample, like this:

StanfordPACS_BrandIdentity_DIG_V2_6.15.16

In the end, they settled on the gradation of a desaturated lilac to teal that you see here:

Microsoft Word - Illustration styles.docx

So there you have it! I hope it’s useful for you to see my process, and for how these sorts of illustrations come together. Do you do any digital sketching or illustration? What’s your process? I’m keen to find out how other people tackle illustrations like these.

header-DASF2017
Article
0 comment

Graphic recording at Design As Strategy conference 2017

Now that innovation is as much part of the furniture as whiteboards and stand-ups in just about every company I know of, what is to become of innovation, and the fruits that it’s meant to provide us? I went along to the Design As Strategy Forum with this in mind, to soak in as much contemporary thought and musings about the strategic design space as possible. And just like last year, I was also sketchnoting, except this time it was large-scale as a graphic recorder.

complete-all-sml

This year’s broad theme was Innovation as an Object of Design, hosted by The Customer Experience Company at their fantastic space overlooking the harbour and the Botanical Gardens. Among the speakers were Aurecon’s Global CEO Giam Swiegers, Australian Industry Group’s Chief Executive Innes Willox, Tharani Jegatheeswaran (leader of Deloitte Australia’s Social Impact Consulting practice), and Ben Hamley (Partner and Strategy Designer for Business Models Inc in Australia).

While each speaker was active at the front of the room, I was busy recording the essence of what they were saying (as well as a bit of the Q&A that followed) on floor-to-ceiling whiteboard wall panels up the back. It became a really effective post-talk piece for everyone to look at, to help them reflect and embed what they’d taken in a little deeper.

complete-1-sml

Thoughts on leading and encouraging innovation, by Giam Swiegers

complete-2-sml

Great reflections by Innes Willox on keeping a level perspective about innovation in large-scale companies, and the broader economy

complete-3-sml

Easily my favourite: Tharani’s talk on viewing society as an object of design, and the way that government, businesses and non-profits can work together

complete-4-sml

The theory and model of a business is also an object of design; well-told by Ben Hamley

complete-5-sml

Roberto Verganti’s talk was my second-favourite; we need to dig deep into our on emotions and motivations (and not be afraid of that) to make greater sense and meaning in design. Brilliant stuff. 

It had been a while since I’d done graphic recording at this scale, and I’d forgotten the toll it can take on my lower back! Still, I was really happy with the overall output, and very grateful to the organisers for having me there.

Other highlights:

highlight-community of practice-sml highlight-design direction-sml highlight-diversity of thought-sml

highlight-embrace uncertainty-sml highlight-innovation-sml highlight-meaning from inside-sml

highlight-serious playful-sml highlight-society object of design-sml

linkfestival2015
Article
0 comment

Making is as valuable as what is made: design thinking at Link Festival 2015

If ever there was a conference that was my happy place, Link Festival is it. In spades. Link Festival is organised by Engineers Without Borders, and this year by Wildwon as well. Earlier this year, over 450 of Australia’s current and emerging leaders came together to work on applying design and technology to social change. See? Three pet topics, right there!

I was fortunate enough to speak on bringing out your inner design thinker: crafting your own tools for change (over on Slideshare), followed by a highly animated workshop.

Let me give you a quick rundown.

We’re not making anymore. This is a problem.

Here’s the thing: as knowledge workers, I think we’ve been conned. Over the eons, we’ve gradually outsourced the making of everything to others. No matter whether you’re in software, finance, health… any domain at all, other people now do the making for us. This sounds acceptable; I mean, we should be paid to think and not do the drudgy menial manufacturing work, right?

But what this has done is, it’s gradually removed one of the greatest means of solving complex problems we have in our toolkit: using our hands to make things — prototypes, real working things — and make things together. And we need to get it back.

Design thinking engages the head, heart and hands

See, I believe people change when they’re engaged in all 3 areas: the head (facts and figures), the heart (the feels, the stories), and the hands (doing and making things, not just talking). Design thinking as a way of solving problems in teams employs all three areas.

So what this means is that if you give people ways of making stuff together, it expands the language that they can use, it helps them to come with more ideas (and riff off each others’ ideas), and to iterate and improve on those ideas. Something else happens too: people experience this making together, and share of themselves more for mutual benefit, in ways that they never would if they just sat around talking and pontificating.

In other words: making is as valuable as what is made.

Solving the ‘blank tool’ problem

Many people will give a nod to this, but often they get stuck in going from principle to practice. It’s easy to read articles online about brainstorming and the like…. but how to start? And what makes for better brainstorming?

Here’s where I find some templated design tools can help people kick-start their problem-solving:

  1. Canvases
  2. Scorecards
  3. Posters
  4. Playing cards

My talk goes into detail about each of these 4. We also did a workshop straight after the talk, so that people got to open a pre-fab prototyping kit and make their choice of one of these problem-solving templates.


 


 


 


 

Here’s a great write-up of the 2 days as well, by Wildwon’s Sally Hill. Can’t wait for Link Festival 2016!

Article
0 comment

Sketchnoting the brand experience

Portion of the sketchnote for TheConnectedBrand

Well wouldn’t you know it: it turns out sketchnoting isn’t just something to do at conferences, but works just as well at communicating a company’s proposition on its own website.

Stand around me long enough and you’ll know I’m a big fan of sketching in general, and sketchnoting in particular. I’ve taken to sketchnoting more at work these days, graphically facilitating on behalf of a speaker, or even just as a way of scribing a workshop discussion. It’s fun, and it generates something that people find useful to read afterwards, rather than stodgy old workshop notes.

I was approached recently by the lovely folks at The Connected Brand, to turn their proposition deck explaining the value of their brand consultancy, into a sketchnote. And it worked really well. Which should come as no surprise; they had already done a great job crafting a set of messages about how they help their clients and their brands, so it made my job all the more easy and fun to convert this into pictures (and a few words).

You can see the final result on their home page.

 

Article
0 comment

Parliament (website) for the people

New Parliament website home pageThe Parliament of Australia has just released the new version of its website, and finally access to Parliamentary business and politicians has really opened up online.

‘Punter-centred’ design

Of course we’ve had online access to information about bills, committees and politicians’ speeches and so on for a long time now, through Hansard, XML feeds, and various pages throughout the old website. It’s just that it’s been so hard to find, for your average punter who doesn’t have an ‘inside view’ on how Parliament works.

But now you don’t have to go trawling through loads of search records and acres of text to find what’s actually important to you. The new website has been designed from an ‘outside-in’ approach, i.e. through the eyes and minds of the general public, rather than just those who are ‘on the inside’: politicians and their staff, media, and public service staff who really know their Senate Estimates from their Tariff Proposals.

Opening access to our taxes at work

A big focus of the new design is also about opening up access to politicians and their activities, which demonstrates the sort of mandated responsibility that Parliament has to the public:

  • You can track what your Member of Parliament (and state Senators) is up to, with access to their speeches, and which committees in which they have representation. You can also set email alerts, so you know their latest activities.
  • Don’t know who your Member is? It’s OK, most people don’t, but now it’s much easier to find out, with a handy location-based search.
  • You can easily see what bills are going through Parliament at any given time, and track updates to bills activity with email alerts.
  • A full list of Members or Senators, with their contact details, is only two clicks away from anywhere in the website. Plus each politicians’ profile page has their website links, twitter links, etc

Bringing an experience of the real building online

Love it or hate it, the Parliament House building is a grand statement in the Canberra landscape, and a visit to see the building, to walk its halls, is an experience I think everyone should have. The new website visually threads the presence of the building throughout the website, not only its appearance but the people who use the spaces inside.

The home page creates a dominating centrepiece for the building’s facade, in effect mimicking the experience you have when you first front up to the real thing. The architect Romaldo Giurgola had a finely honed sense of scale and substance for the building, and used surfaces of various types of stone, glass and metal to work with Canberra’s ever-changing light conditions. This is reflected in a little piece of eye-candy for the website: the background image changes depending on the time of day/night.

Other features use the virtual space to welcome people to the physical space:

An experience more than screen-deep

And why am I bothering to write this? I was fortunate enough to be involved in the research, concept and design of the new website, and I’m proud of the efforts of so many people involved in completing such a gargantuan project. It wasn’t the smoothest overhaul by any stretch, but it’s been fulfilling to have worked on something to do proper justice to Parliament and to its elected officials, as well as the building itself.

 

Something in Common
Article
0 comment

New websites to get us talking about human rights

Something in CommonTwo new websites have just been launched by the Australian Human Rights Commission. Both websites work together to help educate the community about human rights issues in Australia, and to open up non-confrontational conversation:

Something in Common: http://somethingincommon.gov.au

Tell Me Something I Don’t Know: http://tellmesomethingidontknow.gov.au

I’m very happy to have been part of these websites, and very proud of the team who put them together, both at the Commission, and at Digital Eskimo.

The research we conducted showed that most people considered human rights to be an overseas problem, a ‘poor people’ problem. And it’s true, you don’t have to look far across the water to see human rights abuses and atrocities going on. But right here in Australia we have our own issues of concern. The primary issue that came up was Australia’s handling of asylum seekers, which gets a fair bit of airplay on Something in Common.

But there are many other issues going on that a lot of people don’t see as ‘human rights’ issues, but still affect them. Things like unequal pay, bullying, discrimination, and the plight some elderly find themselves in.

These websites aren’t meant to be table-bashing, furrowed-eyebrowed polemics. They show real people’s inspiring stories about what they’re doing about these sorts of issues. And hopefully those stories will encourage and motivate us to think about what we can do too.

 

Article
0 comment

Mobile website concept for Tourism Australia

This is a mobile/handset interface design concept I created for Tourism Australia.

The brief was to reach potential tourists, mainly in the UK, and lead them on a three-step journey: inspiration, exploration, then conviction to book a holiday… all through the vehicle of shared photos.

The concept trades off the power of shared experiences, and the more luscious the photos — and the more they’re shared — the better.

Single photo, with links for photo information The same single photo, but 'turned around' to display details and calls to action A location screen, with links relating to the location for planning a visit

Single photo, with links for photo information, and forward/next icons

The same single photo, but ‘turned around’ to display details, and calls to action

A location screen, with links relating the location to planning a visit

Photos can be uploaded, downloaded, tagged, and shared. Each photo, as well having social tagging, is tagged with one or more evocative ‘experience’ categories, such as plunge, savour, indulge, and so on. The interface design rationalises away many of the elements that can occupy the space in a regular browser window, yet retains all the elements needed for people to save photos, destinations and itineraries online, moving them towards the point of booking a holiday.

I also packaged these designs into a presentation board, with a storyboard-style sketch to show context, and the progression from a typical rainy London working day to what a sun-soaked holiday in Australia could be like (click for larger version):

Small view - storyboard of iPhone app concept

Article
0 comment

Love Food Hate Waste website design

Love Food Hate Waste website

Love Food Hate Waste website

Food waste is the largest single component of our garbage, and reducing food waste is good for the environment and good for the wallet. These were some of the key facts that the interface design process kept returning to as drivers for the Love Food Hate Waste website. It was also driven by weighty business goals: the program is to help NSW meet its municipal waste reduction target of 66% and commercial and industrial waste reduction target of 63% by 2014.

The website is to contribute to that by highlighting the issue to online visitors, educating them about food waste, the benefits of reducing food waste, and how to do it.

This project included hefty amounts of digital strategy, to conceive the best user experience features to have on a government website within very tight time constraints, NSW GCIO guidelines, accessibility standards, and limited content resources. It also involved the information architecture, user interface design (but not visual design), as well as end-to-end project management, and contractor management with the visual design and development teams.

During the interface design process, I got to trial some new ideas and approaches to prototyping the interfaces. Some of the features — especially the asynchronous recipe search results returns and portion calculator — came alive as clickable demonstrations, rather than being limited to static designs.

Go to: lovefoodhatewaste.nsw.gov.au

Article
0 comment

TAFE Northern Sydney Institute website redesign

TAFE Northern Sydney Institute website

TAFE Northern Sydney Institute website

The brief to redesign the website for TAFE Northern Sydney Institute was essentially to connect students with the right courses at the right campuses, and to promote the business services that TAFE NSI has to offer. Results of requirements workshops clearly indicated the search and browse paths that people preferred, as well as the various scenarios that are in place when they are looking for courses and campuses.

These lessons helped me and others at PTG Global to redesign the search and browse workflows and all page wireframes, so that they would display the right information on the right pages, to make course information as clear as possible to find, read and respond to.

There were several challenges in the interaction design. The main one was trying to unite all the different ways that people searched for course information in a clear, consistent pattern. This was overcome by organising an ‘advanced search’ (at the time titled more options) as a dynamically overlaid panel with options separated as course details, location details, and course delivery. Having in-page tabs for several column panels allowed us to stick to client’s requirements of including access to a lot of information in a relatively small space. Including a ‘super footer’ in the design was also a good opportunity to re-cut the content and functionality available on the website in ways not otherwise available through the navigation.

The information architecture schema, screenflows, wireframes and technical specification were then handed over for another company to create the visual design.

Go to: nsi.tafensw.edu.au