The bookstore
not so cool

An unusual case study
focused on mistakes

UX/UI

CASE STUDY

ATTENTION

This isn’t the usual case study where everything goes smoothly and the result is a cool app.

This is a journey in the dreams of a guy that wanted to learn UX design.

I prefer illustrate all the errors I committed just to demonstrate an important thing: beyond every system or method, the key point is always learning from mistakes.

The problem

I’m passionate about books. I read roughly 10 books a month. So when I started my journey across UX, I thought: “I want design an app to buy books”.

Find a new book to read could be an experience both exciting and annoying: you jump from a site to another, from a blog to Wikipedia and finally to an ecommerce. Just to repeat the cycle from the beginning.

To understand the idea of the app, you have to imagine three phases that occur before a purchase:

Limits

  • The app will be an ecommerce, so the most important metrics that guide the design are related to conversion.

  • It’s just the beginning. I want to plant the seed of an app that could grow and eventually embrace all the experience (the three phases).

  • It’s only in my head.

Methodology

I followed a classic methodology of design thinking:

1.EMPATHIZE

Methods

Competitor Analysis | Survey

Competitor Analysis

(a.k.a. how many ideas I can steal)

I studied the biggest competitors, Amazon and IBS. Below there are the key points useful for the app, deduced from the analysis:

  • Steal the Amazon’s great UX to design the flow of purchase
  • Copy IBS content strategy (articles and news about the world of books) to attract readers.

Survey/ Questionnaire

(annoying as many people as possible)

Areas Investigated:

  • How users find new ideas for books
  • What they consider to buy it
  • Opinions about services like: used books, the chance to get books on loan and a more extensive section to share opinions about books

 

I’ll show you the most important information segmented by total number of books read per year. I found a good niche for my product, but unfortunately I didn’t grab the opportunity.

What I would have done differently

  • Initially I began to investigate how to design an app to sell books. Now I would explore if I should build it: users really need another ecommerce?

  • Use the first survey of random people to find an opportunity or a niche. For example, start to explore the habits of who reads more than 10 books per year.

  • Examine better if there’s a problem to be solved: they really feel frustration looking for new books or stimuli? How they solve it habitually?

     

  • More extensive competitor analysis: what apps do they use to solve the problems identified?

ERROR INDICATOR

“Everyone is stupid except for me”

2.DEFINE

Methods

Empathy Map | Personas | Storyboard | Customer Journey

Important Premise

Define user’s problem without a good research it’s like my birthday with no existential crisis: it’s a bit weird with a slightly sense of emptiness.

All the methods that I used in this phase are really good to focus better the users, the problem they face and the context where it appears.

Actually I empathize and define the problem of imaginary users that exist only in my head: maybe it could seem useless, but now I’m getting along with my other twelve personalities.

Personas’ tasks and problems could be synthetized as the cycle of the buying process disguided in a customer journey: interest about something that lead to a content or a book in the app, with the happy ending of a purchase.

What I would have done differently

  • A well defined statement of what problems users have, what emotion are involved and currently how they solve them.

     

  • Establish a clear value proposition of the future product.

     

  • Define the ideal customer and focus to ideate a solution for a specific kind of user.

ERROR INDICATOR

“Harry you are supposed to grab the Golden Snitch, not swallow it”

3.IDEATE

Methods

Card Sorting | Sitemap | User Flow

Prejudice isn’t only a social problem

If you do the empathy and the define phases in a superficial way, you finish to put in place your preconceived ideas.

Practically speaking, till now I have no interesting information to guide the design. So I inadvertently started to think about the future app modeling it to the first idea that moved all to the process (the three phases).

For Purchase, I could copy and paste from Amazon. For Evaluation, I decided to insert only the reviews.

The only thing I had to design was the Inpiration phase: I could put articles, interviews and other stuff in the app, but how organize them? What structure I could use? How could I integrate the section?

Card Sorting

I performed a close card sorting test, with 23 cards and 5 categories.

The last ones reflect how I imagined in that moment the section of the app: the content separated from the books, with tab exclusively dedicated to research.

Reviewing it now, I feel bad about the poor test subjects that had to force cards in mad categories: I hope they didn’t suffer too much.

I was still uncertain about the architecture I could use: that uncertainty continued along the sitemap and the user flow.

What I would have done differently

  • A deep research and definition of the problem to know if the product could solve it with a totally different approach: for instance, it could be structured to facilitate the habitual ways the user follow to find inspiration, focusing on wayfinding.

     

  • If possible, go back to research if I can’t still visualize a good solution that fit the users’ mental models.

ERROR INDICATOR

“Mulholland Drive is more logical than these bunch of ********”

4.PROTOTYPE

Methods

Wireframe and Prototype using Figma

The skeleton in the closet

After the define phase, I was still in doubt about how organize the content section.

Forced to design the wireframes, I finally did a choice: group everything under a section and mark the articles with a symbol. It was like when you decide to tidy up something, but it finished only in hiding the chaos in a not visible place.

In this way I created problems in some possible user flows: for instance, if the user in any point of the session wants to get an opinion from articles, the only way to reach them are scrolling from the home or go back up from an article’s page (if he is already in one).

Register Account

Home

Product’s page

5.TESTING

Methods

Usability Test

First of all: they can buy?

The first usability test explored main tasks:

  • registration process
  • search a book
  • checkout process
  • buy a book in the wishlist

 

As mentioned above, the most important metrics are related to conversions: so the app has to be functional and easy to use.

All the partecipants completed the tasks with no major issue: there were only slightly deviations from the flow or hesitations that suggested me some changes.

The weirdo box

(a.k.a. my last will and testament)

I want to spend some words for a mistake that could be easily done: trust everything people say.

A partecipant, asked to buy the book, tapped the icon of the cart. I investigated and the reply was that she expected to open the cart and then buy book from there, exaclty like how she did on Amazon.

I was astonished and verified later, finding obviously nothing like a flow described.

There could be different interpretations to explain the behaviour, but we’ll never know because I didn’t investigate well.

I tried to fix this unclear possibility with a misleading solution, worst than the problem. A box that could appear only if a user tap on the icon cart, when she is in a product page, but she had nothing into the cart.

Before

After

What I would have done differently

  • Unfortunately I tested only the purchase process, because it was the only clear part in my mind. Assign more task that cover all the user journey could be useful to find immediately other problems.

     

  • Set a task to explore how a user should use the content articles could have shown that the information architecture needed a new analysis.

ERROR INDICATOR

“Frodo please gets rid of that ******* ring”

6.VISUAL

Methods

UI Kit

What guided the style

The choices about UI style were derived from a list of characteristics that the app would have had:

  • simple, functional and easy to use
  • sober and elegant
  • modern
  • supportive but not intrusive

I’ll present only the screen of three sections. The prototype is fully available at the end of the case study.

LOGIN

PROFILE

CHECKOUT

7.TESTING

Methods

Usability Test

Another round of usability test

I was creating content guidelines and redefining the copy and microcopy when I decided to conduct an usability test to examin tasks that require an interaction with texts.

How to confuse users

(tutorial 100% working)

I found out a phenomen that I cannot immediately share with you:

if you put a button in an uncommon place, with a microcopy that doesn’t specify the action, for a feature that users don’t know and maybe never used before, what do you obtain?

That they will be confused and procede with a trials and errors method. Incredible, isn’t it?

Before

After

Interactive Prototype

CONCLUSIONS

Overall the experience I learned lots of things, but one essential concept resume the entire project.

I could iterate over and over again, but there’s an issue that undermine the structural solidity of the project: it’s another ecommerce with identical features. The app requires a deep pivot to aim at the real need of the user, if there’s one, and try to find a niche.

Other projects

JK Challenge

An innovative way to evaluate applicants and a great opportunity to show my approach.