Prototyping & interaction design
2022 - 2024
This is a collection of my previous works, focused on building advanced prototypes and designing interactions for new features, as well as improving existing ones during my time at Gojek. These prototypes are all built using Protopie.
Gofood new home page interaction
About the prototype
Gofood, the food delivery service by Gojek, recently underwent a complete redesign of its homepage to enhance the user experience when navigating through its abundance of options. The prototype was developed to demonstrate improved scroll interactions that enable users to focus on exploring options, along with showcasing new shortcut behaviors. The prototype was built to showcase the interaction to wider stakeholder and as a reference for engineering team.
Challenges faced
Creating a scroll interaction to adjust the header, search bar, and bottom navigation: When users scroll down, the search bar, location, and profile will stick to the top. As they continue scrolling, the location and profile will gradually hide to emphasize the homepage content. When users scroll up slightly, the location, profile, and bottom navigation will reappear.
Creating shortcut interactions to hide the "New" badge as tab is visited and ensure seamless transitions of scrol and movement between tabs with varying content lengths.
How it was built
For scrolling interaction, the scroll offset need to be measured and used as a variable to indicate the direction and distance of user scrolls. This variable is then utilized to construct the logic of the interactions.
For shortcut behavior, a variable acts as a flag to indicate whether the new tab has been visited. To ensure seamless movement between tabs, the scroll position of visited tabs will be reset to the original position, preventing a jumpy experience.
Midtrans multi-toolbar interaction
About the prototype
With the recent invoice improvement initiative, a new multi-toolbar will be introduced to facilitate users in efficiently performing actions on multiple rows of invoices simultaneously. The prototype was built to showcase the interaction.
Challenges faced
Building fully functional checkbox system capable of counting the number of selected rows.
Building tools that appear when a checkbox is clicked, including an indicator of the number of selected rows, along with dragging capabilities within the table area.
How it was built
The checkbox is designed as a reusable component with the ability to send a message when it's selected or receive messages if others are selected. This logic enables indicating the number of selected checkboxes, which is stored as a variable.
The variable triggers the multi-toolbar and serves as the source for selected row count. Dragging interaction is enabled with limits set within the table area.
Gotransit ticket bundling experience
About the prototype
Gotransit is a service provided by Gojek that enables users to book train tickets. This prototype was built to facilitate the team in conducting usability testing to determine if the proposed concept of ticket bundling purchase can deliver a seamless experience.
Challenges faced
The prototype will encompass various scenarios, including selecting and purchasing bundles, up to using it at the station.
Users have two options to select and purchase tickets: via suggested frequent routes or through manual station search. In both cases, they should be able to see the details of the bundles with dynamic content on the detail page corresponding to the selected bundles, including price, station names and numbers of tickets.
Once users purchase the bundles, their details such as price, station names, and number of tickets should dynamically represent throughout all scenarios.
How it was built
Each bundle of tickets needs to be created as a reusable component with certain overrideable variable indicating its details. The variable should be informed when the bundle details are tapped to display the correct content as users visit the details page. The same variables can then be stored as another variables to indicate which ticket has been purchased, allow me to display the details on any scenarios or screens.
Midtrans document auto-save interaction
About the prototype
With the new flow designed for activating additional features of Midtrans, I implemented an auto-save mechanism on document submission to automate the process for users. This prototype was developed to design the interactions and accommodate various scenarios, as the reference for implementation.
Challenges faced
Considering the number of documents to be uploaded and the uploading processes involved, the interaction designed must comprehensively address all potential scenarios.
How it was built
I initiated the interaction design by establishing its basic guidelines: the autosave will trigger at the beginning of an upload, and upon completion of the process (whether successful or failed), the progress will be saved automatically. By utilizing these guidelines, I can explore all potential scenarios and determine whether certain adjustments need to be made.