Archive: design

Month Links: February 2013

Hello, March – it”s really good to see you. It”s been a while. It feels like I hardly got to know February, before it spirited away for another year.

Still, in those brief twenty-eight days, we kicked off three new pieces of work as well as continued work on a good half-dozen live projects. Good, busy days with some exciting things on the go. In the quieter moments, here”s a bunch of things we found interesting and provided happy diversions.

Olafur Eliasson, Model For A Timeless Garden.

- The Light Show at Hayward Gallery is a marvel, and really worth sticking your head in. Even if just for the Eliasson piece above.

- One of the best things so far this year is one of the smallest and simplest: Jargone. Jargone is a bookmarklet that scans websites for jargon language and suggests common, day-to-day alternatives. It”s made by Roo Reynolds and is an excellent by-product of the dedication to simple, clear, quality work being done within Government Digital Service.

- Continuing the “doing simple well” thread, James has gone back to Twitter”s post from last summer about their process in overhauling their mobile site. It”s easy for us to advocate mobile first practices, but how do you go about that when you have half a billion users and thousands of devices to serve across the world?

- We”ve been enjoying the open epistolography of Hubbub”s Recess! project – a published discourse around games between Kars, Alper and Niels.

Asshole Mario 3, Stage 1.

- Die Gute Fabrik”s Doug did a “best games of 2012″ end of year post. Normally you”d expect a top ten of indie, AAA and folk games, but Doug”s list is a brilliantly of 2012 – specific moments of play that stuck out. From a trampoline-controlled mod of Proteus to competitive yoga and the Hokra “world championships”. All incredibly exciting and envy-creating.

- Our thoughts have started about 2013: what it is, what it will look like, who we”d like to speak, things we”d like to hear more about. It”s an exciting bit of the project, the first flushes of romance before the realisation that oh god 400-odd people are expecting a good time. As ever, we”ll be looking for interesting ideas and cold hard cash for sponsorship – so get in touch if you have either of those things.

- A few times I”ve caught James making some odd movements in the corner of my eye; he has been playing with the Responsive Typography demo by Marko Dugonjić. It”s an interesting project, and feels like it touches the ideas about Perceptive Media, not just a straight up “responsive” approach.

- In other face-tracking news, the brilliant Henry Cooke has created Faces In The Cloud – a thing mixing computer vision and humans” tendencies to pareidolia.

Sruli Recht A/W 13, Runway Presentation.

It”s been an excellent month for apocalypse fans, the best since December. I read a very cold, but beautiful, collection of graphic short stories recently published by Fantagraphics, Beta Testing The Apocalypse. It”s part Ballard, part design fiction, part straight up comics. Never seen architecture used so well as a character in comics.

- Channel 4 have put out plenty of paranoid drama lately, in the form of Utopia (eugenicists, preppers & conspiracy theorists) and Black Mirror“s pop-apocalypse of glowing rectangles.

- Utopia led me to this excellent article in the NYT about TEOTWAWKI (“the end of the world as we know it”) and the prepper scene in New York. Particularly interesting in the post-Sandy context.

- Black Mirror (for all of its many, many, many failings) has provoked a few discussions in the studio. One of particular interest is its approach to interaction design, which seems at times insightful (who doesn”t want the curved digital drawing board?) and sloppy (the mixed metaphors of tactile and gestural interactions clearly come from a Surface Tablet user).

- Black Mirror is interesting in terms of how non-designers are designing interactions that are eventually adopted. That has seen us revisiting the excellent post by Einar about wifi in Sherlock, an interesting read about how Minority Report has locked people into bad IxD, obligatory Dan Hill post about world building, as well as this wonderful blog looking at HUDS and GUIs in film/games. All of which is very helpful for unnamed project #2.

AND FINALLY

To advance the cause of the world, Al Gore wants you spam climate change deniers.

- Things that have been in our ears: , , .

- A great reason to get a Little Printer from BERG.

- A blogging platform designed for transience.

- Richard took the black, in his “finest” Sean Bean accent.

- An archive for a classic of Modernist design, Vignelli”s NYC TA Standards Manual.

- A “mood data sculpture” that waters (or not) a Rose of Jericho based on scraped feelings.

- Machine manuals out emo tumblr users.

- A nice bit of IoT that processes a lot of complex data to let you know the best route to work.

- Russell”s back in café”s, revisiting some of his greatest hits.

Educational Prospecting – A UX Case Study

Our first big UX project of 2012 was the digital Prospectus for Ravensbourne, a specialist university for Design & Communication, sitting next door to the O2 on the Greenwich Peninsula.

An Academic market place

 

After a few meetings with the staff at Ravensbourne’s Comms department, it was clear they wanted to think differently about their prospectus. They wanted something unique and clear – after all, the prospectus is a university’s shop front.

So that became the starting point for creating a fresh user experience at rave.ac.uk/prospectus:

The user is a prospective student, shopping around for the best courses.

Therefore, we approached the site like an online store would:

  • help the user find what they want quickly
  • show them other things they might like
  • make it easy to take their items away with them.

It’s that last part that I’ll be looking at in more detail here.

A Course Cart

It’s often likely that a prospective student will only have an idea about the type of course they want to do when ‘shopping around’. In redesigning the content structure of the Digital Prospectus, we linked courses together via common traits and career possibilities. We also linked every course to a career, so that a student could look at things from the point of view of ‘What I Want To Be’ as well as ‘What I Want To Study’, since most 17-18 year olds have yet to figure out one or both of those. So, it’s likely that they’re going to come away from the Ravensbourne Digital Prospectus with more than one course to reference.

When a student likes the look of a course, they add it to their ‘Course Cart’, putting it in their trolley for later. When they’re finished looking around the Ravensbourne prospectus they ‘check out’, as they would in a physical or online shop.

Check this out.

Checking Out

Now, when you’re Checking Out of a shop, you’ve made a definitive choice about what you want to buy. A university prospectus is not a place where students make their final choice – that’s UCAS. We’re helping a prospective student, prospecting for possible choices. So the Check Out needs to do something different according to a number of different user journeys.

The most simple of these user journeys is the downloading of your choices – your own personal Prospectus that only features the courses you’re interested in. This PDF download also comes with further information pages about the university and how to apply so that, really, the student doesn’t have to come back to the site.

Next, we think about what the student will want to do with the courses they’ve added to their ‘Course Cart’. From user research we found that prospective students rarely make the choice alone. They talk to their parents about it, their teachers, and their peers. So the student needs a quick way to share their Course Cart with these different audiences.

Each of these audiences will use different channels of communication, so the Share panel of the Course Cart has options that serve each audience. An e-mail to your parents and/or teachers, social networks for your peers.

Thanks for Shopping With Us

This was only one facet of the site, but defining this approach early on allowed us to retain the user sentiment of a Good Shopping Experience throughout Ravensbourne’s Digital Prospectus.

It worked because the analogy was appropriate to the needs of the user by helping them every step of the way and going that extra mile; and the client by creating something unique that sets them apart from other academic institutions.

The New Mudlark: Website

Following on from creating a new identity, the next step was to completely re-build our website from the ground up.

Our approach to the design process was to focus on the content. This meant we concentrated on our message and what we wanted to communicate above everything else. And so content strategy and wireframing was the first practical stage of defining the layout and structure.

Mobile-first

‘Mobile-first’ is a design process advocated by LukeW. On a technical level it involves coding the website at its most basic form and to progressively enhance for devices that are more capable, as opposed to serving a full “desktop” style website to a mobile user before stripping away superfluousness after-the-fact.

The core idea is elegantly simple. Rather than the traditional approach of starting with the ‘desktop version’ of a website and then simplifying it for mobile, Wroblewski proposes we begin by building sites that work well on small-screen, portable devices, then build up from there.

Mobile first forces you to get down to the bare essence of what makes your content work. “You don’t think: ‘Oh, let’s add another thing’ – because you simply can’t. Which keeps everything clean and focused from the outset.”

We found this an enjoyable approach as it forces an intense focus on getting the content right. Thinking in a mobile way focussed us. Why should our homepage have this many elements? Does it enhance our core message? If not, then get rid of it—we don’t need it.

Group blackboard session: defining the content hierarchy.

Responsive design

I wrote a blog post about responsive web design back in May and have since experimented with the technique in this memory: a “responsive story” part of our MemCode PLC series.

Traditional websites have been designed and developed around the notion of a canvas—a fixed dimension from which to base a layout and design—a relic from the pre-digital print era. The problem of course is that the web and the browser are not a fixed size, especially when taking into account emergent platforms and their proliferation of screen sizes.

From Brad Frost”s “Responsive Web Design: Missing the Point” blog post.

‘Responsive web design’ (coined by Ethan Marcotte) is an emergent process being adopted as a solution to the fragmented web. Recent high profile examples include the Channel 4 News website () and the new Gov.uk website (launched 17th Oct 2012). These websites have a single responsive layout and design that adapts to the users’ device. The same website will be optimised for both a mobile device (smaller text, more of a ‘stacked’ layout, etc.) and a large desktop screen; as well as everything in between. This is not only monetarily advantageous over maintaining a separate mobile optimised website for the same content, but it also means the user is getting the best possible user experience for their device.

One big “a-ha!” moment was coming to terms with thinking in proportions rather than pixels.

We were mindful that different devices mean different considerations. For example, elements will generally be smaller for a mobile user—but as these devices are often touch enabled—certain elements like buttons ought to be large enough to be easily tapped.

New workflow

And so if we are to think about the web in terms of proportions rather than pixels, how is Photoshop going to be an appropriate web design tool? There”s too big a disconnect between the fixed nature of Photoshop (pixels) and the fluid nature of the web (proportions and responsiveness).

The standard way of website development is the ‘waterfall’ delivery process. Websites would first be sketched out as wireframes, then approved. Then fleshed out as a Photoshop comp, then approved. These mockups then inform how the website would be coded, and finally signed off.

The new multi-device web makes this process less appropriate, less feasible. How can you create a layout in the thousands of possible variations to be approved in this linear way?

We had to change our workflow.

As we waded through these unfamiliar waters we found that the process was cyclical and iterative rather than linear.

  1. Sketch (Content strategy with mobile-first, loose wireframes)
  2. Prototype (rapid HTML builds)
  3. Design (Introduce layers of typographic / visual treatments)
  4. Talk (Discuss with team)
  5. Iterate (Make changes / code refinements)
  6. Repeat

We favoured low-fidelity iterative sketches and mockups of key screens rather than a pixel-perfect comps of each page. Designing in the browser was a new method that seemed to complement this. By using our brand assets we could design and experiment—see our designs in situ—work out what didn’t work and quickly iterate ensuring a layout or design would work across device types.

Wireframing key pages for desktop.

Never really finished

Websites are never finished, they are a fluid ever-evolving thing. There will be imperfections, quirks and cross-browser issues that pop up.

You”re looking at version three of the new Mudlark site, and I”ve got a new version ready to go. You might not notice the change, but we”ll be happier with it, and on particularly small or large screens it will carry our content and branding in the best way possible.

The New Mudlark: Look

Mudlark has been in a transitional period these past few months with Charles stepping up as MD and the company moving to a new base in the city of Sheffield. These changes brought in a refocus on what we do, what we offer and how we communicate that through our identity.

I thought I’d write a short blog post touching on points of our journey developing the new Mudlark look. I’ll follow this up with a post covering our approach to the design and development of our new website.

Letting go of the past

Whilst we used the main tagline of ‘making life playable’, our old website confused communications by using a number of other taglines.

“Mudlark is a cross-platform production company. A partnership between a games company, a TV company and a web company.”

“Mudlark deliver commissions, campaigns and applications.”

“Mudlark produce mobile phone games, ARGs, virtual world experiences, television programmes, digital arts adventures and social network narratives.”

“Mudlark work across platforms, online, offline, real world, virtual world, imaginary worlds and simulations.”

“Mudlark develop original IP value in formats, processes and designs as we tell stories and play games.”

A reminder of the old Mudlark website.

A new direction

After many internal discussions we agreed on a set of qualities which formed the basis of a loose brief. These qualities are; dynamic, playfulness, movement, connectedness, cross-platform, forward-thinking, but most of all: clean, clear and concise.

Some rejected logos.

After exhausting some avenues—including an attempt to breathe life into the old orange Mudlark with a bird-inspired Batman-reminiscent motif—I decided to go back to the drawing board, back to basics and keep it simple.

Mudlark Birdie. The chest and wings form an ‘M’.

The letter M of Mudlark in its simplest form can be created by overlaying two triangles. From this geometric starting point I began to flesh out a new mark. The underlying idea seemed to feel right — it was starting to satisfy our earlier notions of how we want to be seen as a company; connectedness, dynamic, cross-platform.

Early iterations were quite flat, not punchy enough. I started introducing combinations of perspective and experimenting with different line weights.

The evolution of the Mudlark triangles.

What we like about the identity

  • Some people don’t see the ‘M’ right away, and so when they do there is the delight of discovery.
  • The mark is simple and works at smaller size and for social network avatars, etc—important for a digital-centric company.
  • The clean, unfussy lines create a sharp, modern look: we know about the future of products, ideas, etc. and execute without fuss.
  • The soft corners and perspective create a sense of movement: we’re an agile company that can adapt quickly.

Mudlark logo as seen on TV, end credit screen for recent Mudlark documentary.

 

Mudlark logo used as an avatar.

 

Mudlark document covers featuring the logo and change in colour scheme based on the service.

Dream Society

A few weeks ago I was invited to talk at a PechaKucha Night in Derby. I took the opportunity to talk about a few things I had recently read about — seeing it as a chance to combine some ideas and see whether they could relate back to design in some way.

The first book I introduced was the late 70s best seller Zen and the Art of Motorcycle Maintenance which I had read a few months back. I focused on its exploration of the ‘Classical / Romantic’ philosophical concept — an idea that says we see the world in these two different ways.

I used a clock to explain the Classical point of view;  to describe its’ functions, facts and things you could actually prove. I used the same clock to demonstrate that you could see the same object from a Romantic point of view; to appreciate its’ craft and beauty as an object, maybe even how it made you feel.

I transposed this Classical / Romantic duality to an interpersonal level where I talked about how some people are logically minded (Classical) and others conceptually minded (Romantic).

At this point I introduced the second book — The Dream Society — a book I had read more recently.

James at PechaKucha Derby

Imagine hundreds and hundreds of years from now when global economies equalise and wealth is more-or-less evenly distributed — this may mean that material things will come to have less value. And so future economies will revolve around evoking a strong emotional connection to stay relevant.

The book points out present-day examples of this emotional connection. These were Disney with its ‘magical’ attributes. Sporting events as they are aspirational (as humans we aspire to achieve great things: Esteem, part of Maslow’s hierarchy of needs). And also tourism with its’ natural, enduring beauty.

I then took the Classical / Romantic duality to industry and used the technology industry as an example. I described the fact that there has been a definite shift from the IBM days where computing was all about features, specs and crunching numbers (Classical) to the recent years with the success of Apple and their focus on usability, humanness (Romantic).

I concluded that what matters — now, but more increasingly in the future — is this emotional value. Having advanced technology, automation and everything that comes with it is great, but there will still be a need for us to be human, not merely machines.

My closing words for the talk were “Be romantic”.