03d1e79f82b0ba974d4cafa001ef0842b687b95a5ee9464664fe7f3a75012eaffc3870e3acf9fab5_car_7x5.jpg

HelloEats

Before and after images down below

 

The Goal

An ambitious plan: Give restaurant owners the tools and tech they need to focus on what they love — serving amazing food to their customers.

However, that wasn’t all it needed to be. HelloEats was a new way for consumers to order their food. It needed to work well for every single customer at any type of restaurant.

The Problem

The most confusing spot of the ordering process being communicating to the restaurant what kind of food you wanted to buy. If that didn’t work, the product would never be used, or worse, cause customers to leave the restaurants.

I was gathered with 6 other very smart and talented people, including the client, in our war room at Start Studio and we deliberated for hours the best way to communicate to the user how to add food items to their order. It turned out to be extremely complicated for an automated ordering system that could accommodate any restaurant’s business model.

When you start adding sizes, toppings, combo meals, and more, it gets quite complicated really quickly! After two hours, we settled on a workflow we felt would be foolproof.

The Method of Verification

After working through some initial wireframes, I wanted to make sure that the agreed upon solution would work for real users. However, we had a problem. There was no budget, or even client approval, for any sort of user research. This would have to be done with no additional resources.

Reaching out to family that happened to live nearby, I set up 5 testing sessions at my home office.

We weren’t sure what we would learn, and I was nervous we wouldn’t find anything at all. I had been pushing for this my entire time at the agency, I was even hired under the hope that I would help the agency to adopt these practices. A good part of my future at this job would depend on the success of these tests.

The Insights

As we ran these last-minute, little-to-no preparation usability tests, my worries were put at ease. Nearly every single person ran into some problem or other while the majority of them experienced quite a lot of frustration at certain points. Even better, the points were predictable. It got to the point that when a certain task was coming up, we could expect a furrow of the brow, a frustrated pause, or verbal display of irritation. And nearly all of it had to do with that workflow that six very smart people spent two hours working on.

You see, after adding a food item to the order, we planned on it redirecting you to the page of the food item they just added. It seems to make sense, right? However, this was wildly confusing for the testers. They thought we were asking them to finalize the addition, or that we were requesting that they add another item when they just wanted to checkout. Oddly enough, nearly nobody saw or used the checkout button that was persistently on the bottom of the page.

The Aftermath

We made quite a lot of changes based off of the feedback as you can see below, but by far the most important one was simply changing where we redirected the user to after adding an item. We chose to redirect them to the root menu screen, thereby completely removing them from their context. This was shown to wildly reduce confusion.

Additionally, we added an animation to the persistent bottom checkout button so that it slid upwards to call attention to itself. We also reconsidered our button styles to more thoroughly differentiate the purpose of each tappable area.

When showing the changes we made to the designs with HelloEats’ CEO, he was so impressed that he refused to move to development before we had also tested these new designs. He even volunteered to recruit the users for the future rounds of testing! Not only was the app much more likely to hit the target, but we had gained the trust and enthusiasm of the client.

Usability testing revealed what information was most important to users, allowing us to prioritize effectively

The Takeaway

This truly hammered home the importance of testing as many of your assumptions as possible with real users. If HelloEats had launched in its earlier state, the results could have been disastrous. Frustrated customers that refused to use the app, restaurants receiving an increase in calls instead of a decrease asking for technical support, and potentially orders even being submitted incorrectly, all of these things resulting in loss of business for the restaurants and a rapid failure for the app.

But since we did verify those assumptions, the rendering of HelloEats’ intent was crystal clear to the users, and the CEO was enthusiastic about moving forward and thrilled with the outcomes.

Nothing is quite as good as a happy client.

 We revised the text to more clearly indicate the purpose of the app, added the location indicator, and condensed the tiles to increase visibility

We revised the text to more clearly indicate the purpose of the app, added the location indicator, and condensed the tiles to increase visibility

 Usability testing revealed what information was most important to users, allowing us to prioritize effectively

Usability testing revealed what information was most important to users, allowing us to prioritize effectively