Responsive CROSS-PLATFORM Design

Lombardo 7.4 Delicatessen Responsive Web Feature Image

Case Study Feature Image

User Experience Design Responsive Web Ordering Case Study Title

EFFICIENT FOOD ORDERING WITH RESPONSIVE UX

Efficient Food Processing is a UX case study focused on improving the food ordering process in New York and Sydney. Our goal is to create a streamlined and accessible ordering experience by developing a responsive web platform. Our cross-platform design approach ensures optimized user experience across devices. Through innovative design and collaboration, we aim to enhance the customer experience and transform the food ordering process. Our case study highlights the value of responsive design.

CHALLENGES

Inaccessible ordering process
Unorganized food content
Lack of consumer support for ordering process
Confidence issues in making group food orders

UX DESIGN GOALS

Improve customer satisfaction
Increase accessibility for people with disabilities
Streamline the checkout process
Boost the efficiency of the business

DESIGN FEATURES

Responsive web platform
Organized food content
Improved accessibility features
Streamlined ordering process
Enhanced customer support for ordering process

EXPECTED IMPACT OF THE WORK

Improved customer satisfaction
Increased accessibility
Streamlined ordering process
Boosted efficiency for the business
Strengthened competitive edge in the food and beverage sector

PROJECT OVERVIEW

UNDERSTANDING THE USER

STARTING THE DESIGN

REFINING THE DESIGN

GOING FORWARD

PROJECT OVERVIEW

Industry background - The product - The problem - The goal - My role - Responsibilities

UNDERSTANDING THE USER

User research - Persona - Problem statements - User journey maps

STARTING THE DESIGN

Sitemap - Paper wireframes - Digital wireframes - Low-fidelity prototype - Usability studies

REFINING THE DESIGN

Design System - Mockups - High-fidelity prototype - Accessibility - Usability studies

GOING FORWARD

Takeaways - Next steps

PROJECT OVERVIEW

INDUSTRY BACKGROUND

The food and beverage industry has faced a number of challenges in recent years, including rising energy prices, the end of the EU transition period, and global supply chain difficulties. These challenges have led to increased costs for businesses in the sector, including price increases in raw materials and transportation, as well as worker shortages.

In addition to these external challenges, the food and beverage industry must also adapt to the evolving preferences and expectations of consumers. This includes the growing demand for convenience, sustainability, and health-conscious options, as well as the increasing use of digital platforms for ordering and payment.

To address these challenges and meet the needs of their customers, businesses in the food and beverage sector must be proactive in embracing user-centered design. This involves conducting extensive user research to gain a deep understanding of the needs and preferences of users, and designing products and services that meet these needs. By doing so, businesses can stay competitive, increase customer satisfaction and loyalty, and adapt to changing market conditions.

THE PRODUCT

Lombardo 7.4 Delicatessen is the ultimate destination for sandwich lovers, offering a wide selection of European deli meats to choose from.

Located in the suburbs of New York and Sydney, we cater to everyone from locals and millennials to professionals and tourists.
Whether you're looking for a quick bite or a more elaborate meal, we've got you covered with our fresh, made-to-order sandwiches.

Stop by and discover why Lombardo 7.4 Delicatessen is the go-to spot for delicious deli sandwiches.

PROJECT DURATION

May 2022 to October 2022

THE PROBLEM

Inaccessible ordering process
Unorganized food content
Lack of consumer support for ordering process
Confidence issues among locals, millennials, and tourists in making group food orders
Rising costs and supply chain challenges affecting food and beverage industry

Increased energy prices affected food and beverage businesses more than other businesses

The food and beverage industry has been hit hard by a range of challenges in recent times, including rising energy prices, the end of the EU transition period, and global supply chain disruptions. According to the Office for National Statistics' Business Insights and Conditions Survey (BICS), 60% of food and beverage businesses reported being impacted by rising energy prices, compared to just 38% of businesses across all sectors. Additionally, 17% of food and beverage businesses reported changes to their supply chains due to the end of the EU transition period, compared to 7% of businesses across all sectors. These challenges have resulted in increased costs for food and beverage businesses, including higher raw material and transportation expenses.

People are buying less when food shopping

Food and beverage businesses were approximately twice as likely to report additional transportation costs

To cope with these difficulties, food and beverage businesses have implemented a variety of strategies, such as increasing their reliance on UK suppliers, diversifying their supplier base, and exploring alternative modes of freight. Although the food and beverage sector has also experienced worker shortages, these shortages are not significantly worse than those experienced by businesses in other sectors.

The food and beverage sector has seen its turnover performance hit since December 2021

Contains public sector information licensed under the Open Government Licence v3.0.

Food and beverage businesses more likely to cite concerns on inflation and energy prices compared with businesses across all sectors

THE GOAL

As the food and beverage industry faces challenges, implementing the following UX design goals enhance the customer experience and allow businesses to better serve their clients:

Quick and easy group ordering: A user-friendly interface and streamlined group ordering process boost customer satisfaction and loyalty by simplifying the order placement process and improving the overall customer experience for businesses.
Accessibility features: When businesses prioritize accessibility in their design, they increase customer satisfaction and reach a broader audience, including individuals with disabilities.
Streamlined checkout process: Simplifying the checkout process and removing unnecessary steps lower abandoned cart rates and increase customer satisfaction by making it easier for customers to place orders.
Clear and accurate product information and intuitive navigation: Accurate product information and user-friendly navigation guide customers through the ordering process and enhance their experience with businesses.

By implementing these UX design goals, businesses in the food and beverage sector improve the customer experience, increase satisfaction and loyalty, and strengthen their competitive edge in a crowded market.

MY ROLE

Lead UX Design Practitioner

RESPONSIBILITIES

Concept ideation
Conducting UX research and interviews
Building wireframes and low-fidelity prototypes
Conducting usability study
Synthesizing study results
Iterating on high-fidelity designs and prototypes while accounting for accessible design

View demo on Youtube

View the interactive high-fidelity prototype on Adobe XD.

UNDERSTANDING THE USER

USER RESEARCH: SUMMARY

As part of the design process for our sandwich shop, I conducted extensive user research to gain a deep understanding of our target audience. Through interviews and empathy mapping, I was able to identify key user groups and their needs, including the needs of business and professional adults who value their time and prioritize efficiency in their daily lives.

This user group validated our initial assumptions about our customers, but our research also revealed additional insights about the challenges and priorities that impact their food ordering decisions. These included factors such as disabilities and credibility, which can make the process of ordering food more difficult and time-consuming.
Based on these findings, I have been able to tailor the design of our sandwich shop to better meet the needs of this user group, ensuring that their experience is efficient, accessible, and enjoyable. I am confident that our user-centered design approach will result in a more satisfying and successful customer experience.

USER RESEARCH: PAIN POINTS

“I hate the surprise of orders that are incomplete, incorrect and the dreadful long wait.”
“The complexities of ordering food online.”

“It’s hard to me to navigate apps with unreadable text and lack of images.”

“I feel guilty about not being able to meet the customers’ needs due to my limited marketing knowledge.”

“The oblivious crew to your needs. They are too busy to be bothered.”

PERSONA

Through our persona development process, we gained a deep understanding of the specific needs and goals of different user groups in the food and beverage sector. This included local residents looking for quick and convenient meal options, young professionals seeking healthy and sustainable options, tourists looking for authentic and culturally diverse experiences, and foodies seeking high-quality and innovative products. By understanding the unique needs and motivations of these user groups, we designed products and services that truly resonated with them, leading to increased customer satisfaction and loyalty.

Manuel

Age 53

Education Some college

Hometown New York, NY

Family Married, 2 children

Occupation Business owner

“I have a challenging business operations but I don’t want a simple task of ordering to be challenging too.”

GOALS

To better manage inventory, operations and marketing of my business
To find a way for customers to place orders easily
To have more time with my family

FRUSTRATIONS

“It’s hard to me to navigate apps with unreadable text and lack of images.”
“It’s discouraging to order when there’s too much going on on the screen.”
“I feel guilty about not meeting my customers’ needs due to my limited marketing knowledge.”
“I am anxious about finding solutions to my business challenges”

PROBLEM STATEMENT

Manuel is a business owner who needs an efficient system to run his operations so he can spend his time in more meaningful ways without hurting his customers’ needs.

Manuel is a busy business owner at the heart of Metropolitan New York. Manuel works unpredictable hours to due tough competition. Sales have been gradually rising over the last few years. Manuel has a visual impairment for which they use screen reader technologies to navigate the internet, apps, and websites. The problem for Manuel is that not all apps and websites are optimized for this technology. Manuel is also concerned that there should be an easier and efficient way for customers to easily place orders. Manuel mentions “I wish there’s efficient system to assist my operations because I value my time and customers so much. If I can resolve this challenge, then I can spend more time with my family.“

USER JOURNEY MAP

User journey map

View Full User Journey Maps

STARTING THE DESIGN

SITEMAP

Sitemap

PAPER WIREFRAMES

Element List: Navigation, Profile, Images, Texts, Buttons

Stars indicate the chosen elements to make up the initial digital wireframes.

To ensure that the responsive web design was as functional and user-friendly as possible, we invested time in the early stages of the design process to draft iterations of each screen on paper. This carefully fitted and positioned various elements such as navigation, checkout flow, and browsing in a way that addressed common user pain points. The final version, shown on the far right, was structured to provide inclusive and accessible features to help users complete their goal of placing an order quickly and efficiently, while also optimizing the overall web experience. By taking the time to carefully plan and design the platform, we created a user experience that was both convenient and enjoyable.

PAPER WIREFRAME

SCREEN SIZE VARIATIONS

Lombardo Delicatessen's food ordering service is available on a variety of platforms including apps, mobile devices, tablets, and desktop computers. Ensuring accessibility on all of these platforms is crucial in providing a smooth user experience. In order to optimize the layout and structure of the product on tablets and mobile devices, we carefully arrange the elements and components of the food ordering process to provide a convenient and user-friendly experience for our customers. No matter how they choose to access the service, we aim to provide a seamless and enjoyable experience.

Cross-platform layout and design (Desktop, Mobile and Tablet)

DIGITAL WIREFRAMES

As the starting design phase continued, I made sure to reference screen designs on feedback and findings from the user research.

HOMEPAGE.

CALL TO ACTION (Group Order Now), Menu and Order elements make it quicker and easier for user to start the ordering process.

Image and Text elements take the user to Menu / Promo page to share the order menu to group and grab the latest deals.

Easy and smooth navigation were the primary and key user need to address in the design as well as equipping the design structure with accessibility assistive technologies.

Well designed and organized navigation elements allow the user to take control of the web navigation from sign in to mobile ordering and getting the latest deals.

ACCESSIBILITY PAGE.

Inclusion and Accessibility features of the web design allows the user to take advantage of the website functionality to the fullest.

SCREEN SIZE VARIATIONS

Customers of Lombardo Delicatessen can access the food ordering service through various platforms including mobile devices, tablets, desktop computers, and apps. In order to provide the best possible user experience, it is essential that the service is easily accessible and user-friendly on all of these platforms. To achieve this, we structure the layout of the product on tablets and mobile devices to fit the elements and components of a smooth food ordering process. This ensures that our customers conveniently and easily place orders, no matter what device they are using.

Cross-platform layout and design (Desktop, Mobile and Tablet)

Desktop Sign in layout

Mobile and Tablet Sign in layout

LOW-FIDELITY PROTOTYPE

View demo on Youtube

View the interactive low-fidelity prototype on Adobe XD.

This low-fidelity prototype was designed to simulate the primary user flow for ordering sandwiches in a responsive web design. This includes everything from gathering orders from colleagues to placing the order and confirming it. The prototype was designed to be used in a usability study with users, and it provides a helpful tool for testing and refining the design of the platform. By simulating the complete process of ordering sandwiches, the prototype allows us to better understand the needs and preferences of our users and make informed changes to the platform in order to create a more user-friendly experience.

USABILITY STUDY: PARAMETERS

Study type:

Unmoderated usability study

Location:

Australia, remote

Participants:

5 participants

Length:

20-30 minutes

USABILITY STUDY: AFFINITY DIAGRAM

AFFINITY DIAGRAM. Sorting out information to analyze, synthesize and gather actionable insights.

USABILITY STUDY: FINDINGS

I conducted two rounds of usability studies to gather insights and improve the design of the platform. The results of the first session informed the iteration of the design, from wireframes to mockups. The second usability study focused on refining the app, including the naming of functional icons and the addition of how-to tutorials. By conducting these studies, we made informed changes to the platform and created a more user-friendly experience for our users.

ROUND 1 FINDINGS

Users want to see improved hierarchical structure of elements
Users accidentally interrupted a loading process with clicking on unwanted elements within the flow
Users preferred a different navigation layout for easy access

ROUND 2 FINDINGS

Users prefer close-to-function icon naming for better site exploration and task completion
Users wish to read the official documentation of how to navigate the site and to complete a task

USABILITY STUDY: ITERATION

During the initial design, some elements extended beyond the boundaries of the screen and required horizontal scrolling to be accessed. While this may have allowed users to reach these elements, it can also be inconvenient and may not provide the best user experience. As a result, a usability study was conducted and the layout and structure of the platform were redesigned to better fit within the screen. The revised design includes a more efficient layout and structure, with the aim of providing a more convenient and user-friendly experience for users. By keeping all elements within the screen as much as possible, we hope to make the platform more accessible and easy to use.

BEFORE

AFTER

During the sign-in process, the initial interface displayed a loading screen. However, there were also other elements present that could potentially distract users and interrupt the task at hand if clicked on. In order to improve the user experience, a usability study was conducted and the interface was redesigned to be more streamlined and focused. The revised interface eliminates unnecessary elements and allows users to complete the sign-in process without interruption, smoothly guiding them to their intended destination. This updated design aims to provide a more efficient and seamless user experience.

BEFORE

AFTER

REFINING THE DESIGN

DESIGN SYSTEM

TYPOGRAPHY

LOGO: CRUSHED, PARISIENNE

MAIN TYPEFACE: NOTO SANS, HELVETICA NEUE

LOGO & COLORS

Logo and Color Style Guides

ICONOGRAPHY & COMPONENTS

Iconography

Components

MOCKUPS

The before image shows elements that extend beyond the boundaries of the screen, requiring the user to scroll horizontally in order to access them. While this may allow users to reach elements that are not immediately visible, it can also be inconvenient and may not provide the best user experience. As a result, we conducted a usability study and redesigned the layout and structure of the platform to better fit within the screen. The new layout includes high-fidelity images for a richer content, as well as a progress bar indicator and a delete option to allow users to easily remove items. An item counter is also positioned for easy access, making it easier for users to track their progress and manage their items. These changes are intended to provide a more convenient and user-friendly experience.

BEFORE Usability Study

AFTER Usability Study

The before image shows a loading screen that appears while processing a request to sign in. However, there are also other elements present that are not necessary during this process and may be clicked on by accident, potentially interrupting the flow of the task. After conducting a usability study, we have redesigned the interface to be cleaner and more focused, with the aim of allowing users to complete the task without interruption and navigate to their intended destination more easily. The resulting interface is intended to provide a better and more streamlined user experience.

BEFORE Usability Study

AFTER Usability Study

MOCKUPS: ORIGINAL SCREEN SIZE

Homepage mockup

Checkout mockup

Menu mockup

MOCKUPS: SCREEN SIZE VARIATIONS

Our customers use a variety of different platforms to access our food ordering service, including apps, mobile devices, tablets, and desktop computers. It is important that the service is accessible and easy to use on all of these platforms in order to provide the best possible user experience. To that end, we have carefully structured the layout of the product to fit the elements and components of a smooth food ordering process, ensuring that it is easy to use and navigate across all platforms. By doing so, we aim to provide our customers with a seamless and convenient food ordering experience, no matter how they choose to access the service.

Cross-platform Sign in (Desktop, Mobile and Tablet)

Cross-platform Homepage (Desktop, Mobile and Tablet)

HIGH-FIDELITY PROTOTYPE

View demo on Youtube

View the interactive high-fidelity prototype on Adobe XD.

The purpose of this high-fidelity prototype is to improve upon an earlier design by incorporating the results of usability studies and evidence-based insights. The focus on accessibility is meant to ensure that the app is easy to use and provides a seamless and enjoyable user experience. By prioritizing accessibility, we aim to create an app that is both functional and desirable to interact with.

ACCESSIBILITY CONSIDERATIONS

In order to make the platform more accessible for visually impaired users, we have incorporated a range of accessible colors, fonts, and contrast throughout the platform. By doing so, we hope to make the platform easier to use for a wider range of users, including those who may have visual impairments. This focus on accessibility is an important part of our overall goal of creating an inclusive and user-friendly platform.

To improve the overall navigation and usability of the platform, we have implemented a range of new cues and hints such as a progress bar indicator, toggle switch, and highlighted buttons and icons. These features are designed to provide users with clearer guidance as they navigate the platform, and to make it easier to find and interact with the various functions and features of the platform. By incorporating these elements, we hope to create a more intuitive and user-friendly experience for our users.

We have made a number of improvements to the layout and structure of the platform in order to make it easier for users to explore and understand. One of these improvements is the implementation of a clear hierarchy of elements, which helps to break down the various features and functions of the platform into more manageable chunks. For example, we have categorized the accessibility features according to different categories such as vision, hearing, motion, and language. This helps users to more easily find and access the specific features that they need, and makes the platform more user-friendly overall.