2020 - UI Design, User Research

UBI – Personal Travel Companion

Travel companion service that helps travelers to discover, record, and create shared memories.

brief

UBI is a travel companion project I created with the travelers in mind that helps them discover, record, and create shared memories during the trip. In this project, I learned how to conduct large-scale quantitative research, refine and consolidate the result, and create a usable design system.

Design Process

User research, wireframes and prototypes, visual and brand design

Duration

May 2020 – August 2020

Team

Solo

Tools

Sketch, ProtoPie, Google Forms, Tencent Forms

Discover, record, share

UBI is a travel companion project I created with the travelers in mind that helps them discover, record, and create shared memories during the trip. UBI provides features including reliable point of interest discovery based on real user feedback and trip data, real-time and customizable traveling records, shared trips with friends, and easy memory sorting and storing. All these features allow travelers to enjoy a further elevated traveling planning, recording, and memory-storing experience without sacrificing the enjoyment they get in the traditional traveling process.

The Problem

With the development of a more convenient transportation system, people are more willing to leave their surroundings and explore the world. The US domestic leisure trip data has been growing steadily since 2010, from 1.5 billion trips to nearly 2 billion in 2019. This data showed the traveling industry's growth prior to the COVID-19 pandemic while also laid a foundation of how the whole industry may thrive back after the pandemic globally. The accompanying problems also emerge as more and more people rely on their smart devices to help them research, plan, record, and share their journey. I assumed people who enjoy traveling are facing the following problems:

  • Sight-seeing information is overwhelmed by promotional or commercial traveling guides, and being exploratory in new places is tricky.
  • Managing photos, logs, and memories during and after the trip are difficult.
  • Sharing the same trip with traveling partners or sharing the whole experience with the world is hard.
leisure trip increase data in the us since 2010

Understanding the Users

To further understand what the users need when traveling, I conducted a quantitative survey and further concentrate the data into improving points. With the points' help, I further interview two users with different habits, intentions, and characteristics when they are traveling. A final persona is then further ideated based on an in-depth insight I got from the two interviews.

Quantitative SURVEY

In order to validate my assumption, I conducted quantitative survey using Google Forms and Tencent Forms to collect some preliminary and general thoughts about the traveling experience from a wide range of people. The research finally collected more than 400 responses. With the throughout data, I was not only able to verify my assumptions, but also able to finalize the assumptions and ideate what exact part of the experience I would like to enhance for the users, which leads to the vision statement for the entire project.

Some of the form data and questions
IMproving points

I refined the user needs into the following five points: reliability, discoverability, recording, managing, and archiving. These points helped me clarify what problems need to be fixed and what new features or interactions I need to add to the service, which leads to the four stages of experience I improved for the whole traveling journey in the following user journey map.

USER INTERVIEW

Besides the quantitative research, I also conducted two in-depth interviews to gather more detailed thoughts from the regular users. With different travel frequency, recording habits, and focus points during the process, I asked questions, including their planning, recording, and managing process and obtained insight on specific different features they need, including:

  • Credible and unified travel info from different sources
  • Route based or event based multi-media recording
  • Auto photo selecting and managing system with machine learning.

These requirements helped me identify the signature features and interactions of the service considerably in the subsequent development and design.

Creating Personas

With all the previous users' needs and insights in mind, I started to think about how a fictional user can fit into the anticipated user flow and features the service provides. Therefore the primary persona of the service, Markus, is created. He is one of the best representations of our primary user group. As a traveler/blogger, his emotions and frustration help us identify where we should improve and how his journey can be optimized throughout the trip.

How might we...

• Provide reliable and intuitive traveling info?
• Simplify the process of recording and managing traveling memories?
• Promotes the spirit of experience sharing?

The Solution

Based on the personas, I imagined how the users would interact with different product features, including planning, recording, managing, and sharing throughout the trip. I also try to visualize their emotions for further analysis and design by creating different user journeys. We also ideated several signature interactions to accompany what the user might need during that time and how a unique or efficient experience we are able to provide to the users.

User journey before ubi

I first laid out a user journey for our personal Markus prior he uses the service. By separating the whole trip into four sections: research and preparations, arrival and exploration, visiting tourist attractions, and after trip, I was able to emulate his feelings and dissatisfaction at a certain point and develop signature interactions to improve the individual experience.

Signature Interactions

Every signature interaction is developed based on all the previous interviews and the user journey. They serve not only to solve the user's frustration points and elevate the user's experience but also to distinguish our service from some of the existing competitors as a better one on the market.

Hotspot Recommendations

Trigger   During traveling, the user arrived at a location / path that has been visited or marked by many others.
Feedback   In the app / on the map, real-time suggestion or path selection will pop up, guiding the user to explore different region. The app will also push notification when user is not using the device.

Recording Timeline & Categorization

Trigger   During traveling, the user use the app to take photos / record texts / mark sight-seeing points.
Feedback   The recorded content will be added to a timeline where the user is able to check everything happened during the trip. The recorded content will also be added to a categorized tab with different filters.

Journey Sharing

Trigger   When the user is separated or regrouped with the travel partner during the trip.
Feedback   The timeline and the map will add a separated / regrouped event with different cheerful animations. The device will have corresponding vibrating notification.

User journey After ubi

I also created a user journey after the user using the service. It demonstrates how UBI is able to participate in different parts of the journey. The user's frustration was drastically reduced by providing features including reliable traveling planning resources, intuitive and automatic route recording, and a machine-learning-based archiving system.

Prototyping

With the user scenario and signature interactions in mind, we started creating mid-fidelity prototypes to enhance further the detailed user interactions and screens in our services. The mid-fidelity prototypes not only act as an information architecture, which clears out the level of content in the design, but also gave us ideas about how many different user flows there might be in the mobile app.

Mid-fi User Flow

This mid-fi flow helped us clarify the four main sections users are going to face after logging-in the app: Home, Record, Explore and My. Each individual section also features different types of content and interactions.

Interactions

I also created multiple micro-interaction flows for the signature features in the service. One of the most important parts of the service is the travel recording sections. With the help of the mid-fidelity prototypes, the micro-interactions between different parts on the page are sorted out easily, which built a solid foundation for our future high-fidelity interactive prototypes.

All of the mid-fidelity wireframes

User Testing

Prior to the final design, I conducted a round of user testing to make sure both the user flow as well as the feature set in the app are understandable and intuitive to the user. By letting the user go through different phases in the user scenario and various sections in the service, I gathered plenty of inspiring insights.

ONline Testing

The online testing platform I used was Zoom and Sketch Cloud. Zoom provided an easy solution for direct communication and screen sharing, which allows the participant to point out the places they are confusing with directly on the screen. Sketch Cloud was also extremely helpful for this Sketch-designed project. I was able to quickly build up a simple workable prototype and upload to the cloud platform, which allows the participant to interact with without needing to download or install anything.

Using zoom to conduct user testing
notable changes

I led the user through multiple anticipated user flows during the online testing, including onboarding, POI discovering and researching, trip recording, and trip reviewing / saving. Through these flows, I was able to identify dozens of problems from information architecture to minor UI issues, and the following are some of the most notable changes.

New User Onboarding and Discovering

The participant reported confusion and blurriness after the onboarding process. The user's anticipated flow was to explore trips and places in the Home tab or the Discover tab, but the user may have difficulty finding what they can do in our service due to the information hierarchy. So a change in the information architecture and accessible discovery-related sections are required.

Multiple Travelers in the Same Trip

The timeline view for a single traveler in the Record tab was effective. Still, the participant was concerned about the design when multiple travelers are involved and how the timeline would branch out and merge in the view. The potential solution here might be a more clearly indicated timeline for each user and a secondary view for different merging or separating events in the timeline.

POI Rating and Like System

One of the most important way I anticipated the user to discover POIs and added to their upcoming trip is through a rating and collecting system. But the participant indicated that the rating system and the like system are confusing and redundant. The memory uploading process is also not understandable for new users. So redesigned POI card and memory-sharing feature with better privacy control is needed.

Final High fidelity design

Final Design

Discover, Record, Share.

Home, Places to Go & Heat Map

Places to Go is the best way for users to discover new spots around them or even far away from them. It is also adaptive to user’s interests and will automatically suggest next places to visit based on user’s saved places. Heat Map will show the trending places around the world and recent activities.

Trip Setup & Recording

Set up your trip before you start record a new trip. Invite your friends to join on the journey, setup customize the starting point or more. After the recording start, you can also add different format of the memories, from images to texts, or even voice to text, pins, and more during the whole journey.

Trip Summary

After the recording finished, you can check your throughout trip summary, customize your route, save the route video, and share your trip with your friends. You can also customize different ways to backup your trip, upload it to your cloud or your computer, manually or automatically done by UBI.

Branding and Visual Design

I also created a throughout brand guide UBI to further convey the fundamental thoughts of the service through both the brand value and the brand design. A visual design guide is also created for a consistent user interface design across the app and the strong connection with the brand itself.

Brand design

The name UBI is inspired by the Latin word Ubique, which means everywhere. This name fits perfectly with our primary slogan, discover, record, share, which promotes the user to go different places and create shared beautiful memories. The logo of UBI is also inspired by the map's guiding and point of interest element and the UBI letters themselves. The color we used in the logo is a vibrant gradient from green to blue, which reminds people of earth and nature.

Brand value & Design principle

The brand value of UBI always around five main ideas: diverse, delightful, explorative, sharing, and natural, which are tied closely with our logo and naming. Based on these value, we also utilized our design principle during the designing of the app.

DESIGN SYSTEM

For the design system, I chose FF DIN as the leading brand font, considering its shape provides both playful and readable characteristics, and use the iOS default SF Pro fonts as the paragraph font. The color system is derived from the brand design, and all the supplementary colors are also in the same brightness for consistency. All the buttons, cards, icons, and forms are all created systematically for maxim coherency throughout the design.

Learnings and Next Steps

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

What's next?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Thank You for Viewing :)