Redesigning Waiterist landing page — A UX case study
🗨️ Context
I designed the old website for a start-up called Waiterist in the early days of my design journey. A year later, when the start-up gained more traction, the website was in need of a redesign.
Waiterist is a US based B2B+B2C food industry startup. Any creative work related to this startup was under my hat. I mostly worked and improved UI of it’s app, website and dashboard.
The major difference in me as a designer was experience. I had grown in visual design, and also started focusing on usability, scalability and basic laws of user experience, which as an early stage designer I didn’t pay attention to.
This case study is based on one of my freelance projects which I completed with my friend Bhavana Vedantham and was done in August 2021.
📄 Client Requirement
And older client of mine approached me and he quoted:
- “At the moment the website looks like a concept that’s still not in the real world and getting developed and comes across as childish, they won’t take it seriously to make them money.”
- “Basically I want to use this to define to them how it fits into their environment depending on what kind of a guest it is and wants to know, okay I like this but how would it work in my environment”
🔎 What was the problem?
The client told us that they had been monitoring the user activity on the website and had realized that:
- The turnover from the website was lower than what they had expected.
- The customers were contacting them regarding information that was already displayed on the website.
- The business also wanted to give more information to the customers in the revised version of the website.
- The FAQ or Contact were the only actions being taken by customers.
Thereafter, we framed the problem statement which was —
“ Redesign a professional website for Waiterist to increase conversion through the website”
📐 Plan of Action
To have a structured and timely approach for the project, we made a brief action plan which consisted of the following steps.
- Audit
- Information Design/Architecture
- Mood Board and Inspiration
- Wireframes
- Design
🧪 UI Audit
We conducted two detailed audits of the existing live website to its issues with the existing website.
One focusing on the visual elements of the website, and another on the hierarchy, story, and content.
Here is a preview of what the website looked like.
Through the first audit (visual), we identified that:
- Headings and text were not readable at various places because of the choice of fonts
- Top Nav Bar was not distinguishable
- Icons were not consistent and hard to understand
- The website took up the entire screen and looked congested and clumsy
- The elements were not working well on phones or tablets or — the site wasn’t responsive.
Through the second audit (structure/storytelling), we realized that:
- There was no particular flow of content — it was displayed in a random order and it was confusing
- Adding sections in the features part of the website was not scalable for the future because of the entirely inconsistent design
- Content and sections reoccurred under different headings, confusing the audience
At this point, we had understood that before we started working on the visual elements of the website, we had to figure out how content and information should be organized to make it easier for users to access and understand it.
🧮 Information Architecture
To restructure the content based on the story the company wanted to portray, we first made a detailed list of the current structure and flow of the website.
This helped us understand where the information was being repeated and where the flow needed to be changed.
This enabled us to clean up the flow and decide what content would be shown on the landing page and which sections would appear on separate pages.
This detailed structure gave us a clear idea of what we needed, what we already have, and what was to be removed.
🪄 Mood boarding
We talked to the owner of the business and came up with a few words that described the company’s persona.
Clean — Simple — Modern — Serious
We focused on these 4 key words while deciding on the color palette and fonts for the website.
Knowing what we were looking for while mood boarding made our job much easier.
We decided to integrate colors through interiors so that we could imbibe a little feeling of match with the real world.
Since our keywords were simple, clean, and modern, we gravitated towards colors like green, blue, and shades of orange and red.
We decided to make sure that the color scheme and personality of the brand stay consistent throughout all platforms.
The finalized color palette for the brand is as shown below.
After playing around with a variety of colors and combinations, we shortlisted a few. The final decision would come after implementing them in the design.
📏 Wireframing
The next step was to create wireframes for the website. Since we had clearly laid out what the content on the website is going to be, it became easier to work on it one section at a time.
While wireframing, we stuck to one rule — Do not delete anything. We kept all of the iterations so as to track our thought process.
Once we had wireframes for each section and page, we moved on to designing the visual interface.
The client had told us that they were planning to launch a mobile application as well. So, we made sure that the color scheme and personality of the brand stayed consistent throughout all platforms.
As I mentioned earlier, we were consciously focusing on consistency. So, we played with ideas for components which we could later manipulate individually if our design aesthetic deviated from where we started.
💻 Final UI
After playing around and iterating for 8–10 days, we came up with our first draft, which we gradually converted into the final version after trying out the look of different sub-sections
Major changes made at a glance
- #1 Hero Section
Old Design:
New Design:
- Reworked on the navigation bar to include more sub pages like download section, hardware section etc. Such sections were moved to their dedicated sub pages so users can get more information about them.
- Added more information about the business and what they do on the hero section so users visiting the website could get a good idea of what the start-up was all about within seconds.
- Added a CTA to sign-up right away to immediately catch the eyes of returning users.
- Wrote a short text copy to attract users into watching a ‘short 90 second video’ so they would know exactly how much time they’d have to spend getting to know the platform.
I made the video shown in hero section as well. You can watch it here.
- #2 Features Section
Old Design:
New Design:
- Added USPs right after the hero section with supporting text to give users more context about the features.
- Added text ‘why waiterist’ to indicate users that these features are the USPs.
- Whittled the number of features down to the 4 most important/relatable ones that most users would be looking for.
- #3 Use Case Section
Old Design:
New Design:
- Improved overall text copy along with design.
- Added a sign up CTA to nudge user into taking an action.
- #4 Features List
Old Design:
New Design:
- Reduced redundancy of features scattered all over the website by putting them under a single toggleable section (activating on clicking the particular platform)
- Properly categorized what feature lays under what category to reduce confusion, as the initial pain point suggested that users were were contacting the business about features that were already listed because they were confused.
- #5 Cost Benefits Section
Old Design:
New Design:
- Did a basic design change to match this section with pricing.
- Reinforced that Waiterist will help the business save money through a text copy.
- #6 Sign Up Section
Old Design:
New Design:
- Reduced the amount of real estate taken up by the sign-up section.
- Added ‘Sign Up Now’ CTA to guide users to onboarding if they wanted to proceed after looking at the sign-up process.
- #7 Contact Us Section
Old Design:
New Design:
- Reworded and used ‘Partner with us’ to give users a sense of partnership with platform because empathy is an important aspect of gaining trust.
- Added a restaurant image to make users more connected with the food industry.
- #8 Footer
Old Design:
New Design:
- Reworked the footer to provide links to every page because the earlier footer lacked functionality.
Sub Pages
The following sub pages were also designed in addition to the landing page.
🪜 Iterations
Here are some snippets of the iterations we went through to improve several sections.
🧑💻 Link to the live website:
We even sat down with the developers to make sure the website was brought to life as accurately as possible. Due to a tight budget andtime crunch when it came to development, we didn’t get an exact replica of our design, but it was still largely acceptable.
The whole project, including development, took approx. 75 days to complete.
📌 Learnings & Conclusion
Completing this project was a fun and exciting journey. Although working with developers to ensure everything turned out pixel perfect proved difficult as first-timers, we came out of it as more experienced and well-rounded designers.
I realized that it is best to pre-plan what framework developers will use to design the site and create the design based on the constraints of that CSS framework
Since it was my first large-scale project with so many iterations, I also learnt that file management and naming of layers is very, very important.
Thank you for reading this far.
Feel free to drop any feedbacks.
You can connect with me on the following platforms.
LinkedIn
Mail: adit.ya@outlook.com
Website
