A fast casual slider restaurant with a new age retro feel.  

Concept Ideation

Challenge

How might we develop an application for a restaurant concept that specifically focuses on UI features?

Idea

Slid is a fast casual restaurant with a new age retro feel. The application for the restaurant allows for easy ordering, designed to engage the user in the ordering process with bright colors and playful functionalities.

Notable Features

The interface incorporates features such as modal screens and screens that include horizontal and vertical scrolling.

By placing retrievable information in hidden areas rather than on the subject screen, it allows for access to more information without overcrowding the screen, which can overwhelm users. This creates a calming and intuitive interface that enhances usability.

Menu categories are displayed using tabs.

The menu tabs allow the users to recognize what they can choose from at all times during the ordering process, rather than forcing them to remember specific paths to those items.

Ample spacing, consistent design elements, uniform colors, and clear terminology are integrated throughout the interfaces.

This approach enables users to quickly understand functionalities by setting clear expectations and recognizeable features, which reduces the chance of errors.

Photos of food are used throughout the menu.

This allows users to quickly recognize items visually, which reduces cognitive load and enhances efficiency.

The custom ordering process is a playful feature that allows users to build their sliders, which includes a rendering of them once they are complete.

This creates a fun and interactive experience and gives users freedom of control while completing their orders.

Process

Research

The first step in the process was to research apps for similar restaurants. By researching these apps, my goal was to identify common patterns and standards that users are accustomed to, ensuring the new design meets those expectations. This reduces frustration and errors while using the products. I focused my research on fast food restaurants, including fast casual.

Interviews

Following the research, I began the interview process. SLID is a restaurant that appeals to a broad audience rather than targeting a specific group; therefore, I did not focus on a specific demographic, other than people that have eaten at fast food restaurants.  

When developing the questions, I focused on the following parameters:
  • Mix open-ended and closed-ended questions to obtain a wide range of data, but prioritize qualitative insights.
  • Ensure questions are neutral to avoid biasing responses.
  • Frame the questions to understand user needs, behaviors, and pain points.
  • Tailor questions to specific tasks or experiences to help gather actionable insights rather than vague feedback.

The following highlights key questions, responses, and features implemented in response to the feedback received:

When ordering food with an app, what are your favorite and least favorite features?
  • Response: I don’t like being forced into signing in to the app if I want to order food..

    Sign-In Option

    SLID has the option to sign in but allows the user to proceed with the order without signing in.
    What do you believe is the most important aspect of ordering fast food.
    • Response: I don’t often order fast food digitally; it just seems easier to do it at the restaurant.
    Intuitive Design

    A streamlined home screen designed to guide users directly to the ordering process makes it easy for those who aren't accustomed to ordering digitally.

    Wireframes, Testing, and Redesigns

    Following the research and interviews, I began the design process which included creating low to mid level prototypes.
    Mid Level Prototypes
    The following are issues identified through testing and revisions made to address those issues:
    Issue

    There was a delay in reviewing the final order and completing the payment information.

    Revision

    I revised the order review interface and removed the menu and title  bar to reduce the amount of information on the page. This creates a more minimalistic interface, allowing users to focus on essential tasks without being overwhelmed by unnecessary information or options.

    Issue

    The original order confirmation bar font was in red which caused users to believe that the information was an error.

    Revision

    The colors in the confirmation bar were revised to conform with the rest of the colors in the interface. This change clearly communicates to users that their order is complete, rather than signaling an error.

    Branding

    Name and Logo

    The aim for the identity of SLID was a fast casual restaurant with a new age retro feel. For the logo, I wanted to use a colorful 1970s multiline design. I decided to make the logo an “S” that slides across the screen seemingly in motion. This retro-style logo grabs the users attention while clearly representing the restaurant.

    Typeface and Colors

    Antonio typeface is  sans-serif typeface with a modern, geometric design, which is used throughout the application. The style is suitable for both headlines and body text and adapts to various formats while maintaining a cohesive brand identity. The bolds style conveys excitement and energy, which aligns well with the dynamic nature of the ordering process.

    In selecting the colors, I aimed for a bold and vibrant aesthetic that evokes happiness, but also instills trust in users during the ordering process.  Blue represents stability and dependability, giving the users feelings of peace and trust while ordering. Orange is used as the secondary color and gives the users a feeling of enthusiasm and warmth. It stimulates social interaction and is often seen as a friendly and inviting color. When paired, orange and blue produce a striking contrast. The vibrant warmth of orange can invigorate the cool stability of blue, resulting in a harmonious balance. This color combination is frequently utilized in branding and design to draw attention while also communicating a sense of trust and dependability.

    Final Product

    General Ordering Procedure

    Open Slid App
    Begin Order
    Choose amount
    Review and Complete Order
    Add Payment Details
    Send Order
    Wait for Confirmation
    Confirmation Details

    Custom Ordering

    Open Custom Options
    Choose Ingrediants
    Complete Order
    Add to Bag

    Prototype

    The prototype was created with Figma and has limited functionality. General capabilities are demonstrated in the Final Product screens above. Although Figma will guide you through capabilities with error signals, a guide has been provided below which walks you through a task, should you need it.

    Try me
    Back to the Top