Waiterist Website Redesign — A UX Case Study
This case study is based on one of our freelance projects. This was my first real-world project. I did this project with my friend Aditya Mishra. We were approached by an older client of his, with the landing page to his business. The client’s exact words on his requirements were:
- “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 made us take up this project?
With what the client told us, we realized that it was a time-bound project since the business needed the website to be up and running as soon as possible.
As my first real-world project, this gave us an opportunity to work on a problem that impacted a real-world business and its needs. It was an opportunity to make an impact and learn in the process, so we took it up.
Framing a problem statement
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.
This presented us with a problem —
“ Redesign a professional website for a business to increase their audience interaction and retention when they visit the website. ”
Plan of Action
Once we had decided we were taking up the project, we wanted to map our plan of action so as to estimate how long it would take for us to deliver the designs to the client.
- Audit
- ID
- Customer Profiling
- Mood Board and Inspiration
- Wireframes
- Design
Audit Phase
As the first step, we did a detailed audit on the existing live website. We wanted to understand what the issues were with the existing website.
We decided to do two detailed audits. One which focused on the visual elements of the website and another which focused on the hierarchy, story, and content.
The things we identified in the audit for the visual elements of the website were:
Headings and text were not readable at various places
Top Nav Bar was not distinguishable
Icons were not consistent and hard to understand
The website took up the entire screen and looked packed and clumsy
The elements were not working well on phones or tablets.
The things we identified in the second audit of the website were:
There was no particular flow of content. Displayed in a random order
Adding sections in the features part of the website was not scalable for the future.
Content and sections were repeated on the website under different headings which were confusing the audience.
At this point, we understood that even before we started working on the visual elements of the website, we had to work on how the information needs to be organized in order to make it easier for the users to access and understand it.
This is when we started working on the Information Design of the website.
Information Architecture Design
In order 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 now helped us clean up the flow of the website and decide how much content would be shown on the landing page of the website and which sections would be shown 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.
Now that the Information Design was ready, we had a fun yet challenging task ahead of us! Mood boarding!
Mood Boarding
We had a lot of fun in this part of the project, but it was equally challenging.
Mood boarding, if not done right can confuse you and take up so much of your time! We learned this firsthand during this project.
Thanks to the advice from our mentor, we talked to the owner of the business and came up with a few words that described the persona of the business.
Clean, Simple, Modern, Serious.
These were the 4 words that we decided to focus on while we decided on the color palette and fonts for the website.
Knowing what we are looking for while mood boarding made out job so much easier to do.
The way we decided to work with colors was through interiors. My mentor usually does her mood boarding through fashion, and this gave me the inspiration to do it through interior design.
Since our keywords were simple, clean, and modern, we gravitated towards colors like green, blue, and shades of orange and red.
After playing around with a lot of colors and combinations, we finalized a few colors. The final decision would be made after implementation 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 1 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 of our sections and pages, we decided to move on to designing the visual interface. The client had told us that they are planning on launching a mobile application as well.
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.
We worked on maintaining consistency throughout the website and therefore worked on components that would help us in the process.
The final designs of the website are shown below.
This is the link to the website we designed which is now live. ( We are still working with the developers to make sure everything is implemented properly 😅 )
This project will always be special to me. This was my first real-world project and I learned a lot during it!
What we initially figured would be a simple redesign project for a landing page of a business later turned out to be a lot more than a simple redesign. It was to solve a problem in order to design a landing page that would eventually impact a business.
We submitted the designs to this project a few months ago, and now when I look back at it I feel like I could have done a way better job at it.
The way I chose to look at it is, we will never be perfect but what matters is we did our best and are only getting better as time passes.
If you made it to the end, thank you for sparing your time to read the case study. 😁
For any feedback or suggestion, you can drop a mail on: bhav.design@gmail.com
