ASAP | p3kdesigns

Streamlining Success: Unifying Waitr, Delivery Dudes, and Bite Squad into ASAP

Overview

ASAP is an American online and mobile prepared food ordering, delivery, and grocery delivery company. 

In a strategic move to consolidate their market presence, Waitr, Delivery Dudes, and Bitesquad merged to form ASAP.

Goal

The primary goal of the project was to rebrand the Waitr app as ASAP, aligning it with the new company identity while ensuring a seamless transition for users.

Challenge

When I embarked on the rebranding journey of Waitr to ASAP, I encountered several significant challenges that needed to be addressed to ensure a successful rebrand:

1. Fragmented Design System:

Inconsistent Components: The existing design system was poorly built, leading to inconsistencies in component design. Elements like buttons, input fields, and icons had varying spacings, sizes, and alignments, creating a disjointed user experience.
Scattered Designs: Design assets and resources were scattered across different platforms and lacked organization. This made it difficult to maintain consistency and streamline the design process.

2. Outdated Design Techniques:

Lack of Auto-Layouts and Variants: The present design components were not built using modern techniques like auto-layouts and variants. This made the design system not scalable and difficult to maintain, resulting in inefficiencies and increased time spent on adjustments and updates.

3. Absence of User Flow Map:

Missing User Flow Documentation: There was no comprehensive user flow map available. This absence made it challenging to understand and improve the user journey, leading to potential gaps and friction points in the app’s navigation and usability.

Started the process with UI Audit

To initiate the rebranding process, I began with a comprehensive UI Audit of the design components. This involved meticulously examining the existing design elements.

Design System Mapping

Following the audit, I created a detailed design system map to document and organize the design assets. This map served as a foundational blueprint for standardizing components and ensuring a cohesive visual identity moving forward.

Filling the Gaps

Since I was already diving into the audit, I figured it was the perfect time to tackle the user flow map too, especially since I had just finished setting up the design system mapping. Teaming up with the product manager, we went through the flows together, jotting them down until we had our polished final user flow map.

Revamping the Design System

After wrapping up the maps, I transitioned to refining the design system. Realizing that editing the current system would be quite time-consuming, I decided to revamp it entirely. Plus, I opted to switch to Figma for the redesign instead of sticking with Sketch for continued design work.

Laying the foundations

Following collaboration with the marketing team to finalize the new branding, I delved into laying the groundwork by focusing on essential elements such as Typography, Color Palette, Spacing & Sizing, Corner Radius, and Elevations.

Creating Variable Collection

After defining the core colors, I embarked on creating variable collections using Figma's Variable feature. This strategic approach is crucial as it not only facilitates systematic organization but also holds significant importance in maintaining design consistency and scalability. By structuring color variations into manageable collections, I ensure an efficient workflow, making it easier to apply cohesive color schemes across different design elements and iterations.

In addition, I made sure to made the naming of variables human-friendly. This ensures clarity and ease of understanding for all users, not just developers.

Building the Components

With the foundations in place, it was time to build the components. I utilized auto-layout to ensure scalability and ease of maintenance. Components requiring multiple states were created using Variants. Additionally, I implemented boolean properties to minimize the number of components, allowing for several variants without cluttering the design system.

Expanding the Components

I continuously expanded the components to cater to all screen designs, ensuring consistency and adaptability. By systematically refining and adding components, I was able to create a comprehensive and flexible design system that meets the needs of the product.

Building the Screens

After completing all the components, I began constructing the screens flow by flow, using the user flow map as a guide. I integrated all the components I had built to ensure consistency and adherence to the established design system.

Additionally, I incorporated a flow title at the beginning of each sequence to facilitate easy identification for viewers. This approach ensured clarity and organization throughout the design process.

Screenshot 2024-05-31 at 11.09.13 PM.png

Prototyping

Now that the screens have been meticulously crafted, it's time to bring them to life through prototyping. Prototyping allows us to simulate user interactions and navigate through the app's various features, providing a tangible preview of the user experience.

Want to try the prototype?

Try the Prototype

Conclusion

The absence of a robust design system and user flow map posed significant challenges throughout the rebranding process. Without a cohesive design system, maintaining consistency and scalability proved to be a daunting task, hindering the progression of the rebranding efforts. Similarly, the lack of a user flow map made it challenging for newcomers and those unfamiliar with the product to navigate the app effectively.

Moving forward, it's evident that investing in a solid foundation is essential for the success of any rebranding endeavor. By establishing a comprehensive design system and user flow map early in the process, teams can streamline their workflows, foster collaboration, and ensure a seamless user experience. This underscores the importance of thorough planning and preparation in driving successful rebranding initiatives.

Post-Rebranding Improvements

Following the successful completion of the rebranding process, several notable improvements have been observed in the ASAP app.

Order Tracking

Addressing user feedback regarding the inability to track their orders, a new order tracking feature has been introduced to the ASAP app. This feature empowers users to easily monitor the status and location of their orders in real-time, providing them with greater transparency and peace of mind throughout the delivery process.

Approach

Conducted user interviews and surveys to understand user expectations and pain points related to order tracking.
Collaborated closely with development teams to assess technical feasibility and determine the best implementation approach.
Developed prototypes to iteratively design and test the order tracking feature, incorporating user feedback along the way.

Outcome

The implementation of order tracking resulted in several positive outcomes:

Improved User Experience: Users expressed satisfaction with the ability to track their orders in real-time, leading to increased trust and confidence in the app. 
Reduced Support Inquiries: The availability of order tracking functionality reduced the number of support inquiries related to order status, freeing up resources for other tasks.‍ 
Enhanced Brand Perception: The addition of order tracking further solidified ASAP's reputation as a customer-centric and innovative delivery service provider.

Outcome

The implementation of ASAP Unlimited resulted in several positive outcomes:

ASAP Subscription

Recognizing the potential of subscription services to increase customer loyalty and generate recurring revenue, we launched ASAP Unlimited. This subscription offering aimed to provide users with enhanced benefits and incentives, including waived delivery fees, in exchange for a monthly or annual subscription fee.

Approach

Conducted market research and competitor analysis to identify subscription trends and pricing strategies in the food delivery industry.
Collaborated with development teams to integrate subscription management systems and payment gateways into the app, ensuring seamless user experience and backend functionality.
Promoted ASAP Unlimited through targeted marketing campaigns and in-app messaging, encouraging users to sign up and experience the benefits firsthand.

Increased Revenue: Subscription revenue from ASAP Unlimited contributed to a substantial increase in overall company revenue, providing a steady stream of recurring income.‍
Improved Customer Loyalty: ASAP Unlimited enhanced customer loyalty and retention by offering valuable benefits and incentives to subscribers, resulting in higher lifetime value and reduced churn.‍
Competitive Advantage: ASAP Unlimited strengthened ASAP's competitive position in the market, distinguishing the company from competitors and attracting new users seeking cost-saving benefits and exclusive perks.