Project Role

  • Conducted User Research

  • Wireframed sketches on Figma

  • Prototyped product and created demo

  • Led visual design direction

  • Conducted Usability Testing

Tools

Figma

Project Length

Feb 2023 - May 2023

Project Type

Personal

The Krusty Krab website and app is an interface for customers to easily order their favourite meals from the popular local restaurant, The Krusty Krab.

What is The Krusty Krab website and app?

Overview

The only way to place an order was exclusively in-store. Today, most people are too busy to go in-store, wait in line, and wait for their order to be made. How can we fix this?

Problem

Give the people of Bikini Bottom an easier way to order from The Krusty Krab by designing a website and app that features a delivery and pick-up option.

Solution

Research Analysis

User Persona

To get a better idea of who the customer base of The Krusty Krab are, personas were created to get a better idea of their pain points and seek opportunities for them.

Fred represents the average Krusty Krab customer. They are a family person that does not have a lot of time on their hands between working and their families. Fred wants to be able to order his lunch more efficiently between jobs but is unable to do so currently.

User Journey Map

To take a closer look at Fred’s pain points interacting with The Krusty Krab, a user journey map was created to guide us through his thought process and what obstacles he encounters.

For this project, I took some time to research The Krusty Krab and took note of the colour palette and branding of the restaurant. The restaurant is very nautical, old school, and features a lot of light colours; so I decided that this would be the direction I would go on.

Prototype

With the research in mind, I set about configuring a website and app that would be, first and foremost, intuitive to the user.

I studied the websites and apps of 7 different fast food joints that are very familiar to us and did my best to create a website and app that was an amalgamation of all the things I think work for the 7 restaurants.

Most restaurants’ website/apps are very straight forward and simple to navigate through. As such, I created a simple sitemap for the website that would reflect this. The main feature is browsing the food selection and proceeding to checkout.

Once the wireframes were completed, I sent them off for user testing.

Wireframing

Website Wireframes Task Flow

App Wireframes Task Flow

After completing the wireframes, I conducted usability tests, on 10 participants, on both and adapted the next iteration with the feedback I was given. The most notable feedback given was that most users did not notice when an item was added to the cart, so I made a pop-up sign that would make this very obvious.

Usability Testing

  • Users did not like the tab that tells you item has been added (in website) because it makes it seems like it assumes you are done ordering

  • Have other methods of payment available

  • No easy way to get back to main menu (in app)

  • The design is very on brand for The Krusty Krab

Feedback:

Changes

With the feedback given from the 10 participants, I worked to make the changes that they found frustrating in the final product.

Here are the some of the most notable changes made:

Change 1:

Got rid of the tab that comes up when users add an item to their cart. This was a pain point for some users as it appeared that the website assumed the user was done with their order.

Instead I changed it to a pop-up image that the user can close and continue browsing if they like. It also acted as a small reminder to the customer that something was added to their cart.

Change 2:

Some users found it frustrating that other methods of payments were not offered. This was easily modified in the final product to include more cards as well as third party vendors.

Change 3:

To make it easier for users to navigate more easily, I added a home button to the bottom navigation var in the mobile version as there was so easy way to return to the main menu in the wireframes which was a pain point for a lot of the testers.

100% of the users that tested the website and app were able to get to the end goal which was to checkout with a Krabby Patty combo. This signifies that the flow of the website and app are intuitive enough that users generally know what to do and how to get to the end goal without much guidance.

20% of the users preferred the flow of the app better than the website.

Other metrics I would have loved to measure is rate of retention and overall rating of the website/app.

The Final Product

Evaluation

This was the first project that that this immense and a lot of time went behind into getting the website and app to the point where it is today. Improvements that can be made is iterate more on the design more, of course, but due to time this was not possible.

For the future, I am looking to make pages for the About Us, Careers, and Contact Us pages on the website; and for the app, the next task to tackle is the hamburger menu with all the correlating information from the website.

Improvements

Interactive Website Prototype

Interactive Mobile Prototype

Links

Disclaimer: It is important to note that this project was undertaken as a personal project. All SpongeBob SquarePants entities belong to Nickelodeon and no profit was made from this.