case_study/grubhub: Content feed
Feeding users food — and content
Summary
In the past, the enterprise agency apps used a navigation style that we refer to as “home screen.” This involved a landing page with a large hero image, a couple of icons in a grid, and an “Order Now” button. Although functional, it minimizes opportunities for brands to engage with their customers. I was tasked with redesigning this experience to support a more modular “content feed.” This involves a more dynamic header, a shift in navigation, and a scrolling feed of content.
Collaborators
Design Manager — Sloane Thomson
Product Managers — Wadie Abbas, Lee Orlandi
Product Designers — Lauren Andres
Current Pain Points
This design does a good job at its primary tasks. It’s easy to see how to start an order — and most users are comfortable with hamburger menus. This UI doesn’t give us much room to build new features or give clients space to connect with their customers.
Our basic goal was to change the design to support some sort of scrollable content that we could build on.
Navigation changes
We knew the navigation would have to change, but we didn’t want to confuse existing users. To keep the most important navigation items easily accessible — we decided on using a bottom nav (iOS: tab bar, Material: App Bar: Bottom).
This accomplishes three things:
- The most used functions are accessible on the home screen. (As they were in the original designs.)
- The navigation is an established UI pattern – minimizing any user confusion.
- It allows the user to access certain screens from places they couldn’t before. For example: Previously, once you navigated to any other screen, you had to navigate back to tap the “Order Now” CTA. With the bottom nav persisting on many of those screens, the ability to start an order is usually only one tap away.
Improving settings as part of this project
When we switched from the hamburger menu to a settings gear — we had to redesign the settings screen, since the previous design was a drawer. My co-worker Lauren Andres (our web product designer) and I collaborated on the project.
Hamburger menu vs. Settings Gear
The debate over the UX of hamburger menus is a rich one. I am confident users understand hamburger menus, but I am generally concerned when they become a “dumping drawer.”
Our apps treated the hamburger menu as exactly that — an overflow for things that wouldn’t fit on the home screen — or that a client didn’t want on the home screen. As part of the content feed — we transitioned from a hamburger menu to a settings gear. The intent of this change was to change the attitude surrounding the use of this space. To change it from an “overflow” space to a dedicated “settings.”
The old settings UI was a drawer.
This design is fine — and succeeds at being an “overflow” drawer. We found that the section headers are too small and the social media links are easy to miss. We also wanted to give the “Profile” table row a little personality.
The first difference is that we give “Settings” its own space. The drawer was decreasing the amount of screen space to work with and wasn’t adding anything.
At the top, we have a table row for the profile with the user’s name, to add that personalized feel. The table group headers are bigger and bolder. And finally, the social links are icons at the bottom, borrowing language from a web footer.
… back to content feed navigation changes
Our apps have traditionally grouped three concepts together.
Rewards — the things a user earns and can apply to orders
e.g., Free soda, $5 credit, 50% off a milkshake
Loyalty — the program on which they earn “points” by spending money, placing orders, or ordering specific items
e.g., Spend $100, Earn $5. Order 5x, get 100 points. Order 9 coffees, get the next coffee free.
Status — a secondary program where you can get special perks for your overall spending
e.g., Spend $500, unlock the silver status, which includes perks such as 10% off coffee and a free gift on your birthday.
The old UI kept these three concepts together in a paginated view.
There are ways in which it makes sense to have these grouped together. But they aren’t necessarily related. A reward can come from places other than loyalty, and your status is independent of your loyalty. As part of the content feed — we opted to separate these three concepts into their own spaces. This allows us to have more flexibility with when and how we show each UI.
We use the content feed as a place to show a “dashboard view” of the user’s loyalty and status. This allows the rewards tab to be strictly for rewards.
This new UI is full of details that accomplish our goals:
- Provide a better experience for the user by improving navigation, displaying valuable information on the home screen, and increasing the effectiveness of personalization
- Create more engagement with the brand by creating a space we can build upon with more content in the future
- Keep clients invested in our product
- Driving more orders by allowing access to “Order Ahead” on multiple screens and increasing the effectiveness of the gamification of our loyalty and status offerings
The large header replaces the hero image of the old design with a parallax header, complete with a greeting. The greeting utilizes a daypart, switching between “Good morning,” “Good Afternoon,” and “Good Evening.” Additionally, the large font reinforces the custom connection by bringing out the user’s name.
Immediately below the greeting, we have a small button showing the user’s current status.
The parallax effect is really exciting and adds sophistication to what was a carousel.
Below the header, we have a collection view that will allow us to show any number of cards in whatever order. For the MVP we made cards for Loyalty and Status. We also made a card for active orders, a special announcement banner, and a “Join Now” card for when the user is logged out).
These cards provide a quick view of your progress and can be tapped to access a more detailed view, to create another opportunity for client branding (currently still using the old UIs, but on the roadmap for an update soon!).
We are currently designing new features that will use cards. This space allows us to create a library of features that clients can select from.
Lottie Animations
For the animations, we’re using Lottie. I created the default animations using AfterEffects. By converting these animations to Lottie files (through the BodyMovin’ plugin), I can easily hand a .json to development. This reduces dev hours and moves the remaining few over to design. Additionally, designers can create custom Lotties for clients. This gives us an opportunity to offer clients something truly unique (while giving the business another potential line item…).
Logged out state
Our apps use an old-school sign-up/log in. The apps open with a splash screen and then land you somewhere with limited options until you sign in.
This screen does the job — but it misses a key opportunity. We know that users are more inclined to sign up for apps after they’ve had a chance to see the value it provides. With this in mind, we allow the user to land on the content feed without signing in. This creates an opportunity for the user to gauge the value before committing to signing up.
As soon as a new user opens the app — we present them with as much access as we can. Where an existing user would see status — we offer “Sign In.” We also insert a card at the top of the list to encourage users to sign up. Locations and settings are available, albeit limited. The pay and rewards tabs give us more opportunities to show value and try to convince you to sign up. And order ahead will allow you to go as far as reviewing your order before asking you to sign up.
Android implementation
For Android, we aimed for parity wherever possible. However, one small difference is the location of the two icons in the header. For Android, the toolbar, or App Bars: Top, intends for the icon on the left to be used for navigation whereas “Action items” should be on the right. We honored that here. (Some other subtle differences are the shadows on the card are Material Elevations, and the typeface is Roboto throughout).
Conclusion
Redesigning the home experience impacts so many other parts of the app that it would be impossible, or unreasonably long-winded, to touch all of it. But the key accomplishments are:
- Improving the organization’s approach to settings by moving away from a hamburger menu as an “overflow” space.
- Splitting up rewards, loyalty, and status — to ease navigation decisions in the future.
- Changing the navigation to a bottom nav while avoiding confusing existing users.
- Creating a space for dynamic, modular content — that can give us the freedom to build new features, as well as encourage more frequent use of the app.
- Reducing dev costs, and increasing customization potential, of animations, by using Lottie files
This feature is set to be used in the apps for 2 restaurant chains very soon! (Once live I will link to them here.)
