Back
Fig.1: Landing screen
Fig.2: Search screen
Fig.3: Option A
Fig.4: Option B
Fig.5: Option C
Fig.7: Option C search view
Fig.6: Option C initial view
Fig.6: Option C initial view
Fig.7: Option C search view
Fig.6: Option C initial view
Fig.8: Interaction map
Fig.9: Flow chart
Flight search redesign
Redesign the flight search feature and other home page components for CheapOair iOS native app to improve funnel.
Project background
- Product issue
- High bounce rate from landing screen (Fig.1)
- User Test Finding
- "I don't see what I can do..." (Search)
- Product goal
-
- Increase flight search rate
- Reduce bounce rate
- Design challenge
- Spare the space for post-booking and marketing components
Diverge ideas
- Option A
-
- Full search + Extra component
- Users would miss additional context below the fold
- Open wireframe
- Option B
-
- Minimal search bar to save more space
- User wouldn't associate the minimal search bar UI with the concept of travel search
- Open wireframe
Converge solutions
- Option C
-
- Keep the two main context(search vs other components) in balance
- Visualize the concept of travel (point a to point b)
- Expose additional components below the search
- User would collect enough information to decide the path
- As users interact, UIs would expand to convey full context
Micro interaction
- Interaction sequence
-
- Initial view
- Searching: user enters location > search section expanded
- Exploring: user interact other components > moves toward to each path
Prototype
- Visual design
-
- Color distinguishes IA and status of interaction
- Animation emphasizes visual cue
- Interaction sequence
-
- Initial view
- Searching: user enters location > search section enpanded
- Exploring: user interact other components > moves toward to each path
Hand-off
- Interaction flow
-
- To visualize user’s interaction flow to help product developers overviewing final UX flow.
- This helps developers and QAs to overview end-to-end product process.
- Enlarge image
- User flow
-
- To visualize the early concept of UX logic to include primary and secondary use-cases.
- This helps product manager to define user stories to prepare the developments.
- Enlarge image
Contribution
- Product strategy
-
- Collaborating with product owner for setting the problem statement
- Setting product design strategy
- UI design
-
- Creating a high-fidelity UI mock-up
- Creating an interactive prototype using Sketch and UXPin
- UX design
-
- Collaborating with UX researcher on a benchmarking report and analyzing user behavior, traffic analysis
- Collaborating in interaction design to create a wireframe
- Generating an interaction flow and micro-interaction guide