Preparations for the herbs and spices kit back in December. The idea turned out to be genius as we shipped hundreds of these during the month.
Francesco de Lange
Digital Product Designer
35 Jaar
De Lachende Javaan
Keeping a restaurant going during the pandemic
Introduction
Back in October 2020, during one of my shifts working at Indonesian restaurant De Lachende Javaan — my student side-job — the Dutch government issued an immediate closure of all restaurants following a rise in COVID-19 cases in The Netherlands. This meant that the restaurant would be closed for the foreseeable future (it's still closed at the time of writing, march 2021!) and would experience a significant revenue loss.
After hearing about the closure I contacted Frans Helling, owner of the restaurant, and proposed him to start a collaboration in order to make creative use of our new-found free time and try to make up for the financial losses of the restaurant. Frans and I both like to take on new challenges in which we can express our creativity, so he immediately accepted.
De Lachende Javaan would be turning 35 years old in december 2020 but Frans hadn't yet made any celebration plans. The closure of the restaurant meant we wouldn't be able to hold an anniversary event, which led us to explore alternative ways of celebrating the anniversary. This gave me the chance to put my UX design skills to the test and bring the experience of dining at De Lachende Javaan in our guest's homes in a new, digital way. With this idea as our goal, the project '35 years of De Lachende Javaan' was born.
About De Lachende Javaan
De Lachende Javaan is an Indonesian restaurant in Haarlem, The Netherlands. It was founded in 1985 by the brothers Frans, Hendrik and Johan Helling along with their mother, who was in charge of the kitchen staff. 35 years later the restaurant is still a family-run business and has a strong reputation in the Haarlem area.
De Lachende Javaan is not only a restaurant but also a place full of art, culture and untold stories. These elements are paramount to the dining experience at De Lachende Javaan and have been included in the project to bring a piece of the restaurant into the homes of our guests.
Project goals
As with every project, defining a clear set of goals helps me focus on the task at hand and deliver a product that meets the expectations of the stakeholders, which in this case are De Lachende Javaan as a business and its customers.
Product goals
Bring a piece of the Lachende Javaan dining experience into the homes of our guests
Goals for De Lachende Javaan
Give back to their current customers
Generate buzz and revenue during the restaurant's closure
Personal goals
Learn how to plan and manage a project with a tight deadline
Sharpen up my research abilities
Develop my interpersonal skills with other professionals
With this being my graduation project, I had more responsibility than usual. These were my roles during the project:
Project manager
UX/UI designer
Interaction designer
User researcher
As this is going to be quite a read, I've split the case study up in three different sections. Feel free to jump to the conclusion in case you just want to see the end results.
Research and concept
Cultural heritage
The first few weeks of the project were dedicated to researching what De Lachende Javaan had to offer in terms of inspiration for the project. To do this, Frans and I arranged multiple meetings to discuss possible concepts for the 35th anniversary of the restaurant. The main question we asked ourselves was as follows:
"How can we bring the experience of dining at De Lachende Javaan into the homes of our guests during the restaurant's closure?"
To answer this question, I gathered information about the restaurant's cultural and culinary heritage and brainstormed about how I could leverage it to build a digital and interactive product. I'll explain my findings in the next paragraphs.
The rijsttafel
Number one on the list of De Lachende Javaan's cultural heritage is the rijsttafel, an extensive meal that includes multiple dishes which are meant to be shared together with others. The restaurant's business revolves around the rijsttafel and rest assured, it's as delicious as it looks!
Three rooms, three historical periods
The restaurant is divided into three dining spaces where customers can eat. Each one has its own theme based on a specific period in Indonesian history and is furnished with matching furniture and artworks. Let's have a look at them:
Side room - Traditional Indonesian
This small room is furnished in traditional Indonesian style. Masks adorn the walls and there's a glass door which depicts a scene from Javanese theatre.
First floor - Tempo Doeloe
The restaurant's first floor is styled after a '30s setting and hosts a large collection of historical artifacts from the Dutch-Indonesian period. My personal favorite and a must-see for every designer, the art-deco posters on the walls are amazing.
Main room - Modern Indonesia
The walls of this room are filled with modern paintings. A prau, a typical Indonesian fishing boat, decorates the center of the room and stands as a metaphor for the culinary and cultural journey guests experience at De Lachende Javaan.
First ideas and thoughts
The rijsttafel and Indonesian history are intrinsically linked to each other: most Indonesian dishes find their origin in the cross-pollination with other cultures which the country has been in contact with throughout the centuries. The link between history and cuisine sparked the idea of putting the restaurant's dishes in a historical context and letting customers cook them at home.
With this basic concept in mind, I set out to ask our existing customers feedback about the concept and what they would like to see from the company in the near future.
Customer research
The target audience for this project were our existing customers. In order to design a product that met their requirements and expectations, I conducted a review analysis, made an online survey and interviewed them. These methods, both quantitative and qualitative, helped me gather insights around their habits and needs.
You can read more about my research on the following Notion pages (in Dutch):
⭐ Review analyse, 📊 De Lachende Javaan jubileum enquête and🎙️ Interviews.
Why not focus on acquiring new customers?
This is a topic Frans and I discussed multiple times throughout the project. De Lachende Javaan always welcomes new customers but is not actively looking for them because the restaurant is fully booked even on weekdays. For this reason the company preferred to use this project to give back to its existing customer base.
Target audience and persona
Based on the survey and the interviews, I set up a persona which I referred to multiple times throughout the project, especially when designing the wireframes for the prototype.
Target audience:
Existing guests of De Lachende Javaan of around 55 years old that are familiar with the Indonesian culture and also enjoy cooking. Their device of choice is their smartphone.
These people are already acquainted with Indonesian culture and want to learn more about the origin of the dishes we serve. They would also like to learn how to cook these dishes at home with recipes and videos to help them.
A point of attention is that they easily quit if the product is too complicated to use, so it's important that the instructions are clear and concise in order to keep them engaged.
Design Challenge
The needs of the company and its customers come together in the following design challenge:
How can Indonesian restaurant De Lachende Javaan bring its culinary heritage into the homes of its 55 year-old guests with a digital and interactive product, and stimulate them to cook Indonesian dishes?
Program of requirements
In order to keep a clear vision of what's needed to let the project succeed, I set up a PoR which you can view on this page (in Dutch).
The list was updated a few times during the project to accomodate for new insights and was eventually used to assess the final product.
The herbs and spices kit
During one of our meetings, Frans and I came up with the idea of letting our guests cook our meals at home. Since Indonesian spices are sometimes hard to come by, we decided to give customers some of the right ingredients to get them started.
Frans also told me he had a large collection of small ceramic pieces from Indonesia, one of which we could include with every order.
So the DLJ herbs and spices kit was born: a small ceramic decoration filled with the right herbs to cook our dishes at home. When asked about it, our guests reacted positively to the idea.
An excerpt from one of our meetings, illustrating the basic concept of the three-week promotion.
The concept
After brainstorming about lots of different ideas which you can read more about here, we settled on a concept based on the three historic periods of Indonesia from the various spaces I outlined earlier. The promotion ran for the first three weeks of December leading up to the year-end festivities. For each week, we published the following content as an add-on to the existing website of De Lachende Javaan:
An artwork from the restaurant's collection
A page with detailed information about the historic period
Three recipes with instructions, tips from our chefs and cooking videos
With each order they placed, guests received a herbs and spices kit which they could use to cook our meals at home
In addition to this content, we planned a contest where participants can upload a photo of their dishes they cook and win a meal for two at the restaurant.
The user insights that helped me polish the concept can be found on the Notion page 🎙️ Interviews.
Wrapping it up:
Introduce a new theme every week leading up to the Christmas holidays. So three weeks total with each its own theme, recipes and cooking videos.
Wireframes and visual style
The most important screens are those of the recipe detail page, ingredients and cooking instructions.
Wireframes
Having decided on a concept, I made a set of lo-fi wireframes in Adobe XD, which quickly transitioned into hi-fi versions as I gathered positive feedback from potential users.
Since our target audience prefers using their smartphone, I adopted a mobile-first approach for this design.
The most important part of the prototype from an information architecture perspective are the detail pages of the dishes: overview, ingredients and instructions. To design these, I researched other cooking and grocery websites and apps (🖥️ Recepten editors and 🖥️ Recepten websites).
I once again decided to adopt Material Design for the general style, since my familiarity with it consented me to design quickly as the deadline was fast approaching.
A few screens from version 0.9 can be seen on the right.
Left: the Lachende Javaan website stylesheet. Right: the proposed stylesheet for my prototype.
Visual identity
The visual style I chose for the prototype is loosely based on the one from the restaurant's website. Since there were no available guidelines for the visual style, I had the go-ahead from Frans to take some liberty and add a few flourishes which I thought complemented the overall mood of the restaurant well. Compared to the existing style, I added a lighter shade of navy blue which makes the color more apparent on mobile devices while retaining its elegance. The font-family was changed to a serif type in order to better match the restaurant's tone of voice and ambience.
The pages 🎨 Onderzoek naar visueel materiaal and 🖼️ Moodboard en visuele uitwerking walk you through my visual research proces. As with the other pages, these are also in Dutch.
Artworks
Wherever you look, at De Lachende Javaan there's always something interesting to see. The walls are decorated with an extensive art collection ranging from historical pieces to modern paintings. I chose the three most iconic artworks — one for every area/period — and used them as a 'cover image' for each week.
The artworks have been traced and reconstructed digitally based on photos and scans I took. I played around with the color hues and used a flat style to give everything a consistent look.
The megamendung pattern
A recurring pattern at De Lachende Javaan is the megamendung, a typical Indonesian cloud. Since it's part of the restaurant's branding, I used it as a decoration on the week selection screen.
The fruits of my visual research. Every week got its own artwork.
Final prototype
and conclusion
and conclusion
Differences between website and mobile prototype
There's a slight difference between the restaurant's actual website and the prototype I made for the graduation part of the project. Because of budget and time constraints, we had to cut certain features and microinteractions from the website. The most important content (recipes, photos and videos) stayed intact and was handed over along with a set of wireframes to Rock Lobster Syndicate, the website developer.
The flowchart on the right outlines the main differences between website and prototype.
De Lachende Javaan website
The restaurant's website was updated weekly throughout December. We made separate pages for the promotion and the different periods and recipes. Since this was a limited time promotion, these pages are no longer available. I have included them below as screenshots. Each period included a description of the particular era, three recipes with a cooking video and tips from our chefs.
Prototype - Testing and iterations
To discover potential usability problems, the prototype underwent four iterations before settling on a final design. It has been tested with available participants working at the restaurant and some people from outside as well, when possible. My initial plan was to test directly with guests coming in for takeaway orders, but the COVID-19 restrictions and the fact that the meals were almost always ready upon the guest's arrival made it hard to do so.
All tests were performed while taking great care of adhering to the COVID-19 rules. The appropriate 1,5 meter distance was maintained at all times while a camera recorded the test so I could watch it back afterwards.
If you're interested about the tests and my methodology, you can read more about it on the Notion page 📝 Usability testing.
Final prototype, version 4.1
This is the end result based on the tests and user feedback. You can try out the prototype via the following Adobe XD link, but keep in mind that you can only explore the content of the first week and the Babi Rica Rica recipe! I encourage you to try out the various features and microinteractions since I put a lot of effort into creating and polishing them.
In case you just want to see what the prototype looks like, I've prepared a detailed breakdown below.
Prototype - Interaction
The final prototype contains all functionality in order to show how the website could have looked like if we had more time to dedicate to the project. In this prototype, users can browse the different categories for each week, add recipes to their favorites, change ingredient amounts and participate in a contest in order to win a rice table for two. The prototype contains carefully crafted microinteractions in order to delight users while they use our service.
For the scope of this project, the prototype only covers the first week of the promotion. Descriptions and videos of the main interactions can be found below.
Week and theme selection
Users can swipe between the different artworks and select a week/theme. The artworks are placed next to one another as if they're placed on of the restaurant's walls. Swiping between them is enriched with a parallax effect, creating a depth effect.
Topics
After selecting a theme, users can browse different topics such as 'Information about the historical period', 'Herbs & spices box', 'Dishes' and 'Interviews'. These are sorted by importance. Dishes are sorted alphabetically with no other sorting options available since it's a short list.
Recipe detail page
On this page users can read more about the recipe they just selected, add it to their favorites or start cooking by selecting one of the bottom tabs. I chose to display the cooking time and the type of dish because I know from my own experience working at De Lachende Javaan that this is important information for our customers.
"Looks cool, but where's the back button?"
Since this a prototype for a mobile website, users can use their browser's back button in case they need to go back to a previous page.
Adding a recipe to favorites
This microinteraction is enhanced by a staggered animation which gives appropriate feedback in order to understand what's happening.
Navigating between tabs
The animation that accompanies switching from one tab to another helps give our guests a feeling for the context in which they're in while they navigate through different screens. The animation is mapped based on tab order.
Ingredients list
Users can change the amount of people they want to cook for and the amount of ingredients scales accordingly. Striking through one of the items on the list is reinforced through the use of animation. It's also possible to undo the strikethrough of multiple ingredients at once, while a button makes it possible to revert the action in case it's made by mistake.
Instructions
Moving through the different steps of the instructions is possible both by swiping through the steps as by tapping the steps' numbers on the right side of the screen. Results from user tests have indicated these are the preferred forms of interaction to scroll through the instructions.
Each recipe contains two tips from our chefs so people cooking at home can suit the dishes to their own needs and unleash their creativity. After all, Indonesian cuisine encourages experimentation with different variations of the same dish!
Uploading a photo
When they're done cooking, customers are prompted to snap a photo of the dish they just prepared and upload it to participate in the contest.
Users can submit a photo of the dish they've cooked by filling in a form. Only the most essential information is asked in order to be able to contact our customers in case they win. This is made clear upfront so users know what they can expect from us.
Based on test results, I enlarged the hitboxes in order to prevent frustration and make the prototype easier to use.
Prototype - Designing for 55+ years old
When making the transition from lo-fi to hi-fi, special care was put into making sure every screen would be easy to read and interact with for people older than 55. I have adjusted colors, contrast, font sizes and the size of interactive elements based on results from user tests.
While designing I also paid attention to ensure that contrast and legibility were kept high. For this, I used the Stark contrast checker in Adobe XD.
Conclusion
Looking back - Does the prototype meet the criteria?
The prototype has been well-received by both the end user and De Lachende Javaan itself. However, in order to establish if it meets the project's requirements, we have to test it against the criteria I set up during the research fase.
Criteria that were met successfully
The rijsttafel must be the main selling point of the product
The product must place the restaurant's dishes in a historical context
The product must contain recipe's of De Lachende Javaan's dishes
There must be an incentive in order to motivate our customers to cook
The product must be easy to use in order to maximize user engagement
Criteria the product didn't meet
The product must establish a clear link between the dishes and their historical origins
Final recommendations
The end product meets the most important criteria, but looking back I think we could've placed more emphasis on the historical origin of De Lachende Javaan's dishes. Some descriptions contain this information and some do not. However, this was the result of time constraints.
If the project were to be extended further, I would also like to take into account people's allergies and intolerances. The prototype already does this to a degree, but only with vegetarian and vegan meals. This is a subject that didn't come up during my research but is nonetheless an important topic that plays an important role during daily operations at De Lachende Javaan and needs paying attention to.
Conclusion and learnings
The project for the 35th anniversary of De Lachende Javaan has had a positive impact on the restaurant's revenue during the December period. We actively published the promotion on our social media channels and even managed to be featured in the local newspaper, Haarlems Dagblad, which no doubt contributed to a surge in orders. This has persisted for a short period into January but started declining shortly after that, which leads me to believe a long term plan is necessary to keep order numbers high throughout the pandemic and closing period of the restaurant.
As for the interactive prototype, it all the requirements except one and it answers the design challenge "How can Indonesian restaurant De Lachende Javaan bring its culinary heritage into the homes of its 55 year-old guests with a digital and interactive product, and stimulate them to cook Indonesian dishes?"
The prototype and the website help our customers learn more about our dishes and Indonesian history as a whole. The videos help them cook the recipes themselves and the photo contest serves as a strong incentive to do so (this has only been implemented in the prototype so far).
Being someone who loves both eating and cooking, I see the publishing of the restaurant's recipes as a logical next step for De Lachende Javaan in order to keep their success going. The dishes will probably not taste the same as when eating them at the restaurant, but people that like cooking will find added value in the fact they can now make their favorite dishes at home during the pandemic. Preparing East-Asian dishes can be a challenge but the results of this project show that this does not always have to be hard. The published recipes are easy and require little time to prepare and the prototype's interface gives users the right guidance in order to do so.
The content we produced for the anniversary will be reused and shared on the restaurant's social media channels in the near future to create interest and host an at-home cooking contest. The ultimate goal behind it is not only to generate buzz but also to get people come to the restaurant when it will eventually re-open.
210
Survey respondents
37
Screens
25%
Revenue increase
∞
Bowls of rice eaten