Honey Android Shopping App lacked consistency and effectiveness in its search user experience. I shipped the end-to-end redesign for its search feature.
My role
Shipped an end-to-end redesign of Android user search experience
UX/UI, Visual Design, Prototyping
User Research, Usability Testing
Design QA
Results
Defined Android search patterns for both global & in-store search
Provided a liason between the design team and Android users
Fostered a shared understanding of our users' needs with the design team

User-Friendly Search Bar on Explore Page

Helpful placeholder text encourages search behavior and increases engagement rate.

Clean, Consistent and Expandable Search Experience 

I designed an Android search pattern that aligns users' search experience in different scenarios. I removed redundant elements to help users focus on their search task.

Intuitive In-Store Search 

I put the store logo next to search query on search result pages as a contextual reminder of in-store search.

Challenge

The current search experience for Honey Android App lacks consistency. Initially, I was assigned to update the search bar's visual design. The team preferred to use material design components. 

My goals were to:

1. Solve the current UX problems

2. Define Android search pattern for both global & in-store search

3. Reposition search as the primary activity in the Explore page.

4. Define back button functionality for the information architecture

Design Toolkits

Product Design Process

Since it was my first time designing for an Android app and the design team was not familiar with Android user behavior, I conducted thorough research to understand UX problems, existing design patterns, Android users' insights and current search performance. I worked with data analysts, search engineers, android developers, product managers to ensure my design met business goals, user problems, and technical constraints. I prototyped my design and tested it with android users. Backed with both quantitative data & qualitative data, I made the final design which has been successfully scoped into development roadmap.

Problem Scoping

Understand user problems, business goals & technical constraints

To make a successful redesign, I need to ensure my design solution not only solves the user problem but also helps achieve business goals and works within technical constraints.

I strategized my problem scoping into three steps:

  1. To examine UX problems both from the system and UI perspective, I made an interactive prototype of the current search experience overarching the app. 

  2. I came up with questions for different stakeholders to learn why the search experience was built that way, such as undefined back button functionality.

  3. I scheduled meetings with stakeholders. I talked to product managers to align with their strategy and roadmap; I talked to engineers to learn technical constraints; I talked to data analysts to see if there are any existing patterns of users' search behavior and if there is any open-source data that can inform my design decisions. These discussions gave me clarity on which direction to pursue.

1/2

User Problems: Inconsistent & nonintuitive search experience

Business Goals: Get users through the conversion funnel in the process of discovering items, considering items, adding items to cart, checkout, running savings and buying

Technical Constraints: Persistent search bar requires higher effort to implement; There was no information architecture to define upward navigation and reverse navigation.

Learn from Competitors

After defining the problem, I broke down problems into four user flows. Assuming other android apps had faced the same problems, I conducted competitor analysis on 30 apps.

The main points I want to examine were: 

  • Back button functionality: When users do a consecutive search and tap the back button, will they see their previous search result page or home page? Why?

  • Global vs In-store search: How to inform users they are shopping inside a store?

  • Expandable vs persistent search bar: Which one is more common for Android App?

  • How do these apps display search suggestions and as-you-type suggestions?

1/2

By analyzing these search flows, I observed patterns and discovered the intention behind some of their design decisions. For example, most of the shopping apps use persistent search for their home page and expandable search for rest parts of the app, which inspired me to leverage the advantages of both search in order to achieve my design goal.

Design for Discussion

Search is a feature overarching the entire app and its redesign will impact the design system as well as information architecture. It's better to involve decision-makers early on in my design process. I made prototypes & design solutions that solved UX problems based on research insights. After discussing these solutions with my design lead and product manager,  I found there were some design decisions that require further validation. We decided on next actionable items: user interviews & usability testing.

User Interview

The design team was not familiar with android users' behavior, thus it's hard for us to make sound decisions based on our assumptions and existing data. We need to observe and analyze how android users interact with the app. I recruited 5 Android shopping app users with their age from 25 to 50. I structured the interview as 30 mins warm-up session to learn interviewees' background and their online shopping habit, 30 mins task-based exercises and follow-up Q&A's. 
 

The goals of the interview were to:

• Understand Android shopping app users’ search behavior
• Examine the opportunity cost of not showing users their previous search result pages & not using the persistent search bar.
• See if there’s anything we can learn from the competitor apps

Synthesize User Interview 

After finishing the user interviews, I typed in the important information and tracked the video frame by frame to learn how interviewees interact with the app. I analyzed and grouped their feedbacks into different categories. After that, I synthesized their behavior into the same flow to find patterns and unique points. Here are some examples of insightful findings:  I found the first thing people want to do in the search result page was either filtering or browsing. However, the current design fails to inform user the presence of the filter bar. Another example would be Android users tended to use back button instead of the upward navigation button.

Usability Testing: Expectation Test

Though findings from user interviews helped inform most of my design decisions, there was still one decision that cannot be proved by the findings: whether we should show users their previous search results. I conducted the expectation test on the usability hub. It turned out most of the participants expect to see previous search result page.

Take all those insights to back my final design

Now it's time to take those insights into my final design. Here are three examples of how I used these insights to impact the final design.

Learnings

System Thinking

When I first got this ticket, I only focused on interaction design and visual design and later find out the search bar experience was inconsistent through the app. This made me realize: When designing with system-level features, it's better to map out all the user flows that would be impacted by the feature as soon as possible. 

The Power of Design Pattern

In my previous internship, I was always doing design in a waterfall development setting. This internship enabled me to take the cost of my design into consideration. This made me understand the power of using design system as well as design pattern, so I could focus in solving the problems without reinventing the wheel.

Next steps

Put sdata to track user's behavior

Design is always iterating. In order to make the new design more valuable for future iterations, I discussed with data analysts about what we can track in our new design to reveal user's search behavior in the app and find the new opportunity areas.