Responsive Web Design
Desktop
Tablet
UI/UX Design
Lead UI/UX Designer
2 Months
This case study extends the scope of the first case study centered on the mobile food delivery app, Balanced Bites. It expands on the conducted research and explores responsive web design which complements its mobile app form.
For a review of the preliminary research, please see the case study here.
User Research
Wireframing
Prototyping
User Testing
Design
Group cart, adding items to cart & checkout
Questionnaire
As a brief recap, Balanced Bites is a food delivery and take-out app aimed at enhancing the dining experience. It offers customization through a questionnaire tailored to individual nutritional preferences and encourages social interaction through group ordering.
Before diving into the design and aesthetics of its responsive web counterparts, we needed to distinguish the needs and wants of users between a native mobile app and a responsive web app.
We conducted additional user interviews to understand how users interact with food delivery services across both mobile apps and responsive web platforms.
How often do you use mobile apps compared to web browsers when placing food orders?
5 out of 7 participants preferred using mobile apps for food delivery services, while 29% preferred web browsers
Based on these findings, we wanted to ensure a consistent experience for users whether they're on mobile apps or web browsers. In addition, we wanted to improve features that excel on one platform and explore ways to translate that onto another platform. We also wanted to tackle common issues and eliminate pain points experienced in mobile apps, ensuring that our responsive designs addressed these challenges.
Group cart, adding items to cart & checkout
Questionnaire
Group cart, adding items to cart & checkout
Questionnaire
We conducted two usability studies, one for the low fidelity prototype and another for the high fidelity prototype. We looked at the user flows for the questionnaire feature and the group cart into the check out stages. Interestingly, we actually found a lot more challenges and room for improvement within the high fidelity prototype. Below are summarized findings from both studies.
Set the spend limit in the group order feature as "no limit" by default, allowing users to check an option if they do want to implement a spending restriction for group payments
Add labels on the order summary page to indicate which items were ordered by each user in group orders
Incorporate a notes section in the cart to enable users to personalize their orders completely
Reorder the cuisines on the fourth page of the questionnaire alphabetically to offer users a more intuitive experience
Additional insights and recommendations we found that were not of major concern but would enhance the overall user experience include:
Making the group chat accessible from locations other than just the group cart
Adding a text label below the group chat icon for improved accessibility
Enabling users to share menu items directly within the group chat
Allowing users to save group orders for future use, like recurring group orders
Adding a QR code into the desktop browser version of the group order feature
Implementing system notes in the group cart that suggests alternatives to duplicate items (e.g., suggesting upsizing instead of ordering two of the same sides)
• Integrated a QR code into the desktop browser version
• Introduced a checkbox option for including a spend limit per person in group payments
• Added a checkbox allowing users to save group order profiles for future use
swipe to see
• Implemented name labels to distinguish between group members and the items they've ordered
• Introduced a "group chat" text label alongside the group chat icon to enhance accessibility
• Redesigned the group chat as a sticky tab feature accessible on all pages once a group order is initiated
• Integrated a notes text field for users to add any extra instructions or comments to their orders
• Reordered the cuisine options alphabetically
swipe to see
Check out the interactive high fidelity prototypes below! (Best viewed in full screen mode)
• Onboarding
• Categories
• Search
• Cart
• Questionnaire
• Mobile app download
• Deals of the day
• Categories
• Restaurants
• Food items
• Group order
• Nutritional info
• Price
• Add to cart
• Link or QR code
• Pay together or separately
• Spend limit
• Group chat
• Payment
• Delivery/pickup
• Notes
• Order summary
• Track order
• Tracking statuses
• Map
• Food courier communication
• Profile catered to user's health conscious and dietary preferences
By integrating responsive web designs alongside our mobile app, we were able expand our user reach. Testing both experienced users (from case study 1) and new users ensured our platform remains intuitive and functional across devices, contributing to increased engagement and loyalty.
Designing responsive web designs alongside a mobile app has taught me about the importance of user experience. Even if users don't use all platforms, designing for multiple platforms can uncover new features or challenges which may also uncover solutions that could benefit another platform. It's not just about aesthetics; it's also about ensuring seamless user interaction with the app's services, regardless of platform.
Working on responsive web browsers has shown me that user needs and preferences vary across platforms. This highlights the importance of adaptable layouts, intuitive navigation, and consistent functionality for a cohesive user experience.
“My favorite part is looking at the food menu, clicking it, then getting to see the nutritional details. It doesn't overload me with information at first sight.”
- Participant C
Building upon my first case study, the next measures I would consider to enhance the functionality of the app's services across different platforms include:
• Test the app's functionality and compatibility across various platforms to ensure a seamless experience for all users
• Design a version of the app for the mobile browser platform
• Address any remaining P2 insights
