Redesigning Search for UberEATS
Why a Redesign?
As a side project to improve my design and motion skills, I decided to challenge myself to redesign a feature of an app. But here’s the catch: do everything from concept to high-fidelity prototype over one weekend. And so why did I choose UberEATS? Well, I’ve always been a fan of Uber’s visual design aesthetic and I also just really really love food so I guess you could say it was a match made in heaven.
Within the UberEATS app, the feature I saw the most potential for a redesign was Search. There were 3 reasons as to why.
- The Search feature in the current version is way too simplistic. Upon tapping the search icon in the tab bar, all it does is list out the food categories in alphabetical order.
- The list of categories is extremely long. As a result, there is no method for a user to reach their desired category without tediously scrolling through the list or physically typing it in.
- There is no filtering feature within Search that helps users narrow down their choice of restaurant/food item.
My Goal: Help users find their desired item in the quickest way possible
The Research
As with all of my design projects, I started writing down what components were needed in the designs and did some very rough sketches on how the new Search feature was going to look and behave.
Upon doing these Sketches I researched other food delivery services such as DoorDash, GrubHub, and Postmates. In addition, to see the best practices on the Search feature, I intensively studied the UI of Google, Facebook, Instagram, Twitter, and lots more. After a few hours of squinting at my phone screen, I was able to come up with a rough idea on how the new design was going to look.
Prototyping and Iterating
The next step of the redesign phase was my favorite phase; sitting in front of my desk and clicking away for hours and hours on Sketch.
Even though I sometime assume that the idea in my sketchbook is the perfect solution, designing something is never a “once and done” process. Not surprisingly, this principle applied to this project as well. During this phase, there were multiple instances where I would try to implement something and it would just look awkward and misplaced. Whenever I got stuck in this kind of situation, I always came back to this:
“Never fall in love with an idea. There’s always, always, always another better solution.”
This is what my mentor, Riccardo Parenti, taught me during my internship at a UI design agency this past summer and it has stuck with me since. With this mindset, I continued the grind on my laptop…
The Final Output
And after 30 hours of scratching my head, I completed the redesign of UberEATS’ Search feature. There’s a lot going on in the final output so I’ll explain everything by breaking down the prototype screen by screen.
Main Screen
The Main Screen is the screen that appears when the user taps the search icon in the tab menu (bottom left).
There are two added parts that make the Main Screen a lot more intuitive than the original. First, take a look at the 3 circular buttons (called Quick Actions) found at the top of the screen. I created these actions for users that didn’t necessary care about the type of food they wanted. Instead of intensively scrolling through the endless list of restaurants, this would be a solution that would make it easier for user’s to discover their desired food item.
The other added part is the Suggested For You found right underneath. The food category on these buttons are curated from the user’s activity on the app itself and were made so that a user could reach their favorite item without typing or scrolling. The location and size of the buttons make it very easy to access.
Underneath both of those new features is the list of All Categories. This is the exact same design from the original Search feature and was added at the bottom of the list for users that weren’t helped from the actions above. Keeping this was important to the design because it’s a useful feature for exploring all of the offerings. But with the addition of Quick Actions and Suggested For You, I predict that All Categories will not be used as frequently (Of course, I can never be sure without validating this through user testing).
Filtering
As a way to solve the 3rd issue I mentioned in the original design, I created a filtering feature within Search to help users narrow down their restaurant/food item even more.
The filtering feature could be broken down into 3 parts. The very top part has the ability to narrow down the user’s search to show only the designated price ranges. The buttons here act like checkboxes and could all be chosen if desired by the user.
The Sort By feature should be self-explanatory. The order of the search results would change based on the user’s selection. I intentionally removed sorting by “Highest Price” and others because I determined that these 3 were the most essential.
Healthy Options on the very bottom should be pretty self-explanatory as well. Checking the boxes would only show restaurants that offered the designated healthy options. Even though I’m personally not the type to opt-in to these, I know a couple of friends that are pescatarian or vegan that would find this feature useful.
Search Results
Not much has changed in the Search Results Screen as I didn’t find a major issue in the current design. However I made a small change to accommodate for the new features in Search.
Because of the new filtering feature, I added the Filter button on the right-hand side of the navigation bar. To keep things consistent, this button is located at the same location on the Main Screen as well. It also means that filtering for results could be done both before AND after a user has selected a category.
Furthermore, I added a back arrow button on the left hand side because the cancel button couldn’t be placed on the bar due to a lack of space. This change also meant that I had to redesign the interaction of how the screens move. It used to be that the new page appeared to dissolve on to the previous screen but I’ve made it so that the new screen appears from the right-hand side. This is a little bit difficult to explain in words so feel free to reference at the animations I created down below.
Animations
Recently, I’ve been practicing animations using Flinto. Featured below are the micro and macro interactions I designed for this redesign project.
InVision Prototype
Check out the prototype below to interact with the redesign yourself!
https://invis.io/WVA211D6J#/214469692_Main_-_Full_Scroll
Reflection
When I first made the decision to do this, I was honestly overwhelmed that I wouldn’t be able to deliver a solid design on time. But looking back on it, it was such an exciting project to work on. Doing a redesign for one of my favorite products was like getting a sneak peak of what it’s like to work at that actual company. The time constraint gave me a good amount of pressure as if I was an actual designer at a company that needed to hit an important deadline. It made me realize how much I love design and how I won’t stop creating. Ever.
Thank you for sticking till the very end. Feel free to check out the rest of my work at www.YukiAsakura.com!
