THINK OUTSIDE THE BOX

Sonja Reichel
5 min readMar 30, 2019

--

A NEW WEBSITE FOR BUCHBOX!, A NEIGHBORHOOD BOOKSTORE IN BERLIN

Task 2 -:-:- Week 2 -:-:- Ironhack Bootcamp Berlin -:-:-
Team of 4 (Germany, Israel, India, New Zealand)

:-:-:-:-:-:-:-:-:-:
BACKGROUND
With all the big online platforms and e-shops, it is vitally important for small local businesses to have an appealing, sound online presence and shop to remain competitive.

:-:-:-:-:-:-:-:-:-:
BUCHBOX!
ABOUT — THE SOUL OF BUCHBOX!
For our project we chose BUCHBOX!, a neighborhood bookstore with four branches in Berlin. The staff is very dedicated to promote its high-quality books to its customers and is very helpful when you visit the stores. The team knows its readers and books alike and has a rather small, but great choice of reads available in its stores.

Expect well-sorted books with recommendations displayed in the middle of the store you can grasp fast even if you don’t have much time. If you do have time the better because the team is always willing to talk to you and share its love for books.

This hands-on, modern approach is also a great advantage over huge bookstores. At BUCHBOX!, you can bond with the team in your neighborhood. If a book is unavailable, they order it for you and you can pick it up in the store the following day.

The big asset of BUCHBOX! is definitely its familiar atmosphere, the feeling you’re going somewhere you know meeting someone who knows what you enjoy reading.

GOALS
BUCHBOX! should enhance its online presence which doesn’t reflect how dynamic and modern the team is. In a nutshell, the goal is to expand BUCHBOX!’s e-shop reach and ensure that the website reflects

  • the personal bonds to its customers
  • the knowledge of and love for books
  • the quality selection of literature

As you can see here → www.buchboxberlin.de → the website lacks the dynamics the team and stores have. It is rather hard to navigate because it has no clear interface so that you get lost in subsections.

On the UI side, the feel neither reflects how dynamic and modern the team is nor does it show the high quality of the literature available, which is a pity because there is so much potential for the online presence to align with the physical stores’ hands-on approach.

:-:-:-:-:-:-:-:-:-:
NEW WEBSITE CONCEPT

SITEMAP AND CARD SORTING
We started with a paper sitemap, arranging labels in groups that we felt belonged together on the website. Like this, we also ensured we had all information required so we would not face a rude awakening at a later stage.

That’s the great thing about UX — although the final product is often a digital one there is a lot of paper work and sketching involved in the process

PRIMARY NAVIGATION
Our primary navigation is comprised of the labels ABOUT, OUTSIDE THE BOX and E-SHOP. ABOUT is where you find all basic information needed: from the team to the four store locations and their opening hours to an FAQ section. OUTSIDE THE BOX is the little extra, e.g. book reviews, interviews with authors, book releases and events taking place at the BUCHBOX! stores. In the E-SHOP you can buy a large variety of books but also stationery such as postcards and notebooks, as well as tickets for the paid events at BUCHBOX!.

CARD SORTING—LET THE USERS INSPIRE YOU
In a next step, we took the most important cards from our sitemap for several users to arrange them in a way that made sense to them. It was interesting to see that there is never a right or wrong in UX but several ways to approach a task or a problem. Most users created a similar navigation as the one we had in mind but our OUTSIDE THE BOX label proved to be a bit tricky for them. We will still keep it because it will be self-explaining once it is embedded in the site all the more as the store is named BUCHBOX! We think it will create a nice feel if we played with the word “BOX” even more.

USER FLOW OR — AN ILLUSTRATION OF MOVEMENT THROUGH A SYSTEM
Before coming up with our digital sitemap and low-fi prototype we created some user flows and user scenarios to check beforehand if the envisaged navigation of our website would work. The easiest part was the happy or sunny path, i.e. the perfect path (main actions on website) the user takes from A to B (their goal).

In a next step we thought of scenarios that could go wrong (e.g. password wrong, credit card not accepted etc.), and also looked at the various motivations for a user to use our product. Could they simply not go to the store because of a broken leg and had to order online instead, were they just in a Sunday reading mood looking for nothing in particular but interesting background information about their favorite authors and book releases, etc. which would eventually make them buy in the stores or online.

These scenarios along with personas help you build the who, what, when, where, and why of the product.

We think that it is important for the BUCHBOX! website to have this great additional information you get in the physical stores on the website, too. The information is already there, it just has to be displayed in a more prominent way.

We therefore suggest to lay out the whole site in a cleaner way and not overload it with too much information. On the landing page, a slider will highlight the latest book review, the next event, and the latest author interview.

If you scroll down, you will find clearly laid out sections with NEW BOOKS, UPCOMING EVENTS, and BOOK REVIEWS by the staff. In these sections, you will not only find information about the latest books and reviews but also an archive with older books and past events.

The primary navigation will no longer consist of seven but of three labels, which will also add to a cleaner and more modern look.

Simplify as much as possible by keeping as much information as needed!

Very top: mid-fi prototype sample page. Top: It all started on paper (low-fi prototype)

:-:-:-:-:-:-:-:-:-:
NEXT STEPS

If only we had more than just four days to work on this lovely project! Our next steps would be to create a UI, keeping the green color palette BUCHBOX! currently uses but giving it a little twist by changing the colors a bit to make them more modern.

The mid-fi prototype already shows a possible new logo I created for BUCHBOX!, which is more delicate than the current one while keeping a box as referral to the store’s name.

Right now, all I can do is say to get your books at BUCHBOX!, a lovely Kiezbuchhandlung (neighborhood bookstore) in Berlin!

--

--

Sonja Reichel

Senior UX writer & conversation designer based in Berlin. Author of the novel “364 Tage.”