06/02/2020

MVPrototypes for everyone!

Dear reader, I've written this article while working as a UX-designer at Lab Digital. This article represents my own opinions but is published on our company blog as well. Hope'll you enjoy it 🙂

At Lab Digital, we use prototypes for various purposes. Being it to communicate specs in our development-phase, or wow a client during a pitch. The thing they have in common is that they always span the gap between creation and realisation.

As digital creators, we grew accustomed with MVP-thinking (Minimum Viable Product). Features that will not make it to the first acceptable version of a product, are not included in the MVP. The same thought-process can work for prototypes. Hence, I’ll introduce and define a Minimum Viable Prototype.

In this article I would like to point out the changing shapes of our prototypes during every phase of the design process. Also the difference in focus points and characteristics for prototypes. These parameters have to be different in every phase. It will make gathering feedback easier, and helps managing expectations.

Leaving holes for your imagination

Luckily, (UX) designers are questioning the fidelity of their own deliverables. Wireframes and prototypes included. Supporting the idea that prototypes should confirm assumptions, rather than mimic final products.

But our search for the perfect prototype is endless, and two-sided.

  1. We want to be as thorough as possible,
  2. Contrary, we don’t want reviews to derail into a talk about styling.

In other words, we need to define what problems a prototype needs to solve.

Bill Buxton describes the place of a prototype (or sketch) in a design process. Guess what, it’s everywhere! It’s used to fail fast, and fail often.

If you want to get the most out of a sketch, you need to leave big enough holes for the imagination to fit in.

— Bill Buxton, Sketching User Experiences

Goal-based prototyping

As mentioned earlier, prototypes have different goals and meanings to creatives at Lab Digital. They can take on different forms, depending on the phase of the process we’re in. Throughout these steps, we diverge and define.

Discover

  • We challenge all stakeholders to come up with as much creative ideas as possible.

Define

  • Here we’re making big decisions, narrowing the amount of sketches and prototypes.

Develop

  • UX- and visual design deliverables begin to take shape. Prototypes are begininning to look a lot like the end-result.

Deliver

  • Our team creates deliverables that are high of quality. They provide clients, creatives and developers with the details they need.

Can it be done quickly, and good as well?

It takes time to make a well thought-out prototype. Time is always of the essence. Especially during the design process where the most budget cuts take place.

But somewhere along the way we stopped respecting the characteristics of a rapid prototype in order to sell our designs in an earlier stage. In order to understand a prototype, you have to use some imagination. A gap between a wireframe and a fully interactive prototype. That’s one thing some of us find hard to cross.

At Lab Digital we like to involve all stakeholders as early in the process as possible. Keeping lines short and deliverables accessible, avoiding situations such as these…

Our designer can draw up a quick sketch for you. You’ll have it by the end of the day.

Thus trading in the amount of options, with higher levels of fidelity. Resulting in less options, but sleeker designs in an early stage.

Still, it has become fairly easy to create a good looking prototype, using design tools and free resources. Stakeholders see a rather clean version of their idea. Initially to explore the design space, rather than refining specific problems. The actual demo looks an awful lot like the final product.

Turning the knobs of fidelity!

If we look at the dictionary, we’ll get the following definition:

Fidelity: accuracy in details: Exactness.

We all know low-fi and high-fi prototypes, but we rarely get to talk about what makes it high or low, or what characteristics they embody.

In reaction to this, McCurdy et al. (2006) defined five points of fidelity. As a result, proposing mixed-fidelity prototypes, using a mix of the following levels:

  1. Breadth: the amount of paths and functionalities.
  2. Visual: higher level of details and styling.
  3. Interaction: the liveliness of the prototype. Animation as a key ingredient.
  4. Depth: level of detail of processes on a page.
  5. Data: possibilities to gather data (clicks, user flows and analytics).

This gives us some knobs to turn, and helps us to manage expectations. Above all, it creates boundaries and expectations.

In comes the MVP: Minimum Viable Prototype

A mixed-fidelity prototype can solve the endless debate. Discussions unleashed during reviews on looks over interactivity, data-collection over styling.

I’d like to point out the importance to define focus-points for a prototype, choosing from two or more of the five points suggested earlier.

1. Discovery

During discovery, a prototype gets extra attention in terms of:

  • Breadth
  • Data

During the discovery phase we need a prototype to be as flexible as possible. It must be easy for stakeholders to explore the demo and provide their input in the form of comments and suggestions.

Prototyping during discovery: used to show breadth and gather data.

2. Definition

During definition, a prototype gets extra attention in terms of:

  • Breadth
  • Depth

We define the scope of a project, the prototype provides a good view on the scope of the project. It gives us a good amount of pages and what is part of the MVP, or not.

Prototyping during definition: used to show breadth and depth (scope).

3. Development

During development, a prototype gets extra attention in terms of:

  • Interaction
  • Depth

Prototypes must be accessible to development. Bridging the gap between UX, design and development. Modular and flexible enough, to be taken apart by developers. It shows a range of pages, and its place in the bigger picture.

Prototyping during development: used to show interaction and depth.

4. Delivery

During delivery, a prototype gets extra attention in terms of:

  • Visual
  • Breadth
  • Interaction

It’s critical that a stakeholder gets a good understanding of the total spectrum of the solution. This is the time the prototype needs to look and feel good. Designers should embrace motion as their biggest friend.

Prototyping during delivery: used to show visual, breadth and interaction.

Why care for levels of fidelity?

That’s nice and all. But why would you consider the characteristics of your prototype?

  1. Focus: single-issue prototypes, prevent meetings from derailing. They also enable collaborative client relationships in an agile process.
  2. Conversation: client and stakeholder involvement increases, when prototypes are approachable. Think of leaving notes, or suggesting other solutions.
  3. Range: smaller prototypes that are low on fidelity, have less distractions. Making it easier for the whole organisation to understand.
  4. Tooling: designers like to show off their design skills, mastering a range of tools. It’s less limiting when tools are accessible.
  5. Ego: designers love their prototypes. While showing a fancy prototype is great for your Dribbblelikes, it will not raise your feedback quality. Sharing is caring, it eases the ego.
  6. Money: apart from selling squeaky-clean designs, we’re selling hours. Our time is precious, and having all the above-stated on point, will lower costs greatly.

In conclusion: stay flexible, stay low-fi

What’s the goal of your next prototype?

Prototypes have different goals and meaning to us at Lab Digital. They offer focus on getting the design right as well as the right design. They serve a specific goal in every phase of the process.

In short, prototypes have to be:

  • Used to span the gap between creation and realisation,
  • Flexible and shareable at their core,
  • Low on fidelity where they can,
  • High on fidelity where they should,
  • Presented as an ongoing product up for discussion.

It’s our job as (UX) designers to keep the fidelity and characteristics in sync with the requirements of every design phase. It will help managing expectations. Resulting in happier stakeholders 😙

25/01/2020

Remembering why I write

Three cramped fingers squeeze the tip of my pen. I mark down every word hard while wiping it with the outside of my hand. The pen is cracking like doors in winter, but we’re getting there. One by one out of my head and onto paper.

When I wasn’t allowed to go into rollercoasters yet, I’d write and draw about anything. Dinosaurs making each other’s life miserable, kids playing soccer. The arms of the players starting right above the waist. An occasional sticker on the front of the book, perhaps even a stamp in the shape of a cloud.

The struggles of a little boy trying to make friends. This one time I wrote that our teacher wasn’t that cool with me stuffing another kids’ mouth with sand on a hot summer day. Small and meaningless is it may sound, it found its way into my pocket size notebook. My parents would behold what I had made with pride. Little did I know, I didn’t care. I was just writing.

Through the years I kept collecting these books, out of sweet nostalgia. Watch how long-departed trains left station, in search for new adventures. While flipping through faded pages I came to think that I became the librarian of my own past. But nothing is for rent here.

A diary was never something for me. Something that I want to would like to keep as a habit, has to stay open-ended till some extend. This feels like an obligation already. I would rather have a week- or month book. If it feels like a cold wind is whirling through me during the day, I’d still force myself to thing. As if it were a workout. Every hole, whatever , is made with a perfect round bullet. Sometimes you’re the bullet, other times you’re the hole. On days like these I am the bullet and I pinch through walls.

But that little boys wants more eventually, so there came more notebooks. Some of them for their mere beauty. Others because they are made from bleach-free paper. Most of them aren’t really that convenient, with their curling backs and rusty staples. But they have to be saved, it is the road to a clear mind. Words will nevertheless keep on coming. It’ll never be calligraphy, since I am typing in Georgia 12 anyway right now. So it will be readable. Hand me a paving stone and I will eat a haiku out of it, if I have to. And my teeth stay in one place.

’Cause I’m afraid to forget, to lose. Lose the things that evaporate once they come out. Volatile like ammonia with the ability of being as stifling. But in general they are not and they tend to fill up empty rooms. Words about dinosaurs and sand, about first kisses and bullies. To be held tightly by crooked backs and rusty staples.

But reading those words casts a shadow on the act of writing them. As long as people keep reading. Cars go into maintenance, the soul scrambles with words on paper. Well, these won’t go anywhere anymore, as long as they are read.

02/05/2019

Feeding the creative machine at OFFF 2019

Image credits OFFFF

Dear reader, please note that the following article was written while working at a former employee. It touches only a small part of a broad project. Just wanted to share this piece of process with you. Thanks for reading 🙂

In search of inspiration

Five Clockwork designers visited the OFFF conference in Barcelona in 2019. Here’s a small report of the talks we saw 🙂

Opening day

Thursday

On the first day Ilya Abulkhanov from The Mill+ provided a sneak peak into a possible future. Where not so much the story, but the components that make it are the hero. He disrupts the classic Hollywood narrative. He dares to challenge storylines, which are in essence a representation of our own lives. Thus creating a new reality. Ilya left us some advice to live by: in order to make good work, you have to be able to break it. He did this by making a movie about making a movie.

Slightly tensed but overly enthusiastic, Ilya Ruderman stepped onto the stage. We dove into the history of typography, only to partly emerge at flexible type. There is still so much to discover about typography. In an online world were tools are available to everyone, everyone can be a creator. Possibilities are endless.

Seattle-based graphic designer Frank William Miller Junior showed us another interesting walk of life. Starting out sharing his love for music, by running a local high school radio station. With the emergence of message boards and social media, this led to making album cover art for a variety of artists. He is now a director for artists such as A Tribe Called Quest and The Roots.

Illustrator Kelly Anna also drew interest from other fields. Her father — a painter — always advised her to never stop looking at the subject you are drawing. Don’t look at your hand, your pen or your sheet of paper, only your subject’. I guess this says something about the way we approach our work, being overly focused on computers, screen sizes and deliverables.

A talk by visual artist GMUNK closed the day off. His showreel blended craftsmanships and comedy with touches of sarcasm, into one energising stage presence. His interest in new visualisation and material distortion has no limits. In a never ending search for material structures, he flew over erupting volcanoes. Shooting pictures from a helicopter proved to be the only way to capture the essence of this material. Take out for us? Run an extra mile, it’ll be worth it.

ManVsMachine

Friday

Moving towards a more social spectrum of digital design. Where David Mikula gave us an introduction in Human Experience Design. Mixing multiple disciplines to make informed, tangible products that have a positive impact on the interaction between organisations and people.

His New York based company Friends creates intentionally better business, and creates awesome side projects such as ‘Sports in Space’. A futuristic project in which they invite designers around the globe to tag along on their journey to find out what it means to do sports in space.

Most valuable insight from DavidMikula is that if the rules feel broken, you’re allowed to break them. It’s okay to push a robot into a fountain if you think it is invading on your privacy.

Full service agency B-Reel challenges us to always creatively wander. And gave us a lesson in customer engagement, sharing insight on Karl Lagerfeld and H&M projects. Using the power of social media and influencers to create strong online campaigns. Cool insight for e-commerce: layering brand communication. A brand story can be divided into a web shop, heritage with an immersive user experience and exclusive members-only content.

Great word of advice from Amber Vittoria, to take your ego out of your work. Being a freelance illustrator, she is tempted to check out other peoples’ work on Instagram during breaks. Being able to block her inner critic, makes her achieve more creative and original work.

ManVsMachine proves that every client or subject can be awesome and exciting.

When a client comes up that works with cheese, water or chicken, it might sounds not that exciting. But creativity these subjects are unlimited and it’s an amazing challenge to deal with this.

Abby Beck on AMP

Saturday

Exclusive movie screenings were also part of OFFF. We watched Rams, a movie by Gary Hustwit. This documentary zooms in on the design principles and motivations for them, as defined by Brauns’ lead designer Dieter Rams. He led their design department for an extensive amount of time (’55 to 95'). Safe to say he inspired more than one product designer to design clean, useful and well-thought products. Less but better.

Double talks from Google. First up Abby Beck, with an in-depth take on accelerated mobile pages (AMP). She works on the UX design for this eco system used by developers to make faster mobile pages. This way she increases impact for brands on a larger scale.

Google User Experience Engineering duo Munish Dabas & Mindy Dellicarpini guided us through a series of Google Maps projects. Talking through early prototypes of way-finding tool, for which they made a mind blowing 120 prototypes, before reaching a solution.

Now we know how five stories about a CEO’s life, can silence a crowd for 50 minutes. This emotional and open talk by Haraldur Thorleifsson took us through five values of UENO design studio. His journey as a person, made him the CEO he is today. One quote that really sticks with me is ‘bring the chocolate’. Meaning to always surprise with a personal touch and added attention.

We like to talk about personal work. To David Carson all the work is personal. With hilarious slides full of graphic design wonder, he showed us that intuition can’t be copied. Clients might like your work, sometimes they don’t. But if everyone loves your work, you’re probably playing it safe. And surely don’t let the computer decide what your work should look like. A true highlight of his talk being the project with Dutch designer Thijs Biersteker, in which they collaborated on an interactive work that visualises brainwaves and projects them into a room.

He showed us clips of himself, surfing and skateboarding, days prior to the event. Showing his energy and passion. He closed the OFFF festival with the inspiring words to always keep doing what you love.

Personal insights

Main learning is to feel we are part of a tribe — or group — of creators. As colleagues we grew stronger and it will show in our trust and the work we make. We shared experiences about the things that spark us joy. In that way we know how to motivate each other better 🙂

  • Keep feeding the creative machine.
  • Make all the work personal.
  • Never stop doing what you love.
  • Know when it’s time to take a break,
  • We’re part of a tribe,
  • Go out and look for your own rituals and totems,
  • Don’t let the tools depict your work,
  • Stop shaming around not knowing,
  • Encourage colleagues to do what they love.

All in all OFFF was a truly inspring event. One that will linger in my head for a long time.

16/04/2019

Shaking things up with Jake Knapp

Dear reader, please note that the following article was written while working at a former employee. Thanks for reading 🙂

Jake Knapp — co-writer of the book Sprint — visited the Clockwork office on April 1st. What seemed like a joke, turned out to be real..

A designer walks into the room…

What’s a Design Sprint you say? Moving towards a validated prototype in one week, together with clients. Sounds easier than it is. Jake provides us with some examples. Jake worked for Microsoft and Google, and helped Slack, Uber and LEGO in facilitating sprints. He published a book about it in 2016, and starting telling his story on multiple stages.

When Jake walks into the room, smiles appear on people’s faces. Almost two meters high, grimacing from ear to ear. Just a regular dude, coming to tell a story on something he is passionate about. Wearing fluffy slippers. What seemed to be his manager, following him closely. Scheduling a new book presentation maybe? We’ll find out later…

Invitees get seated, and our managing director Martin kicks the night off right. “We have something nice to behold tonight.” Everyone came all the way down the Moermanskkade for the same reason. This, together with the sun setting on our little harbour. Jake seems impressed, and laughs together with us.

“I assume you said some good things about me in Dutch. You look like nice people!”

Jake Knapp
Dot-voting (left) on subjects.

Upon entering our office, we asked visitors to dot-vote on their favourite subjects. The following Q&A will give you a taste of this insightful evening. We’re gonna start with Jake’s favourite subject, ‘Tell a joke.”

Do you have any good jokes for us Jake?

JK: I always like to keep a few good ones up my sleeve. Even though they are really bad, I use them to get the group shift their focus on busy days. Okay, here it comes. You ready for it? Skeleton walks into a bar… Orders a beer and a mop.

A fair amount of the group seems amused, the ice is broken.

In what way does your more recent book ‘Make Time’ connect to ’Sprint’ ?
JK: In order to answer this one, there’s a few things you should know. I used to work as a designer at Encarta. Does anyone of you still know what that is? Yeah, I’m getting old too. I noticed I disliked their way of working at one point. Then I joined forces with Google, only to found out they had the same problems. So, I started tinkering with theses ideas for the ‘Design Sprint’, out of my own frustration.

I noticed that the way we’ve been using our calendar, proved to be inefficient for creative work. Were we not using our calendar as a blank canvas, to be filled with half an hour meetings throughout the day? After my time at Gmail en Hangouts I ended up at Google Venture (GV), where I worked on the idea of the ‘Design Sprint’ during my ’20% Projects’.

So I switched things up, completely. Instead of design products, we started Designing Time. We tested this way of working with the team. Everyone should clear their agendas, for a week fo deep work. The right people in the room, full focus on one problem.

Any good jokes, Jake?

A week without meetings? Can we not do it in four days?
JK: That’s a question I get a lot. And I always advise to do what suits you and your company. A team that is accustomed to each others’ skills and wishes, could get the job done quicker. But than again, something along the way suffers a lack of attention or detail. In my humble opinion, five days is really the sweet spot to aim for.

Five days in the same room… how do we keep energy levels high?
JK: Just let it rest a while. Leave discussions that need to be held outside of the room, where they belong. The Sprint-book provides day-to-day templates, down to the minute, even suggestions on when to schedule breaks.

What’s your favourite day of a sprint week?
JK: Thursday is my favourite day, by far. Being a designer myself, there is nothing as fulfilling in designing in a time-boxed space. It’s the ideal motivator to make decisions fast. Headphones on, and full focus!

Don’t procrastinate and listen to Metallica 👌🏻

How do I keep focus in the team?
JK: Trust the process. Doing necessary preparation helps as well. The reason that you’re all there for the week — with that specific problem — should be crystal clear. People are clearing their agendas for a reason. Every hour is as valuable.

I can not be there the whole week. How do you keep all stakeholders involved?
JK: Guaranteeing involvement from all stakeholder is done fairly simple. Your room should read the story. If you’re documenting every day rigidly, stakeholders should be able to follow your process. Even at the CEO, with only half an hour to spare, should be able to be up to speed in no time.

Help! We don’t have any designers on our team! What to do?
JK: A design or prototype can be many things. I like to look for forms that get as honest feedback as possible. My goal is to capture the first reaction of a respondent. This doesn’t have to be a fancy click demo. A PowerPoint with a webcam? Just as good!

So you’re saying everyone can facilitate a Design Sprint?
JK: Essentially you don’t need any special skills to do so. Being somewhat skilled in talking in front of groups of people, comes in handy. But that’s a skill a lot of people have. If you need specific skills in interviewing or designing, I suggest hiring an agency who has done this multiple times. It’s these people that can look at your project objectively and apply the right skill and knowledge.

How do you usually prepare for a Design Sprint?
JK: Usually I don’t actually! I like to go in unprepared. Let them tell me what the problem is. I learn the most that way.

ny specific bloopers or successes you’d like to share?
JK: The biggest setback ever was when, when in one particular case, the CEO came in on Thursday and told us we were never gonna build something like this anyway, but do carry on. People were ready to leave the building. Right then and there. Successes are made on subject I myself are not particularly familiar with. Say healthcare for instance. It’s really fulfilling if you can explain something really hard, in a very easy way.

How does the future of the Design Sprint look?
JK: The method is there to customise it to your own needs. I’m very curious to see how people will use it over time. Apart from that, I’m fairly pleased with the way the method spreads. More and more, universities, corporates and even governments are using Design Sprints to get stuff done.

Jake, can I have your autograph?

After the Q&A people line up. Either for a personal tip, sharing an anecdote or simply to get their book signed. I got an awesome story on making prototypes while blasting Metallica 😎.

Oh, and that manager of him you say? That’s his 15-year old son, Luuk. Busy minding his own business, in the back of the room. Every now and then he gets to help his dad out, he likes that. My dad a cool guy? I guess, yes. But once he starts talking… And he sure did. Keeping us interested for 1.5 hour straight, without break.

Spilling with the same energy and enthusiasm, we leave the Clockwork office. Carrying a copy of Sprint under our arm.

Closing an awesome night!

16/04/2019

I’ll take the sprinter

Rapidly prototyping mobile fare payment

Dear reader, please note that the following article was written while working at a former employee. It touches only a small part of a broad project. Just wanted to share this piece of process with you. Thanks for reading 🙂

Every day, one million Dutch people travel by train.


Dear travellers, welcome on board

A lof us travel by train on a daily basis. This makes us truly aware of the challenges railway companies are facing. We’d like to build awesome mobile products to make traveling more pleasant. One way of doing this is through the conductors on the train. The boots on the ground. The people that provide first class service.

In the Netherlands alone, there are over 4.500 trips a day, transporting more than 1 million people. Conductors serve as facilitators on the train. They share a common goal of making travel time more comfortable for travellers.

This can be a busy job. Besides making sure the train leaves on time, they have a range of subtasks. Service rounds are one of them, during which they answer questions of travellers. This could be about timetables, ticket prices or information along the tracks.

For this sprint trajectory, we decided to focus on mobile payment on the train.

Challenge

Can you pay with your mobile device?

One way of helping conductors might be through facilitating mobile payment. During one week, we worked together to explore opportunities for mobile payment.

Our challenge for this week was:

“How might we ease direct payment on the train?”

When you travel by train in the Netherlands, you need to have a valid card. That may come as no surprise. This card holds various subscriptions. This card replaces a paper ticket, but comes with complexities as well. First the conductor scans this card, when doing a check round. Under certain circumstances, a traveller needs to have a supplementary tickets. Say, you’re bringing your bike (1) and dog (2) along a trip on an international (3) track. That makes three ‘add ons’ you’ll need to load onto you card.

Some travellers (whether by accident or not) forget to buy such a ticket, before boarding a train. This could result in a fine, or ‘deferred payment’ (DP). Which is an actual written piece of paper.

Writing a DP is a lengthy proces, which can take up to 15 minutes. You can only image what this means if they needs to check 100 people’s ticket, on a trajectory of 30 minutes. In that way, we are challenging ourself, to come up with a more efficient way of handling this DP-process.

To do that, we have to make sure that direct payment on trains is easier for travellers. Together with our client we explored this topic during a one week sprint.

On the first day, we defined our common goals:

The project is successful when:

🔲 Travellers can use their mobile device to pay on the train,

🔲 Travellers have a valid ticket after paying,

🔲 Travellers are able to cross the gates at the station.


Current situation

Deferred payments

On the first day of our sprint week we started with initial prep-work done by both parties. First we focused on mapping the current deferred payment process.

During our first sessions we interviewed three conductors. We found out that this current flow can be rather lengthy. The current deferred payments process is as follows:

  • Traveller enters the train (with or without extra tickets),
  • Conductor performs a check round,
  • Traveller gets his card checked,
  • Conductor concludes there is no valid extra ticket. He then reads the travellers their laws,
  • Traveller is either ashamed, frustrated or careless,
  • Conductor asks for ID, asks extra questions, writes the DP,
  • Conductor writes a paper DP,
  • Traveller receives a copy of the deferred payment ticket on paper, and code to leave station,
  • Both parties proceed their journey,
  • Conductor hands in the copy of the DP at the end of the workday,
  • Traveller receives letter at home, and pays DP.
Current ‘deferred payment’ process (plus sprint week focus)

Attention attention…

Asking travellers to pay for a fine on the train can be a tedious and shameful process. Being able to instantly pay would unburden both parties.

The following points needed extra attention:

Attention points for conductors

  • Decreasing the time it takes to write a deferred payment ticket,
  • Increasing the level of service to travellers.

Attention points for travellers

  • Keeping travellers in control of their data,
  • Decreasing a feeling of incrimination / discomfort for the traveller,
  • Providing travellers a valid ticket after payment.

Our proposal

Reframing an ideal fare payment flow

During the second day we each sketched our ideal flow. Together we talked through each others’ sketches, and sticker voted for the best. After voting we drew up a single vision of our ideal prototype flow. We focused on the benefits for both conductors and travellers.

With that mind, we made a new proposed flow, which you can see in the following image.

Proposed deferred payment proces.

The current flow can take up to 10 minutes per traveller. First a conductor needs to check for an ID. He then writes down the details on paper and hands a copy to the traveller. Afterwards a conductor needs to copy the same data into an app that corresponds with the booklet.

The proposed flow introduces the use of QR codes for mobile payment. Meaning there is no need for an ID-check. We cut out some steps and the conductor doesn’t have to hand out paper copies of tickets anymore.

Design

Visualising the proposed flow

Based on this input, we drew a serie of screens. You can see some of the essential screens down below.

  1. Onboarding,
  2. Calculating supplement price,
  3. Traveller-side PDF reader with ticket.
Core screens of the mobile fare payment application.

Prototyping

Roleplaying mobile payment

On the final day we welcomed six conductors to our office. We prepared a script for them, which consisted of:

  1. Welcoming the conductor,
  2. Getting to know the daily work of the conductor,
  3. Guiding them through the scripted prototype (roleplaying),
  4. Collecting extra feedback,
  5. Questioning by the rest of the team.

Our prototype setup consisted of two mobile Android devices, and two InVision prototypes. In that way we mimicked a two-sided payment experience.

The prototype script

  • The conductor uses the first part of the prototype generate a QR-code and present it to the traveller,
  • The traveller scans the QR-code from the conductors’ device. He is redirected to the second InVision prototype,
  • The traveller finishes the payment flow with his preferred banking service,
  • The conductor receives a notification of payment,
  • The traveller receives a ticket on his mobile device.
Testing script setup (conductor and traveller side).

The biggest smallest step

  • Conductors found the application to be a great extra to their initial workflow,
  • This application would make their check rounds way faster,
  • It would reduce a sense of shame that is otherwise connected to writing a ticket,
  • We presented travellers with an easy alternative for a ticket, and a valid code to open gates and leave the station,
  • We gained trust from interviewing users together with all stakeholders,
  • We gained a greater sense of responsibility towards the traveller,
  • Our way of rapidly prototyping a suitable solution, is possible at very low cost,
  • Using QR-codes in an InVision prototype mimicked an actual payment,
  • As a value & discovery team, we strive to produce user centered designs. Our visualisations and prototypes should be as close to real-life examples as possible. Embedding QR-codes into prototypes to mimic payment, enabled a realistic testing script. Macgyvering with a couple of tools feels great 😬

Together we made a small step towards a new payment system. We validated our hypothesis and initial challenges:

✅ Travellers can use their mobile device to pay on the train,

✅ Travellers have a valid ticket after paying,

✅ Travellers are able to cross the gates at the station,

Next stop?

Our devices are already equipped with the ability to scan QR-codes. Specialists predict a glorious revival of the QR-code as a mobile payment method. We are optimistic towards these technologies.

Next stop is looking for ways to implement this piece of service into conductors’ daily workflow. Outcomes of these tests wil result in another pilotstudy, building towards an MVP.

We explored the possibility of paying for an extra ticket while on the train. Confident in moving forward in helping conductors become better hosts to their travellers.

29/03/2019

Dear UX designer, don’t forget to turn off the GAS

Image credits

Do your tools complement or hinder your process?

In this article I’d like to share some of my believes on tools. Especially the problem of acquiring more, when reviewing them is more suitable.

Gear Acquisition Syndrome (GAS)

A tendency to buy more equipment than justified by usage and/or price.

I like to look for common traits in UX design and photography. A collector of vintage cameras myself, I’ve fallen victim to buying yet another camera when I find one. Only to find myself checking off an item on a list.

When trying to become better at what you do, it’s easy to look for better tools. “If he uses this tool, and shoots pictures that look that good, I’ve gotta have it as well!” But man, what a disappointment. My photographs weren’t getting any better. Perhaps I don’t need another camera?

The thought of replacing certain gear with better/more versatile gear, does cross my mind. Although I never seem to finally do so. I’d like to think that over time, I became too focused on the tools, rather than the problems they solve. I fell in love with the outcome, not the process. Any tool can make my product look shiny and polished. But only my ability to tap into other parts of the process, make a product better.

As a UX designer, I act all the same.

“20 UX tools that will help you rule the world!”

Yet another e-mail with a list of tools, to clutter my inbox. Sure, I will check some of them out. I download a new app, or open another browsers tab. Only to find nuances in the margins. Switching back to only a handful of tools I already used. I laugh: “we’re in the rectangle drawing business”, any tool can do that. But that’s only the tiniest part of our work.

I think to myself: “I always use Sketch and InVision. It does the job just fine.” Don’t forget ‘the job’ is never the same. Sketch and InVision (or X and Y) can not be my go-to for every single project. I happen to know how to control the outcome of my deliverables, with these tools. But I’m missing out on a couple of factors.

If we look at how we measure our success — outcome and aesthetics — it’s easy to forget one very important thing:

Our process

Having more (or different) tools won’t make you a better photographer or designer. Yes it helps you to be versatile and adaptive to the environment. But in the end it boils down to controlling your process. Control the tools you need, and be willing to switch up. Being aware of this is the way forward.

If we look at a classic (business) process components, it’s easy to see the parallels in our daily work flow:

  • Events
    Client presentations, kitchen reviews, team standups.
  • Tasks
    Our day-to-day work.
  • Decisions
    Decisions from various stakeholders.
  • Input
    The feedback we get.
  • Materials
    The files. Yes, we do love our .sketch and .PSD files.
  • Output
    There you go, the result of our love and labour!
  • People
    All the way down here. The people! The colleagues, clients and -oh yeah- end-users.

As you can see the materials we work on (and the tools we use to make them) are only one variable in this sum.

Do your tools complement your process?

I zoomed in om my tools. After that I came up with a list of things I ask myself before I start a project.

Will this tool…

  • Events
    …help me to present my work during client meetings?
    …help me to present my work to colleagues?
  • Tasks
    …get this task done the easiest way?
    …help my team to do this task?
  • Decisions
    help me to review decisions from various stakeholders?
  • Input
    help stakeholders to provide feedback?
    help me gather feedback?
  • Materials
    …be accessible in 1 year from now?
    be accessible to everyone in the team?
  • Output
    help me present the outcome?
    …help me make a realistic presentation of the outcome?
  • People
    help to connect the right people?
    be accessible to every stakeholder?

When reevaluating every tool you have, it’s flaws and strengths will become clear. There is not yet one tool to rule them all. The ability to evaluate which ones are fit a specific job, will make your design work a lot easier and flexible. Let the tools do the work for you.

Is your tool facilitating your process?

Don’t get me wrong, I am a big fan of tools myself. I do want the tools to help everyone in the team to do their work. And I do agree on the following:

We shape our tools and, thereafter, our tools shape us.

John Culkin

We choose our own constraints. And we choose to either stick with them, or not. I started out wire-framing in Photoshop. Not using that anymore. Switched to InDesign. Not using that anymore. Used Evernote to document my projects. Not doing that anymore. Firing up Sketch every single time. Not doing that anymore.

Syncing designs to Miro from Sketch to gather client feedback? Yes sir. But next month? Perhaps not anymore.

Go ditch your tools!

Be willing to ditch a tool. Tools have limited options. It’s about facilitating you and your team in making something awesome. It’s a great idea to turn off the GAS every now and then.

Every proces needs different tools.

You shouldn’t be afraid to let go of some tools. Replace them with new ones! Be on the lookout for ways to do less and think more.

Align the tools up to the variables, not the other way around.

And if you like a certain tool, stick with it. As long as it meet your clients’ and teams’ expectations of your work. ’Cause that’s all that matters in the end.

26/02/2019

Where photography and UX design meet

10 reasons why black & white photography made me a better UX designer: Or the other way around.

I like to think the essence of having a healthy work-life balans is being able to see how one affects the other. In that way, no time goes ‘wasted’, if it ever really does. I wrote the following in a way that it can be seen from both perspectives. One as a UX designer, the other as a hobby photographer.

TL:DR: If not a quasi-philosophical way of looking at work-life balance, a soft nudge and gentle reminder to be a bit more #10 🙂

#01 | Do the research

Do you feel comfortable working in Manual-mode?

Measuring the conditions you’re gonna be working in is key. One thing of growing in something you love is knowing the parameters with which to measure its success. It’s best to dress for bad weather, and bring an umbrella in all cases. Knowing what dials to turn and can be turned, is essential.

#02 | Know the tools

Sketch or Canon? Figma or Nikon?

Along the way I’ve learned possibilities and limitations of tools. Which are best to pick for a certain job. Even though I get to love a tool, I can be horribly wrong about it and screw up a project. It’s good to have a few workhorses, but being able to switch between them in a hardbeat, might just be as valuable.

#03 | Cherrypick the details

The details matter the most.

Not having to worry about certain aspects such as style and color, leaves you to focus on the details. Since you are in control of the work, you get to decide what goes in the frame.

#04 | Leave out

Designing is the art of leaving out.

The best design is when nothing else can be taken away. Famous words to live by. As a creator, you can control the environment to a certain extent. The beauty of this craft is that mixing and matching colour doesn’t really matter, as long as the content and story is good.

#05 | Make a storyline

A great story is half the work.

With a clear story in mind, the journey and hunt becomes way easier. It’s easier to reflect on something you defined beforehand. Making an agenda on the go is just reacting to the present. So sketching out a story beforehand will help to defend your choices.

#06 | Show multiple frames

Take the time to explain the work.

When I was younger, I felt like cramming everything in one frame. I’ve learned that there is absolutely no need in doing so. Showing multiple scenes will guide the audience along. Never forget that we can not control the frame that our works are shown in. We can only control the way we’ve shipped it.

#07 | Love the process, not the outcome

Some things are not meant to have a clear result.

The other day I asked a random stranger to work with me, his answer surprised me, since he was more than willing to corporate. I missed getting the perfect picture of him, but that didn’t matter. I learned from the process, and stepped out of the comfort-zone. The end-result might get blurry, but the journey is sharp as f.

#08 | Make the hours

Life gets better, once you start living it a bit.

Nothing remarkable ever came from doing nothing. It’s a simple rule. But it means I try to practice both crafts almost every day, in order to be better this day than where I was last year.

#09 | Have some fun

Not everything has to be so serious.

Joke around and found some like-minded people. If not at a workplace, they must be hiding somewhere on the world wide web. I learned that there are more people like me, thinking: “where are the like-minded?” Then I turn outward, and I’ve found them.

#10 | Be a human

Look around and empathise with people around you.

Empathise with the people around you. Put some f-ing love in the work. People will always love or hate it. Be opinionated and have some critique as well.

It’s only human 🙂

20/06/2018

10 things I learned from working at a small design agency

A job is a process, own it.

Over the past two years, I had been working for a small digital design agency in Utrecht. A group of 25 specialists, who know their way around innovation and digital design. I could’ve only dreamt I would land a job as a user experience designer here. But I did, and was thrilled to get going.

We got beautiful work done, and were motivated to craft digital experiences. Our game plan was a no-brainer: work hard, play hard. Great successes were celebrated, and I was able to be part of a great, hardworking team. But, after two years, it was time for me to move on to a new challenge.

If I knew back then, what I know now, I wouldn’t have done it any other way. You know why? ’Cause you can’t. You can only learn. Here are some of those things I’ve learned along the way. If you’re at that point in your career, and just starting out as a UX-/UI-/Pancake-/Anything-designer, I hope these tips are for you.

If you’re short on time, skip to #10 :)!

#01 | Stop pretending to know it all

but start asking.

Be dumb and start asking questions. On my first day, I asked dumb shit. On my last day, I asked dumb shit as well. I lied my way through the first day, pretending to know what an MVP was, in orde to sound more professional. Colleagues can tell you’re faking it, so start asking. They will tend to like you more, if they find out you’re being dead honest with them. You’re a small group of specialist, someone will know the answer or push you towards the right direction, so us it!

#02 | Show and tell

but ask and listen.

Starting out, I thought nobody cared for what I was doing, besides the work I put in. As long as I got my stuff done on time, all was well. A lot of my colleagues had these cool side projects, and were happy to share them. As soon as I was comfortable talking about skateboarding or analogue photography, they were genuinely interested. Be that racing bike pie-baking novel-writing-guy. You get the point: show them you. Humans are wired to classify and label people, so why not take advantage of it? Connect with those willing to share what gets them out of the bed in the morning, and are passionate about it.

#03 | Stop hiding

but respect others hiding.

A fancy screen in front of you, is good for hiding. How I know? I’ve tried many times. When conflict seems inevitable, it’s tempting to hide behind your laptop. More understanding will come from getting up from your chair, and telling them in person. Sure an e-mail will get you the exact words, and you should write it. Just don’t send it. Write it to get the words out. Most of the times when you speak your heart out, this will be met with great understanding. Try it. Likewise, you can’t force someone to act the same, so ‘knock’ first. Be it through Slack or something else, with a DM. Not everyone is as happy to be disturbed. Let’s have a coffee together, can really be a great start.

#04 | Build an inner circle

but don’t break their code.

I am not saying you should start smoking or anything. Everyone knows it’s bad for you. Smokers (or any group) — out of sight of colleagues — tend to vent. This is were the real slur is slung. And honestly, only so much of it is slur, when more then half of them tell the same story, I guess. Some stuff is only told in these circles, so respect the code and don’t mention anything outside of it. So try to gather around a shared interest, to get some momentum.

#05 | Speak the fuck up

but know when to shut up.

No one else will speak up for you. When something is frustrating you, speak up and tell. First, attend to your inner circle, don’t shout in a room full of people. Use it as a safe space to vent from time to time. If speaking up to your direct peers is met with positive vibes, turn up the volume a notch and get your concerns heard. Not everything you want to address is seen as complaining. Good ideas and initiative are mostly met with applause.

#06 | Know your stuff

but know other’s stuff as well.

Your managing director hired you for a reason, probably because you’re doing something quite well. If you’re an expert at making shiny wireframes with yellow neon borders, tell them all about it. Tell them how amazing they are. Tell them they have the fanciest neon bordered wireframes over in Lichtenstein. Why we should buy the wireframe-kit, ’cause no one else has. I reckon you get the point. Likewise, ask others about their stuff. It’s crazy how much your #RSS newsfeed doesn’t tell you.

#07 | Find your own flow

but don’t deny the current.

It’s a small agency, so we are in a way forced to find a way to make it work together. No room for egos, or trying to change the organisation from the inside-out. Especially when you’re fresh out of college. Sure you can lock yourself up in a room, in need of focus. Therefore you should find your own way of working, your own flow. Do spent some time studying the mechanics and current of the agency, and act accordingly.

#08 | Have some mentors

but try to learn from everyone.

You’re probably familiar with articles promoting to “find a mentor”. How about finding a couple of them? Sure, you can hang out with like-minded designers, but I don’t know the first thing about pitching a good social media strategy. You can learn from the people that are sitting right across the hallway#insiderTip: Talk to your office manager, they tend to have all the right people-skills ❤!

#09 | Trust your inner compass

but admit when it’s glitching.

There is only so much, that reason can solve. As designers we like to talk about that which excites and moves us. A lot of it is done by following a set of guidelines, but a lot of it is experience, making the actual hours. On the other hand, just as much of it is a matter of preference, so own your own inner compass, and trust it. There’s a sweet spot here, I haven’t figured out where :). Admitting you’re wrong, or don’t know it yet, is one of the most valuable lessons you can learn.

#10 | Own the process

A job is a process, own it. Accept the ups and downs. The thrills and chills.

TLDR

Ask. Be dumb. Show and tell. Stop hiding. Speak the fuck up. Build an inner circle. Know your stuff. Find your own flow. Have some mentors. Trust your inner compass. A job is a process.

It’s so easy to say.

“If only I had known. I would’ve acted this or that way.” And I don’t regret anything, ’cause we’re all learning here, and still are.

Have fun and be you 🙂

17/11/2017

Discover your animation-language

Animations come in all sorts of shapes. From fluffy Pixar-animations, to airline tutorials that beg us to act perfectly normal in rather unpleasant situations. The ones that move us the most as digital designers, are those we experience through graphical user interfaces. In the following read we would like to share some of our thoughts and opinions on this matter. We will have a look at a few trends, followed by a search for uniqueness in animation. Apart from that, we lean into the factors we all play with: movement and suspense.

Shout-out to co-writer and buddy Jesse Zoutewelle ⚡️

An approach in full motion: where are we headed for?

If you are an animation enthusiast, you might have seen The Horse in Motion at some point. At the time, people were blown away by the twenty-four frames that Edward Muybridge tied together into a somewhat fluid movement.

The Horse in Motion, by Eadweard Muybridge, Wikipedia.

Fast-forward to 1981, when two Johnston and Thomas, both animators at Disney, wrote an extensive guide to real-life animation called, The Illusion of Life: Disney Animation. Natural laws of physics and emotional timing were incorporated into these guidelines. These twelve principles still stand strong today and are a good reference point for digital designers.

Not too long ago, Flash left our lives. Many designers felt like they lost the ability to freely animate their ideas. Therefore not fully capable of communicating them to developers, clients and other stakeholders. But — as always — creative people bring forth creative solutions. Scripting and modern CSS gave us plenty of opportunity to communicate motion and unfold conclusive stories. Not to mention a plethora of animation-tools out there, some of which are free to use for everyone. Apart from this moving little piece of history, we see other interesting trends appear in regards to animation.

Define your own rules

People can generally tell when something just feels right. Whether it’s an animation, or a beautifully crafted user interface in itself. Still, there is plenty of space to explore of course. Lots of tech companies claim to have found their own animation-language for user interfaces. Facebook developed its own prototyping tool Origami, and Airbnb introduced Lottie. Of course Google claimed his territory in the form of their library of principles called ‘Material Design’. Part of it is called Material Motion. All great examples of companies that are enabling designers to make products that almost feel like the live version.

Interestingly, it seems to us as if every little tween and micro-interaction is well-documented and set in stone. These rules and tools make for unity and familiarity in an animation’s look and feel, which is obviously great for a continuous user experience.

Nevertheless, this effect has as many pros as cons. If animations are perceived in the same pleasant way on every OS, users feel in control: recognition over recall. If you are used to Apple iOS, you will get iOS-native animation, same goes for other operating systems. On the other hand, these guidelines create a sense of sameness you might want to avoidin user interface design. Making sure recognition and uniqueness are balanced-out, is not an easy process. In order for us as a design-agency to stay on-top of this, we have to embrace animations in the early stages of our designproces, or it might be an afterthought any way.

Being unique, or using shoulders of giants to stand on: in the end we are all trying to tell stories. Step-by-step we unfold a plot, that is the message across to our clients and stakeholders. But, how do we get this message right?

Okay, hold still now

Through every product we release, we start a conversation with our end-users. Either an informative productpage for an insurance company, or a full-blown catalogue with a new selection of brews for a coffee brand. The scene is set: a user interface to interact with the elements, a viewport defining the lines along which we can play.

Whether we like it our not, a lot of work is still pretty static. A campagne-page, an online identity or an empathising chatbot. Sure thing, we could present all of the content at this same time. Never mind about animation, users will get it anyway. Like any romantic play or movie, we all know the hero will end up with the girl. But nobody wants to know this beforehand. Presenting users with an answer straight-up, just does not answer to our need for a persuasive story.

We think these four factors help us to create an alluring story:

  1. A user’s knowledge and expectations;
  2. A storyline of our end-user;
  3. Our ability to translate these needs to suitable designs and products;
  4. Time and suspense.

Time and suspense will translate our, otherwise flat, images into a vibrant conversation. Shapes and images will change place, creating elements that will invite interaction. Key-elements in this flow are a clear story and a unique animation-language. We defined 3 types of animations that can help facilitate this.

01 | Animations that invite

When an end-users interacts with the product we design, certain elements can attract more attention then the other. Without a proper introduction of these elements, you might lose a lot of visitors. Its all about progressively disclosing the elements on the page.

A while ago, we designed a platform for Nespresso’s de Boer en de boer-campagne. This platform invites visitors to explore the process of coffee making, from berry to cup. The scene is set in Colombia, and visitors control drone-images to fly over the coffee plantations and beautiful scenery. 360-video and photography accompany the story.

When opening the webpage, the user is invited to ‘Start the flight’. This can be done by clicking the ‘Start’ button. But we also made the little airplane draggable across the screen, this gave a deeper sense of actual movement. The flipping panels enhance this even more. Form follows story, if you may.

02 | Animations that guide

Where do we come from, where are we going? Tough call, but animation can help answering them. In-page movement, or between screens, provide direction to our concepts.

Sure we like coffee, but music even more. The Soundcloud-app is one we use on a regular basis. It has a neat feature in which animation creates context for one specific interaction: scrubbing through video.

03 | Animations that delight

Some animations are just there to delight. Buttons you want to click on forever, or a nicely fading transition between two pages. Sparingly using movement is pretty important. In the aforementioned Flash-era, this was often forgotten. When applied to with care, fun animations can lift your design and brand to a new, recognisable level. One good example of this is the Paper Planes-game developed by Active Theory and presented at the annual Google IO-event.

Starting point for Active Theory was pretty straight forward: “ What if you could throw a paper plane from one screen to another?” The heart of this concept was bringing people together. They did this by relying on a user’s common knowledge of the system in a clear and simple storyline, combined with cutting-edge technology. Folding the plane is a fun flow to engage with, after that, the phone is used to throw the plane to the other end of the world. As you can see the plane leave on your computer screen.

Any brand can do the same thing, and as designers we have more and more building blocks to make unique experiences. On the one hand, there are animation libraries assembled by the Googles and Apples of the world. But with a little more effort and brand guidelines, we can claim our own animation-language, and really stand out.

Just keep on moving

When it comes to movement and animation, we’re miles away from a standstill. Design agencies can claim their unique approach to motion design. In order to do so, we have to define our own animation guidelines, together with our brands. In which their own story, is a leading factor. Early sketches and animations, can help doing so.

Good animations feel right. They serve a purpose, and are most certainly not the center of attention in your product. Progressively disclosing elements on a page, can be done using motion. But use sparingly, you can never make a first impression twice. As with any talk, a clear message combined with a sense of delight are essentials for a great conversation.

As we all can guess by now: balance is everything, you’re not supposed to overdo anything. A subtle scrolling element, or an all-out page-flip might be worth debating about. Sometimes, it is best to let animation be an unobtrusive guide in your interactive product.

But never lose track of the end-user and the message you are trying to get across. They are the ones who are taking the time to interact with your product, and might possibly be moved by it.

Gaël van Heijst | 2020