Semaai Maps Feature
Semaai Maps Feature
Semaai Maps Feature
Company
Company
Semaai
Semaai
Year
Year
2024
2024
Role
Role
UI/UX Designer
UI/UX Designer
Platform
Platform
Figma
Mixpanel
Figma
Mixpanel
Work Type
Work Type
UI/UX Design
UI/UX Design
PROBLEMS
To add a context, many users on the Semaai marketplace didn’t match the address they manually input in the text
field with their location point on the map. Based on Mixpanel data, it shows that only a few users clicked the map to
adjust their location point. This is the problem we’re trying to solve.
PROBLEMS
To add a context, many users on the Semaai marketplace didn’t match the address they manually input in the text field with their location point on the map. Based on Mixpanel data, it shows that only a few users clicked the map to adjust their location point. This is the problem we’re trying
to solve.
PROBLEMS
To add a context, many users on the Semaai marketplace didn’t match the address they manually input in the text field with their location point on the map. Based on Mixpanel data, it shows that only a few users clicked the map to adjust their location point. This is the problem we’re trying to solve.
IDENTIFY
We then analyzed the current design to identify areas for improvement. In the existing layout, the map is located at the bottom of the page, which may lead users to think it’s not important and likely skip it. Additionally, the map preview doesn’t clearly indicate that it’s clickable (where users can tap the map and be directed to the adjustment page), so users may not realize they can adjust.
IDENTIFY
We then analyzed the current design to identify areas for improvement. In the existing layout, the map is located at the bottom of the page, which may lead users to think it’s not important and likely skip it. Additionally, the map preview doesn’t clearly indicate that it’s clickable (where users can tap the map and be directed to the adjustment page), so users may not realize they can adjust.
IDEATE
In our first iteration of the revised address page, we placed the map at the top to make users more aware that it’s the first step they need to take. This change emphasizes the importance of adjusting their location. We also added a ‘Ubah Titik Lokasi’ button to indicate that the map is clickable, and highlighted the map with a stroke for clarity. A tooltip notification was added on top of the map to remind users to adjust their location point.
IDEATE
In our first iteration of the revised address page, we placed the map at the top to make users more aware that it’s the first step they need to take. This change emphasizes the importance of adjusting their location. We also added a ‘Ubah Titik Lokasi’ button to indicate that the map is clickable, and highlighted the map with a stroke for clarity. A tooltip notification was added on top of the map to remind users to adjust their location point.
Besides improving the map on the address page, we also enhanced the location point page. We added a card on top of the page that show the current address (alamat sekarang) so users know what the current address was if they wanted to update to a new address, along with a tooltip above the location icon (geser peta untuk memilih lokasi toko) to notify users that they can hold and drag the map. Additionally, we included zoom in and zoom out buttons for better control.
Besides improving the map on the address page, we also enhanced the location point page. We added a card on top of the page that show the current address (alamat sekarang) so users know what the current address was if they wanted to update to a new address, along with a tooltip above the location icon (geser peta untuk memilih lokasi toko) to notify users that they can hold and drag the map. Additionally, we included zoom in and zoom out buttons for better control.
PROTOTYPE
The final step was creating the prototype to present to the engineers. As you can see in the protoype, the new design is triggered when users click the ‘Ubah Titik’ button. The first entry point is on the checkout page. When users attempt to check out, they will be notified if their location point doesn’t match their address with the red bar on the adress card. From that, the users will be directed to the page where the clickable map are, and after the users click the map, they can adjust their updated location, after the location is updated, the green notification (Pin lokasi kamu sudah sesuai dengan alamat) will appear informing that their location on the phone is the same with their real life location.
PROTOTYPE
The final step was creating the prototype to present to the engineers. As you can see in the protoype, the new design is triggered when users click the ‘Ubah Titik’ button. The first entry point is on the checkout page. When users attempt to check out, they will be notified if their location point doesn’t match their address with the red bar on the adress card. From that, the users will be directed to the page where the clickable map are, and after the users click the map, they can adjust their updated location, after the location is updated, the green notification (pin lokasi kamu sudah sesuai dengan alamat) will appear informing that their location on the phone is the same with their real life location.
See Other Works
See Other Works
