2021・FinTech・iOS・Launched

Alipay / Search Suggestion Page Redesign

Improved access to service pages and driving a 3.5% CTR increase post-MVP launch.

Team

2 PMs, 2 Engs

Role

Product design

Timeline

2021.5-2021.6

Context

To navigate the expansive ecosystem, Alipay's users rely heavily on the search function.

Alipay, a super app serving over 1.2 billion users globally, offers a wide range of services for daily convenience.



Since Alipay provides so many services, searching is the most direct way for users to find the service they want.


Context

To navigate the expansive ecosystem, Alipay's users rely heavily on the search function.

Alipay, a super app serving over 1.2 billion users globally, offers a wide range of services for daily convenience.



Since Alipay provides so many services, searching is the most direct way for users to find the service they want.


Challenge

Alipay's search suggestion page falls short of providing helpful suggestions to help users find what they need.

While with 50 million daily page views, the search suggestions were not helpful enough. Alipay's search suggestion page only offered associative terms, whereas competitors provide quick entry points, reducing the number of pages users must navigate to find desired services.

Challenge

Alipay's search suggestion page falls short of providing helpful suggestions to help users find what they need.

While with 50 million daily page views, the search suggestions were not helpful enough. Alipay's search suggestion page only offered associative terms, whereas competitors provide quick entry points, reducing the number of pages users must navigate to find desired services.

Problem Statement

How might we provide users with helpful search suggestions to improve search efficiency?

Final Solution

Redesigned the search suggestion page with the customized framework to help people get quick access to the specific service page.



Impact


Impact


Discover

The existing search suggestion page (SUG) was falling short of providing helpful suggestions.

When I joined the search design team, I conducted a UX audit and uncovered a critical issue: Alipay’s SUG page was not meeting user needs effectively.

Unlike competitors who provided quick access to services, our page only offered associative terms. This meant users often had to click through multiple pages to reach their desired service, creating a cumbersome experience.


Discover

The existing search suggestion page (SUG) was falling short of providing helpful suggestions.

When I joined the search design team, I conducted a UX audit and uncovered a critical issue: Alipay’s SUG page was not meeting user needs effectively.

Unlike competitors who provided quick access to services, our page only offered associative terms. This meant users often had to click through multiple pages to reach their desired service, creating a cumbersome experience.


convince stakeholders

Leveraging data to demonstrate the high traffic and critical role of the search suggestion page, I secured buy-in from PM.

Enthusiastic about the potential improvements, I approached the PM with my findings. The response wasn’t as warm as I hoped:



This initial pushback was a challenge, but I knew the key to persuading him was demonstrating the impact.

The search suggestions (SUG) page received the highest traffic before users reached the search results page. Besides emphasizing the importance of improving the search experience, I used this insight to show the PM that optimizing this step could significantly improve user engagement with the search feature.

By focusing on this high-traffic touchpoint, we aimed to refine the search experience for users with search intent, aligning our project direction and scope with these strategic findings.


hypothesis

After aligning with the scope and direction, I had the initial hypothesis:

Providing suggestions based on users’ intentions could help improve search efficiency.

analyze

However, Alipay had so many different numerous services and users searched varied key terms, how do we provide relevant suggestions for diverse needs?


Summarized the search behaviors to better understand users' intentions and expectations.

Yes, users’ intentions could be different, when they have more specific goals, they tend to need more direct suggestions and vice versa. So I decided to summarize the search behaviors to better understand users' intentions and expectations:

design challenges

#1 Limited screen space

The phone screen is limited since the keyboard will take up some space. So we needed to prioritize the most impactful components.


#2 Cognitive Load

To avoid overwhelming users, we needed to present information clearly and intuitively, ensuring easy comprehension and quick decision-making.


Considering this changes, I tried to define the design principles:


design challenges

#1 Limited screen space

The phone screen is limited since the keyboard will take up some space. So we needed to prioritize the most impactful components.


#2 Cognitive Load

To avoid overwhelming users, we needed to present information clearly and intuitively, ensuring easy comprehension and quick decision-making.


Considering this changes, I tried to define the design principles:


explore

Info Arch

I began the ideation process by considering the page's information architecture. The top priority is to display direct results that best match the user's intent, followed by autocomplete suggestions for the search terms, and finally, relevant recommendations based on those terms.



Interaction Pattern

Then I led a co-design session with my team to get the selected components.


selected solutions

Scenario 1a: Direct acquire (direct info/action)

Scenario 1b: Direct acquire (service access)

Scenario 1b: Direct acquire (service access)

Scenario 2: Compare & select

Scenario 3: Explore & understand

Execute

I collaborated with engineering to preload the top result suggestions, addressing potential delays in displaying relevant results.

Searching for a predetermined item is a quick task: Users click within the search bar, type their query, and click the Search button –- all within the matter of a few seconds. During the QA session I noticed that it is possible that users finished typing and submitting their query before the top suggestion section can be displayed. So I suggested preloading the top section to maintain a smooth user experience.




Beyond the MVP

Considered for future use cases

After the MVP launched, I also explored how this framework could support various needs, such as introducing new products, highlighting promotions, providing relevant information, and featuring engaging topics. This forward-thinking approach not only improved the SUG page but also set the stage for future enhancements.

Learnings

  • Think more about the unified features and visual layout consistency when designing components.

  • Get involved in the pre-strategy of product features. Put yourself in other people’s shoes when you try to let them understand your idea.