SUMMARY
Congee Queen is a popular Chinese restaurant chain in Toronto, renowned for its authentic Chinese cuisine. The project focused on redesigning their website to enhance the online pickup order process, improve user experience, and reduce reliance on third-party platforms, thereby creating a cohesive and cost-effective ordering solution.
SERVICES WE PROVIDED:
Website Redesign
TEAM | ROLES & RESPONSIBILITIES:
Beatrice Asamany: UX Designer, Researcher
Esther Steve: UX Designer, Researcher
Iris Baloran: UX Designer, Researcher
Safa Hasan: UX Designer, Researcher
Shana Wu: UX Designer, Researcher
The project team consisted of five UX designers and researchers, collaborating through a mix of remote and in-person interactions. My specific responsibilities included conducting user research, developing wireframes, and participating in user testing sessions. The team coordinated through virtual meetings on Google Meet and Microsoft Teams, and task management was done via Trello. Shared documents were managed through Google Workspace tools.
Problem Statement
The growing demand for convenient dining options has made online pickup increasingly important for restaurants. Congee Queen currently relies on a third-party app for online orders, which disrupts the website experience by redirecting users away from the site abruptly, negatively impacting user experience.
To address these challenges, we sought to understand and resolve the pain points faced by users. Our primary goal is to develop an in-house online ordering system that prioritizes the pickup option, which will provide a seamless and cohesive user experience. This approach aims to reduce reliance on third-party apps, minimize high delivery fees, and enhance the overall perception of the Congee Queen brand.
THE 'ORDER NOW' BUTTON ON THE CONQEE QUEEN WEBSITE AND THE REDIRECTED THIRD PARTY SITE
TARGET Audience
The main users of the redesigned platform were:
Families: Seeking convenient and reliable access to their favorite Chinese dishes.
Working Professionals: Looking for quick and easy lunch or dinner options.
Food Enthusiasts: Individuals interested in exploring authentic Chinese cuisine.
Internal stakeholders, such as restaurant managers and staff, were secondary users, using the system to manage orders and streamline operations.
Scope and Constraints
The project was bound by a 14-week timeline and a limited budget. Initially, the scope included developing an in-house checkout system and improving navigation. Midway, we had to include additional features such as an interactive map and detailed pickup instructions, which required further iterations and testing.
OUR PROCESS
1. User Research and Gathering of Insights
Card Sorting: We used card sorting to understand how users naturally categorize menu items and features, which would help structure the information architecture in a user-friendly manner.
We conducted both open and closed card sorting exercises with a diverse group of participants. This involved users organizing menu items and website features into categories that made sense to them.
We were able to identify common groupings and terminologies that users associated with different categories, which provided a foundation for the website’s navigation structure.
CARD SORTING
2. Information Architecture (IA) and Navigation Design
To create a clear, intuitive navigation structure that reduces cognitive load and ensures users can easily find what they are looking for, we developed an IA diagram based on the results of the card sorting activity. We gave priority to frequently accessed sections such as the menu, pickup details, and locations.
The outcome was a streamlined navigation system that was validated through user testing, certifying that users could navigate the site efficiently.
IA DIAGRAM
3. Wireframing
We created wireframes to visualize the layout and structure of the website - that the design is user-centric and aligns with Congee Queen’s brand identity.
We created initial sketches and then low-fidelity wireframes, starting with the mobile version - when we figured out the layout for a smaller screen size, we were able to easily map out the that of the desktop version.
Design Decisions
Interactive Map: We included an interactive map to simplify the process of finding nearby restaurant locations, addressing user pain points with the previous static map.
Menu Layout: We moved away from the existing PDF format to a dynamic, responsive design. The decision to use a side menu for categories was influenced by the need to present a wide variety of dishes in a digestible format.
With the wireframes as a blueprint for the website's layout, we were able to get early feedback and make iterative improvements before the final design process.
THE REDESIGNED INTERACTIVE MAP
4. Usability Testing and Iterations
To validate design choices and ensure that the website met users’ expectations and needs, we conducted usability testing sessions with representative users, focusing on tasks such as navigating the menu, finding a nearby location, and understanding pickup instructions.
Feedback and Iterations
Search Functionality: Users often tried to use the search feature instead of browsing categories, leading to the addition of a dedicated search interface.
Pickup Process Clarity: One of the feedbacks we received indicated the need for clearer pickup instructions and a visual progress indicator for order status.
Based on the feedback from the usability testing, we made refinements to the navigation flow, clarified instructions and enhanced search functionality.
5. High-Fidelity Mockups & Final Design
To finalize the visual design, we developed high-fidelity mockups that integrated the refined user feedback. We also incorporated brand elements like color schemes, typography, and imagery to maintain a cohesive visual identity.
The final design provided a visually appealing and intuitive user experience, aligning with Congee Queen’s brand values and business goals.
STYLEGUIDE & MOODBOARD
Solution
The final solution was an in-house online ordering system that seamlessly integrated into the Congee Queen website, with emphasis on the pickup option. Some of the key features we included were:
Interactive Map: To help users easily locate the nearest restaurant and get directions.
Responsive Menu Design: A dynamic, categorized menu that adapts to different screen sizes and provides an easy-to-browse experience.
Order Progress Tracking: A progress bar on the confirmation page to inform users of their order status in real-time.
Clear Pickup Instructions: Detailed instructions on where and how to pick up orders, including visual aids and location-specific details.
A SUMMARY OF THE CHANGES WE MADE TO THE WEBSITE
Lessons Learned
User-Centric Design is Vital: Continuous user involvement is crucial for refining the design and ensuring it meets user needs.
Mobile Optimization: Given the high percentage of mobile users, a mobile-first approach was essential for accessibility and user satisfaction.
Iterative Process Importance: Regular testing and iterations allowed for quick adjustments and improvements, an agile approach to the project proved very valuable.
Integration Testing: Future projects could benefit from more extensive testing on integrated features like the interactive map to ensure seamless functionality.
Future Considerations
Personalized User Experience: Implementing features such as user accounts for order history and personalized recommendations.
Broader User Testing: Expanding testing to include a more diverse demographic to better understand various user needs and preferences.
This case study demonstrates the importance of a user-centric approach in designing a digital experience that aligns with both business objectives and user expectations. The Congee Queen project shows restaurants can successfully transform their online ordering process, for a more engaging and efficient user experience.
