Zelty's order confirmation redesign

Zelty, known for its POS (point-of-sale application), offers a suite of products, including a white-label online ordering system for restaurants. This online ordering system is customizable via the Zelty back office, allowing restaurants to insert their branding elements, such as logos and primary brand colors, to reflect their identity on the platform. I set out to redesign the order summary and confirmation page from scratch.

The primary objective of this project was to craft a new, high-fidelity order summary and confirmation page that not only enhances the user experience for customers but also seamlessly integrates with the white-label system. I aimed to strike a balance between personalization and user-friendliness while ensuring consistent branding for the restaurants using this service.

Let's consider a typical order from a customer at BioBurger for a takeaway meal. The order includes a burger, fries, and an iced tea and the customer proceeds to the order summary and payment page, which must adhere to specific constraints such as: display the order contents, indicate the mode of consumption, the scheduled order pickup time, etc., until the order confirmation.

EMPATHIZE

Competitive Analysis:

To gain valuable insights into the best practices in the realm of white-label restaurant ordering platforms, I conducted a competitive analysis. This analysis included an in-depth look at key players in the market, such as Ueat, Uber Direct (integrated into the Dood platform), Signature by Deliveroo, Sunday, and Live Pepper. The objective was to understand the design elements and features that are well-received by users and widely adopted within the industry. Notable observations include a preference for clean, white backgrounds combined with brand-colored elements, and the strategic use of photos to immerse users in the restaurant's unique atmosphere.

Furthermore, it's noteworthy that industry giants like Deliveroo and Uber Eats have been exploring the concept of allowing restaurants to embed their branding within the ordering process. This development, if adopted, could represent a significant growth opportunity for Zelty.

Problem Statement:

My challenge is to create a user-friendly and intuitive interface for Zelty customers, offering limited customization options while allowing restaurants to showcase their branding colors and logos.

To generate creative solutions and explore different design concepts, I engaged in a range of ideation techniques:

• Crazy 8: Brainstorming sessions that encouraged free thinking, resulting in a multitude of concepts.

• Proposal of screen layouts: Proposition of various layout.

• "Dot voting": Utilizing a voting system to prioritize design concepts, I determined which elements resonated most with my objectives and the expectations of the users.

During this process, it was decided to retain certain elements in the design, such as the breadcrumb menu and a progress bar. These elements were considered instrumental in providing users with a clear sense of context and progress within the ordering process.

The prototyping phase was divided into three stages: low-fidelity (low-fi), mid-fidelity (mid-fi), and high-fidelity (high-fi). Each stage was essential in refining the design and optimizing the user interface.

• Low-fidelity: Beginning with simple sketches and basic wireframes, this stage served as the initial framework for the design. It helped outline the basic structure of the pages.

• Mid-fidelity: Upon transitioning to the mid-fidelity stage, I noticed a number of significant adjustments that I will implement in the hi-fidelity prototype such as: the font sizes has to be optimized to enhance readability, and the breadcrumb navigation need to be modernized to bring it in line with contemporary design aesthetics.

• High-fidelity: The high-fidelity design encompassed the final, polished version of the user interface. It was marked by a selection of design choices to ensure a visually appealing, user-friendly interface. Key design decisions included:

  • Color Selection: To maintain a sense of neutrality, a white background was selected as the canvas. The text was contrasted with a dark, visually striking color (#062614).

  • Typography choices: The Open Sans font, consistent with Zelty's branding, was retained to maintain a cohesive visual identity.

  • Breadcrumb navigation: The breadcrumb was designed to emphasize the chronology of the ordering process. The use of different font weights, opacity, and transparency created a visual hierarchy that guided users through their journey. The breadcrumb offered flexibility by allowing users to backtrack through various stages of the order process. Additionally, clear and visible call-to-action buttons were integrated to maintain a seamless user experience.

  • Engaging loading animation: To keep users engaged while their order processed, a playful loading animation was introduced. In this animation, a chef's hat (toque) moved as a visual cue while the system processed the order.

  • Concise order confirmation: The final page featured a clear and concise order confirmation, providing users with the reassurance that their order was successfully placed.

Testing played a pivotal role in refining the design and ensuring its effectiveness. The testing phase was divided into two primary categories: usability testing and desirability testing, including a 5-second test.

• Usability Testing: This phase allowed me to assess how easily users could interact with the design and provided valuable insights into any issues that required further optimization.

• Desirability Testing (5-Second Test): By conducting this test, I gauged the immediate visual appeal and user-friendliness of the design. It served as a rapid and insightful way to gather feedback.

Feedback from both types of testing helped refine the design, ensuring it was user-friendly and visually appealing.