MAPPIN is a travel information collecting tool, hoping to provide travelers a better way to collect information and integrate their experiences, and help users save and arrange all the travel information through simple interaction with Web-Plugin and Mobile App.

With Web-Plugin, users can easily save any information on websites with one click, and a mobile platform enable users to collect both online and offline information with a mobile plugin and a camera. The saved information will be clearly displayed on the online maps, which helps travelers understand the relative location between different attractions.

What I do for Mappin

Project Management

My works in Mappin are mostly for planning the stage of implementation. Our goal is to create innovative products and to win the China UXD Award from nearly 500 competitive team. I lead and support projects during the past year.

User Experience Research

I partnered with a designer and a researcher to interviewed three rounds of 16 target user. We transfer user's behaviors to insights, also explored user's need for future.

Visual Design & UI Design

I am responsible for defining the image of Mappin and making the visual guideline. Designing user interface for Mappin web and app with a designer.

UX Testing

We designed up the prototypes via Axure and interviewed 6 users after they use it.


The global travel market grows rapidly, and Chinese self-guided travel is the fastest-growing. According to China government study, about 70% of abroad traveling is self-guided in China. The tourism market is highly competitive and tourism-related products are constantly changing. Our challenge was to find market gaps from user insights and competing products. Making a better travel experience for travelers.

With the internet, travelers can easily search and gather travel information through different information channels, and there are also a lot of tools helping them arrange their unique trip; however, the travel information collecting process is still exhausting to users.

Design Process

We interviewed three rounds of 16 target user to find traveler needs and problem. We Planned and conducted the user research in accordance with project stages. Our research method is to observe how user planning a trip and qualitative interviews with them.

We turned research findings into design opportunities and executed customer journey map, wireframes, prototypes, did two rounds of iterations between design and testing.

About Traveler

Preparation is Necessary

Self-guided trip means you need to organize everything yourself. To arrange a perfect and unique trip, collecting all kinds of travel information is necessary, including traffic info, hotel, attractions, food and so on. Preparation is comprehensive and not a one-day job.

Location and Distance

According to our research, location and distance information, amongst all kinds of travel information, is the most important thing to travelers. When finding travel info that interest them, they will check it up via map to identify its location and the distance between other attractions. Location and distance of attractions are also the key for helping travelers arrange their travel schedule.

Searching is Enjoyable

Although arrange a trip is not a easy job, self-guided travel lovers enjoy the time of searching and collecting those information. Even they are not about to travel, they still love to reading and gathering interesting travel information.

Problem Finding

Hard to Integrate

Users are overwhelmed by so many tools. The information comes from different channels, but users can’t save all the information in just one integrated tool.

Hard to Review and Arrange

As mentioned above, users almost cannot find where the information is. What’s more, they will find it difficult to decide the schedules merely by the word descriptions or pictures, they need to know the relative location on the maps.

Schedule Changes All the Time

Even though travelers have carefully arranged their tours, something unexpected will still happen and break all the schedule. It will be a big challenge for users to quickly respond to the urgent situation and decide a plan B.


Intuitive Save With Web-Plugin

By installing a web-plugin, users can easily "pin”, which means “save", all the information on websites, including attractions, text description, and image. When selecting words or hovering on images, MAPPIN button will suddenly pop out and users can save the info to MAPPIN. After pressing MAPPIN button, MAPPIN will automatically search the related location of the info and mark on the map. Users can also use the mobile-plugin and camera with the smartphone to collecting both online and offline info. Let users save information from different channels in the most intuitive and simplest way.

Save information offline

For offline information collection, users can take the photo through the phone camera to identify the picture and quickly convert to notes for collection.

Easy to Review

The things that travelers are most concerned about are location and distance. It Integrating with an online map to easily see all the information and pictures on the maps and understand the relative distance between attractions.

Share and Arrange Easily

The collection of attractions can be used to plan and arrange with travel partner. Even you are not planning a trip, MAPPIN is still a great notebook for you to save any information that attracts you.

Whenever And Wherever

MAPPIN is not just design for arrange a trip, users can use MAPPIN on no matter which devices or under whatever scenarios, MAPPIN can always provide appropriate services. Even you are not planning a trip, MAPPIN is still a great notebook with for you to save any information that attract you.

Easily Review Memories

Upload photos of the journey and easily organize into a memoir. Mappin automatically organizes your photos into an online album so you can review it anytime. Let making each trip a special memory!

Design Details

Guiding users to add

We designed Mappin website with Google's Material Design philosophy. We thought about the website feel as much we did its function, making the overall experience more easily, intuitively and delightfully.

Clear layout for easy viewing

For the tour note, user may collect a lot of informations and paste it in. If show all information at the note card, the user will losing focus. Hiding part of the information to makes the layout more good to viewing. User can expand by clicking the read more text button.

PIN on map

Landmarks play an important role on the map. we design two different landmarks, dark blue landmark means the location of information you arranged, and the red one means the location of information you like but not arranged. The numbers on the landmarks represent the number of travel partner who pinned this attraction together.

Visual line

Quickly view the page information in the vertical scroller and see the details in the horizontal view to make users read faster in each project. This design allows users to see the next project without going through a long list of readings.
Moreover, some journeys don't necessarily have a beautiful cover photo so we have a preset pattern for the user to use.

UI Collection

The gallery below shows some of the web designs for Mappin.

Detailed Specs

I created three sets of documentation during this project to communicate requirements to the development team and support our quality assurance teams in writing test prototype.


We eventually won the User Experience Design Award China 2016 Bronze Medal from 417 teams, and the Best Popularity Award and the Best Defense Award as well. We've got a lot of positive feedback from users who participated in the design tests and they all look forward to launching the Mappin project as soon as possible.

Even though this was a concept product, I'm excited to be a part of this journey. we will keep going to launch this project as soon as possible.

What I Learned

We are a group of 6 members, three designers, one researcher and two programmers. My role in our team is UX design and project management, I do both research and interaction design. I learned so many things from this ground-up project. As both researcher and designer, I learned solid research skills, decision making based on insights, making a high-fidelity prototype and convincing video to test ideas. Working with teammates with different professions taught me how to communicate with members of different background and mindset.


Designer— Peggy Lin, Ziyo Zeng
Researcher— Howe Chang
Developer— Sam Su, Jesse Xiu