E-commerce design for La Dimension Fantastique — UX Case Study

La Dimension Fantastique is a bookstore specialized in the Fantastic genre. It was created by two passionate booklovers, Julien and Morgan, and it occupies an important place in the Parisian cultural landscape.

The team

Our team was composed of four UX/UI Designers : Victoria Malon Pierre, Avie Estetikadiati K, Kolianey Ang and me.

We worked on this project for 10 days.

Stakeholder interview

“We want to be more generalist than other specialized stores: we want to make Fantasy accessible to everyone.” Julien

We conducted a long Stakeholder Interview to understand Julien and Morgan’s needs, and those of their clients.

Julien and Morgan wanted to create a place where everyone could be curious about Fantasy, and they wanted to recreate this experience on their website.

We learned that their bookstore is mainly frequented by regulars, but many people also go there to find gifts. As in any major bookstore, and perhaps more than in other places, customers rely heavily on the advice of the two booksellers. They trust them with their eyes closed for their discoveries, they read a lot, and therefore come back often. During the Covid crisis, this pattern changed suddenly because bookstores, not recognized as essential businesses (this finally changed last friday), had to close. This is why our clients wanted to offer their customers a digital experience that was as close as possible to what they could experience when they came to the bookshop: strolling through a sharp selection and receiving reading advice.

Problem statement

After our stakeholder interview and a benchmark of competitors (direct competitors but also museum and gallery bookstores such as the Moma’s bookstore, or Yvon Lambert bookshop), we defined a problem statement :

“La Dimension Fantastique customers need to find inspiration to order books online, because they like to rely on their bookseller’s recommendations even when they can’t come to the store.

We will know that we have reached our goal if the user can find very clearly, on the website and the application, the personal selection of his favorite bookseller.”

The site map

Before digging into the user interface we needed to define the best possible information architecture.

You can see below the illustration of our Site Map. Our intention was to make it simple, and to have a very fluid navigation despite the possibility to search very precisely thanks to the classic option of filtering.

We had an interesting debate about information architecture because we were not sure if we had to follow design standards or go with an approach more correlated to our business goals; La Dimension Fantastique had a strong identity that needed to be highlighted so we thought we should put the “About Us” section first. But on most bookstore websites, the navigational possibilities always started with the latest book releases. After a long debate, we decided to wait for the Usability Tests to make a decision, and the bookstore’s customers said they were extremely fond of new features, which solved the dilemma.

Our Mid-fidelity prototypes

Usability testing

“When I buy something I don’t like to be able to pay without having created a full account. I need to be able to change my payment options… it bothers me not to be able to see a history of my orders, to know that I’ve already bought something…”

We conducted Usability tests with six participants and gathered a lot of data, which we processed thanks to post-its on Mural, sorted by screen. Some returns were very recurrent. For example, most of our interviewees wanted the ability to bookmark articles as favorites. All found that it would be more appropriate to present the bookshop events one after the other in a chronological order, rather than in the form of a calendar. Because they did not want to have to go through the calendar to find events. However, they found it useful if it remained on the side. They also expected to be able to create an account and did not find it reassuring to pay without doing so. Finally, a feature that was requested by a user and that we thought would be interesting because it would lead to discovery and pique curiosity, is the suggestion of results in the Search Field. He rightly noticed that when you type “Castle”, for “The Castle in the Sky”, it would be very nice to discover all the other titles containing the word “castle”.

Brand Attributes and Moodboard

We had three brand attributes for La Dimension Fantastique: Imaginary, Sharing and Passionate. You can see below how we illustrated those words.

“Imaginary” comes through the abstract brain that could be an electric jellyfish and it can be found in all of the images because they are very dreamy.

“Sharing”, with the flying lanterns and the group around the fire.

“Passionate” with the intensity of images, the fire, the sunset between the mountains, the depth of the space images, the immensity of the starry Sky and the concentrated expression of the human figure.

It’s full of intense colors and it illustrates the vastitude of the imaginary world that can be found in the books and there are a lot of dark shades too because the fantastic genre is full of shadows.

Our style tile

We extracted two dark brand colors from the moodboard. We went for blue shades like the night sky, because the night is the moment for the imagination to go wild. Our pink accent color was inspired by the sunset sky, and the yellow one by earthy images like Mars, the sun and the desert sand. Our typo, Blake, is very special and conveys the unique universe of the shop. It was their original typo. And the neutral colors stand for simplicity and elegance, because books are smart.

For the selection of colors, we used very efficient tools: we chose the colors on Paletton, exported the base and then reworked it all together with Coolors.

We conducted a Desirability Test and the words our users selected were the exact ones we expected : “Imaginative”, “Cool”, “Original”, “Exciting” and “Friendly”, except for “Young” so we tried to make our design a bit more sharp and less childish.

Responsiveness

Adopting a Mobile First approach, we started designing the mobile version before the desktop website, as it’s easier to expand a design than to make it smaller.

From mobile to desktop, the burger menu turns into a horizontal header and a horizontal dropdown menu, and the “Click and Collect” buttons no longer display vertically but are next to each other horizontally. We have enlarged the book covers, because for most users they play an important role in their choice. And on the product page, we have also presented the elements more horizontally, with the text and the buttons to the right of the book cover, which has become much larger.

Our High-Fidelity prototype, commented

Outcomes and lessons

Collaborating with this team was a great pleasure, it was very fun and easy and we quickly found a great balance. The main lesson I learned this time was that it is useless to spend a lot of time wondering who has the right assumption when the usability tests will happen right after, and will confirm these assumptions or not. No matter how much one thinks he’s right, he can always be proven wrong by the tests. It’s a good thing to remember to save time and to shorten debates. But then, of course, it’s also important not to forget to write down any doubt that comes to mind, so as not to forget to include it in the test scenario.

UX/UI Designer, cinephile, author, singer and pastry fan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store