English
English

Autosuggest UX for U-NEXT

Autosuggest UX for U-NEXT

U-NEXT is the number one Japanese streaming service with an extensive catalog of series, dramas, movies, books, and more—Reaching more than 30 thousand pieces of content.

U-NEXT is the number one Japanese streaming service with an extensive catalog of series, dramas, movies, books, and more—Reaching more than 30 thousand pieces of content.

Timeline:

March 2022 ~ Jul 2022

Team:

U-Next CX

Platform:

Web, iOS, Android

My Role

Product Designer

Core Team

  1. Product Owner

  2. Principal Product Owner

  3. Web engineer

  4. iOS engineer

  5. Android engineer

Methods

  1. Design Strategy

  2. Ideation

  3. Product Design

  4. Prototyping

Project Overview

22

22

Design Pages

Design Pages

3

3

Design Iterations

Design Iterations

Tech System

Tech System

Autosuggest

Autosuggest

Autosuggest

ML-Based Personalization

ML-Based Personalization

ML-Based Personalization

Deliverables

The Challenge

Revamping the search experience.

Support Call Center Manager's Coaching,
Onboarding and training with AI systems.

When the U-NEXT team set out to improve search, the challenge seemed simple: make finding content faster.


But behind the scenes, the reality was complex—business expectations, engineering constraints, political battles and user frustrations that pointed in different directions.

Our client struggled with management obstacles; particularly in coaching and performance reviews.

My Mission

Find strategies to add autosuggest experiences.

Rather than pushing for a costly rebuild, I reframed the opportunity: what if we leveraged the existing tech stack and UI patterns for high-impact improvements?


  • Conducted desktop research comparing autosuggest vs. autocomplete.

  • Explored cross-platform experiences (Mobile, Web, Responsive, and early TV concepts).

  • Created paper sketches, Figma prototypes.

  • Documented and designed autosuggest experiences across platforms.

  • Facilitated ideation workshops with core and extended teams.

  • Delegated and supervised early TV autosuggest initiatives.


As a Senior Product Designer, I was the owner of the Design and Experience Principals in a User Need level. Rather than focusing on high-end visual design, I approached the challenge with experimenting with prototypes.

Product Design

Designing patterns for autosuggest experience.

After meeting the wider team and executives, they gave us green light to continue with the design and development of the Autosuggest search for Web, iOS and Android.


For this I designed:


  • Exploration Mock ups.

  • Redesign the search component of Web.

  • Added new UX design for iOS and Android.

  • Made Prototypes in Figma for all platforms.

  • Documented and prepared designs handoffs for the engineers.

[1] Mobile exploration

[2] Web exploration

The previous design experience

The design strategy of the previous design was damaging the experience by having the genres list appear in a small component.

Intersection between clicking the search bar and keyboard activation.

Results

  1. Got immediate buying from business stakeholders, PO leads, and Dev leads.

  2. Successful A/B test that propelled implementation.

  3. Reduced the project timeline from the perceived 5 years, to only 4 months, thanks to our strategy of focusing in the current tech and current design system.

  4. Opened up the TV search project for implementing Autosuggested experiences.

Web Design

Mobile Design

Take aways and Learnings

  • Having empathy for business stakeholders and developers gave us a lot of insights that crafted the needed strategy to uplift the project.

  • Due to complications with TV and other projects, we couldn’t launch in all devices, but gave me the opportunity to lead the design process for TV and delegate the work.

  • Sometimes simplicity is best, and product teams can create great things when using the current tech we have for innovation.

Tools and Services

Figma Logo
Figma Logo

Figma

Notion Logo
Notion Logo

Notion

Figma Logo
Figma Logo

Elastic search documentation