Cafe Mesra is a newly introduced feature segment within the Setel App, offering coffee and pastry products to users. This initiative represents Setel’s expansion beyond its core fuelling services into new business areas. Setel serves as the primary touchpoint that connects users to Cafe Mesra stores, enabling discovery, ordering, seamless payment and unlocking new growth opportunities for the platform.
While the MVP launch confirmed strong market interest, the current infrastructure limits scalability and user retention. Gaps in data synchronization and content visibility are creating a fragmented experience that hinders operational efficiency and revenue growth.
Order transparency
Current integration between store POS systems and app isn't reliable enough for real-time updates. This technical limitation prevents users from receiving timely order progress, resulting in a poor post purchase experience.
Led the end-to-end design and product experience for a cross-functional team of 8 member team (1 PM, 2 QA, 2 FE, 2 BE). I was responsible for the full product experience, optimizing the journey from store discovery through to the final order submission.
The ultimate objective is to evolve the MVP into a more reliable, scalable platform. The focus is on enhancing the post-purchase experience through improved data synchronization, while also driving revenue by encouraging repeat and additional purchases.
My process began by clearly defining each problem and understanding its impact on both users and the business. From there, I followed a structured design approach to analyse the root causes, explore potential solutions, and prioritize ideas that would deliver the most value.
This approach ensured that every solution was not only functional but also thoughtfully designed around the user experience. The final designs focus on creating intuitive interactions supported by clear and purposeful UI.
Order transparency
I began by identifying gaps in the current build on both POS and APP to understand the root cause of the issue. I noticed that part of the user journey was not clearly defined or covered, which resulted in an incomplete flow and caused confusion in the overall user experience.
POS
Once an order is received and preparation begins, staff will mark the order as “Mark as Complete” when it is ready. After this action, the POS immediately moves the order to Past Orders and sends a status update to the app.
However, the POS system interprets “Mark as Complete” as the order being fully completed and already picked up by the customer. This creates a gap in the order journey, as the system does not distinguish between “order ready for pickup” and “order collected.” As a result, the status listener sends an inaccurate update to the app, leading to confusing order status information for end users.
APP
Once status update is received from POS, the waiting screen changes to “Ready in 15 minutes.” This messaging suggests that the outlet is still preparing the order and that pickup time will be in 15 minutes. However, on the POS side, the order has already been marked as “Mark as Complete,” meaning it is ready for pickup. This mismatch creates confusion for users about the actual order state.
Additionally, app only provides two order status screens: “Waiting for outlet confirmation” and “Ready in 15 minutes.” Without a clear “Ready for Pickup” status, the order journey becomes incomplete. As a result, users are left uncertain about when they should go to the outlet, often waiting for a further update that the app does not provide.
Solution
To improve order transparency across both platforms, enhancements to the existing journey were required. These improvements aim to close the identified gaps and create a clearer, more consistent experience for both staff on the POS and users on the app. The following section outlines the enhanced journey for both the POS and App.
POS
Introduced an additional status in the order flow and refined the logic for “Mark as Complete.” The new status, “Mark as Ready,” allows users to indicate when an order is fully prepared. Once marked as ready, the update is sent to the App in real time.
The “Mark as Complete” action is now reserved for when the end user has picked up the order from the outlet. This improvement ensures more accurate status synchronisation between the POS and the App, enhancing visibility and reducing order confusion.
APP
The app now includes the newly added order statuses from the POS system. It needs to sync with the status listener and will also require a new Order Status screen.
Here’s how it works: when the POS marks an order as “Ready”, the app will display the order as ready for pickup. When the POS marks it as “Complete”, the app will show the order as completed.
This enhancement provides clearer order visibility for end users, allowing them to receive accurate updates and better plan their travel time to the outlet.
Design
Design decisions were guided by the goal of reducing friction and creating a seamless overall experience. The focus was on simplifying the user flow, improving the information hierarchy, and introducing clearer visual cues to help users understand what to do next. Additionally, UI consistency was maintained by following established patterns from the design system, making it easier for users to become familiar with the interface.
POS
APP
Once the implementation is completed, we conduct on-site testing and gather feedback to ensure the new improvements work as planned. Our testing covers the entire process, from the outlet cashier handling the POS system to the end user who places the order.
Post session
With the feedback gathered, the design has successfully achieved its targeted goals. Users now clearly understand what to expect next, with improved order visibility and more accurate updates.
Delivered a stable and scalable platform that enhanced the post-purchase experience through reliable data synchronisation. This resulted in higher customer satisfaction, increased repeat and add-on purchases, and successful onboarding of more outlets, while also driving higher user conversion to Setel.
With strong market interest and continuous feature improvements strengthened business confidence, enabling Setel to secure additional F&B partners such as Debonairs Pizza and Steers, with Cafe Mesra feature serving as the blueprint for their product feature.
