Blue Angel Book
The Kinobar Steinfurt is a small family-owned bar in Steinfurt, Germany. The bar is very popular with students and is pretty packed on the weekends. To improve the progress on the bar, the owner wished to find a solution for their current recipe collection, the blue angel book.
All the names and pictures for this project were changed.
Job Consulting, concept and design
Client Kinobar Steinfurt / Hamer’s Parkcafe
Market B2B
Context
Alex owns a bar and is passionate about mixing drinks. So that her employees can also mix these drinks, she has a small notebook in which she writes down all recipes. At the beginning there were only a few recipes, but more and more ideas were added, recipes were modified and taken from the (seasonal) menu. Also, the booklet got a lot of wear from constant use and some recipes are hard to read.
Problems
People-Wise Problems
The book is very small, the staff have problems finding it. Sometimes it’s in a drawer, sometimes it’s behind some towels. Once it was in a fridge.
Finding the Book
It is difficult to find the desired recipe. There is no table of contents and even some of the recipes exist twice.
Finding a Recipe
Product-Wise Problems
Alex has to go to the bar every time she wants to maintain a recipe and change it there. When she remembers that she has written down the wrong kind of prosecco for Hugo, she has to drive 30 minutes to the bar.
Edit the Content
The book has been in existence for two years and is in daily use. The pages are covered with various stains and some pages have water damage. Also, the handwriting is not always legible as recipes are often altered.
Hard to Read
The recipes only contain the basic information. As a result, cocktails are served in the same glass, but the decoration is always placed differently. When regulars order their favourite drink, they don't always get it served the same way.
Presentation of Drinks
Solution
The best solution for this problem is to replace the book with something that’s easy to copy, can be used in different locations at the same time and everyone has easy access.
I decided together with Alex that a web app on a tablet would be the best solution for her and her team.
With that, she will be able to change and add recipes from home, while her staff is using the recipe collection in the bar. The development costs of a web app are relatively low in comparison to native apps and the bar already owns tablets. Furthermore the application can be extended to work on smaller devices at any time.
User research
Research
Before I started my design work, I observed Mike and his colleagues for two days. These are my key findings.
The bar is very popular. Mike and his colleagues have to mix the drinks quickly, especially at the weekend. They are annoyed that the cash register system is confusing and everything looks the same.
Stress
The bar has about 80 seats and almost all of them are occupied on the weekend. The lighting will be dimmed at sunset and there are sometimes sport events on the TVs which are on the walls around the bar.
Environment
It often happened that the book got lost and the staff had to search for it for a longer time. Sometimes two staff members had to use the book at the same time.
Handling the book
Userflow
Mike is using the product and wants to check recipes most of the time. Sometimes he sees some typos or wants to give other feedback to Alex.
Userflow Alex
Alex is the admin and has all rights to add, change and deactivate recipes.
Userflow Mike
Information architecture
Simplified information architecture - The overview, categories and search are globally accessible through the navigation.
Wireframing /
First Sketches
The first navigation sticks on the left site of the device and shows a structured overview of the user, navigation points and a search. The second one saves more space and lets the user focus on the content. The search is on top and the user profile and navigation pints are on the bottom. If there will be more than 5 categories, arrows will be shown and the user can scroll through the navigation points. I chose the first one, because Mike doesn’t have time on the weekends to scroll through a navigation bar to find the category he needs. He needs an easy and fast access to all the categories.
The overview shows the different Categories in a more visual way.
In the first wireframe, the categories will be displayed as pictures, and an arrow indicates that there are more underneath. The second wireframe has a category element which shows a picture and a text underneath. The last row is not completely shown, so the user knows there is more and they can scroll. I chose to go with the second one, so Alex won’t need to create extra thumbnails for the categories.
The detail page will show a recipe and a photo for the presentation.
Both have the name and a feedback button on top. The first one has a picture on the left and the recipe with ingredients and instructions on the right side. The second wireframe has a smaller picture with the instructions underneath on the left and the ingredients with recipe on the right side. I will go with the second one because there is more space for the content and it’s easier for the eye to scan the information.
Style
Font
I chose Avenir in different styles. It’s easy to read on digital devices and gives the product a modern look.
I chose dark colors, because the bar can be very dark in the evening. The accent color matches the branding of the bar.
Colors
#1F69D8
#616161
#2D2D2D
#FFFEFF
#171717
Screendesigns
The overview shows all the categories at once. Their cash register system has a similar overview, but only with text components. I added pictures for a faster scannability.
If Mike tabs on a category in the navigation he will have an overview of all the drinks of the chosen category. Pictures of the drinks help him to navigate.
The detail page of a drink was the most challenging part of this product. The top bar lets Mike navigate back to the overview and gives the opportunity of direct feedback to Alex using feedback button. The ingredients are the most important information for Mike and his colleges, thats why they have a lot of space.
This screen will be shown when the user tabs on the search in the navigation. If the user tabs on one of the suggestions in the dropdown, the detail page of the chosen drink will be shown.
If the user tabs on search and there is more than one recipe, a search results page will be shown.
MVP
As soon as the first iteration was technically implemented, the user testing for the "frontend" and the administration area could start. During this process, small UX and technical problems got discovered, which we fixed with the second iteration.
Resume
All in all the owner of the bar and their bar keepers are happy with this product and use it every day. It was a good decision that we chose a digital solution, because the owner opens a second bar in another town and can update both recipe collections easily at home.