The engage platform was created from the ground up to be a flexible but feature-rich mobile ordering application, able to be customized rapidly to any restaurant brand. I helped create this platform from scratch, starting with initial sketches and wireframes, creating user flows, and managing final mockups and asset generation for the development team. I also created a demo brand (The Foundry) so we could demo our products more effectively.
I worked closely with product managers/owners and other stakeholders, and interacted directly with our developers via design reviews during each sprint. It’s taken nearly two years to get to this point, and we’re still adding features and iterating.
The engage platform has been rolled out to many nationwide brands (as well as many small businesses) and can be used in thousands of locations nationwide. It has generated millions of dollars in funded work, hardware sales, software licenses, and consulting services and is one of the reasons our line of business continues to do well.
What would eventually become the engage platform started out with a few other products. Mobile Pay, in particular, would lay the groundwork for being able to order and pay on a mobile device. At this early stage, we focused on core features like just being able to locate a store, and eventually payment.
Click the thumbnail images below to view full size.
Mobile ordering and Payment are the core features of Engage, and we went through many iterations to get to where we are today. In fact, we’ve never really stopped working on it and are continuing to overhaul our ordering experience to match current best practices and changing trends today.
Early wireframes of the ordering and checkout flow
A quick glance at the current main user experience for customizing an order and payment
We made the decision to go with cards on the home page. At the time, material design had just started to catch on and I liked the flexibility that cards offer. As we add new features, we don’t have to redesign the home page constantly because usually we can add a new card if needed. It can be tricky, however, to keep the home screen from becoming a cluttered mess.
Staying with the easily customizable and flexible mentality, we opted to go with a navigation drawer instead of a tab bar along the bottom. A nav drawer is more flexible in that you can add as many options as needed, depending on the needs of the customer
After many different iterations, multiple user testing sessions, and a lot of coffee, this is the loyalty card that lives conveniently on the home screen. It can track rewards using a progress bar, or use traditional 'punches' just like the 10 year old loyalty cards I'm sure are still in your wallet.
The barcode screen goes hand in hand with the loyalty card in that it's used to check in and earn loyalty at some restaurants. It automatically uses any rewards you might have queued up.
Sometimes a customer will have multipe loyalty programs at once (visit 10 times to earn a free item, spend $100 get $10 back, etc). You can easily swipe through your loyalty cards from the barcode screen.
Early ideas of the progress bar loyalty card
Barcode screen wireframe sketch
Messaging & Offers can be delivered via a push notification or by loading the app after being away for a period of time. The user can get to the message center by tapping on either the card directly from the home page or through the messages section in the navigation drawer. These messages & offers can be completely minimal (just a title and a brief message) or very robust using full images from a marketing campaign or latest promotion.
Early sketch of the message/offer card
Drawing out how all the screens flow together
Finished messaging wireframe