The inspiration for this project came from my own experiences using Thuisbezorg.nl to order food. I found myself struggling to navigate the menu page due to the overwhelming number of categories, and once I finally got to the product page, it took me ages to locate the item I wanted. Frustrated with the user experience, I decided to take matters into my own hands and launch a project to optimize the platform's interaction and information exposure. To get started, I created an initial persona, mapped out a user journey, and drew up wireframes for key UI elements. With the help of 5+ target participants, I dove deeper into how users perceive the platform's interaction and navigation, focusing on their search for items on both the menu and product pages. Using my research findings, I designed two new versions of the platform for interacting with menu bars and selecting products that better meet users' needs. At the end of the project, I analyzed quantitative (5-Likert scale) and qualitative (user movement, interview) user data to gain insights regarding the interaction during the journey of ordering food online.
| Time frame: | January.2023 |
| Role: | UX researcher, UXUI Designer |
| Platform: | Thuisbezorgd.nl |
| Techniques/Tools: | User research, wireframing, UI library, Figma(clickable prototyping), competitor analysis, AB testing |
| Share: |
I first created a frictional persona based on my first-person perspective research and so the user journey on the focused segment was then followed.
User Journey map and persona
I then did a competitor analysis (direct/indirect competitors) on the focused ways of navigation and interaction on the menu and product pages seperately.
Benchmarks on the competitors on menu and product pages
I reorganized the content of the current categories and drew those to initial sketching with 2 different version menu bar navigations. In the form of interactive wireframing, I did the first user evaluation, validating with the original version and the proposed 2 design versions.
Wirframing & user research
Functional prototyping in Figma and design system
I then created 2 version design proposals on the menu and product page and then recruited 10 participants in total (5 participants for each version flow) in the remote AB testing sessions.
The Setup of A/B testing
Version A-Menu Page
Version A-Product Page
Version B-Menu Page
Version B-Product Page
The remote AB testing sessions were conducted through userberry where the quantative user data were able to collected. Therefore, I made use of the user-movement tracking methods combined with interview data to interpret the findings from A/B versions.
Version A works better than version B. Participants who took version A gave better scores towards it. They think the task is easy to finish, the target tag is easy to find and the drop-down menu is easy to use.Participants who used version B mentioned that there were too many tags and the tags. This might be because the number of tags seems bigger when the tags are arranged horizontally.
Version B works better than version A. Participants who took the version B gave better scores towards it. They think the "+" button is easy to find and use. Some participants stated that it was because the button was located near the price, making it more convenient to them.
· Product/restaurant picture is important for food-delivery services, so the way it shows should be clear and obvious.
· Prioritized information with signals or organization concerning the user's eye movement: Icons could be added to the main categories when there are more small categories presented.
· Interactive wireframing could deliver more smooth and realistic experiences for participants than the mere paper prototype during initial user research.