THE PROBLEM
The bistro's old website felt very disorganized. The site wasn't mobile friendly, the menu was difficult to read and the images were outdated. Google Analytics was not setup to collect visitor data.
In addition to the problems that I saw, the owner mentioned that private party events were booked over the phone on pen and paper, and he wanted this to be done online by the customers themselves to minimize errors and save time. He also wanted the hiring process to be done online because he would post classified ads in newspapers and bulletin boards.
HIGH LEVEL TIMELINE
My budget was $400. I only had the month of September, 2019 to complete this task since the owner wanted the site up by October 1st.
MAKE OF THE TEAM
Me
KEY GOAL
Redesign the website so the information is clear, organized and easy to navigate.
THE SOLUTION
Using Figma and WordPress, I was able to redesign the website and launch the site on October 1, 2019. The private party form and the new careers page, made bookings and finding candidates less time consuming for the owner. By setting up Google Analytics, I was able to collect data and show the owner how he had gained new customers. The owner saw the value in redesigning the site and was happy with the result.
UNDERSTANDING THE USER
The bistro's customers are mostly women who are 60 years old and older (very wealthy senior citizens). They are not tech savvy, and required a website design that would be simple, easy to follow and not overwhelming.
BREAKING DOWN THE PROCESS
With a small budget and a tight timeline, I created wireframes, a new logo, and used WordPress.com to get the site up and running.
My first design idea was what I call now “Luc & Lucie’s”. This was my original idea, but the design was not appropriate for Frank & Betsie’s because it was too youthful and the vibe was wrong.
After scrapping my first idea, I went back to Figma to create wireframes (desktop/mobile). I wanted to make the site feel sophisticated, warm and feminine because the bistro feels like you're entering someone's home.
The bistro serves French and Californian cuisine so I thought wine, cheese and grapes would be applicable to both France and California. I felt that this approach would be appropriate for the new logo. The new logo established the colors that I wanted to use on the website and inspired the new homepage photo as well.
I also made sure that the font size would be readable, and the owner was helpful in this regard because he is 67 years old. The fonts that I thought would be readable, sophisticated and soft were:
-
Heading: Exo 2, semibold
-
Base font: Lora, regular
-
New logo font: Playfair Display, regular
Once the owner signed off on the new logo, I worked with the manager to establish the new menu content for the site. Most importantly, the menu had to be easy to view, and I made sure that the menu would not be in a PDF format. Other restaurants use PDFs because the internal team can update their menu very easily, but they are annoying for customers/users because PDFs can take too long to load and they can be hard to read on a mobile device. This would make the experience very frustrating and confusing for older users.
In addition, we rented professional photography equipment and in one day, took several photos. I edited them with Gimp, and they were ready to be uploaded.
Once I had the content, logo and photos ready to go, I decided to use WordPress.com to get the site up and running. I used WP because:
-
The annual price was $300 (under budget).
-
I would be able to create a responsive desktop and mobile site rapidly and with minimal difficulty.
-
I wanted to use a Content Management System to make updates quickly.
-
The restaurant templates were a quick way to show an example of what the website could look like to the owner.
Once the website was up and running, I tested the desktop and mobile site with the owner and staff. 2 laptops and a desktop were used for testing (Windows Operating System). In addition, I tested the mobile site with an iPhone 5, iPhone 6s Plus, iPhone 7, iPhone 11 and Android phone. The staff were able to easily access both the desktop and mobile site.
They were able to navigate to each page with no issues, they found the content to be very clear, and the owner found the website to be easy to read and organized.
THESE WERE SOME MAJOR LEARNINGS OR POINTS I WANTED TO CALL OUT
Don't be afraid to take a risk.
Taking the photos with zero experience, was a very risky thing to do because if it had failed that would have messed up the schedule, the budget and the site would have been a failure. Luckily, I was successful, learned a new skill, and realized how important the images are on site.
The power of a colorful button.
I learned how color isn't just about making things pretty. Color has a purpose and is especially helpful in pointing out what you want the user to do. Having a colored button draws the user's attention to a call to action like "View Dessert Menu". This was a very important discovery for me.
Listen to your users and empathize.
The owner said there were some people that couldn't find the Dessert page. This surprised me, but I had to see the site from the user's eyes. After careful thought, I put a button at the end of the lunch and dinner pages. By listening and empathizing, I saw an increase in the dessert page views in Google Analytics.