Boost Ordering

The Intel

Our research team went to work and brought back a huge range of results including video diaries, synthesized results and user journeys. We combined this with insights generated from our data team and got to work.

Enter "Burned Out Brenda"

At this point, I had the problems we were facing, our end goal, and some solid insights into who the main users are and what motivated them to eat. To sum it up, students were so burned out from their workload and life, food fell to the wayside. There’s a stereotype for students' eating habits living off ramen and Kraft Dinner but our findings went beyond that; many of them survived on Cliff Bars and the odd piece of toast, when they remembered to eat at all.

The data shows that when students did eat, they prioritized what was cheap, accessible and easy. They didn’t want to think about what they were going to have, they just wanted to have it. Our data also showed that the meals students skipped the most were breakfast and lunch.

Our target demographic is the TikTok generation, users who are used to having continuously personalized & adaptive content based on their input and interactions. So why couldn’t we extend that to food as well? The aim of this approach was to provide an intuitive ordering experience that presents what the app thinks you will best enjoy by front loading food preferences and restrictions as part of the onboarding experience, and continuing to adapt as users place orders.

The home page is dedicated to taking the thinking out of ordering by providing options based on the users preferences, as well as the purchasing history of them and others at their location. On top of a customized home screen, another tab would host a more traditional browsing experience where users could search, filter, and browse by item, category, cuisine or restaurant.

The main goal with making these changes to the shopping experience was to enable easier access to the kinds of food our users were most likely to purchase themselves. By integrating features like reorder, favouriting, most popular and a recommendation engine into the home screen, it allows users to skip the menu all together when they just need to eat. This would help us speed users through to checkout and reduce the overall time to checkout.

Testing

Other members of the design team, Jasmine Leung and Arjun Narayanan, also explored different avenues with the data given and we all created very different approaches.

This approach prioritizes items over vendors and also includes a map view showing distance to the items, the home screen is displayed by location on campus and includes a combo and upsell experience to drive up cheque and basket size.

This approach prioritizes distance to food and replaces a traditional ordering experience with a map view, simplifies the home screen for a minimalist approach and includes a highly customizable menu that allows users to quantify modifiers.

Our research team took our different prototypes and put them to the test with our users. Each user was asked to perform 3 tasks across the experience including 1) Account creation & onboarding 2) building and placing an order and 3) Disputing an order. Through our testing, the team discovered that while all of the approaches performed well, there were some key themes across all three that stood out:

• While the majority of students preferred to have a shorter sign up and onboarding, several appreciated the ability to set preferences early to tailor their content
• Students liked having recommendations based on preferences and previous orders front and centre in the ordering experience
• Students appreciated having a more personalized approach
• Participants appreciated knowing the distance to each vendor as well as the expected wait times for the vendors

Next Steps

While the research team was conducting our user testing, Jasmine and I dove into our current information architecture and audited the current experience to get a better understanding of the state of the current product. I tackled the product as a whole while Jasmine dove deeper into our Menu IA.

From there we worked with our Product Manager to identify all the upcoming features on the roadmap, as well as potential features identified in a cross-functional Feature Prioritization Workshop, to create several iterations of a future state IA to help guide the redesign.

Once we received the results of our user testing and had completed exploring different architecture options, there were several cross-functional discussions surrounding the best path forward balancing user needs, business requirements, and our own technological capabilities.

The final decision was to move forward an approach that aligned overall with a more conventional ordering experience, while actioning on key opportunities surfaced with our user testing.

The Rollout

Taking cues from the initial concepts, we began to redesign the experience from the ground up in tandem with a visual overhaul. Our rollout plan was to stagger our releases, focusing on the new user experience and core ordering flow. This did create a mixed interface for our users, but allowed us to introduce new features faster in key areas, improving the overall experience of the product. I led the Boost redesign from a User Experience, Accessibility, and Design System perspective, collaborating closely with Cathy Zhang who led our UI and branding redesign.

Onboarding

The first area tackled was our user onboarding. The original onboarding experience bombarded the user with a slew of system permission requests as soon as they downloaded the app, a basic sign up form and overall ambiguity of why we needed their information and how we planned to use it.

Our feedback from existing users is that they didn’t know why we needed their location, push notifications or birthday. This feedback guided the UX to focus on contextual information and choice. Our goal was to ask users for permission and information in the context that best benefits them, increasing our users trust in the app.

Contextual

The recommendation was to use custom prompt screens before serving up the system dialog. It not only let us fully frame the benefit to the user, but saved the system prompts for retargeting later in the experience.

When asking users to enable push notifications, we prompted them to enable right after placing their first order. This allowed us to frame the benefit of push notifications, Order Tracking, right when it became most relevant to them.

Choice

Aside from the key information required to create an account [Name, email address, password], we allowed users to provide as much or as little information about themselves as they liked, and made optional content easy to skip. We also reprioritized the order of content to show the most beneficial content to the users first.

Even the recommendation engine was built on the idea of choice. You could preload your preferences for tailored recommendations at the start, but even if you skipped this step our engine would adapt over time to provide the same custom experience.

Home Screen

Along with a revamped onboarding, our home screen was one of the first modules to be redesigned. The overall goals were to make the home screen welcoming, relevant and appealing. We wanted to empower users to checkout faster by prioritizing features like reordering, promotions and recommendations on the home screen over a list of open vendors.

Working with Product, we identified several objectives for the new home screen including:

• Include a personalized and dynamic welcome message on the home screen
• Provide a way to order or reorder quickly
• Ensure users can easily track any active orders

Ultimately, I pushed for us to have a dynamic home screen that changed based on the user's goals & context. Upon first opening the app, users would be greeted with a new message, with their most recent reorders front and centre.

If an order was eligible for reorder, it would appear on the home screen where users could then select which available items in the order they would like to order again. To determine eligibility, there were several criteria that needed to be met:

• The order must be from the currently selected school or location
• The vendor must be open and the items must be part of the current menu (Breakfast vs. Lunch vs. Late Night Menu)
• At least one item from the order must be in stock

If all of these conditions are met, the order would appear on the home screen up to the past 5 orders. Tapping on the card would show users what items within the order are available for reorder, they could select which ones to reorder and quickly populate their basket.

Below we would feature a rotating header featuring announcements and promotions relevant to the user followed by recommended items based on time of day, user preferences, and current popular items. As the day goes on, these recommended items would change based on item availability and vendor hours. Rounding out the home screen would be a full list of vendors showing operating hours, estimated wait times, and rush periods.

Once a user places an order, the app would feature a live tracker front and centre on the home screen, providing an easy summary of how, when and where the user will receive their order once complete. Users can tap on the order to open up their full receipt with auxiliary information including order number, what items were ordered, payment method used, and cost breakdown.

Challenges and Compromises

As with any project, even the best laid plans meant we couldn't action on every design solution. As timelines changed and resources got stretched, I worked with our Product and Development teams to cut down scope for MVP.

Onboarding and Recommendation Compromises

A key component of our new experience was the new recommendation engine. As mentioned above, it would combine user selection in the onboarding with purchasing behaviour. This would allow the home screen to continuously provide tailored content and empower users to check out quickly.

Unfortunately, our timeline shifted and our Data Team would be unable to support the engine until a later date. This resulted in us removing most of the onboarding experience, opting to gather the information only when it would have a definitive benefit to our end user.

Reorder on the Home Screen Compromises

The original intention of the reorder feature was to show only viable orders to the user. However, due to a lack of support in our backend infrastructure, we would be unable to run these checks from the home screen. Instead, we would only be able to load the past 5 orders and users would only be able to check if an order was viable by tapping into the card and run the checks then. This was far from the ideal user experience, and after round-tabling it with the team, we ultimately decided to cut the feature from MVP until the back end could fully support it.

End Result

Once we went through rounds of iteration and negotiations as a team, we were left with a simplified onboarding and home screen for our MVP Launch. The home screen would still change based on the context of the user's goals, containing order tracking, a promotions area, and a list of available vendors on site, but would not have reorder or recommendations at launch. While this wasn't ideal, the bright side is we designed an experience proven to be scalable and know what our next steps are to make it a reality.

Conclusion

I could spend hours talking about our journey of the Boost redesign and its impact. While we weren't able to launch with all the features we had planned, the redesign was a definitive success. A recent report from our Data Team shows that the redesign hit several of its objectives including reducing time to checkout, increasing average basket size, and "boost"-ing weekly revenue by increasing average cheque size.