Stefan Haaring

Mood-/ inspirationboards

The quiz

Filtering genres

The quiz

I took inspiration of such examples as Spotify and a game called Would You Rather. Me being the target audience too, I find Spotify visually pleasing when making a selection of genres appear distinct from each other. Would you Rather is my source of inspiration, because of the storytelling-ish approach in their questions that also hint at how you have to answer them. A or B.

High fidelity prototype

I let the booklovers to their fate with the tablet to see how they interact both fluently and confidently with the screens. This resulted in three insights that were the most important:

High fidelity prototype

The search result is basically then a continuation of the previous designs, thereby easily completing the entire interface flow to conduct usability test.

“Too soon I am dropped into the filter menu. I don’t even know what the goal is of all this?”

Fail

“The quiz goes too fast! Not clear if I chose right”

Fail

“I love the colourful designs. It feels very welcoming to me”

Win

From the two fails I reckon that additional elements/ wireframes are needed. A tutorial and an answer confirmation.

An answer confirmation

Before, the quiz went from one statement/ question to the other in a split second. There was no calmness to it anymore which meant you had to read and read and read and not allowed a pause.

To move things slower, I added a frame in which the selected answer would take over the whole screen and giving it a fun little graphic to go with it. This made it more visually too.

Additionally I changed up the hierarchy a bit to enhance readability to more easily separate the statement and the two options from each other.

A tutorial

With the tutorial the user gets introduced to the Augment o’ Search. Also making clear what the goal is. During this, there are indications of how long the tutorial is and you are able to skip this part at any time to comply with flexible navigation.

After this addition, many users did not feel like they were being left in the dark anymore the next time they used it.

The search result

After completing the three part quiz, a recommendation is given on a book that would best suit you based on your favourite genres and answers.

This button is how you can start the AR interaction in order to locate the recommendation inside the bookstore!

The exposition

When it comes to presenting my work I put three things up front, the Topic, Outcome and Process (TOP). I had a lot of fun creating the decoration for my exposition, because I couldn’t bring an entire bookshelf with me to replicate that bookstore experience. BUT... I could bring 30 kilos worth of the books I own to school and create a bookcase myself.

Topic

I find it important that you can see what the topic is about from afar. A big bookbase therefore got a lot of attention.

Outcome

I placed the tablet of the Augment o’ Search on eye-level. This made for easy interaction with the prototype.

Process

I decorated the bookcase with a lot of research results. These explaining the conclusions that led me to the solution.

A filter: The first step will be to select your favourite genre(s) before diving deeper into specifics.
A quiz: The search result will be based on the answers given to 3 statements/ questions max. These being about personality.
A search result: This reveals only the title, cover and short description of the book. From here the AR function can be used.

The interface part exists out of three main wireframes, but how to design these?

Instead of actually creating sketches for these wireframes I wanted to try something new that I learned from Youwe Agency where I did my 3rd year internship. At Youwe we often immediately started designing on a high fidelity level. Now I want to try this out once more by first finding inspiration in order to apply the design principles.

The flowchart of the interface

As I stated before, the interface needs a personal and story driven search engine, but that isn’t all. To get a broader sense of the necessary wireframes to get from A to B I made a flowchart and in the example below I zoom in on the part of the interface.

Fig 4 | Close-up of the interface section in the flowchart.

Design principles

Home

Cases

Museum

About

Let’s start this journey

“How might we help young adult book lovers make a more targeted choice in what a bookstore has to offer?”

Motivation & context

Literature

I once met my favourite author, Thomas Olde Heuvelt, but finding a perfect read is still hard.

Augmented Reality

When Apple released the Vision Pro I wondered what more could be done in this digital world.

Augment o’ search

“More and more young adults search endlessly in a labyrinth of books, but with the guidance of Augmented Reality each step will lead them closer to the perfect read”

Problem statement

When I walk past bookshelves I see thousands of options, but I can’t bare the weight of making a choice. “Which book shall I buy?“ There must be a quicker way of doing this, right?

Goal statement

Thanks to AR technology I can quickly assess whether a book suits my preferences and interests, facilitating my need of improving the accessibility and enjoyment of literature.

Enter a bookstore, get your tablet

Easy tutorial

Select your

favourites

design phase

Innovation

Stefan Haaring

Home

Cases

Museum

About

the finishline

Design result

Booklovers struggle when browsing a bookshelf!

I documented the interviews by taking photo’s and quoting them, but by measuring their emotions throughout, I found out the target audience struggles the most whilst browsing a bookshelf, because of how much a bookstore has to offer.

Turning it into a customer journey

Note: The “Design solution” is the moment in the customer journey where they experience a dent in their emotional experience.

Customer journey interviews

To get a better idea of how my respondents act and go about their way when shopping for a book, I joined them on their journey, combining it with an interview. Looking ahead of schedule, the idea is to create a customer journey and a persona.

I really like my design for the persona, because it is structurised. However, I deem it as an information overload, which is why I will highlight the following three points that contain the parts that I take with me in the conceptfase:

That moment when you feel the weight and flip through the pages, makes me say ‘I want this book!’

Needs & Goals 2

When it’s too busy, I can’t concentrate

Needs & Goals 2

The choice is difficult, because I already have a lot of nice stuff on my own bookshelf

Needs & Goals 3

Insight cards

To my surprise, these kind of customer journey interviews allowed me to see their emotions and behaviours change up close like I was standing in their shoes. The reasons they provided for these changes allowed me to delve deeper into what is important for them to improve their experience of browsing through a bookshelf.

Behaviour

insightcard 3

Comparing

I want to pick up a book so I can focus better on the quality.

Their most important feeling

Their most important behaviour

In a potential design solution I want to help them browse by allowing them to use their personality as a way of searching.

In a potential design solution I want to combine the physicality of picking up books with using technology to get to that point.

Emotion

insightcard 3

Hesitation

There is a lot to choose from and when assessing I have to carefully consider what I really want.

Quantitive research about the booklover

In my first design question I stated: “How might we integrate AR for booklovers to find a potential book faster?” which raised the question of whether they want to improve the speed of their visits to the bookstore. To answer that, I made a survey and shared it using my social media channels. When I make plans to approach the target audience I always make sure of two things:

The screener

I often start with a screener in which I ask the respondent 1-3 questions to determine if they belong to the target audience.

The topics

I divide the questionnaire into topics. This makes it clearer to scan and for the respondents to set expectations for its length.

Survey results

How old are you?

61.1% is between the age of 15-24.

Where do you get your books from?

38,9% rather shops on location than online.

How long do you spend shopping?

44,4% finds they shop briefly.

How satisfied are you with this?

61,1% is generally satisfied.

In short, my target audience are young adults for whom making the shopping experience quicker is not necessary. However, most of them rather shop at a bookstore which is why I now tend to dive into their shopping experience to find a new touchpoint for a design solution I can focus on in order to integrate Augmented Reality.

Persona

When I divided all my research into a customer journey and insight cards I realised I needed to bring together the findings I do and do not want to use. Since both of these are focused on booklovers and their deeper motivations, I believe a persona will do just the trick in order to bring together what truly matters.

research phase

Data-visualisation

Creating prototypes

During a one-week design sprint, I explored Augmented Reality at three levels of immersion, imagining AR glasses as a daily tool like smartphones. I illustrated this through storyboards with each concept taking place in the "browsing a bookshelf" phase as seen in the Customer Journey. The only difference between them is that one occurs at the start, one in the middle, and one at the end of the phase.

Winner, winner, chicken dinner!

My extended way of prototyping all three concept in one continues flow with an audience won me the Prototype Party, but most importantly, I found out that the Augment o’ Search was most favoured aside from a few needed adjustments. The following adjustments are a combination of all pros while simultaneously tackling the cons:

AR glasses is a no-go in this timeline. A more commonly used replacement device would do.

A personal and story driven search engine to soften the trouble of finding the perfect read.

AR guides you to the book from the search result which is where the concept then ends, so you’ll pick up the book yourself.

AR Search Engine

PROS:

My search results are highlighted in the bookshelves.

CONS:

No way to filter on preferences.
Too direct.
Searching by title, author or ISBN is as difficult as browsing books normally.

Augment o’ Search

PROS:

It’s very balanced between the physical and the digital world.
Makes reading book information much easier.

CONS:

Prevents you from picking up a book even though this is very important for booklovers.

Ambience & Experience

PROS:

Turns the discovering of books into a story driven experience.

CONS:

People are lesser aware of being in the real world.
Too overwhelming.
I don’t see myself wearing AR glasses for this any time soon.

Creative session

How will the AR guidance look like?

This is the question that became the starting point of a short but powerful creative session, because I really needed the help of fellow designers to help me come up with an idea for the the visuals you see when Augmented Reality guides you.

I used a method called: Crazy 8. This, quickly resulted in 40 drawings (8x5) and the best ones included 3D elements of either the book or particles in theme of the book, like magic trails for fantasy genres to highlight the book in the bookshelf.

Note: Participants of the Crazy 8 method.

fig.3 | A combination of the drawings that were considered “the best”

Following AR workshops

Continuing this trend of Augmented Reality, I followed workshops in AR, VR and MR. During this I built my very first AR interaction and to my surprise it wasn’t that difficult. Although it was still very basic, it was enough to sell the concept.

A tablet as replacement device

During the workshops I tried out the Hololens 2 and it often didn’t accurately track my hands. When I used a tablet to create my AR interactions on it gave it an extra layer of physical touch and made using it much easier.

This means the customer would have to obtain a tablet in some way, but where..?

AR guidance

For the third checkpoint I had basically already completed this part of the high fidelity prototype thanks to following a workshop in AR. This of course being the AR guidance you receive to locate where your search result is in the bookstore.

However, it begged the question: “What will the interface of the Augment o’ Search look like?”

This brings me to the Create phase for the interface.

Customer flow

The old situation of a visit to the bookstore is usually met with a lot of wandering around until the booklover comes across a perfect read. Since the booklover often makes an unprepared visit to the bookstore, they would never have a tablet of sorts with them, therefore, the Augment o’ Search is obtainable at the information desk. Creating an entire new “checkpoints” in the flow.

1. The cash register and the information desk where the booklover can obtain the tablet.

2. The lounge where the booklover can concentrate while using the tablet.

3. The location of the book the booklover will buy

Old (chaotic) situation in a bookstore

Display table

Display

Display
table

Bookcase