Batao Matchmakers
The Batao Matchmakers app has been developed for the Webwinkel Vakdagen as an interactive way to introduce visitors to various Batao web shops. Users answer questions and discover which webshop they best match.
The application was built as a web app and later converted to an Android app with capacitor, so that it works smoothly on mobile devices during the event. The goal was to show what Batao can achieve in a playful and modern way and to actively involve visitors in the brand.
Technologies used
My role within the project
Within this project I mainly focused on the styling and user-friendliness of the app. I worked on the web shops overview, including auto scroll and manual scroll for larger lists, and on the question page, where users answer questions to get a match.
In addition, I have completely converted the original web app to an Android app using Capacitor, so that the app works completely on mobile devices and works smoothly. My focus was that the app looked neat, easy to navigate and remained responsive on different screen sizes.
Webshop overview
For the web shops overview I have completely styled the screen with Tailwind CSS and optimized for a smooth user experience during the Webwinkel Vakdagen. Visitors can easily browse through all participating web shops here. For larger lists of web shops, I have added both Auto-scroll and manual scroll, so that the interface remains flexible and clear, regardless of the number of items.
Questions page
The question page forms the core of the matching functionality. Here visitors answer multiple questions to discover which webshop they best match. Some questions are only shown depending on previous answers, which makes the flow dynamic and personal.
All questions are stored in the database, so that they can be easily managed and expanded. In React, the correct order and display is then arranged, including conditional rendering for questions that depend on previous answers. The page is fully responsive with Tailwind CSS, so that everything works well on different screen sizes, from mobile phones to tablets.