Case Study: Mobile Usability Redefined

Untitled design (1).gif

As with all beginning designers we sometimes overlook what we think are small details, that lead to big usability issues. I got to see firsthand one of my own in practice.

Before taking the Ironhack UX/UI course I designed and launched the website for my hometown's busiest local restaurant, which I happened to also have been a server and manager at. Rib City Grill is a very traditional, family oriented establishment who's main clientele consists of non tech savvy users, (such as a lot of elderly individuals). 

Background

When the pandemic situation changed the world the way knew it the use of individual phones to access menus become imperative when dining. Suddenly I was waiting on tables who were utilizing the mobile website I had designed to make their orders, and unfortunately I had a front seat view of user frustration over a button I had seen as perfectly clear when designing.

The Problem

By changing the accessibility of the button user pain was eased, and less frustrated customers meant more returning visitors and higher profits. Staff productivity was also increased by not having to waste what little time servers. have at each table trying to explain how to use an online menu. As a result of the usability adjustments the mobile bounce rate was decreased by 22%.

The Outcome

  • User Persona

  • Heuristics Evaluation

  • Usability Testing

  • Button Redesign

  • Bounce Rate Optimization

Tools Used

Original Iteration

OLD menu button recording.gif

When first creating the Rib City website I hadn't taken into account the amount of mobile users, and was also not yet acquainted with a mobile first approach or designing for a user persona. In 2020 when the COVID pandemic changed everything suddenly all customers could only view the menu online via their own device to prevent the spread of disease. I designed the drop down menu in an aesthetic hamburger menu style, but didn't consider it may not be clear that was where you click to view the menu.

"UGH I can not figure out how to find this menu, can you please help me?"

While the client was quite pleased with the look of the website, the real test was to see how it played out with our regular users. Sadly this was a commonly uttered statement I heard when waiting on customers. Of course, they had no idea I had designed the site. Now having learned about UX I realized my error and knew a heuristics evaluation was overdue. 

Heuristics Evaluation

Upon Heuristically evaluating 3 issues became apparent:

  1. Feature Recognition - The menu button was not easily recognized by users to navigate to the food menu.

  2. Accessibility - Reading the menu options on the drop down menu was made hard by a font that was too small.

  3. User Control - The pages were quite long on mobile, and there was no return to top button to give the user control and ease while scrolling.

Now I knew with these issues in mind I needed to reimagine Rib City's main user persona to redesign for.

Image by Ravi Patel

User Persona

Ruth, 68

  • Recently upgraded to a smart phone

  • Eats at Rib City every Sunday

  • Hates when she forgets her glasses and can't read a menu

  • Loves not having to ask her family for help in navigating a website

2nd Iteration

Untitled design (2).gif

Redesigning with Ruth's needs in mind I solved the usability issues by:

1. Recreating the menu button to read MENU.

2. Increasing the menu font size to 24px.

3. Adding a return to top button when scrolling at any point on a page.

Usability Testing

Being a long time employee of the restaurant I was lucky to have a good rapport to test with the users. I tested with 20 individuals, and not a single had trouble finding the menu immediately, as well as said they had no issues easily reading the menu options or returning to the top of the page. SUCCESS!

Solution

By changing the Menu button to a recognizable state menu user frustration was completely alleviated. The other adjustments made the interface more readable and easily navigable. Not only did I never hear another confusion, but it saved myself and other servers time wasted at the table assisting customers, creating a more productive table service overall.

Lesson Learned

I found this to be a big step in my growth as a UX designer. I learned that not only is it important to test your iterations before delivering, but truly understood how one button can completely ruin a user experience. It also exemplified that aesthetic design is most certainly not always usable, and that usability is wherein the importance lies.

Thanks for redesigning Rib City with me!

See also:

Editorial Design

E-Commerce Case Study