Redesigning a Food Service Application — UX/UI case study

Redesigning a Food Service Application — UX/UI case study

The mistakes I corrected and the lessons I learnt.

Photo by Hussain Faruhaan on Unsplash

Every person grows by learning. Being a recipient of knowledge facilitated by our own will is what keeps the student within us alive. Most of us designers are self-taught through books, online courses, podcasts, articles, YouTube videos, Instagram carousels and practice.

On the way, we design products as projects. As we keep learning and creating, we happen to look back at our previous work. And that’s when we realize how far we have come. The designer who was once proud of his creation now sees thousands of issues in the design.

Few designers get an opportunity to redesign their previous projects: the chance to correct those mistakes and to test the knowledge they acquired through learning.

I’m one of those designers, and this article is about the mistakes I corrected and the lessons I learnt.

Introduction

I’m studying engineering at BITS-Pilani, an Institute for Technology and Science. Here in BITS, we have a mess attached to our hostels. The SSMS governs the functioning of these messes.

(Mess: A place where students have their food while socializing.)

(SSMS: Society for Student Mess Services is a body governing mess services in BITS-Pilani, Pilani campus.)

A mess in BITS-Pilani

In December 2018, I worked with a technical team which is a part of the SSMS. I was the only UI/UX designer in this team. We were required to make a food service application. The app provided quality of life features which complemented the existing mess services.

The app granted the ability to:

  • View the food menu for breakfast, lunch and dinner, in a set of 15 days.
  • Rate the food served. (Like or Dislike a food item in the menu.)
  • Check out mess related notices.
  • Provide feedback on the mess services, mobile application, hygiene, etc.
  • View user profile with a unique QR code for transactions.
  • View the grub menu and sign up or cancel the ticket for the same.

(Grub: A paid dinner organized by the cultural associations in our college.)

We launched the application on the Google Play Store by the end of January 2019. The app was soon trending at number 3 in the food and drinks category. We received lots of feedback through the application.

Exactly after a year, we were asked to modify the app. Redesigning the app, adding a few features and correcting some mistakes were the main points in the agenda.

Previous design for the app

The Change

Looking at the previous app, I died a little inside and asked myself, “Did I make this?”. The app sucked, both in terms of beauty and user experience.

It had this text with huge font-size, an unpleasing background gradient and many more screen-specific issues.

The app needed a complete make-over. I started researching on my end about the colors, fonts and features. I must say, the Feedback feature in the application proved to be crucial. I got insights into the exact needs and pains of the users, directly from them.

After referring a few articles about the color-theory, I decided to use Orange in the color-scheme as it is psychologically better related to food. I sought some inspiration from Dribbble and Behance and finalized my color-palette.

On the search for a better font for the project, I called Google Fonts for help. Considering my craving for Sans Serif fonts, I had already used Cabin before. Like every other designer, I also landed back to the small set of fonts I generally used. After scrolling through a bit, I found Quicksand to be the right choice for this app.

Garnishing the Menu

One of the most prominent screens of the app was the Menu screen. The basic functionality this screen provided was to view the menu for breakfast, lunch and dinner for a set of 15 days. Also, to Like or Dislike the food items for the meals you had.

Menu Screen — Old v/s New

The older version of the app had a date navigation bar at the top, which displayed 15 dates at a time. There were two problems with this top-bar. First was its position, and the other was the information displayed on it.

The top-bar was too far for a thumb to reach. Designing for thumbs is a necessity today. The bar needed a repositioning, but to where? It didn’t seem to be a great idea to bring it above the bottom navigation bar, thus cluttering the screen. I decided to use an alternative for it, a swipe for changing the date. It gave the app more breathing space and the freedom to change the date from anywhere on the screen.

The top-bar used to display the date and month. But, a few users had pointed out in the feedback that it would be better to have the weekday mentioned too. It was a valid suggestion, as we usually ask a friend “What’s for dinner on Saturday?” instead of “What’s for dinner on 4th of January?”. Thus I included the date, day and month in the new design.

Another issue with the Menu screen was the large font-size. The larger size of text resulted in the truncation of some items on the menu card. The solution was easy for this one. I decreased the overall font-size in the app and later tested on small and large screen sizes. This change improved the breathing space and ensured that full item names were displayed.

The older version of the app had a bottom navigation bar with outlined style icons. The problem with these icons was that they were not easily recognizable due to their intricacies.

I replaced these icons with a mixed style icon set. This set contained outlined and solid icons. The use of these icons was unconventional.
I used solid icons for the inactive-state and outlined ones for the active-state. It helps in faster recognition of the undiscovered options.

Empowering the user

Feedback was the next important screen. A user could send textual feedback along with relevant tags like app, food, hygiene or service. Initially, we placed the Feedback feature in the More section, but it more than proved it’s worth. Thus, I felt that it deserved a special place in the bottom navigation bar.

Feedback Screen — Old v/s New

The Feedback section had the problem of one-way communication: if a user sends some feedback, he/she doesn’t receive a response to it. The user was left unaware of the impact of his/her feedback, and that reduced the amount of feedback we received.

The design of Github and Reddit helped in solving this problem. We replaced the concept of Feedback with Issues. The new screen expanded the feature set. The basic idea was to let people create relevant issues and let other people view them and optionally up-vote or flag them.

The new design thus assures the user that his/her feedback is beneficial. Moreover, to close an issue, a short explanation has to be given by the officials regarding the action taken. This brought transparency in the working of the system.

A noticeable change

The app had a feature for displaying Notices. The screen displayed a list of color-coded notices with a title. Critical, Important and Normal were the three priorities that the colors indicated. Each item in the list would open up as a dialog containing the full body of the notice.

Notices Screen — Old v/s New

This screen offered two options on it’s app bar: a button to delete all the notices and a priority-based filter. According to my observation, the Delete all button was unused. I removed it in the new design and instead added an auto-expiry date for each notice. The notices would disappear after some days.

The filter option was to complement the three-way color-coding. But the color-coding had an issue: it was difficult for the back-end developers to decide the priority of new notices. The Critical and Important priorities were too similar. Hence I got rid of the color-coding and went ahead with only two priority levels. Important notices were indicated using a star. Also, as only a few notices were uploaded, I discarded the filter feature too.

The dialog worked for short notices, but was not a good option for lengthy ones. Often, links were required to be embedded in the notices. But there was no field for links in the previous design.

To tackle these issues, I chose to use a bottom sheet to display the notice’s details. The bottom sheet had enough space to accommodate the required information along with links. It provided a scrollable area for lengthy text hence solving the problem.

The masterpiece

The journey of enhancing the design continued. One screen at a time, till the last mistake got corrected. The result was indeed a masterpiece: not just an art but a design which solved problems.

The final design
I feel the process of redesigning one’s own work is a great challenge: you need to question the decisions that you once firmly believed in. It’s a process that challenges you only to make you better.

Thank you for reading! I hope the case study proved to be insightful for you. I would be more than happy to receive your feedback. Let’s connect on LinkedIn for a small UX talk!


Redesigning a Food Service Application — UX/UI case study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.


Share this post