MAPPIN is a travel information collecting tool, hoping to provide travelers
a better way to collect information and integrate their experiences. And
also 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 and bookmark any information on websites with
just one click, and through a mobile platform enable users to collect both online and
offline information with a mobile plugin and the camera. The saved
information will be displayed on the online maps, which helps
travelers understand the relative location between different attractions.
My contribution in Mappin are majorly on the planning during the stage of implementation. Our goal is to create innovative products and to win the China UXD Award competing against close to 500 teams.
With partnership of a designer and researcher, we conducted three rounds of interviews targeting 16 users. And through the insights of the target user's behaviours, it provided the window to explore the user's need in future.
The sole responsibility of defining the image of Mappin and making the visual guideline lies in my hand. Meanwhile the designing of user interface for Mappin web and app was completed with a designer.
We designed up the prototypes via Axure and interviewed 6 users after they use it.
The global travel market grows rapidly, and the fastest-growing market is the Chinese self-guided travel. 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.
Three rounds of interview was conducted towards 16 targeted user, with the goal to have in-depth understanding of travelers' needs and problems. User research was planned and conducted in accordance with
the project stages. The research method was to observe how user plan a trip and through the engagement in qualitative interviews with them.
We turned research findings into design opportunities and executed customer journey map, wireframes, prototypes followed by two rounds of iterations between design and testing.
Self-guided trip means you need to organize everything yourself. To arrange a perfect and unique trip, collecting all kinds of travel information became a necessity, including traffic info, hotel, attractions, food and so on. Preparation is comprehensive and is not an one-day job.
According to our research, location and distance information, amongst all kinds of travel information, is the most important to travelers. When finding travel information that interest them, they will look up via map to identify its location and the distance between other attractions. Location and distance of surrounding attractions are one of the key in helping travelers arrange their travel schedule.
Although arrange a trip is not an easy job, self-guided travel lovers enjoy the time of searching and collecting these information. Even without the intention of a planned travel trip, they still love to read up and gather interesting travel information.
Users are overwhelmed by so many tools. Information comes from different channels and sources but users are limited by and could not save all the information in just one integrated tool.
As mentioned above, users almost cannot find where the information is. Moreover, they will find it difficult to decide and plan their travel itinerary merely by the word descriptions or through pictures without the knowledge of the relative location on the maps.
Even though travelers have carefully arranged and plan their tours, something unexpected will bound to happen and disrupt their plans. It will become a big challenge for users to quickly respond to the situation and make a decision during their trip on the go.
By installing a web-plugin, users can easily "pin”, which means “save", all the information on websites, including attractions, text descriptions and images. When selecting words or hovering on images, MAPPIN button will prompt and users can save the relevant information into MAPPIN. After pressing MAPPIN button, MAPPIN will automatically search on the relevant location of the desired attraction and mark on the map. Users can also use the mobile-plugin and camera with the help of smartphone to collect both online and offline information. In which, allowing users to save information from different channels in the most intuitive and simplest way.
For offline information collection, users can take the photo through the phone camera to identify the picture and quickly convert to notes for collection.
The things that travelers are most concerned about are location and distance. It integrates with an online map to provide an easy view to see all the information and pictures on the maps and understand the relative distance between surrounding attractions.
The collection of attractions can be used to plan and arrange with travel partner. Arrangement of itinerary and day to day schedule can be easily organise and planned alongside with your travel partner in parallel.
MAPPIN is not just designed for itinerary planning but users can use MAPPIN on no matter which devices or under any circumstances, MAPPIN can always provide appropriate services. Even when not planning a trip, MAPPIN serves as a notebook for user to save any information that interests you.
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's make each and every trip into a special memory!
We designed the different component state to guide users to add the location to notes, making the overall experience as easy, intuitively and delightfully as possible.
For the tour note, user may collect a lot of informations, details, thoughts and so on, pasting and recording it all in. If all information were to be displayed at the note card, the user will result in losing focus. Thus, displaying only partial information allowing the layout easier for viewing. User can expand by clicking the read more text button.
Landmarks play an important role on the map. we design two different landmarks, dark blue landmark that indicates on the location of attraction that was arranged, and the red one signify 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.
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 design template for the user to use.
The gallery below shows some of the web designs for Mappin.
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 Defence Award as well. We received a lot of positive feedbacks from users who participated in the design tests and they all expressed their interests and look forward to the launch of the Mappin project.
Even though this was a conceptualised product, I'm excited to be a part of this journey. We will keep going to launch this project as soon as possible.
We are a group of 6 members that comprises of three designers, one researcher and two programmers. My role in our team is UX design and project management, that focuses on 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 backgrounds, perceptions and mindsets.
Designers— Peggy Lin, Ziyo Zeng
Researcher— Howe Chang
Developers— Sam Su, Jesse Xiu
