A fable to explain UX to rookies

Rethinking Batman’s classic outfit in a user-centric way

Marc Morera
UX Collective

--

Have you ever tried to explain to your parents how do you work? It’s extremely tricky.

I struggle also when we need to explain to clients, stakeholders or interns our methodologies. It is because the user-centered design is not a theory that can be learned, it’s a mindset.

The most efficient way is by showing them a real project as an example to visualize our role and approach. My concern is that I spend more time talking about the context and the outcome than the work that we have done to reach it.

In addition, these projects usually have confidentiality limitations making the sharing session even more complicated.

Newcomers generally believe they understand what is UX design, but when they ask you to design an eCommerce (for e.g.), we use to hear concerns such as ”Why do you need to ideate? I just want an eCommerce”. What makes obvious to me that they don't understand what user-centered design actually means.

Earlier this year I launched BatUX.design, an interactive tool to explain user-centered design through a fictional case studio.

The briefing

I was wondering how we could make it in a smoother way, less tedious and straightforward. So I wrote down this briefing for myself with the aim to design an infographic to onboard our interns at our office:

Provide a didactic tool to my colleagues to explain user-centered design to newcomers (clients, stakeholders and interns) based on a case project without confidentiality limitations.

The concept idea

The focus was on the design approach so I had to find a project example that needed no context clarification. So I chose a popular character with a clear mission, Batman; and I developed the story around him.

BatUX, a webcomic where Alfred explains how to redesign Batman’s classic outfit using a user-centric approach.

Besides, Batman has a perfect gallery of supporting characters that I could use to mirror a lean design team:

  • Alfred: The butler who understands Batman and designs new tools for him according to his needs.
  • Commissioner Gordon: A detective who performs research.
  • Lucius Fox: An engineer who turns concept ideas into real objects.
Batman supporting characters

The prototype

It made sense in my comic-book-fan-mind but I was not sure if it would work for other people. So I decided to run the project itself in a user-centered way and perform user tests.

I made a quick draft and I explained the idea to my peers Dominic Winkler and Giorgio Galanti. They were totally into it and together we did a few ideation workshops (let’s be honest, beer-stormings) to help me fill the gaps and make the whole story consistent.

Together we prepared an awesome tool for our testing sessions:

30 paper prototypes shaped as books that we distributed among friends and acquaintances to collect feedback.

64 pages comic book, only available for friends, family and fools!

The (top) findings

It took a while to get feedback from them. That was actually our first insight …

1 — Should work for skim-reading users: The story contained too much information and this challenged the reader who wanted to get a quick understanding.

2 — Stages are not clear enough: To explain our design approach was the main goal of the story but it was not outstanding enough. Users expected to have the book divided by chapters to make the stages more clear.

3 — It becomes visually tedious: The illustrations were appropriate but they displayed people working with post-it’s over and over… it became repetitive.

4 — Readers wanted to participate: Everybody felt engaged by the proposal and suggested ideas for the project itself.

Wireframes collage to rethink the story structure according to user’s feedback

The refinement

Finally, we designed a tailored interface in which to display our story according to user’s feedback:

1 — Stages menu: To make stages more clear we have designed the navigation based on the project's design approach: Empathize, Define, Ideate, Make, and Test.

2 — Folded content: Hidden process steps to lighten up content without losing detail information.

3 — Lottie animations: Animated illustrations to gain dynamism and avoid visual monotony.

4 — Ideation canvas: Downloadable PDF to invite readers to perform a quick brainstorming and share their designs via Instagram (#batuxdesign).

Currently, the story is on hold while readers are sending us their canvases. The fable will conclude with a final design developed with the most interesting received ideas.

Feel free to join the ideation stage and download your canvas here. We need fresh ideas!

The hidden goal

A workmate asked me why I waste my time with this kind of personal project. Well, for sure I’m not getting any money with it but it gives me the chance to meet other professionals and expand my network.

I’m running this project to think over my work process and learn from other people that may solve their design challenges in a different way. This is a tool for debate so feel free to use it with your interns, students, clients, stakeholders or family members!

Just share with me your feedback :)

--

--