Fliggy

Route Map is one of my four projects during summer internship at Alibaba-Fliggy.

Alibaba Internship

During the summer of 2023, I interned at Alibaba, specifically “Fliggy,” as a user experience design intern. Fliggy is a leading online travel platform in China. I worked on four projects – "super map", Dragon Boat Festival home page atmosphere dynamic effect, the company’s career website, and change of itinerary loss insurance claim. All projects were launched in Aug, 2023. And I successfully got a return offer in Oct, 2023. This page only demonstrates the "super map" project.

Timeline -

06/2023 - 08/2023

Role -

UX design
UI design

Team -

Full-time UX Designer (2)
UX Research (2)
Product Manager (2)
Design Leader (1)

Tools -

Route Map Project Overview

In the landscape of travel technology, I led the design initiative for Fliggy's groundbreaking project focused on map visualization for routes. This strategic undertaking aimed to enhance the user experience by transforming information into a visually intuitive format on the map. The primary objective was to streamline decision-making processes for users, particularly in the realm of POI-related bookings, while exploring opportunities to extend the functionality to other industries.

The teamwork focuses on the iterative design process, user journey considerations, and collaborative decision-making that shape the evolution of Fliggy's map visualization for routes. And I am mainly responsible for visual design for final distribution.

Final Impact

20% Increase in Turn Over Rate

Launched in route product system, improving turn over rate by 20% - Handed this off to developers at the end of the internship, and it has been launched in Aug of 2023.

Component Reusable 50k+ Times

Integrated 5 variations of design pattern into design system, estimated to be used 50k+ times for 5000 routes in Fliggy's library.

📱Main Features

Add one POI for route recommendation

Click specific POI to see its own information

01. Route Product Visulization

Smart match by clicking POIs

Users can add or remove locations from a predetermined route product, browse individual destinations, and the system will make recommendations based on these actions.

This is my final design pages for internship but not exactly the one launched in Aug,2023. Our team revised some detailes after I left.

But the general ideas are:

Intelligent Routing Search

Based on the user's selected destination, the system will automatically generate travel routes tailored to their preferences.

Increased Usage and Sales

The generated routes match the 5000+ travel packages offered by the platform, thereby increasing conversion and sales rates.

Recommend Nearby POIs

When pinpointing your current location, the system automatically displays cards for nearby POIs. Users can click on the cards to access more detailed information.

Integrate Theme Promotion

Rather than placing tags on map for theme promotion, fliggy provided a new section of “Route Treasure Library” to enrich content based on popular trend.

02. Design System

Quicker Prototyping

I created the reusable components listed right using Fliggy's design framework to make it easier and faster for the team to construct prototypes.

03. Other Launched Pages

To get a clear understand of user journey, here are more integrated features for map visulization.

Route Product

Every route product now has map visulizaion in its detail page

Neighboring Recommendation

When clicking card for specific sceneary, users are able to see neighboring recommendations

Map Library

Within in the "Travel" category, Fliggy has promotion library based on users' top choices

And more...

Welcome to download the app :)

This feature is now live and available for exploration. You can download it from the App Store to discover its full functionality.

👋 Background

Value & Customers

Fliggy improved map visualization, transitioning from list to tiled mode, which significantly boosted decision-making speed in hotel bookings. The successful outcome has prompted the company to explore applying this enhanced functionality to streamline decision-making across various industries for trip-related purchases.

Younger

Dynamic & Diverting

POI Principles

The principle of 'Point of Interest' (POI) posits that a higher level of specificity enhances turnover rates. This relationship is closely intertwined with map hierarchy, wherein elevated hierarchy levels demand the display of more detailed information to aid users in exploring and defining their points of interest.

Business Objectives

Challenge & Success Metrics

In the current Fliggy app version, map features are compartmentalized with varying appearances, and users express a need for additional functionalities. Analysis by PM and UX teams indicates a user desire for a more efficient app that facilitates informed decisions, cost savings, and time conservation. Recognizing the correlation between increased map usage and business objectives, I lead the development of the exploration map.

Unmet User Needs

As furnished by the Product Management team and User Research team, a potential but unfinished list of reasons and directions has been provided to guide the development of the map visualization product.

Time-consuming Map Switching

inefficient and repetitive to switch between different categories' maps

Route Generation Falls Short

can't generate a travel routes based on the POIs that users interested in

Inability to Custiomize Route

users have varied travel preferences but routes can’t be customized

Insufficient Information for Users

current maps not provide enough info to create a complete travel plan

Design Question

Focusing on features Goals

“HMW shift Fliggy’s product display from shelf views to a map-based interface, increasing engagement and improving turnover rates through an interactive experience?”

🔬 Analysis

Competitive Analysis

In order to comprehend the intricacies of compelling design and the effective utilization of maps for information visualization, I undertook a thorough examination of competitive applications within the map and travel domains. This involved a detailed analysis of innovative features and interactive modes employed by these apps, with a focus on identifying opportunities that can serve as valuable references.

Innovation Point

Interactive Mode

Design Goal

During discussions with team members, I identified a lack of emphasis on user journey. Consequently, I created a user journey map, drawing insights from our collective experiences as customers to elucidate the functionalities we aim to incorporate.

Hierechy of Pain Points

After constructing the user journey, I conducted a hierarchical analysis of pain points to systematically identify and prioritize areas requiring attention and improvement. Shorterning the journey of "Discover POIs" is the main concern.

🧠 Brainstorm

Inspiration from Previous Academic Project

As I embarked on the brainstorming process for user journey and functionalities, I revisited one of my academic projects, 'Aroute'. This travel planning app aims to visualize information on a map, enabling professional travelers and agencies to sell their routes directly or offer cloneable versions for further customization.

View "Aroute"

The innovative approach of distinguishing between community exploration and personal plan files allows the incorporation of both function-based tools and promotion-based features.

To address the distinct business values associated with each, I worked with team members and developed dual designs, facilitating collaborative decision-making with the product team.

Method 1: Function-based for Existing Users

Users are going to explore POIs on “super map” and organize them on “my map”. It incoperates route and iteneary plan with team collaboration to increase the efficiency of decision-making.

To understand it more clearly, I translated the information architecture to English below:

Public

Private

Method 2: Theme-based to Attract New Users

Aligned with the evolving preferences observed on social media, contemporary decision-making, particularly among the youth, is guided by factors like weather, temperature, transportation, and activities. Categorizing this information facilitates easier trend-following and attracts new users.

Inspirations

Theme maps, like the ones below, have been extensively disseminated for promotion on the popular Chinese social media platform "Little Red Book". Those posts group routes, points of interest, and sites into many categories according to factors like weather, activities, and seasons, instead than just listing prominent destinations.

Functions Needed

Content

POI (Point of Interest)
Route detail
Transportation method
Distance

Theme Category

Seasons (24 Solar Terms)
National holidays
Crowd
Pop Culture (Activities)

Route Plan

Recommendation
DIY
Product entry
Secondary creation

Interaction Mode

Zoom in & out
Card swap

‍

Information Architecture

🧩 Prototypes

Function-based

Super Map with Smart Mode

Fliggy boasts a comprehensive library of over 5,000 routes, easily sortable by selecting Points of Interest (POIs).

Users have the option to activate the smart sort mode, enabling them to discover routes aligned with their potential interests. Alternatively, they can explore scenic spots and hotels around POIs directly on the map.

Located in City Level

Zoom out to Country Level

Different Level of Information

The “super map” begins with popular scenic spots based on the current location. As users zoom out for a wider view, the interface seamlessly transitions to display recommended routes on cards.

Personal File for Customization

My Map' functions as a dedicated save folder, allowing users to plan their itineraries by exclusively displaying scenic spots and hotels of their chosen interest.

Theme-based

Maps feature distinct sections: a promotion part based on overall ranking and a theme part reflecting popular trends. Users can easily switch between these sections using theme tags, starting from their current location.

01. General - Promotion Based on Ranking

The general map indicates locations that are 30 km, 45 km, and 60 km away from the current position. Various card types are used to display different sorts of scenery, itineraries, and accommodations based on their popularity.

02. Theme Skin Card

Maps and cards will alter their appearance depending on the content when theme tags are entered. The summer cool map, for example, will have water on it and be arranged according to temperature.

Team Evaluation

We struggled to decide on the initial design draft for the launch date of August 30. There was iteration in the solution between theme-based and function-based approaches. The PM team chose to add this functionality for route product first in order to ensure that it satisfies the fundamental business goal of raising turnover rate. At that time, it was the best way to reduce costs and eliminate risk.

Super Map

How to keep user rentention?

Function - Based

Theme - Based

Content Driven

Where the content from?

Pros

- Functions meet users’ demands
- Build upon existance

Pros

- Immersive visual experience
- Differentiate from our competitors

Route Product

Data Visulization

Cons

- Lack of creativity
- Distinguishing Minutely from others
- New entry

Cons

- Highly reley on content (High labor cost)
- Hard to meet business goals

Smart Tool

How to change user habits?

Revision - Redefine Mission

After discussions with the entire team and PM, we have confirmed the detailed product direction, which is emphasizing on functionality, but with a smart integration with theme-based creativity.

An "super map" that assists people make more detailed travel plan efficiently and collaboratively

Preserving some theme-based features within the map

Emphasizing on visualizing routes and route planning

Allowing travel planning customization and team collaboration

The user flow of the updated design was overseen by other members as my role in this project is mostly centered on visual representation. Additionally, I was executing rather than designing for the remainder of this "Route Map" project due to time management issues with the career website project having a greater priority at the same time.

Back to See Final Design

💡Conclusions

Reflections

Engaging in four distinct projects at Alibaba-Fliggy design team during the summer of 2023, I gained a profound appreciation for the transition from student-oriented thinking to a professional mindset. This experience has enhanced my proficiency in effectively applying creativity to achieve business objectives as a UX designer.

Challenges I Faced

Lots of Uncertainty

Throughout the entire process, we had an undefined user group, a wide variety of functions we wanted to add, and changes in metrics. Continuous adaptation was required to navigate changing user expectations and factors. This iterative method, although difficult at times, was helpful in strengthening my abilities, building resilience, and accepting uncertainty as a necessary part of the design process.

Complex Content

Since this project has to build upon existing features and journey of discover POIs is long that fulfilled with abundant information, distilling this complexity into user-friendly interfaces required strategic thinking. This task made me realize how important accuracy and clarity are, and it helped me approach content architecture from a methodical yet artistic perspective.

Key Takeaways

Business & Design Metrics

The mutually beneficial interaction between business and design metrics is a crucial lesson to be learned from this project. By coordinating design choices with broad business goals, I discovered how to use metrics as a foundation. This methodology not only enabled well-informed design decisions but also highlighted the strategic significance of design in accomplishing quantifiable business objectives.

Problem to Solution vs. Solution Driven Method

This project started with a predetermined solution, which is different from usual project paradigms where problem discovery kickstarts the design process. The switch from list to map display was a purposeful beginning. This non-traditional approach to incremental design works better than other projects I worked on at Fliggy since it focused on improving and expanding the tested solution into new domains.

Structured Communication

Clearly defined prototypes become the means of expressing, honing, and coordinating concepts with broad goals. This technique of structured communication was helpful in driving project in addition to helping team members develop a common understanding. Prototype-based iterative conversations became a key component of productive teamwork, encouraging consensus-building and, eventually, the achievement of clearly stated project goals.

Thanks for Reading

Back to Work List

See Next Work