Digital Ordering
Digital Ordering is a customer-facing app that allows restaurants to offer an online ordering platform without the fees.
Overview
Project type: Home screen experience design
Role: Senior designer, user interviews, visual design, usability testing
Industry: Restaurant Tech
Duration: 2 Weeks (before handoff to development)
Introduction
• Digital Ordering is a mobile app that provides SpotOn restaurants, with their own online food ordering platform.
• Towards the end of the completion of the entire app, I was brought in to help design the home screen experience.
• The core of the app including the menus and ordering flow had already been designed.
• We had 2 weeks to research, design and test the home screen experience before hand off to development.
Multiple access points
To ensure we covered all home screen states, we developed an access point map that outlined the various ways users could enter the app. This map allowed us to tailor the experience for each user based on their entry point.
Wireframes
• After conducting a competitive analysis, we began with wireframes with the focus on the primary action of reordering to help increase sales for merchants.
• Our plan was to use the insights we had gathered from the competitive analysis and use the inspiration to begin forming our home screen.
• We began by exploring broader concepts, including location filters, pickup and delivery options, and more.
How can we bring a restaurant’s brand to life?
• Based on previous user interviews we had done, we knew that people eat and order with their eyes, making product images and brand color a critical element we wanted to bring to life.
• We had run a test with users previously with 3 different (fake) restaurants with nearly identical menus. One restaurant had beautiful product images, branding, and colors. The second had average looking product images and branding. The third had no product images, and little to no branding. We concluded sharp imagery and branding builds trust with the users and makes the restaurant appear more credible. In our test all users selected items from the restaurant with the nicest product images.
• While we aimed to create a visually striking design with sharp images and brand colors, we also needed to remain flexible, considering that some restaurants might lack high-quality images or logos.
• Leveraging the design system, we began crafting higher-fidelity screens to bring a restaurant’s brand to life.
• We focused on creating restaurant and order cards that highlighted the brand's identity.
Iterations of the home screen and order cards
New data, new vision
Through our analysis of quantitative data, we discovered that 96.1% of users consistently ordered from a single restaurant. This insight prompted us to reassess our focus: Were we solving the right problem? Instead of positioning the app as a food discovery platform, we considered whether it should feel more tailored to a user's favorite restaurant—similar to branded apps like Chipotle or McDonald's. After further evaluation, we decided to remove the food discovery modules from our Phase 1 concepts and realign the design to better reflect the behavior of the 96.1% majority of our users.
User testing
After several rounds of iterations and feedback from our manager, we finalized these concepts and proceeded to test them with 4 users.
What didn’t work?
After testing with four users, these are some of the key quotes that encompassed the overall negative themes of the feedback.
“First impression... Really busy, not sure where to focus.”
- Jessica
"Workflow is confusing. Not sure how I entered this screen."
- Galen
"The difference between New Order and Reorder is not immediately clear.
- Krystyna
"The search being at the top makes me wonder if it is to search the menu or for new restaurants."
- Leah
What did work?
After testing with four users, these are some of the key quotes that encompassed the overall positive themes of the feedback.
"Feels clean and modern."
- Krystyna
"I typically reorder the same stuff, so I like the reorder button."
- Jessica
"I like it. Has my last orders and the ability to make a new one."
- Galen
Next round of iterations
Based on the insights from our user testing, we focused on addressing the feedback by making the home screen feel more intuitive, enhancing the information hierarchy, and simplifying navigation to reduce user confusion.
Iterations round 2
How can we make the home screen feel like home?
Multiple users mentioned that the home screen felt cluttered, with too much text and no clear focal point. To address this, we redesigned the page with a large card carousel and prominent imagery, creating a clearer hierarchy. This approach also enhances scalability, allowing multiple restaurants to be displayed within the carousel.
How can we improve navigation?
Users had also expressed uncertainty about how they landed on the home screen during testing. We introduced a bottom nav bar to enhance navigation clarity and clearly indicate the user’s location within the app. This also allows for additional sections to be added in the future.
How can we improve hierarchy with the search function?
With several users expressing confusion about whether the search bar at the top of the screen was for searching the menu or finding new restaurants, we relocated it to the bottom navigation bar to improve the hierarchy. This change significantly reduced confusion during user tests and clarified that the search function is intended for discovering new restaurants.
How can we distinguish the difference between the New Order and Reorder buttons?
To reduce confusion between the New Order and Reorder buttons, we decided to remove the New Order button. During usability testing, we observed that users naturally tapped on the restaurant name and logo on the card, which effectively led them to the same page as tapping on New Order. This way we will have one primary button and the users can start a new order by tapping on the logo and restaurant name.
Final core screens light and dark mode
What’s next?
Since this was version 1, many features from the future vision were either pushed to the next version before or during the design process. While V1 isn't the most feature-packed version, we had to design with the future in mind. That's why we created these cards using a modular and scalable approach, allowing additional buttons—such as reservations, gift cards, loyalty programs, and more—to be easily integrated. We've also made it possible to customize the main CTA to links such as donations and promotions.
Loyalty programs
Our next exploration will focus on integrating loyalty programs into our app. These programs will allow restaurants to let their customers earn points with every purchase, fostering a sense of community and driving revenue. Restaurants will also be able to offer deals and promotions, with the flexibility to customize their rewards system.
Early ideation
Conclusion
This project was an exciting opportunity as I was brought in at the final stages to enhance the home screen experience. With a tight turnaround, we had to conduct rapid research and iterate quickly. The biggest challenge was balancing the design to cater to 96.1% of users while ensuring it could scale as the product grew. Despite the fast pace, it was a rewarding experience that tested my ability to quickly understand a product and deliver an effective design solution under time constraints.