Fledermaus
Designing an app for the indie bookstores of Vienna
About the project
At the last stage of the UX Design Bootcamp at Talent Garden Vienna we had to develop a personal project of our choice.
I chose to commit my project to bookstores because of my personal background in the cultural industry – and because, being a bookworm myself, I really care about the topic!
Project overview
​
Target
​
-
Brick-and-mortar indie book retailers
-
Book lovers (and people who buy books)
​
​
Problems
​
-
Brick-and-mortar retailers are competing with Amazon on unlimited inventory and price
-
Smaller bookstores often competing with big box stores and online shoppers
-
A market characterized by high fragmentation and dispersion of the offer
-
Smaller bookstores often having old fashioned websites offering limited information
-
Customers may prefer to rely on big chains or online shopping if they can’t find the book they’re looking for in smaller bookstores
The objective?
To design an App for the indie bookstores of Vienna
and their customers.
The main feature would consist in a search engine which geolocates books and bookshops, allowing the user who is searching for a specific title to see a map of his/her area with the stores where that title is immediately available. The user can then place the order for the book and subsequently go and collect it at the designated shop.
​
​
Main goals:
-
Help establishing a win-win situation which would eventually benefit all the stakeholders involved: indie bookstores and customers
-
Facilitate access to book-related events, in order to reach those potential users who might be interested but are not apprised due to information dispersion
-
Provide suggestions on the choice of a book to prevent customers’ most common frustrations related to this topic
-
Help small retailers maximize their inventories
-
Provide small bookstores a tool to help them build a broader community of loyal customers
Market research & Interviews
​
Research goals:
-
Get a better overview of today’s brick-and-mortar bookstore market
-
Analyze the main differences between independent retail stores and big chains of book suppliers in Vienna, focusing on their current digital presence
-
Make a competitive research in order to find best and worst practices among bookshop apps.
I also wanted to look outside of the bookshop landscape for inspiration about navigation, product research, design and the use of geolocation (Airbnb was a primary source in this case).
​
Interviews:
​
5 one-on-one interviews focusing on the customer’s perspective.
The aim was to to know more about the interviewed’s experience of shopping at brick-and-mortar bookstores, analyze behaviours, motivations, pains and gains.
Indie bookstores
​
-
Rather than trying to compete with Amazon on unlimited inventory and price, indie bookstores think about curating an inventory of books and other articles that are very specific to the individual's taste, often linked to the tastes of those in the community, often connected to up-and-coming authors.
​
-
Events are a powerful driver through which people are brought into these spaces.
​
-
Focusing on the literary atmosphere allows the indie bookstore to remain authentic to the notion that they're there for the reading experience and for readers.
Bookstores in Vienna
​
Thalia and Morawa are the two main bookstore chains in Austria.
Users can browse and buy books directly from Thalia and Morawa's own website, and check the branded stores where the title is already available.
Both also provide an app, which offers the same services as the website but suffers some technical flaws.
Vienna boasts many independent bookstores – some of which are historical and well established businesses, often specialized in one specific niche segment – which nontheless suffer two major flaws:
-
Quite basic, outdated websites providing just fundamental information (no features such as those provided by Thalia and Morawa, for example)
-
Fragmented offer: lots of little businesses which altogether provide an exceptionally broad supply of different titles
True to the spirit of community builders, I found out that depsite such flaws most of these bookstores are very present and active on social media – especially Instagram.
Book search aggregators (online)
I was also inspired by some websites through which one can search for books across multiple e-shop platforms. These kind of search aggregators are only available for online inventories.
Interviews: main takeaways
​
I conducted interviews with 5 persons focusing on the customer’s perspective. My aim was to to know more about the interviewed’s experience of shopping at brick-and-mortar bookstores, analyze behaviours, motivations, pains and gains.
​
Here are summerized a few of the most frequent and compelling answers I received:
Value proposition
​
After conducting the research and the interviews, I was able to distill the information down into three categories to help inform my design: Jobs, Pains and Gains. These are the key pieces of information that I would use in order to design the solutions featured in the app.
​
In order to better organize these outputs, I created two different Value Proposition Canvases, one for each user that would eventually use the app, driving my design decions: bookshop customers and bookshop owners.
The left side of the canvas is occupied by three other areas: Products & Services, Gain creators, Pain relievers, where I described the features that I wanted to include in the app and how it would respond to each different user's needs unfolded on the right side.
Bookshop customers
Bookshop owners
Designing the UI
​
Designing a new app from scratch and not for an established brand, I did't have a specific set of design guidelines to rely on.
Since one theme that emerged from the interviews is the particularly relaxing atmoshpere of bookstores, I wanted to convey this same feeling also to my app. I order to reach this result I opted for a specific set of design choices: soft shades, warm colors with no striking contrasts, rounded corners, and a slightly warmer white hue for backgrounds (which is also reminescent of paper).
Moreover, in an effort to grab attention, I tried to have images POP off the page.
Colors
Primary grey
PRIMARY
#f87c4b
PRIMARY
#f87c4b
SECONDARY
#09a1ae
SECONDARY
#09a1ae
TERTIARY
#ffb699
TERTIARY
#ffb699
TEXT
#171717
TEXT
#171717
Second. grey
Card grey
Accents
Typeface
Avenir
Used for its high readability for those parts of text where the written content has to be easily scanned by the eye (paragraphs and other important copies)
Merriweather
A more old-fashioned typeface that's still very readable and conveys the "literary" aesthetics that's highly suitable in an app which is devoted to books. Mainly used for bigger titles and where there's need to draw the attention to distinctive elements of a text.
Wireframes
UI Kit
​
In order to create some guidelines for my high fidelity designs, I created a UI Kit (of wich here is shown a sample).
High-fidelity wireframes
​
So now it was time to put everything together! Because of the short time constraints I could not develop the whole system I had in mind, then I decided to highlight only some specific flows to show how I solved some of the research findings, goals, needs, pains and gains.
1. Homepage
​
The Home screen is conceived as the reader's inspirational area. Here the user can discover suggested contents which are displayed according to his/her tastes and preferences, deduced from the actions the user makes in the app – such as purchases, browsing history, items saved in the wishlist, pinned elements, favorite authors and so on.
​
Besides the suggested books, you can also find recommendations about authors you may like, and a news feed which updates with the latest literary events and when a new bookstore joins the Fledermaus network.
​
The bottom bar menu allows quick access to the global search, the orders cart and the favorite contents. The latter is supposed to be a section where you can manage all your saved items and set personalised notifications based on your tastes, but as in the case of the personal area (accessible from the top-left menu), I did not have time to develop it any further.
2. Book search: browsing products
​
When you input keywords in the global search, the app displays the results sorted in three categories: products, bookstores or events. You can also narrow down the results through the filtering options: when searching for products, for example, it's also possible to select a specific format (hardback, paperback or audiobook).
​
When you search for a book, different editions of the same title are displayed together, and when you open one details card, you still have the possibility to compare all of them easily by scrolling the carousel. Once you have made your choice, you can proceed to the next step of the search process.
3. Book search: geolocation and order
​
By entering your address (or picking one you had saved before) you allow the app to geolocate your position and display a map with all the indie bookstores where the title you want is phisically available.
​
The small red numbers appear when just a few copies are left in the bookstore's inventory, while another icon marks where special price reductions are applied. If you prefer, you can display the results by switching to 'list' view, and proceed to manually input the name of one bookstore or another, to quickly check if the title is available there.
It's always possible to switch the book's format and edition by changing the filtering settings – which also provide the option to include the bookstores with no availability: if you're a loyal customer of one specific bookstore which does not appear in the map, and you would like to order the prodcut from them anyway, you can do that!
​
Once you tap on the option of your choice, the bookstore's card is shown displaying contact information and further editions and formats that are also available there (you still have the possibility to change your mind and pick another one). From here, you can set the number of copies to put in your cart, and when you are satisfied, proceed to place the order or close the overlay and continue browsing.
4. Events
​
Events were the second most important aspect I wanted to take into consideration for my prototype.
The flow is quite similar to the book search. Take this example: an event related to the novel This Storm is going to be hosted at a Viennese booshop; so, once you input the keywords in the global search, the search results will include both the novel and the related event.
​
To ensure the user doesn't miss any chance to get to know about the event, a link to the event description is also displayed in the book details card. From here, you can read what the event is abuout, confirm your participation, or order a ticket if required. You can also pin the event and save it in your favourite items (this might be connected to the user's smartphone calendar, so the app would send push notifications to remind the event when the scheduled date is near).
​
Also, if you tap the bookshop's name, you are redirected to the bookshop's calendar of events (this page itself would be a section inside each bookshop's profile page, which I had no time to design).
Naming and logo design explorations
Why "Fledermaus"?
At one point while working on the project I also started considering appropriate names and logo designs that could best fit to my app. In my mind, the brand had to transmit and interwave two different ideas: the type of industry for which the app is conceived, and the peculiar identity of the city of Vienna.
​
Accordingly, I didn't really want to come up with names or logos that made too simplistic references to the idea of books, reading etc.: the brand needed to stand out, be very recognizable, and symbolize the relationship between Vienna and its historically renowned literary culture.
So, what better place for seeking inspiration than the splendid State Hall of the Austrian National Library, the biggest Baroque library in Europe?
The aim of my reconnaissance was to find some decorative elements, recurrent shapes, architectural patterns etc. that could drive my imagination and be used as a source of inspiration for my logo design. What eventually caught my attention were the refined friezed placques placed above the shelves, for the sake of sorting the books on display under different categories.
Placques were shaped in three main different classes, but all more or less shared an outline which immediately reminded me of something familiar: looking carefully, indeed, one could glimpse a likeness to the emblem of Batman (and I was probably biased in this, as he is my favorite super hero)!
The word Fledermaus (german transl. of bat) also resounds in the cultural history of Vienna. Not only it's the title of the viennese composer Johann Strauss's most famous operetta, Die Fledermaus (1874), but it's also the name of a popular avant-garde cabaret that was founded here in 1907, the Cabaret Fledermaus. So, the connection worked very well to me conceptually.
Next step then was using the placque as a blueprint for designing the logo. I really liked the elegance of the baroque spirals and coils, and I wanted to maintain them in the logo as well, as a mean to communicate the sense of a line with the city's tradition. But I also wanted to make it up-to-date, giving a more modern spin to it.
​
To recreate the shape by also conveying a good optical balance to it, I used a grid of circles proportionally sized with the golden ratio property.
Next steps
​
I believe that there are many ways that the app could continue to improve, and differentiate itself as a unique experience within the landcsape of Vienna's bookstores.
​
Below, I outline some of the ideas that I would look into next, or ways that the app would need to roll out — I had planned to develop them in the first stages of my project, but eventually I was obliged to focus just on the main ones because of the time constraints.
​
​
1) Communication system
​
This would have high priority since one of the main achievements of this app should be helping bookstore owners improve customer relationship and community building around their shop. It would be nice, for exemple, if they could send book recommendations to their most loyal customers, and acquire some sort of relaibility status by collecting feedbacks from the app users.
​
​
2) Peer-to-peer recommendations
​
I was also thinking about a feature allowing the user to send book recommendations to other peers with similar tastes and interests: it could be an area where you drop the request to be inspired regarding some specific genre/topic, and receive inputs from other users which can be upvoted or downvoted by the community (like Reddit).
​
​
3) Customizable notifications
​
This is an aspect I haven't explored much in my designs. How would the user know if a book he had searched for before is now available again at one or more bookstores? How would he be updated about the status of an order he placed? How would he know when a new book by a favourite author is going to be released?
Speaking of upcoming releases, initially I had planned to introduce a system by which users can customize their own notifications combining different sets of infos, such as author, publisher, category, series and topic. This feature would most likely be included in the 'Saved items' area, accessible from the main navigation bar.
​
​
4) Bookshop's profile page
​
All the bookshops which are part of the Fledermaus network should have their own profile page where users can get the most important information (opening hours, telephone number, email) and browse the calendar of hosted events.
Also, if you would like to quickly check the availability of a title in a specific shop you have in mind, you should be able to do that directly from the bookstore's profile page.