NightOwls Fast Food
A responsive web design for a delivery-only restaurant concept
Roles
- User Experience (UX) Designer
- User Interface (UI) Designer
Deliverables
- Competitive analysis
- Personas
- User journeys and task flows
- Site map
- Low-fidelity wireframes
- High-fidelity mockups and prototypes
- Design system and UI kit
- Usability tests and findings
Project Specifications
Duration: 5 weeks
Tools:
Figma
Photoshop
Illustrator
Overview
The goal is to create an easy experience to order late-night fast food and have it delivered to the users. Users are able to track their order and when their food is en route.
Problems
- Ordering from third-party services typically charges restaurants high commission fees, which are often passed on to the customer in the form of inflated menu prices, delivery and service fees, and other surcharges during peak hours.
- Not all restaurants offer their full menu on third-party delivery platforms.
- Users are left with uncontrollable quality issues such as incorrect orders, missing items, cold or soggy food due to extended delivery times, and inconsistencies in portion sizes and food presentation.
Proposed Solutions
- Eliminating third-party services and delivery fees
- Ordering directly from the restaurant to ensure quality control and service.
- Having full access to the restaurant menu, loyal customers can earn reward points for promotions and discounts
By having a dedicated app, users can easily access the restaurant's full menu and place orders directly without third-party service fees.
Research
Findings
- Users may struggle to find restaurants that are open late at night, especially if they are in an unfamiliar area.
- Users may face confusion or frustration when trying to place a late-night order, particularly if the restaurant has a different menu or ordering process after regular hours.
- Users may experience long wait times for their late-night orders, especially if the restaurant is busy or understaffed.
- Users may have concerns about the safety and security of late-night food ordering, particularly if they are in an urban or high-crime area.
Getting Closer to User-Centered Design
Defining Key Differences in Motivations Through Personas
Upon researching for late-night, fast-food delivery options, I found that there are not many restaurants opened between the hours of 9PM – 4AM.
While a majority of people are asleep, there are many “night owls” who stay up throughout the night.
These three personas represent groups of users who generally would be up during operating hours of the restaurant and would greatly benefit from the dedicated app.
Creating Structure
This site map informed by user testing, organizationally depicts the key task streams that the high-fidelity prototype would focus on:
- Discovery and Download
- Exploring the Menu
- Registration and Placing an Order
- Order confirmation
- Delivery and receiving order
- Feedback and rating
Visualizing a User-Centric Experience
Through sketching and exploring page layouts, I found that clear module organization with ample whitespace and predictable design patterns for browsing information and appointment flow is key.
Understanding What Users Find Intuitive, and Why
Low-fidelity prototype testing allowed me to better understand how users expected to complete the tasks they were focusing on.
Establishing Visual Design
The visual design for the fast food restaurant’s UX study employs bold red and black colors to convey energy, urgency, and sophistication.
Red symbolizes vitality and prompts swift action, while black adds a touch of professionalism and modernity.
This dynamic color scheme aims to captivate users’ attention, reinforce brand identity, and enhance the overall user experience.
Surfacing New Issues
High-fidelity prototypes tested key user tasks. While tasks were straightforward overall, certain elements like the point system and information grouping on confirmation screens needed improvement, causing some user confusion.
How Usability Might Be Improved
Issues to Address for Longer-Term Development
- Implement intuitive search functionality with autocomplete suggestions to help users locate specific items efficiently.
- Offer multiple payment options, including credit/debit cards, mobile wallets, and digital payment platforms, to accommodate user preferences.
- Provide real-time updates on order status, including confirmation, preparation, and delivery/pickup, to keep users informed and engaged.
Lessons Learned
- Aim for a clean and intuitive user interface that allows users to accomplish tasks quickly and easily. Simplify navigation, minimize steps in the ordering process, and prioritize essential information to enhance usability.
- Design with accessibility in mind to ensure the app is usable by all individuals, including those with disabilities. Adhere to accessibility standards and guidelines to create an inclusive experience for all users.
- Ensure the app functions smoothly and reliably, with fast load times and minimal downtime. Performance issues and technical glitches can frustrate users and negatively impact their overall experience.