JUMPQ

Revolutionizing hawker center dining experience with JumpQ's consumer web app

๐Ÿ—“๏ธ duration
October 2021 - 28 Feb 2022
๐Ÿ‘ฅ๏ธ pEOPLE
๐Ÿ”ฎ๏ธ tools
Figma, Whimsical, Procreate
๐Ÿง ๏ธ SKILLS
User Research, Prototyping, Usability Testing
summary
During the Innovation & Entrepreneurship Practicum@SoC program at NUS Enterprise, my team received a seed funding grant of S$10,000 to work on JumpQ, our startup idea that seeks to digitize the ordering, payment, and food receiving process for consumers and hawkers. To start, I conducted user research and ideation, and using the insights gathered, I created a prototype that was evaluated through qualitative user research.
the problem
The traditional hawker centre experience heavily relies on face-to-face interactions, making it challenging to integrate technology that could streamline the ordering process. Additionally, during peak hours, customers often spend significant amounts of time waiting in long queues, which can be frustrating and discouraging, especially when wanting to try multiple stalls.
Thus, the challenge was to find a way to improve the waiting experience for customers at hawker centres while still preserving the authentic hawker culture.
THE SOLUTION
I designed JumpQ, an online food ordering and payment platform created to provide a seamless experience for consumers at hawker centres. With JumpQ, consumers no longer need to spend precious time waiting in line to order food from multiple stalls. Here are some of its key features:
Mix & Match Orders
JumpQ offers the convenience of Mix & Match Orders, allowing users to select dishes from multiple stalls in one transaction. This time-saving feature enhances the dining experience at hawker centres, enabling users to explore a variety of dishes hassle-free.
Saved Past Orders
With this feature, JumpQ makes reordering favorite dishes a breeze. Users can access their previous orders and reorder with just one click, making it perfect for frequent hawker centre visitors seeking a seamless and efficient ordering process.
Binary Review System
JumpQ adopts a user-friendly Binary Review System for rating experiences. Users can express sentiments through "not recommend" and "recommend" buttons, promoting ease of use and encouraging valuable user engagement within the community.
Real-time Text Notification System
Users receive instant updates on their food orders via text messages, eliminating the need for constant website checks. This virtual buzzer system allows users to stay informed about their orders' progress while attending to other tasks.

Check out my process below โฌ‡๏ธ

USER RESEARCH DEFINING USER NEEDS COMPETITIVE ANALYSIS WIREFRAMING PROTOTYPING USABILITY TESTING REFLECTIONS
user research
Before designing JumpQ, I needed to deeply understand the needs and motivations of potential users. I approached this by conducting both primary and secondary research.
defining user needs
Based on the survey results, it is clear that consumers face significant challenges when ordering and queuing for food at hawker centres.
  • Consumers are hesitant to download another food ordering app, given the multiple ones they already have on their phones.
  • Concerns over technical issues also arise with the introduction of new ordering concepts in hawker centres.
  • Queuing and reserving seats are tedious and time-consuming, particularly during peak hours and when buying from multiple stalls.
Despite the challenges, the survey results indicated that consumers firmly believe the proposed idea would significantly enhance their dining experiences at hawker centres.
To effectively address these challenges and meet consumer needs, JumpQ should implement the following solutions:
  • Provide users with an intuitive interface to explore all available stalls and dishes conveniently.
  • Optimize the food ordering and collection process to ensure efficiency and reduce waiting times.
  • Offer a hassle-free, convenient, and accessible web app solution, eliminating the need for users to download or install additional applications.
  • Queuing and reserving seats are tedious and time-consuming, particularly during peak hours and when buying from multiple stalls.

User personas

Click on any of the personas to view in full.

competitive analysis
In this competitive analysis, I extensively researched food ordering apps for hawker centres and food courts, including reading reviews and personally trying out the apps. While I couldn't find a direct competitor matching JumpQโ€™s concept, I explored similar apps (both delivery and pickup). By examining their strengths, weaknesses, and potential opportunities, I gained valuable insights that shaped the design of JumpQ with a strong focus on providing a seamless and user-friendly experience for consumers.

Click here to view my competitive analysis in Notion.

Opportunities & Challenges identified

wireframing
During my Lo-fi Wireframing process, I utilized Whimsical, a collaborative design tool, to sketch out the layout, flow, and interactions of the app. This platform not only allowed me to work seamlessly with my teammates but also facilitated efficient feedback gathering through its comment feature. By sharing my wireframes with teammates, I was able to receive valuable input and diverse perspectives, enabling me to refine and iterate on the designs rapidly.
I was also able to explore various design ideas and make quick adjustments to improve the user experience. This iterative approach helped me refine the wireframes, ensuring they aligned with user needs and business goals before progressing to the next stages of the design process.
๐Ÿง  view wireflow in whimsical ๐Ÿง 
During the design process of our rating system, we thoroughly evaluated two approaches: the binary method and the scale/range method, with a focus on user behavior.
Analyzing user feedback revealed their tendency to express extreme opinions when rating experiences. Leveraging this behavior, we opted for the binary approach, offering "Not recommend" and "Recommend" buttons for quick and intuitive interactions.
In contrast, while the scale/range method is commonly used in food apps, it is most effective when users can rate different features of a product or experience separately, rather than providing a holistic rating for the entire product.

Airbnbโ€™s scale rating system allows users to rate specific categories within the stay experience.

An interesting observation from my research is that the scale method can lead to potential user confusion and inconsistent feedback. Users often provide extreme ratings when unsure about the meaning of different rating levels, resulting in contradictory feedback. Some users misinterpret the scale, mistakenly believing that 1 star represents the best and 5 stars indicates the worst experience.
To address this issue, I added clear labels to each rating endpoint, reducing ambiguity. This improvement allowed for a more accurate comparison between the two methods, ultimately guiding our decision-making process.
In our case, the binary approach was a better fit. It encourages quick interactions without the need for a complex rating system. Its simplicity and clear guidance enhance the overall user experience, while also laying the foundation for future plans to gather valuable preference data for personalized recommendations, further engaging users as we continue to improve our product.
To facilitate and encourage users in providing comprehensive and meaningful reviews, I incorporated a list of helpful keywords into the review section. These keywords cover essential aspects of the dining experience such as taste, portion size, service, value, timeliness, and more.
I opted for a feedback system that combines various rating approaches:
  • Binary "Not recommend" and "Recommend" buttons
  • Helpful keywords
  • Optional text review and picture upload for those who want to provide more expressive and valuable information.
This simplifies the rating and reviewing process while ensuring the information collected is useful.
prototyping
During the "Hi-fidelity Prototyping" phase, I used Figma to turn wireframes into interactive mockups. By refining typography, colours, icons, and imagery, I achieved a polished and professional interface. Figma's component system ensured design consistency and simplified updates and iterations.
Using Figma's prototyping feature, I added interactive behaviors and animations to the mockups, creating a seamless flow and simulating user interactions. This effectively conveyed the app's functionality and usability to stakeholders and users.
Throughout the process, I actively sought feedback from team members and conducted usability testing to gather valuable insights and improve the prototype. ย The high-fidelity prototype in Figma served as a strong foundation for the subsequent design and development stages, providing stakeholders with a tangible representation of the final product and promoting efficient communication and collaboration within the team.
usability testing
To conduct usability testing, I engaged 10 participants in a qualitative think-aloud process accompanied by follow-up interviews. The study aimed to assess JumpQ's user engagement, receptivity, ease of use, usability, and overall usefulness.
Preparation for the study involved formulating hypotheses for each feature and devising user tasks and interview questions to effectively evaluate these hypotheses.
In the think-aloud process, participants were prompted to perform the designated tasks while articulating their thoughts aloud. I recorded their observations during the process and later conducted interviews to delve deeper into their experiences and feedback.

Click here to view my usability testing report in Notion.

OBSERVATIONS AND INSIGHTS

Task 1.

Place orders from different stores

Participants smoothly completed task 1, demonstrating ease in navigating the storefronts, customizing selections, and adding items to the cart.

Hypothesis Evaluation: Accepted โœ…

Task 2.

Reorder a past order

Some participants faced challenges in locating the "Reorder" feature for past orders. However, with some guidance, they successfully accessed the "Past Orders" section and completed the reordering process.

Hypothesis Evaluation: Rejected โŒ

Task 3.

Checking real-time order status

Task 3 proved to be an intuitive task for most participants, with efficient tracking of order progress from "Processing" to "Preparing" and "Ready" stages.

Hypothesis Evaluation: Accepted โœ…

Task 4.

Leave a rating / review

Task 4 showed that participants appreciated the optional steps, allowing them to provide feedback through binary ratings and additional comments or photos.

Hypothesis Evaluation: Accepted โœ…
key revisions made
Improved Navigation
By renaming "Orders" to "Order History" in both navigation and page title, users can now easily locate and reorder their past orders, streamlining the process with clear communication about the section's content.
Confirmation Message for Reordering
I implemented a confirmation message to prevent accidental clicks when reordering past orders, enhancing user experience.
Real-Time Order Updates via SMS
In response to user feedback, we implemented optional real-time order updates via SMS. This feature delivers timely notifications to users' mobile devices, without the need for constant checking of the website.
๐ŸŽ‰ view final prototype in figma ๐ŸŽ‰
reflections
Throughout this portfolio, I have presented the design process, insights, and proposed solutions for a food ordering web app catering to hawker centers. While the final app and high-fidelity prototype were not developed due to project constraints, the showcased concepts and methodologies reflect my skills as a product designer.
Moving forward, there are exciting opportunities to further enhance the app's capabilities and impact. One key future plan is to implement a rewards and discounts system, incentivizing user engagement and fostering customer loyalty. This feature will not only attract new users but also encourage repeat orders, contributing to the app's growth and success.
Additionally, we aim to make the app tourist-friendly by incorporating multilingual support and providing information about hawker centers' cultural significance. By catering to tourists' needs, we can create a welcoming and inclusive experience, boosting tourism and supporting local businesses.