Interactive reinforce MVP

MVP project to implement flight listing reinforce interaction in CheapOair progressive web app experience to improve listing page engagement.

Project background

Product issue

Users are discouraged by the full-blocked dialog modal.
The presentation is too aggressive, and the interaction is passive.

User Interview Quote

"I felt kicked-out..."
"It's shutting me out instead of talking to me..."

Product goal

Increase customer retention from the listing

Design challenge

Grab user's attention less aggressively

Project — Fig.1: Listing screen

Project — Fig.2: Inactive dialog

Draft ideas

Friendly interaction sequence

Mimic the 'chat interaction' to present less aggressively
Utilize conversational sequence to deliver information actively

Project — Fig.3: Idea sketch

Draft interaction

Humanly interaction

Utilize persona to make the whole engagement more friendly
The conversational sequence would help breakdown the information into two way communication.
This format has more room to slip conversion-friendly message.

Project — Fig.4: Engaging view

Less input, more feedback

Reducing the input forms would help users to focus.
Instead of forcing users to be smart, the feedback logic should improve to deal with corner cases.

Project — Fig.5: Feedback view

Build interactions and prototype

Open interactive prototype

Engaging sequence

Green blinking indicates agent online
Animating chat UI doesn't require to block out the whole page.
The sequence would conclude with a single constructive action.

Project — Fig.6: Engaging sequence 1

Project — Fig.7: Engaging sequence 2

Project — Fig.8: Engaging sequence 4

Project — Fig.9: Engaging sequence 5

Project — Fig.10: Engaging sequence 6

Feedback sequence

Add conditional feedback to simulate conversation
The chat is not necessarily stackable to keep the space minimum.
Final feedback without previous conversation would give user the sign of 'DONE'.

Project — Fig.11: Feedback sequence 1

Project — Fig.12: Feedback sequence 2

Project — Fig.13: Feedback sequence 3

Contribution

Product strategy

Collaborating with product owner to set MVP strategy

UI design

Creating a low-fidelity mock for early validation
Creating an interactive prototype using Sketch and UXPin

Front-end

Prototype the whole interaction with HTML/CSS and JS
Implement MVP directly through A/B testing tool

UX design

Illustrate the persona to help product to shape the context of interaction
Analyze traffic data and user interview result to address the pain points