--
It took me some years to develop the right workflow to confidently develop efficient software based on the end-user.
In this set of articles, I’m going to share with you a step by step guide on how we designed a website for a fine dining restaurant in Bahrain, Mahonia.
For those who are not familiar with the Middle East, Bahrain is a small archipelago in the Persian Gulf, connected to Saudi Arabia by a bridge. It may come as a surprise, but Bahrain is kind of liberal despite being a monarchy.
The Adliya neighbourhood is the social heart of the county, with a significant nightlife, restaurant, bars, and terraces. In one of their streets lives Mahonia, the hidden gem gastronomy restaurant in this part of the world. Its iconic sculptures, sumptuous decoration, eccentric walls, and exquisite service is known by everyone in the kingdom but enjoyed by only a few.
But it’s time for Mahonia to open their (online) gates to the world. We, OLLA The Agency, were summoned to lay out plans for their digital journey. We were to bring their prime offline experience to the online world, by leveraging their presence in Social Media platforms, promoting events, and designing a world-class website. This is what this article is about: How to replicate a country’s finest restaurant standards into a digital experience.
The challenge: To bring Mahonia’s top offline experience to the online world.
We will overcome this challenge following the best practice industry standard for digital product design. 1st Understand Client Universe, 2nd Focus on their Audience, 3rd Focus on the product: Functionalities (UX), and Look & feel (UI).
1. Understand Client Universe
1.1 Workshops
This is an alignment session phase for all the critical parts involved: the client aligning internally and our team aligning with them during the process.
We needed to make sure our client is 100% aligned on their goal and message as there’s always more than one person involved: stakeholders, partners, CEO & GM, etc. Most of the time, they think this part is unnecessary because all of them feel they personally and unanimously know the goal clearly. But soon enough they realize that it was clear only in their own minds.
The first session is always an eye-opener for the client on how necessary it is to dedicate some time to align the team before starting any project.
Meanwhile, I used this time to absorb as much information as possible about my client universe, their pain points, needs, likes, dislikes, team dynamics, and all the details that will guide me in delivering a successful digital product.
For the Mahonia alignment workshop, we invited the Head of Marketing and Communications, the General Manager, Front of house team, Kitchen team and the Marketing Agency (OLLA team).
In the beginning, the participants seemed reluctant and nervous, but eventually, they realized that I’m here to listen, not judge. I gave the participants post-its and time to fill them with their thoughts. Later, we discussed their post-its together and finally grouped them by categories.
The dialogue is always an open discussion, a conversation. I try to break hierarchies and make sure everyone is heard.
The workshop helps us define:
- Mission & Vision
- Key benefits & USP’s
- Brand Values
- Brand Perception
The sessions with the Mahonia team were inspiring, fun and very enriching experience. As always is. (I have to confess this is my favourite part!)
Outcome:
We discovered together key words that would lead the project.
Vision: To introduce true gastronomy to Bahrain
USP:
- Luxury cuisine
- A passionate team of storytellers
- Exclusive, sophisticated and safe environment
1.2 Brand personality (optional)
When I run branding workshops, I love to add an extra step to my UX journey that is very useful, but not always included, (you know, budget wins). In this case, we did the full show for Mahonia, we provide a brand personality and tone of voice.
This is a fascinating topic that I’ll write about one day, but as a summary, I can say that it is extremely useful for a brand to choose one of the 12 pre-defined brand personalities and base their communications on it.
It helps to keep a consistent tone of voice across platforms and channels and helps the different copywriters to be aligned with the main message and main business goals. Again, team alignment is the key to success.
1.3 Brand document & Client communication
It’s good to collect all these outcomes in a Brand Document and validate with the client on each step. During the workshop, the Brand Document is a dynamic document, we play around with words and concepts internally, and later we meet the client and refine again until we are fully satisfied with each word on it. Once it is approved I turn it into a PDF and I don’t let them make any changes on it for a period of time (My recommendation is stick to it for at least 6 months). It helps them to communicate only one message and be consistent.
Is very important to keep constant and fluid communication with your client, to avoid future misunderstanding and lose time and money on it.
At this point, you should be besties with your client, with your client’s secretary, with your client’s staff, and even the doormen of your client’s building. You should have met them at least 5 times (kick-off, workshop 1&2, workshop 3&4, personas and recap meeting). At least.
1.4 Benchmarking
All along, we have individual homework at the office. We do deep research on their universe.
- What are the industry trends?
- What are their competitors doing?
- What is the level of digitalization of their industry?
- What are the specifics of their region?
- How far can we reach digital transformation?
- What other industries are doing that we can learn from?
This part of the process is important and should be taken seriously. I always allow myself and my team two to five full working days to dedicate to research.
To collect all this info and ideas I suggest using Milanote, it’s a cool software that allows collecting images, text, websites from different sources. It even has a web click. Otherwise, Pinterest also works.
Outcome:
- The main insight from the research is that we have a great opportunity to make a visually impactful with Mahonia website. It’s hard to believe that most of the best restaurants in the world have a poor digital presence. Just some beautiful images, but not focus on user experience. (If you know any please feel free to share with me in the comments.)
- Something that caught my attention especially is that Paypal is perceived to be an unsafe payment gateway in Bahrain (although it is very secure and an industry leader) while local payment gateways are preferred. Don’t ask me why.
2. Focus on the audience
2.1 Persona.
At the same time that we were doing the workshops, we started creating personas. This would help us understand the client universe. To create personas we define the target audience first, and then we go deeper in each of the customer profiles.
We give them a name, write a realistic bio, and we focus on their needs, pain points and how we can help them achieve their goals. We also take notes about their lifestyle. All this info will give us ideas on how to approach the project.
For example, if your persona is a teenager it’s a good idea to let them customize their profile and include sharing settings. If your persona is a very busy person in their work environment, you want to make sure they can achieve their goal in your platform in two or three clicks.
Personas are a very popular tool in UX because they put us in the shoes of the user to identify their needs. It’s much better when we have actual user data, but if you don’t you should make assumptions. This is always a good exercise that will bring clarity in one way or another.
Outcome:
We realize after completing the personas that
- Some clients only come to Mahonia Lounge, but most of the potential customers don’t know that this even exists. 👉 We should promote the Lounge alone as an entry point to the restaurant.
- Some of Mahonia clients and potential clients are price-sensitive. 👉 We have to communicate better the process of making fine dining food, so they will understand the attention to details behind each dish and eventually find it to be a bargain!
- Most Mahonia clients get excited in advance, they want to explore the menu and start enjoying the journey. 👉 We should let them explore Mahonia dishes and the universe on the website.
2.1 Customer Journey
Customer journeys are a very popular UX tool because they always bring light to the project. As the name suggests, it’s about imagining what steps the customer (our personas) take before, during and after using our product or service. This will allow us to be fully ready to provide in advance.
Start by defining the steps that a user should take to complete their goals. This part is the hardest because it will define the entire exercise.
If you are lost at this point, ask Google for some help. There are examples from most of the industries that you can take inspiration from. Once this is done, take one persona and identify 1. Touchpoints (general), 2. Digital touchpoints, 3. User feeling, 4. Opportunities. Use a different Post-It colour and note them down, later will be easier to scan the information on the wall. And repeat it with all the personas.
For Mahonia, I did most of the personas on my own, because this exercise can be quite exhausting. Then I met my client, I explained the dynamics of the Customer Journey while doing the last persona together and I reviewed the rest. I asked her to challenge my assumptions and even think further. Still exhausting exercise, but unavoidable.
When the session is done, I like to record it. Some lazy times I just take a picture, but if it’s a big project I save it digitally. In the past I used excel files, now I become fancier and I use Miro(formerly Realtime Board). It’s a super cool AR tool that takes pictures, processes it and reads my handwriting. Most of the time at least.
Outcome:
- During this session, we validate some ideas I had during the persona workshop like users are excited in advance and want to explore the restaurant on the web before their diner.
- We should provide useful information easily, especially for non-Bahrain customers, — like links to Google maps.
- Promote Mahonia innovations actively through all online channels (websites, IG, newsletters) since we realize that when a client finishes their dinner, they are avid to see what is next and this keeps them engaged with online content.
- Great opportunity for business meetings.
- Loyals coming to the events and will always do. We just need to promote it well enough, with a dedicated landing page for example.
2.3 User Story Mapping.
Using Story Mapping is a great tool for software development, one of the key tools of Agile Methodology.
It helps to simplify complex projects and break it down into smaller tasks. It allows you to draw a line for the MVP (Minimum Valuable Product) that you will launch and start testing (and eventually iterating) with users.
Although I never skip this step in the process, for Mahonia I have to admit that was not much needed, since it’s not a complex software. The complexity of Mahonia project lies in bringing the premium offline experience to the online world but technically doesn’t have too much of a challenge. At least for now. (We have a super-secret project plan ahead, but that will be for another article).
So we did a soft-version of it. With my client, we put together on a wall with all the functionalities or ideas that we want to have in our software, with no limitation of technicalities, time, or budget.
Then I arranged it a logical way, organizing ideas by related concepts. This part should be done with the client, but she was not available, so I moved on by myself. When the structure seems logical and easy to digest, we met again and we draw the MVP line.
Outcome:
- Some very cool ideas, like adding Glossary of terms to explain technical fine dining terms, like molecular cuisine or aftertaste.
- We were able to draw the line for MVP, so the client knows what to expect for phase 1, but also knows that their big dreams will be achieved in a later stage.
3. Focus on the product
3.1. Mobile-first
I used to start designing for desktop view because it allows more creativity and impactful designs. But not anymore. And for sure not for Mahonia.
Around 75% of traffic comes from mobile, so I know where I have to focus; exploring mobile opportunities.
One of the uniqueness of mobile device experience is the navigation. Normally to navigate on mobile, the user taps on a burger icon and it opens the menu. That was our opportunity to make mobile shine. The printed version of Mahonia menu has a particular shape, it has a 3D pattern very recognizable. I took a picture and replicated it digitally, then I applied it to the mobile menu and … voila! We have a reason to love the mobile view now 😍. It also resonates with our objective of bringing amazing offline gastronomic experience into the digital world.
3.2. Self-exploring & horizontal scrolling
We wanted to allow users to self explore the Mahonia universe, but also create a light home page that is easy to consume.
We created dish-cards, wine-cards, cocktails-cards and art-cards. These cards allow the user to horizontally scroll for more info if they feel like it. Users who want to spend little time on the landing page and just have a look will get all the info in a blink. If they want to explore, it is also possible, but not required.
What we like about this technique is the experience it creates when you mix them all together. Example: cocktail-card + bite-card + art-cards it’s a totally different experience than a stater-card + main-card + main-card + main-card + desert+card. It also gives us the ability to tell different stories by mix and match cards. (We are storytellers, remember?)
3.3. Dedicated landing pages
A concept I wanted to explore is creating a dedicated landing page for each dish (lounge bites, starters, mains and desserts). The reason why is because users tend to think the price is expensive when it comes to fine dining, especially compared with the size of the actual dish.
But if they would know all the effort, exclusive ingredients, techniques and time that each dish required they would change their mind. And that was exactly my plan.
This also allows Mahonia to give visibility to their preferred suppliers and educate their people into molecular cuisine. If you remember the workshops we did at the beginning, sharing knowledge and compact family were one of their key values. This approach allowed us to tick these two boxes at once.
Actually three boxes.
Those landing pages also allowed our Marketing team to play with advanced SEO techniques.
When someone elsewhere is searching for a particular dish (ajoblanco for example) there are big chances that this landing page appears on the top of google search results based on relevance. This helps Mahonia expand their user base and create awareness about degustation in Bahrain. (Think Glocal, remember?)
That’s why at the end of the page, we have a carousel with a mix of cards, allowing self-exploration of the Mahonia universe. We expect users to “land” here without the filter of the home page, so we have to tell them what Mahonia is about without them knowing it. Brilliant, isn’t it?
4. Focus on the client
4.1 Feedback #1
So far so good, the experience is amazing and we tick all the boxes. But there is a but. The client finds it boring. In her words, “it is too simple”. No hard feelings, there is always a but.
As a designer, the worst thing you can do is fall in love with your design.
But, I did. I love the Neumorphic design on the dark scheme, I found it classy, sophisticated, premium and on-trend. Really on-trend! But the reality is that it isn’t Mahonia’s style. Mahonia lives in the Middle East, where the aesthetic canons are different from the western dominated ones. What works in Europe doesn’t work here, and that has been my major mistake. I’m designing a flat product for an Arabic target audience. Obviously it didn’t work, they found it plain, boring and too simple.
Actually now that I’m doing a retrospective I could have seen that coming. Mahonia space is more colourful, busy, ornamented and spicy than my designs. Now the challenge is to reinvent what has already been made, using what is already working (content card, dark scheme) and elevate to Mahonia style with Middle Eastern cultural emphasis.
The first approach was to bring Mahonia physical space to the homepage. I tried the collage formula, to combine the Mahonia universe all at once: the art, the lounge bites, the colourful velvet chairs, the impossible cocktails, the fresh flowers, and their signature dishes.
With the help of my design team, we changed the colour background into velvet dark blue and the menu into Mahonia purple. We also emphasized the custom made icons, and that made the gold pop up. Now it breathes a Mahonia sensual, detail-rich feeling. Don’t you think?
Conclusion
When you have a massive project and it feels overwhelming… put a process in place. Don’t procrastinate the process because it scares you, embrace it!
Lorinda Mamo used to say “every great design begins with an even better story.” I subscribe to her words. I would add “every great UX design begins with an even better user story.” Because this is what UX is about, to focus our efforts on understanding the end-user, understand their needs and paint point, anticipate them and delight them.
My passion is to make the end-user achieve their goal while my client achieves theirs. Above all, enjoy the journey.
Acknowledgements: Thanks Omer Rana for challenging me to write this article, to Zainab Meftah for helping out with the animated gifs, and to Ancita Sherel for the text edits. The biggest thanks to Aysha Balush for trusting in my process and giving me creative freedom. Any enquiries contact OLLA The Agency.
