Company

Lalamove

Duration

May – Jun 2021

Role

I led all design activities as the lead Product Designer

Teams collaborated with

Product, User Research, Engineering

Timeline

Week 1: When we kickstarted the project, we went through the research findings with the User Researcher. Since we had already defined the scope of the project at the beginning of the quarter, we quickly brainstormed and identified design opportunities we found based on the findings. We also defined the high-level success metrics of the project to set the direction of the project.

Week 2: In the second week, I looked into the existing flow and found references from other competitors. I created wireframes and held meetings with the Product Manager and engineers to study the feasibility of my solutions.

Week 3: I presented my solution to the Design and Product teams internally and got feedback for further iterations. After discussing it with engineers, I also needed to add small twists to the design.

Week 4: Before handing over the design file to the tech team in the last week, I started documenting all the design changes and new components to provide detailed information for tech development.

After development: As usual, I started the design check after the development to ensure the final output was aligned with the design when we released the feature.

Introduction

HMW help users provide accurate addresses when they place orders to reduce necessary communication efforts with drivers during delivery?

After merging the international(Lalamove) and China(HuoLaLa) systems at the beginning of 2020, we replaced the legacy app with the HuoLaLa app as the “base” of the app to reduce possible compatibility issues. We needed to redesign the app to make sure it suits users worldwide, which gave us opportunities to rethink how we can help users place orders in a better way.

Investigation

To begin with, we looked into the research findings we had gotten from user research and App Store reviews. There were a couple of pain points users mentioned related to map inaccuracy:

We also checked out the data of users interacting with the map after selecting an address. We found that 30% of users preferred to change addresses by adjusting the pin on the map. And among users who would adjust the pin, around 75% would move the pin more than three times.

In the meantime, we also documented the address input flow and mapped it out on Miro to conduct a heuristic evaluation.

Search address

• Limited flexibility for different language

Users were complaining about not being able to search in local languages. This was a critical pain point since we had more than 80% of users using the app in local languages instead of English.

• Unnecessary function

“Location on the map” was an entry point to show users a map view. When users tapped on it, a map appeared with a random pin location, which was not even their current location. When we pointed this issue out, it led us to a discussion: when do users need to view the map? What do they want to accomplish with the map?

• Poor copy leads to confusions

For example, “Frequently Used Address” is an entry point to select a saved address on the page quickly. But it didn’t convey the meaning of saved addresses to users, which was possibly one of the reasons why users were not using it, even it was the only tab next to “Historical addresses”.

Address details

• Overwhelming info on google map with a relatively subtle pin icon

After selecting an address, users could view the pinned location to double-check if the address was pinned correctly. In the old map, there were nearby landmarks and detailed road information (e.g., Highway numbers). It distracted users’ attention from the pinned location, which was the main goal of the page.

When we discovered this issue, we asked ourselves:

1. How might we help users review the pin location of the selected address smoothly to spot possible inaccuracy and correct it as soon as possible?
2. What information do users need when they cross-check the pinned location?
• Readability issues due to limited space of input fields and the contact book button

After merging with the China app, one of the main UI issues was the dense interface tailor-made for China users. There was feedback from users in different markets indicating that they had difficulty filling and comprehending information due to the limited space of input fields and text areas. In the contact name field on this page, both the placeholder and the button label were truncated, which became a readability issue to users.

To study the common user behavior of inputting addresses, I did competitor research with other delivery and transport platforms: Uber, Grab, foodpanda, Deliveroo, Doordash, etc.

This led me to focus on two main areas:

1. Zooming in the pin location on the map. Competitors often showed the map with the pin location at zoom level 19, which offered enough and clear information of nearby landmarks to help users check whether the pin was located accurately.
2. Showing relevant suggestions. When I tried out different address input flows, I noticed that competitors often included recently selected and saved addresses in the suggestions. Based on what we learned from the previous user research, these two kinds of addresses were frequently being used by our users. Including them in the suggestions could help users quickly enter locations and speed up the order placing process.

Goals

• Redesigned the flow and UI to make sure it applied to different languages
• Improved the information architecture to help users find and review the info seamlessly
• More detailed event tracking to help us evaluate the flow and what the next step should be
• Unified the UI by adapting Lalamove components in the design system

Principles

• Clarity
• Effortless
• Error prevention

By archiving the goals, we wanted to make sure the addresses are clear enough. Users could select addresses seamlessly with no error occurred.

1. Current location

Instead of only showing a button to enter users’ current location, we decided to show the address of the current location to help users better relate to where they were at.

2. Saved addresses

In the old design, recent addresses and saved addresses were separated into two tabs. Users could only see either one of them on the page. Even a user used a saved address in the previous order, s/he could only see this address under the saved address tab instead of the recent address tab, which was the active tab by default. Based on the assumption that we had, the unnecessary effort of saving an address and selecting a saved address under a separate tab was one of the reasons why we had few people using it.

When I took a step back and thought about the benefit we wanted to provide to users by saving addresses, the main goal was to reduce effort and speed up the process. When frequent users enter thought about recently used addresses, saved addresses they used in the previous orders should fall into this category. To help users quickly access all recent addresses once they entered this page, we decided to include saved addresses into the record. Users no longer needed to enter the Saved Addresses page.

Moreover, we added an entry point under “Current location” to open an individual Saved Addresses page for users to manage all saved addresses in one place.

3. Address format

As I mentioned earlier, we have 40% of users selecting recent addresses. When existing users opened this page, we wanted to help them quickly find and choose the address they wanted. In the old design, we showed the full address and last user input of the recent addresses. It took up more space for one single item and led to few options users could see on a page. To tackle this issue, we evaluated and prioritized the information of an address. When it comes to recent addresses with any user input, we’ll always show it instead of the full address since the info users have entered could help users identify the location instead of the full address.

We also updated the long text handling of the full address at the secondary label. Based on user research, we found that some addresses in Thailand were very similar but far away from each other. Therefore, to help users identify addresses easier, we also decided to show the full address in 2 line max to reduce possible errors.

4. Search result

We included and prioritized recent and saved addresses in the search results. Based on the assumptions and data we had, our existing users tended to place orders in similar patterns. By prioritizing these two kinds of addresses in the search result, it helped users find the location and speed up the address input process.

Improvements

1. Maximized the space for map

To maximize the space on this page, we set a minimum height on the map to ensure users could review the pin location once they entered this page, and they could always see it even when they expanded the bottom sheet.

2. Set the default zoom level of the map from 16 to 19

Since we didn’t have event tracking implemented on the map, we didn’t know how users interacted with it. This update was based on references from competitors and our map expert, our Product Manager Homing! We also aimed to evaluate it by data after we launched the revamp.

3. Updated the map style

We updated the map style to help users spot the pin and review the pin location with fewer distractions: reduced the color contrast, hid certain points of interest, etc. We also implemented this map style on the web app to improve the consistency across our platforms.

4. Same search bar component

In the old design, we noticed that some users would tap on the tooltip above the pin but not the first input field in the bottom sheet when they tried to enter another address. To reduce this confusion, we removed the tooltip and kept the same search bar on the address details page to keep the search address experience consistent. Users would always know they could tap on the search bar when they want to change the address.

5. Save address shortcut

To encourage users to save more address, we decided to add a save address checkbox underneath to make the entire process easier. Users no longer needed to enter the Saved Addresses page only to add an address to their account. It could be done along with the address input journey.

6. Updated the navigation of the Back button

In the old design, if a user tapped back on this page, he was navigated to the home page. If he wanted to go back to this page, he needed to search the address again. To reduce the unnecessary step, we decided to redirect users to the previous page(Search Address) instead.

7. Added pin animation

We added animations to help users better notice the movement while moving the pin.