Overview

It was my first freelance project which I developed on Squarespace and designed on Figma. It took me three months to finish this project.

How it started?

Five years ago, Celeshmet Restaurant opened its doors in lower mainland, Vancouver. Since then, Behavar, the cofounder had wanted to have a website for a more professional brand presence. However, this project was repeatedly delayed until she met me at a party and learned that I had recently graduated from Brainstation as a UX Designer.

I was delighted when she asked me for help with the website! Not only I was getting a chance to put an independent, non-academic project on my portfolio but it also happened to be my favourite Persian eatery in Vancouver.

Fun Fact: Till date my review for Celeshmet on Google is the top viewed!

Problem Discovery

I asked Behavar why she wants this website, to which she replied, “because every restaurant has it”.

As a new designer it seemed like a totally valid reason. However, with the help of my mentor, I asked Behavar more questions to understand what problems she is hoping to resolve through the website. It turned out even with the description of the dishes on the menu, often the diverse clientele of Celeshmet struggled to fully picture the food. Hence, Behavar wanted to create a digital space where she could provide visuals of the items on the menu.

In addition to this, in just four years, Celeshmet has received numerous recognitions and badges in the culinary world and she wanted a digital shelf to show off all the certificates, news articles, and badges that she had received all these years.

Design Process

• Research

• Storyboard

• Sketches

• Wireframe

• Design

Research

Behavar had some inspirations, so it was a good starting point for me to understand what is it that she is looking for visually. I noticed that most of those websites had a clean and simple look.

Interview Insights

For primary research, I reached out to six individuals from diverse cultural backgrounds who liked to try new restaurants and cuisines in Metro Vancouver. These were some of the insights:

• Alyssa and Usman use the restaurant's website for pick up orders because third-party services like Uber Eats, SkipTheDishes charge fees to the restaurant

• Pinky, Dar and Ahana look for the menu and the photos of food and ambiance on the website as sometimes it is not clear on Google

• Sapna being an introvert likes to make reservations through the website

• Other comments mentioned that in most cases, location information, menu, photos and contact information are easily available on Google

Storyboard

Based on early meetings with Behavar, I crafted a story board to get myself started on the process, and the interview insights helped me tweak it. It was a very basic conversation between two friends, but it was enough to have inspiration for the sketches.

The idea was that two friends want to check out a recommended restaurant and while the restaurant sounds great, they want to check the menu, location and parking information.

Sketches

I wanted to focus more on the landing page and the menu, based on Behavar’s request and interview insights.

One thing that I had to decide was to bring food photo gallery on the front page or on the menu page. I scribbled some sketches and after discussing with Behavar, we thought it was a good idea to put the gallery on the menu page since the QR code which she is going to use in the restaurant will direct to the menu page of the website.

During the inspiration phase, I learnt that I needed to keep the other three pages; hours and location, our story and careers consistent in design. Although as we went along the design process, our story page kind of designed itself!

Customer Centric Approach

The idea of the content came from the reviews that Celeshmet has received on different platforms. While Celeshmet is a hidden gem, it has a loyal customer base not only in South Vancouver but also in the USA. Customers often used the terms like ‘warmth of home, streets of Tehran, hospitality, authentic Persian experience’. It was not hard to see that Celeshmet was not just a cuisine, it was an experience. This is exactly what I wanted to capture on the website. Other than the functionality of the website, the overall feel had to be matched by the vibe of the restaurant.

The language used on the website was inviting. The entire website was from Behavar’s perspective. I specially enjoyed writing the “our story” page of the website, where Behavar shares the story of how her mother came up with the name, Celeshmet and why it is so important for them to make their guests feel like a family.

Moodboard

I asked Behavar, how would she define the Celeshmet experience? Not to my surprise the reviews on Google and Yelp by the customers had described Celeshmet in similar words. Using the following keywords, I came up with a color palette:

“warm, welcoming, friendly, authentic, home, kind, family”

Calibrated Colour Palette

While the sketches did not take multiple rounds to get approved, colour injections were another story. I am not proud to confess that I may not have the best eye, or the aesthetic sense when it comes to colours. One after another hideous coloured version of the landing page, I finally landed on the following colour palette.

Navigating Squarespace

This project was my first real life experience of implementing a design on a website after my portfolio and I was not prepared for the limitations of a website builder! The menu page faced the brunt of this limitation.

While most of the website was designed considering the options on Squarespace, I did not follow the same rule for menu and designed the entire page keeping the user in mind. I was super proud of my menu page, and even the client fell in love with it. However, during the implementation process I found out that Squarespace had a very set design for menu.

Original Figma Designed Prototype

The idea was to have separate tabs for the four courses and the gallery of photos would change with the tabs. For example, under appetizers, there would be photos of only the appetizers and so on. Furthermore, the dietary descriptions (Vegetarian, Vegan, Vegan friendly) were nicely stacked in the same row. Overall, the design looked neat, aesthetic and put together.

Squarespace Implementation

Since Squarespace has a very specific design for the menu, achieving the same result was next to impossible. I researched and found out that coding could help with the tabs. Furthermore, the gallery could not be incorporated within the menu, which is why I opted for a beautiful photo of different items as the hero image. I added a consolidated photo gallery at the end of the menu, which would not change but gave us an option to put captions.

Other than that, the icons cannot be used in Squarespace; hence, I had to use alphabets for the dietary restriction which did not give the original slick look.

Design

Finally the day arrived, I got it right! Implementing the design on Squarespace was an uphill battle, but the final result did not disappoint:

Challenges

Learning Curve

Since it was my first real time project, it took me a while to get the hang of the UX process and adjusting the photos on website. Thankfully, I had a mentor who guided me along the way; while, it took me a long time to finish this project, I was able to understand the significance of following the UX process.

Selecting Colours

Hands down the biggest challenge for me in the entire process was to select a colour palette which was not only aesthetically pleasing but also truly represented the brand identity. After several, and I mean it several, iterations, I finally got the palette which was just perfect for the website.

Key Learnings

Power of Research

I had no idea how subconsciously we make decisions when it comes to something as simple as selecting a restaurant. The primary research had the most aha moments for me in store, from the delivery options to understanding why would anyone visit a website when everything is available on google, user interviews proved to be extremely insightful in the design process.

Professional Photos

I have to say, the beautiful photos taken by the photographer have elevated the design. I learnt a valuable lesson that professional photos are just as important for a successful website.