Background Information
Many restaurant consultancy websites are cluttered with excessive information and lack straightforward navigation. This often leaves new restaurant owners, who are struggling to establish their businesses, feeling overwhelmed and unsure of where to seek help.
Problem Statement
How might we design a website that effectively attracts and supports new restaurant owners, guiding them to turn their struggling concepts into profitable, self-sustaining businesses without causing confusion or frustration?
Solution
We aim to create a user-friendly website that empathizes with both new and current restaurant owners who feel lost. The website will provide clear, concise information and facilitate direct contact with consultancy services, ensuring a seamless and supportive user experience.
Discovery Research
Secondary Research
Before kicking off the project, I wanted to dive into some research, to figure out the who, what, where, when, and how of restaurant owners seeking out consultants. What drives them to feel like they need a consultant? What benefits do consultancies offer? What are the major struggles restaurant owners face when running their businesses? After 4 days of research, I found that the some of the main reasons people seek out consultants are:
Help hiring, training, and maintaining the proper staff.
Help with proper licenses needed to run their establishment.
Finding the right location for their establishment that is within budget and fits their target demographic
How and when to reach their break even point
Help with branding , marketing, setting up / running social media accounts
Inventory solutions
How to price and set up their menus
What are restauranteurs saying?
Continuing with the research stage, I decided to join a few restaurant owner Discord servers, to hear what kind of advice they were giving out, and what past owners had to say about owning / maintaining a restaurant. I wanted to hear first hand what pain points users felt with their businesses to better understand their need for consultants and what to emphasize on the website I was constructing.
Competitive Analysis:
Before creating personas and diving into ideation, I wanted to understand what restaurant consultancies generally offered. I wanted to know what made them stand out from others, and why people generally tend to seek help from consultants. I scoured the web for competitors specifically in the Washington / Pacific Northwest region , as well as larger, well known consultants nationwide.
Based on my analysis some of the competitor weaknesses were:
Several of the competitors strongly focus on chains or larger companies
Several competitors lack appeal to a more modern, younger audience / look very outdated
A couple of the direct competitors failed to go in depth as to what services they provided, and how the would help the user achieve their goals
Some opportunities presented from the analysis were:
Empathize with the user more. Explain how you have been there , and how you understand what it feels like to be confused.
Adding an up to date blog, showing that the stakeholder is actively working on their craft.
More detailed case studies showing restaurants before and after / explaining in depth how they helped clients grow.
Make the website more modern looking, and appealing so the users are not bored.
Competitive Analysis (cont.)
Below you can see a chart constructed listing out key features of the competitors websites. The chart helped me get an understanding in key themes the websites share, and areas in which they lack.
Synthesize and Define
Personas:
Using my research , I developed 2 personas that fit the general audience that would be seeking out help from a consultant in the Pacific Northwest.
Empathy Maps:
Using the personas created, I constructed empathy maps to better understand the emotions and thought process potential users might go through.
User Journey:
To get a better understanding of the route the users would take to find and register with a consultant , I developed a user journey map.
(I noticed a pattern in both interviewees , as well as from research from reading consultant website reviews that users are generally searching for the pricing to be listed, a free consultation, and proof of success from previous clients the consultancy has worked with)
Ideation & Creation
Sketches
To kick off the design process, I began with a crazy 8s exercise,in order to get the creative juices flowing and out some ideas down on paper. I then made more refined sketches , laid them out side by side, and selected features I found the most valuable from each sketch (using a star sticker) , and combined those features into a final paper wireframe.
The main goal I wanted to accomplish from sketching and creating paper wireframes was:
Creating a user flow that is simple, straightforward and helps users understand the key principles of what the business stands for , services they offer, and ability to quickly get in contact with a consultant.
For the user not to feel overwhelmed by information, creating a high drop off rate.
Digital Wireframes (Desktop)
Using Figma, I transformed my paper wireframes into a digital wireframe and then a low-fidelity prototype. I then gathered 4 users to test out the prototypes before making iterations based on their insights.
Mobile Wireframes
Since 50.48% of web traffic comes from mobile devices (BroadbandSearch 2022) , it is more than necessary to design a website for mobile as well. Below you can see the website optimized for mobile.
Testing and Iteration
Usability Testing
After creating the low fidelity prototype, I had 4 users go through and test their experience, and documented their insights. The most outstanding issues mentioned were:
"About us" image too large: A couple of the users claimed that the portraits in the 'about us' page were too distracting based on the size of it.
Navigation: Users stated that there should be a way to navigate the different pages without having to scroll all the way up to the navigation bar. I fixed the navigation bars position while scrolling, so the different pages were easily accessible at all times.
UI Design (Version 1)
After taking note of the usability issues and fixing them, I went on to design a high fidelity prototype using Figma.
Below the first rendition of the consultancy site is shown. Midway through the designing of the site, the stakeholders changed the name of the company to Centercut consulting , which entailed a refresh of the UI, and overall branding.
Finalize
Website rendition #2
Here we can see the landing page of the renovated UI for the website. The color scheme, branding, and overall UI for the site was refreshed , as well as made responsive and interactive for different screen sizes.
Website in Motion: