Hungry Shrimp

Recently I took a weekend off to work on a little side project. It was a 2D web-based game, loosely based on Space Invaders. I've never designed a game before so it was a fun challenge. I enjoyed the experience. Building a game has this element that you can do whatever you imagine, there are no boundaries; you can let your creativity run wild. Afterwards I realised it had quite some effect on me and even wrote about it on Medium. Funny how good things can come from the most unexpected places.  

You can check it out at hungryshrimp.com

Web Design for Wearables

Last week's announcement of the Android Wear OS got me curious about how the design of the typical websites we come across every day would have to adjust to work on a smartwatch. I was thinking especially in the context of responsive design. I explored a couple of ideas and sketched different possibilities. It usually unearths some interesting solutions. Here is a couple of such sketches which I came up with during that session. I simplified it on purpose, as I was playing with the ideas for the most part. I won't go into details here but if you would like to read more about it I also wrote a post on Medium, which gives more nuanced overview of the design rationale. Please feel free to check it out there and share your feedback and thoughts—https://medium.com/ux-ui-design/eaf3a5522cae.

Services we use while out and about.

A cool web-app that a friend told you to check out. 

Context-based content.

Lean Logo Design — Visual Portmanteaus

Creating a logo from scratch can be a daunting task if you are not a trained graphic designer. But there is a technique you can use to get around this problem — I call it "visual portmanteaus". Portmanteaus are combinations of two different words which together form an entirely new word, all while retaining their original meanings. Microsoft, Groupon and Pinterest are well known examples of this. You can create a logo using this method as well, only difference being that instead of combining words you combine pictograms. 

What you do is try to come up with pairs of objects that would represent the brand. Once you have a shortlist you search the web for pictograms / icons representing those objects (ideally in .svg format). You can use resources such as IcoMoon and NounProject, which offer very cheap / free images. Pictograms are by definition somewhat generic and on their own don't always make good branding assets, but combining two or more pictograms into one can yield surprisingly unique effects. 

Take a look at the three mini case studies of some of my recent logo designs (each completed in under 1 hour). The cases first introduce the product and then break down the rationale behind the design decisions. Of course, there is a lot more to creating brand identity than throwing in such a visual portmanteau. The typeface and the colour are equally important. So I briefly describe the rationale behind these choices as well.

Gobsmag

Gobsmag is a portmanteau of "gobsmacked" and "magazine". It's a recently launched online magazine that aims to introduce its readers to amazing bands they never heard of.

Pictogram

A vinyl record which also is a bomb, symbolising an explosion and an impact, similarly to when you are “gobsmacked”. At the same time the burning fuse can be seen as a broadcast antenna which reflects that gobsmag is a publication.

Derivative work of "Bomb" by Diego Naive and "Record" by Max Thorson, licensed under CC BY 3.0

Logotype

Helvetica Regular presents a certain level of sophistication, to appeal to the 30+ audience which I thought the target market would be. With its thicker lines it also matches the weight of the pictogram nicely. Lower-case gives the letters a more rounded look, again fitting well with the pictogram. 

Colours

Both letters and the pictogram are in black to disguise the pictogram as an actual letter and create a perception of a single entity. I wanted the reader to view the symbolic part behind the pictogram (music with impact) as integral to the brand.  

UX Tailor

UX Tailor is a brand name I came up with on a flight from San Francisco to Amsterdam. It's a user experience design agency that creates highly personalised designs, akin to being "tailor made". 

Pictogram

A pair of scissors symbolizes the craft of tailoring. The scissors sit in a "hollow" square is an icon YouTube uses for the full-screen mode, representing, thus, a holistic approach to design. 

Derivative work of "Scissors" by Edward Boatman, licensed under CC BY 3.0

Logotype

Open Sans is such a charming font that it's hard not to like it. It's very modern and clean, therefore I felt it would fit with the "blueprint" styling of the site which evokes innovation and precision. 

Colours

Light blue background refers to a blueprint, alluding to the technical aspects of user experience design. The scissors in dark yellow helps them stand out, breaking somewhat the white-blue colour scheme. In addition, drawing on the comparison with fire this colour evokes a certain level of fervour and urgency.

Quillio

Quillio is a mash up of Longman Dictionary and Penguin Classics APIs – inspiring writers through defining and displaying words in the context of classic novels rather than just a boring definition.

Pictogram

It combines a quill (feather) with an open book. The quill stands for the act of writing, while the book can be interpreted as a dictionary. Result: dictionary for writers. 

Logotype

Myriad is less popular than Helvetica, although there are some heavyweights using it, like Rolls-Royce and Apple. This gives it a slightly more unique feel. In contrast to Helvetica it also seems less formal, owing perhaps to an element of playfulness that is present in its curves.     

Colours

Greyscale at 40% gives it a neutral feel without drawing users’ attention away from the content. It's just enough to feel solid without screaming for attention. 

UX Design Portfolio Template — Keynote Theme

For freelance UX designers keeping a polished showcase of recent work should be the standard. But between all the networking, administration and actual design there is often little time left for grooming your portfolio, let alone setting one up. 

Taking shortcuts like hosting sample work in a public Dropbox folder doesn't really cut it because it's cumbersome for hiring managers to browse through. A better option is to use Behance, which helps you tell the story behind each project. Still, for showcasing certain nuances of your work, especially user research, usability analyses or prototyping, setting up a standalone document might simply be unavoidable.

So here is a small giveaway that I hope will come in handy. It's a Keynote theme that I use for my own freelance portfolio. It uses a case-study format, with dedicated introduction and case-detail pages, for telling the story behind your projects exactly the way you want it. If you are just getting started or haven't had the time to set your portfolio up or don't know where to start, then this file should prove useful.

Key features:

– 6 master slides → simply drag&drop text and images
– Case-study format → dedicated case introduction and detail pages 

– Pictograms of UX design tasks and devices (hi-dpi) → guides the reader to the right content

– Resolution of 1920x1080 → display on an HDTV

To install this theme use the custom theme feature in Keynote. Open the file in Keynote and then go to File>Save Theme... to add it to your theme library. Click on the download button below to get it now.

Download

Inside of the UX Portfolio Template

Six ready-made slides

Customizable masters

Easy access through theme picker

Different Facets of UX Design

User Research

Usability Analysis

Information Architecture

Interaction Design

Visual Design

All You Can Eat

Portfolio site

Friends and colleagues have been asking me for a portfolio of my UX work for quite a while. But with all the work I've been doing in the last couple of months that was really the last thing on my mind. I finally found some time in the last two weeks and made piotrbakker.com — simple one-page site with links to two PDFs: Portfolio and Resumé. Take a look for yourself, and don't hesitate to let me know what you think.  

User Experience Goals

When you are getting started on a new product it may sometimes be hard to wrap your head around what to focus on in terms of user experience. Depending on the goals of your users and the goals of your business you will naturally set your priorities on different elements. But what should you focus on when you are just getting started: you are testing your product, your business goals are still developing and you are only beginning to get to know your users? A while ago I came across a blog post that had some insights about this. Here is a quick overview.

Mobile App Design - "ReferrED"

Last June I took part in a hackathon in San Francisco. It was called "Hacktivate ED" and it was 100% focused on solving problems in education. With my team we decided to tackle the issue of bad behaviour in class. We found out that a big problem nowadays is that there is a lot of paperwork involved in referring misbehaving students to the principal. This is distracting to the teacher and causes only more class time to be wasted. Because forms easily get lost the current process is also prone to breaking off valuable paper trail. In order to solve this problem together with my teammates we created an app that allows the teacher to easily capture what had happend and pass the info to the administration.

The app can tap into the school's scheduling / student data and use this contextual information to instantly tell what is the current class and list of present students. From the list of students the teacher then selects the culprit and gets to the referral screen. There the teacher adds either a voice or text message with the description of incident and sends it off to the school's admin via email. The admin receives the notification in the inbox and is able to follow up using the web portal which we also built. We called the app "ReferrED".

We worked on it for the full 24 hours and managed to get the prototype up and running literally just a few minutes before it was due. It was totally worth the hard work: not only did we win two awards in the hackathon but also met a whole lot of amazing people.

Below are my mockups of the user interface refreshed a bit today to reflect the changes brought in the meantime by iOS7.

Presentation tools: past & future

I was searching for something on Dribbble the other day. For some reason their algorithms came up with an interesting suggestion from one of the users — Colin Miller. Colin made a series of illustrations depicting three different kinds of workspaces using only a single stroke line and a single background colour. I instantly liked his style. A couple of weeks later I went out for a run in the hills of Montara and all over a sudden had an idea. I thought about using this very same convention to show different presentation tools. I soon realised there was a pattern — each presentation tool was closely related to the era it was used in e.g., the blackboard in the "old days" or the whiteboard in office spaces of the 1980s. So the idea soon became "how presentation tools evolved over time". I thought it would help me explain how I see CooCoolu compared to other tools available on the market. It took me two days to finish but I enjoyed every moment of it. Here are the results.

Presentation tools: past & future

1830s

1980s

2000s

2014

Preboarding

When designing apps very high up on the list of priorities is something that has, de facto, little to do with the product design itself, namely "onboarding". Onboarding is essentially the set of activities designed to teach the user how a given application works. It can take many forms, from static text descriptions to interactive tutorials taking the user by the hand and explaining the mechanics of the app step-by-step.

Onboarding is crucial for a number of reasons. First and foremost, it helps prevent situations where users abandon products only because they don’t know how to get started. Secondly, it sets a solid foundation for the user to get really good at using the product, and so become more satisfied and perhaps more immersed in the experience over time. Finally, having that kind of easy way for learning the basics of the product makes it so much straightforward for the user to get their job done—they don’t have to spend time figuring it all out by themselves.

But with every extra step we throw in front of the user before they get to play with the product the likelihood of a break-up increases. This is especially the case for mobile applications where automatization features, like auto-fill, are still lagging behind web browsers. That means that in some cases users may have a ton of work to do just to get started, even before proper onboarding begins. By adding more work still you would be seriously pushing your luck.

A different approach to this problem is to start teaching the user the mechanics of the product before the actual registration. It sounds more complicated than it actually is. One of the best examples is the DIY app from Zach Klein (founder of Vimeo). DIY is basically a social network letting kids showcase own creations and browse works of others. But unlike Facebook and Twitter you do not need an account to browse the content of the network or check out profiles of others. So by the time you are ready to post something yourself you will have already learnt how to use the app and know exactly what to do. It’s brilliant in its simplicity.

Pre-boarding, as I started calling this technique, is thus designing the product in such a way that the user starts to learn how the product works from the very second the app / site launches, rather than having to wait through registration and the like first. The way this can be achieved will depend on the type of product of course. For my own product coocoo.lu I’ve been working in the last couple of days on re-modeling the landing page akin to the way the actual product works. Instead of creating a wholly different experience I want to use the same layout and menu items contained in the product itself. I hope that once it's ready this will slice off a couple of inches off the onboarding to-do list. In the end it should also give coocoo.lu a more consistent look spanning the entire set of user touch points, including marketing and support, not just at the product level. This is a somewhat novel approach, to me at least, and I’m really excited about its potential. It would help solve a major headache for me. Hopefully, it’s not that novel that will require a tutorial of its own.

Weary climber

Der Chasseur im Walde
Caspar David Friedrich

On a steep mountain slope, 

Lone climber struggles to the peak

He's holding to his rope, 

But his grip begins to creak.

Strained by its barbed rock

Worn by whips and scorns

His rope now nothing but a stalk 

that’s bearing piercing thorns.

Lost and without hope

To conquer this perilous wall

He’s ready to uncoil his rope

And let the abyss take control.

It never was his intention

To leave this world like this

But if this means redemption,

Temptation is too hard to resist. 

His life shall be forgotten

His name ceasing to exist

His flesh and bones rotten

Soul dissolved in the mist.

He takes his final breath

Slowly unclenching both fists

But doubting this precipitous death

Does not cease to persist.

He looks up to the stars—

Why not climb out of this deadly pit?

Though he might not move very far

He might move at least a bit.

How much work it took,

Those that are already gone?

How would the world look

If they too, chose not to carry on?

Oasis of peace

Claude Monet
Canal in Amsterdam

Right inside in the middle

Of the oasis of peace

Where even the hardest riddle

Feels like a goodbye with a kiss

In a kaleidoscope of yellow

Sweet bitter tastes of gold

Where every goodbye leads to a new hello

Where you feel young even when you're old.

Here I float without end

In the glow of green serpentines

And every moment here that I spend

Feels like in the middle of my dreams. 

Courtesy is King

In times of the “customer is king” mantra we, the customers, tend to look down on those who serve us. Customer service clerks, phone operators, cabin crew, bus drivers all get paid for serving us and ought to put up with all we say and do. We complain, therefore, frequently and vociferously, presumably to get better service next time. But ironically, it’s positive reinforcement that tends to produce the most improvements, not negative one. Yet giving compliments each time we are happy with the product / service that we receive is often overlooked. If we really feel so strong about helping shape a better experience for ourselves, courteousness and gratitude should be the order of the day. Not criticisms and complaints. And not via a survey, but personal, face-to-face “thank you" each time we feel delighted. Customer may be king, but courteous customer is a happy one.

40 Words You Will Never Use vol. 3

The latest batch of words that on a daily basis only crazy people dare to use. My favourite one must be “elision” which refers to "the omission of a sound or syllable when speaking” — never thought there was a word for it! Now for the ultimate challenge: use as many of these as possible in one game of Scrabble! Ha!

Elision ● Amalgamation ● Abhorrence ● Transgress ● Epithalamium ● Crevasse ● Tenacious ● Veridical ● Vociferous ● Vehement ● Avarice ● Fecundity ● Obfuscate ● Incorrigible ● Scurrilous ● Inoculation ● Quagmire ● Corollary ● Portent ● Effervescent ● Mendacious ● Prolegomenon ● Excise ● Prolegomenous ● Preposterous ● Inculcation ● Virulence ● Rapacious ● Opprobrium ● Surreptitious ● Palatable ● Excoriate ● Raucous ● Equanimity ● Adventitious ● Reticent ● Viscous ● Impunity ● Obdurate ● Desideratum

 Meanings after the break.

Read more »

Right Place, Right Time

Blogging That Works

Blogging that works has five components:

1. Logic. Rock solid reasoning and supersonic argumentation. No room left for lost track. 

2. Clarity. Arguments built and developed until crystal clear. Anticipating what the reader knows and doesn’t know about the subject and responding accordingly. 

3. Length. Blog posts aren’t essays. 

4. Illustration. Visuals are an integral part of each post, perfected to the same extent as the writing. 

5. Aesthetics. Posts crafted with a sense of style: immaculate grammar and punctuation, rich vocabulary, bespoke artwork. 

What’s new with CooCoolu

CooCoolu got a few neat updates in the last couple of weeks. First, the new landing page fitted with a carousel of concept arts went live. Second, we started a blog on Tumblr with behind the scenes footage. Peek the screenshots below or hit the links to see the new stuff. 

No Balls No Glory

Say Hello to CooCoolu

Explaining something to someone is often easier with a drawing of the concept, idea, issue etc. than just talking about it. A chalkboard used to be a great way of doing that but with the advent of new technologies and the Internet it has been gradually wandering into obscurity. Tools used today are mainly presentation software, drawing and diagramming applications, or infographics apps. Technologically advanced and feature packed but performing tasks that should at most take us a few minutes usually requires more time than we would have wanted it to.

We started working on CooCoolu to solve this problem. By offering a simple, social and fun product we aim to make it a one stop solution to graphically explaining stuff online. But CooCoolu won’t be just a fancy version of PowerPoint with sharing features. Similar to web mapping applications such as Google Maps, CooCoolu's canvas will an interactive matrix revealing more detailed information only when needed, using size, distance, colour and simple illustrations of key concepts to guide the understanding of the viewer. 

See CooCoolu as a one-slide interactive presentation that you can create and publish online in minutes for anyone to play with.

Get your invite for the beta at coocoo.lu