UX Case Study — Redesigning SmartQ

In this case study, I tried to enhance the SmartQ application for a seamless and user-friendly food ordering experience.

Please click R to see my splash screen animation

Overview :

What is SmartQ ? 🤔

SmartQ is a food ordering application used in corporate office’s cafeteria. It aims to provide seamless food ordering experience by helping to find nearby cafeteria with ease, letting people order their food to avoid standing in long queues and provide cashless transactions for payment.

How did this project originate?

Let’s go back in time 🕓: It was a very hectic day for me in office, several meetings were aligned one after the other and it was almost lunch time. I barely had 15min break in between, so I ordered my food on SmartQ and went to collect my order. Alas! they had not even started to prepare my order and I had no more time left to waste. I decided to cancel my order but.. I found there is no option to cancel the order or report issues in real-time! I asked my colleagues for help, but it turned it out many people faced a variety of problems in the application. I opened the support feature and found it was simply a form for feedback. I was totally stuck and helpless at this point of time. That’s when the idea struck me, SmartQ needs a revamp.

Problem Statement :

SmartQ food ordering app users are experiencing significant usability challenges and dissatisfaction with the overall user experience. The existing interface lacks intuitive design and fails to effectively meet the diverse needs of our corporate employees, resulting in decreased user engagement and hindered efficiency in food selection and ordering processes.

Disclaimer : This case study is intended to improve and showcase my problem-solving and design skills. It is not intended to be a comprehensive guide nor does it imply SmartQ should endorse my design.

Timeline : 2 weeks, Independent Project

Role: UX Designer

Responsibilities : User research, competitive analysis, ideation, visual design, wireframing and prototyping

Process

I used the fast fail approach of design thinking to learn from failures early in the process, which allowed me to rapidly iterate and improve. The fast fail approach aligns with the principles of design thinking, emphasizing empathy for users, ideation, prototyping, and testing. It helps teams to avoid investing too heavily in a single concept without sufficient validation, fostering a more agile and responsive design process.

#1 User Research

I kickstarted the revamp with user research. I recruited 5 participants for moderated usability testing and designed 2 major tasks to determine if users can successfully navigate through the app. I asked them to think out aloud so that I can understand their mental process and opinions.

Task #1 Open the app and place an order for food on SmartQ.

Task #2 Locate and seek SmartQ support for reporting issues and bugs.

Learnings :

1. 4 out of 5 people took an average of 3 min to figure out where to place the order. They were expecting to see the menu immediately after opening the app. Their attention mostly went to order icon instead of Order on the Go and Preorder.
2. 1 out of 5 people after placing order realized they needed support, but there was no support on the Scan QR page.
3. 4 out of 5 people took an average of 1 min to find where the support feature was located.

Observation :

There were many added issues which contributed to difficulty in navigating through the application.

• The interface of SmartQ application violated consistency & standards, aesthetic & minimalist design, error prevention and user control & freedom.
• Many UI principles such as visual hierarchy, law of similarity, spacing systems and grids etc, were violated.

A few insights from the evaluation are mentioned below :

To gain more insights from the users and for a better understanding of its’ current state I went through the app reviews on Google Playstore. Gee! most users did not have pleasant reviews.

Few Reviews from Playstore

By evaluating all the screens of this application and Google Playstore reviews, I came to the conclusion that there is :

1. Lack of Good Visual Design: According to aesthetic usability affect a product appears to be more usable if it is visually appealing. If a product is not attractive to the eyes, then users are not even willing to try to use it. It does not imply, the product has to look visually pleasing with no usability. It means that making an attractive UI generates a positive emotion in the user, which helps in making them tolerant to minor(I stress minor here) usability issues.
2. Lack of Consistency : The app had major issues with consistency and standard. Consistency and standard is very crucial for ensuring that the UI is predictable and easy to learn. We should not make our users wonder if different symbols, words or action mean the same thing or not.
3. Lack of Visibility of System Status : When user is placing an order it failed to keep the user informed about what is going on, in ways such as if their order is being prepared, if food is ready to be collected etc. There needs to be a more open communication between the user and the application. Users should feel they are in control so that the system appears to be reliable, which in turn creates trust.
4. Need for Flexible Payment : The users faced issues with different payment options. App should support variety of payment modes to ensure convenience and comfort.
5. Lack of Feedback Mechanism : The app did not have the feature to give reviews. Without reviews, users were unable to report bugs and suggest new features that they would love to see in the app.

#2 Competitive Usability Evaluation

I conducted a holistic feature and design comparison to evaluate direct and indirect competitors to get an idea where SmartQ stands. Feature and design comparison were done with direct competitors — Hungerbox, GoKhana and indirect competitors — Uber Eats and Swiggy.

Based on the findings above we need to re-design the app so that the following problems are solved :

1. SmartQ lacked feedback mechanism for users to share their reviews and experiences.
2. Unintuitive user flow and error prevention to undo their action.
3. Inconsistent UI.

#3 User Flow

User flow was created, to describe the journey user has to complete for placing an order.

This is what the current user flow looks like :

In the current user flow, user after logging/signing in arrives at the home page, where they need to choose if they want to preorder or order on the go and then begin exploring the cafeterias near them. They select cafeteria of their choice and start browsing through the products offered. Thereafter, they add it to cart, make payment and scan the QR at counter for collecting the order.

This what the proposed user flow looks for placing and tracking order.

After login/sign up, the user will select cafeteria and product. After reviewing products in the cart they can choose if they want to order now or preorder, and then checkout. After checkout there will be a buffer of 20 sec for user to cancel the order. If order is not cancelled within the buffer, it will be confirmed.

Ideation

I then moved onto to create paper wireframes. It helped me to get my ideas out really fast. I created several paper wireframes during ideation, some are shown below:

Paper Wireframes

To gather early feedback on basic aspects of app design like content placement, navigation and functionality I began designing the low fidelity prototype and used them for user testing.

Wireframing and Prototyping

Making Low Fidelity Prototypes

From the user testing of low-fi prototypes, I gathered that 4 out of 5 people preferred order now option over pre-order. People preferred ordering from live counters and get their food served on need basis.

Mostly people placed order on the go because:

• They wanted to eat food according to their current preferences and time.
• No time difference in getting their order served. People who pre-ordered/ordered when the counter was live, got their order delivered together based on first-come-first-serve.
• They wanted it be a more personalized experience by engaging with their colleagues and indulge in collective decision making on menu options.

So I decided to remove the pre-order option from the home page of the application to prioritize the core functionality — Order now feature, and reduce decision making time.

The SmartQ app violated web accessibility guidelines in terms of colour contrast. Results are below:

Before Updating Colourstyle

New Colourstyle

Then I began creating hi-fidelity prototypes to gain feedback on overall user-experience.

Snapshot of some hi-fi protypes

Snapshot of hi-fi prototypes

Thanks for reading my case study. If you have any feedback please leave them in the comments below.