ROLE:

Senior Product Designer

CATEGORY:

Food & Bev, E-comm, Shopping

COMPANY:

Inspire Brands

TIMEFRAME:

12 months

 

Sonic Mobile Web - Launched in 2022.

Sonic Mobile APP - Launched in 2022.

Sonic Desktop - Launched in 2022.

 
 

ABOUT

Inspire Brands purchased Sonic in 2022 and the goal was to migrate the brand into Inspire’s digital platform to utilize various enhancements and features that their legacy platform did not have as part of the acquisition.

 
 
 

TEAM & ROLES

 

Lynley Judge
(

Guest Product Management

)

Rajat Mohan
(

Guest Product Management

)

Stacey Cheatom
(

Guest Product Management

)

Andy Ades
(Director of Product Management)

Tim King (UX Manager)

Vinoth Venkatraman (Senior Manager of Engineering)

Lyndon Cerejo (UX Director)

Maggie McManama (Digital Retail @ Sonic)

Eric Bates

(Director of Product)

Dan Lynn (Chief Operations Officer)

Addam Driver (Director of Engineering)

Morganne Sanoguet (Content Operations)

 

1. UNDERSTAND/PRODUCT THINKING

I led the Sonic migration project from a UX/Product Design perspective back in 2022. Many folks were involved in various layers of the migration from engineering, product, restaurant services, and restaurant ops. Discovery work was already locked and approved by Sonic and Inspire. When I came into the project, the goal was to continue to iterate and design the missing features that Sonic had in their old platform into the redesign.

The problem that all stakeholders were trying to solve during this migration was keeping the Sonic amenities and features true to the brand while in the process of migrating into a completely new platform.

A) People Problem

  • How will Sonic customers know that their app or the brand has gone through a major update?

B) How did we know it was a problem?

  • Sonic customers have evolved into power users thanks to social media content on TikTok and Reels to a point where they are used to the old interface to make their selections at ease. Seeing something new may potentially caused disruptions.

C) How do we know if we’ve solved this problem?

  • Through conversion and tap-rate, which will signify that adoption has fully been integrated with that customer base.

 

 

2. DESIGN STRATEGY

60% of the redesigns were created by a partner agency during this period. I was tasked to redesign how the homepage and the check in process would differ from the previous version for both Web and APP.

For this overview below, I’ll walk through just APP as the contents connect directly with mobile web from similar component structure. I went through a full audit of Sonic’s old app and noticed a few issues that didn’t follow standard web or APP behavior:

Old Design Homepage on APP:

  • No main navigation present

  • Profile icon overlays on main content.

  • Location selection is not displayed anywhere at the start of journey.

  • Content is oversaturated with products that take up half of viewport.

  • Not screen reader friendly, failed AA compliance.

Old Design Check In on APP:

  • Not screen reader friendly, failed AA compliance.

  • Use of move-in overlay to check in feels too similar to a bag experience.

 

Sonic Homepage APP - Old

Sonic Order Submitted - Check In Old

Sonic Check In - Old

 

Internal feedback

WHAT DID WE LEARN FROM PLACING ORDERS ON THE LEGACY EXPERIENCE?

During the migration, we went through multiple reviews for every sector of the Sonic experience and the consensus was that checking in should be more streamlined and discoverable, especially when customers arrive at the location and/or a few minutes away from the nearest.

The use of real estate on the homepage could also be taken advantage of for a blend of product content and user information on their previous order history or new marketing content to highlight.

 

 

3. DESIGN EXECUTION

solution for homepage

HOW MIGHT WE UDPATE SONIC’S CONTENT ONTO THE HOMEPAGE?

Arby’s and Buffalo Wild Wings was already in Inspire’s Digital platform (IDP) in early 2022. Thankfully, the infrastructure for the homepage already existed to allow brands to upload and shift around content at ease, but also empowering users to discover new items and/or browse their recent orders based on previous purchases.

Product team and the Sonic retail team took this opportunity and replicated the same templates that Arby’s and Buffalo Wild Wings has and Sonic-fied with it’s content and menu to align on roadmap and timeline constraints.

The core differences with this new homepage versus the old homepage was that Inspire was able to make a few improvements for the consumer:

  • Profile discoverability

  • Location displayed

  • Bag visibility

  • Marketing content taking less real estate.

  • Recent orders accessible

  • Top Picks prominent displayed on the experience.

  • Menu is separated from Homepage content.

Although the homepage structure was copied from Arby’s and Buffalo Wild Wings, the discovery and user research was vetted prior to Sonic’s acquisition. Since the release of Arby’s and Buffalo Wild Wings on APP, transactions increased by 12% during their two months of their release.

 

Sonic’s new homepage - APP

Sonic’s new homepage - Mobile Web

 

solution for check in.

HOW MIGHT WE BRING SONIC’S CHECK IN FEATURE OVER TO IDP?

Sonic is known for their drive-in experience and in order for the customer to verify their food and arrival is signaling the restaurant that they’ve arrived by tapping on the red button OR by checking in through the app.

IDP around this time did not have a check in feature already templated and established, so the engineering team did their estimates on how long it would take for the feature to be built out. While estimations were happening, I was able to show final designs on how the experience would look for Sonic

The core differences with this new check-in page versus the old version was that we were able to change the experience to allow users feel a progression of their check-in process instead of feeling stuck in one area, which was a pain point in the old version. Below are the improvements we made to change that user behavior.

  • Prominent CTA to check in at the order confirmation.

  • Pickup instructions to guide customers on how to proceed afterwards.

  • Full Screen takeover to ensure stall number is entered correctly.

  • After stall number confirmed, user will see updated info on their pickup instructions.

Prior to IDP, Sonic did not have a progression approach to ensure that they were moving forward. Previous complaints from the legacy platform occurred mainly because of check-in and the probable cause was that the check-in process was easily ignored because there wasn’t a way to easily find that feature after an order was submitted.

 

Order Confirmation

Stall Default

Stall Number Entered

Order Confirmation Updated after Stall Number Input.


 

4. OUTCOME AND TAKEAWAYS

SONIC IS NOW IN INSPIRE’S PLATFORM AND CONTINUES TO BE ENHANCED

Sonic migration project was officially wrapped early 2023 and it launched successfully on both web and app. Order ahead orders increased by 12% since launch in February 2023. As of today, Inspire is taking continuous measures to improve the experience through tracking analytics performance and conversions to see where things need to be fixed in the funnel.

This project was one of the most complex and rewarding experiences I’ve had to see a progression of this project from multiple reviews and conversations with stakeholders. I was happy to have had an impact at Inspire with this migration. If things were done differently, I would’ve tried to account time for usability testing for features I worked on.