Designing something unique
The scope and focus of this project are to create a mobile food ordering website for a small restaurant business to set itself apart from big competitors, using a user-centric approach to the design process.
​
Please note:
STIX is a concept that was made for this project, therefore, it is not a real place of operation.
Overview
What is stix?
Stix aims to offer genuine Southeast Asian street food. We focus on affordability, featuring small, budget-friendly portions reminiscent of Southeast Asian street vendors.
The goal
The aim is to develop a product with in-store menu prices for pickup orders, diverting customers from third-party apps, boosting sales through competitive pricing and a rewards program, and enhancing satisfaction by streamlining online ordering on our website.
Design Features
Menu Presentation and Ordering:
​
An intuitive and visually appealing menu layout to facilitate easy browsing of food items, complete with descriptions and prices.
Integrated a user-friendly add-to-cart functionality for convenient item selection.
Cart and Checkout Process:
​
An intuitive cart system for order review and modification, while also establishing a smooth checkout experience and diverse payment methods.
Additionally, order confirmation includes pickup timing, order specifics, and reward progress.
​
The checkout information at the top provides easy viewing of order details.
Rewards Point System:
​
A points system allowing users to earn rewards with each purchase. Users' current points are visible in their account profile, with easy accessibility to the rewards information and redeeming process.
​​
Food items:
​
A "favorites" feature to allow users to swiftly reorder their preferred items.
Menu options are emphasized with displaying relevant dietary information for users with dietary needs.
​
Filter Settings:
​
A dietary preferences feature to cater to distinct dietary restrictions. This allow users to indicate allergies, preferences for vegetarian or vegan choices, gluten-free selections, and more.
At the start of my research...
The competitors
I first needed to learn about the offerings and functions of other prominent food-ordering services. I wanted to pull from the strengths and improve the weaknesses of these competitors.
Wicked Chopstix
​Wicked Chopstix, a local Southeast Asian restaurant known for Vietnamese cuisine, competes directly, albeit on a smaller scale. It utilizes third-party apps to expand its customer base. While it lacks its own dedicated app, its website provides limited options, guiding users to third-party platforms for ordering and using a menu button that opens a separate tab with a PDF menu file.
85C Bakery Café
85C Bakery Café, a global chain with 400 American locations, provides budget-friendly Taiwanese baked goods. The website, rich in product imagery, offers an enticing and user-friendly experience, boasting an appealing design, intuitive navigation, and useful features like online ordering and store locator.
Notably, to access the rewards system, users are required to download the dedicated app, while food ordering solely takes place on the website.
DoorDash
Doordash, a leading player in the third-party food delivery sector, offers a user-friendly platform for ordering food from various restaurants. However, it's worth noting that Doordash often incurs higher costs than restaurants due to additional fees and delivery expenses, potentially resulting in increased expenses.
DashPass is DoorDash's subscription service offering unlimited free delivery on eligible orders from participating restaurants, along with exclusive discounts and faster checkout for a seamless and cost-saving dining experience.
Concluded Opportunities
1. Optimize the ordering, checkout, and pick-up tracking process for simplicity and efficiency.
​​
2. Implement a rewards program accessible through online orders via the website or third-party delivery purchases. ​
​​
3. Create an intuitive and visually appealing menu layout to facilitate easy browsing of food items
User Resarch
To engage users effectively, we aimed to create an intuitive website. My approach involved researching user preferences and behaviors on online ordering platforms, identifying crucial features for seamless navigation, and integrating a rewards system.
Research what?
To gain insights into users' food-ordering process, I conducted comprehensive interviews with individuals who actively utilize online food-ordering services. I had two main questions that I wanted answers to:
1. What can we learn about the user flow and steps that users take to complete an order, view their profile page, and use their rewards?
- What are the points of frustration that users regularly experience?
2. How long does it take for a user to view, select items, and place an order?
- What can be done to improve the time and process of placing an order?
Organizing the data
In food website design, utilizing an empathy map during user research enhances success by revealing common pain points like navigation issues, slow loading, or unclear payment steps. This informs feature customization to align with user preferences, including personalized food suggestions, easy reordering, and seamless order tracking.
What was discovered? More questions to be answered!
Ending this user research with more questions is actually an expected result that will help me design a user-centric product. Here are the problems I have discovered through this research phase:
1. How can we enhance the discoverability and comprehension of our rewards program for users while they place orders, ensuring a seamless experience?
​​
2. How can we optimize the ordering process to minimize friction and provide a streamlined experience for users with dietary restrictions?​
​3. How can we implement clear and intuitive navigation on our online order-for-pick-up website, enabling users to easily browse the menu, customize their order, and redeem rewards?
Just one persona
Given the limited scope of my research, prioritizing qualitative data was deemed crucial in developing one single persona that effectively captures the motivations, goals, and needs of prospective users for this website.
Jessica, a busy marketing specialist in Seattle, faces time constraints due to her demanding job, often opting for online food ordering for convenience. She enjoys exploring diverse cuisines and new dishes from various restaurants in her limited free time.
Solutions
Recognizing the need to address the challenge of intuitive navigation and minimize friction, as well as attract customers through a seamlessly integrated rewards program, the following features are to be emphasized in my design.
Design ideation
One of my design objectives is to streamline the user journey, efficiently guiding them from the initial point of accessing the website (point A) to the ultimate goal of completing an order (point B), while minimizing the number of steps and potential obstacles involved in the process.
Lo-fi wireframe user flow of getting from A (accessing the website) to B (completing an order). ​​
The central emphasis of my design lies in its simplicity, aimed at mitigating any sense of overwhelming complexity during website navigation.
Earlier design concepts:
menu item, cart page, side menu, homepage
Observe the absence of a requirement for scrolling navigation within these designs. This constitutes an additional measure I intend to incorporate into my ideation process to cultivate a more simplistic navigation experience.
User Testing
I opted to perform user testing in the early stages of low-fidelity design to prioritize the website's functionality and user experience prior to delving into detailed UI design. This strategic approach aims to expedite the subsequent UI integration by validating the website's core features and enhancing its usability through testing the underlying functionality.
Iterations
In light of the insights garnered from the mid-fidelity user testing, I have identified several iterative enhancements that hold the potential to significantly elevate the user experience.
Feedback emphasized the necessity for enhanced visibility and accessibility of checkout information within the cart page.
Mid-fidelity prototype before iteration
Hi-fidelity prototype after iteration
Several participants highlighted the potential value of receiving more useful information during the order confirmation stage.
Mid-fidelity prototype before iteration
Hi-fidelity prototype after iteration
The incorporation of the burger menu within the top navigation led to a state of confusion among the participants. Furthermore, feedback indicated that the concurrent presence of both navigation elements was deemed redundant by some, favoring a streamlined approach where accessing navigation through a singular source would be more intuitive.
Mid-fidelity prototype before iteration
Hi-fidelity prototype after iteration
Branding
Reflection
Keeping it simple
​
In approaching this project, my initial vision was to create a comprehensive ordering system and website, akin to industry giants such as DoorDash. I believed that such an approach was imperative to elevate a small business and position it competitively alongside industry giants.
However, as I delved into the ideation of features and design concepts, I found myself entangled in the pursuit of a grandiose and intricate website, aimed at emulating the scale of these prominent platforms.
​
Subsequently, I recognized the necessity to recalibrate my focus and realign my attention towards the essence of this small business, which inherently possesses its own distinctive attributes. It became very evident that rather than striving to replicate the very architecture of established players, a more judicious approach would entail crafting a website of simplicity, tailored to accentuate and enhance the restaurant's unique identity. This shift in perspective allowed me to appreciate the significance of harmonizing the website's design with the restaurant's brand image, thereby fostering a distinctive and resonant digital presence.
Let's connect!
Get in touch if you have any question or just to say hi! :)
© An Nguyen Design