Creating a culinary design system
Svenska Brasserier had a vision: Breathe new life into their online presence across all their esteemed establishments. Recognizing the value of consistency and coherence, they sought to craft a unified digital experience that reflected the essence of each restaurant while maintaining a cohesive brand identity. To achieve this ambitious goal, the team of designers and developers set out on a mission to create a robust and scalable design system. This system comprised a collection of meticulously crafted components, each thoroughly designed to ensure consistency in both appearance and functionality across all websites.
Let's zoom in a little and take a closer look at the components. A lot of the restaurants share a common structure and the content is near identical, and like I've mentioned it's supposed to be. Look at this for example.
All sites have this two column component where the left one takes you to the menu and the right gives you a tour of the current artwork that's currently at display. This is because this is something most of these restaurants have in common. And this is something that's consistent throughout all the different pages. They're all built on the same components. Like, any component you can find on one website you could find on another.
So the goal is to have similar components and content throughout all the different sites but what if one component exists on one site, but not on the other? Yes this could happen. How did we keep track of all that? We had a canvas with all the restaurants in different columns, and on each row all of the components.
I have asked the client if I'm allowed to share that document, and I will update it if I am. However, it looked a little something like this. It was very easy to get an overview and spot when a component was missing somewhere for example. The project manager would often go like "xxx component on Teatergrillen does not exist on Luzette, can you please add it?". And even if I wasn't in charge of Luzette specifically it was just a matter of looking how the component is structured, and update it with the colors, fonts, borders etc of Luzette. It was so cool to see the global design system grow over time.
The client really appreciated taking this approach. It sped up production of creating the new websites for each restaurant, that's something we can all relate to I think. We want to get things done as fast as possible, right? Secondly it makes them think less about content creation. They know that "Menu goes here, art display goes here, events section here" etc.
And it's not like they HAVE to share the same structure. But if the client wants to add an event slider for example, they can just do that with ease without having to worry about how it'll look or whateever.
We've established that we have a system in place that we follow for each section and different components. But we don't want all the website to look the same. After all they're different restaurants with different cuisines, vibes, ambiences and so on. So what do we have left to work with to still give each restaurant their own personality? Well, to name a few I would say colors, typography, imagery, tone of voice for example. Let's take Teatergrillen for example as that was my main responsibility.
Teatergrillen's interface was envisioned to be immersed in dark mode, a specific request from the client. Personally, I embraced this directive wholeheartedly, as I love dark mode designs and believed it aligned perfectly with the ambiance Teatergrillen aims to convey. After all, it's the kind of establishment where hungry dinner guests would seek a relaxed and refined dining experience, particularly during the evening hours.
Additionally, the client desired Teatergrillen to exude "classic elegance, charm, and a hint of luxury and sophistication." Initially, as per the clients request, we experimented with various colors like gold, green, and purple to capture this essence. However, I soon encountered challenges.
Dark shades often lacked the necessary contrast, hampering readability and aesthetic appeal, while lighter tones veered towards a playful demeanor, losing the desired elegance. Though the golden hue showed promise, simplicity emerged as the guiding principle. Ultimately, we agreed that adding these colors felt overwhelming. A timeless palette of black and white adhering to the less-is-more ethos was the way to go.
One thing Teatergrillen already had before I got involved was a good photo album. They had a lot high quality, sharp images with a lot of vibrant colors in them of their dining areas, art, menu, bar and so on. I suggested that to really let the imagery shine this was also a reason to go with less prominent colors in the other elements.
The choice of typography plays a crucial role in conveying the desired aesthetic and personality of a brand. For Teatergrillen's digital identity, we aimed to strike a delicate balance between classic charm and modern sophistication.
To achieve this, we opted for Garamond Premier Pro for headings, evoking a sense of timeless elegance and refinement. Its graceful serifs and subtle contrasts exude sophistication, aligning perfectly with Teatergrillen's reputation as a culinary icon with a rich history.
Complementing Garamond Premier Pro, we selected Akzidenz-Grotesk BQ for body text. This sans-serif typeface offers a clean and contemporary appearance, enhancing readability while maintaining a sense of modernity. Its versatility allows for seamless integration across various digital platforms, ensuring consistency and coherence in the user experience.
So these are a few way we ensure each venue gets their own personality, while still maintaining consistent with the overall component system we've set up.
Working on this project I've really come to appreciate what a well crafted design system can do in terms of structure, coherency and efficiency. As a UX/UI-Designer I think it's so important to know how to "componentinize" (I hope you know what I mean by that 🤣). I'm really grateful to have worked on a project like this and come by this experience so early on in my career because it's a mindset I have taken with me for every project I have done ever since.
Whether it's in the context of a large scale project like this one, or just a simple re-design of a website I now always have in the back of my head "how do I create components for this?". All projects no matter how big or small they are needs a well structured component based design system. I know the devs thanks me for it (and the developer in me appreciates it as well), and it makes it easy for the clients to add new content to their websites. And from a user perspective it gives them a sense of stability and calm.