UX Design

TripAid- Planner App Development

Design an effective experience to create a trip plan in collaboration with others.

Overview

TirpAid is a startup company that is committed to making a real difference to ease people’s life. Their business goal is that building a travel planner platform in three months to fill the gaps and improve the users’ user experience to deal with the explosion in the tourism industry after the pandemic.


​Most planner apps on the market today focus on personal business and were barely for users to build a travel plan together.  I found that it's hard for users who like to travel with others to find a specific collaboration planner platform for them.

Target Users

18-35 years old
Travel with others

Timeline

12 weeks

My Role

Sole UX/UI designer

Problem

People fail to find an effective way to build a travel plan together.

Challenge

​Business needs​:

  • Design a travel planner platform for user who like to travel with others in 3 months.

User needs:

  • Simplify the process to create a travel plan.
  • Make it flexible and easy to edit and navigate.
  • Keep organized and show the plans clearly.

Opportunity

1. HMW let communication and creating trip plans happen in one place?
2. HMW make it possible for the users to edit plan simultaneously?
3. HMW make it easy to check the comments or message?

Solution

Accessible: people in the group can review and edit the plan, working collaboratively.

People in the group can review and edit the plan once they get permission. That means they can work collaboratively and keep everybody on the same page.

Handy: use a template to create a plan quickly.

Everyone can create an organized travel plan with a template in a very short time.

A template that includes the basic items that a travel plan needs, which allows users to create a trip plan quickly.

Handy: use a template to create a plan quickly.

Everyone can create an organized travel plan with a template in a very short time.

A template that includes the basic items that a travel plan needs, which allows users to create a trip plan quickly.

Effective: chat in the app and  make it easier to check and pick the source.

To avoid going back and forth, people in the group can leave messages or opinions and share resources directly on each specific plan/activity, thus can improve the efficiency of decision-making.

Flexibility: add, delete, and switch the plan easily.

Slide the card to edit or delete it quickly.Hold on and press the card while dragging it to switch the activities easily.

Flexibility: add, delete, and switch the plan easily.

Slide the card to edit or delete it quickly.Hold on and press the card while dragging it to switch the activities easily.

EMPATHIZE

Desk Research
User Interview
Synthesized

Understanding the problem by initial desk research and user interviews

As the quarantine, I began with desk research online and conducted user interviews remotely. Because these are the fastest and effective ways that I can get both qualities and quantities of information about users. The results helped me gather insight from target users and directed me to make smart design decisions.

Key finding from desk research:
Most travelers do travel research on mobile devices nowaday.

I did user interviews with 5 target users who traveled at least 1 time with others last year to try to get deep learn about what their previous travel experience looks like. And I found:

Key findings from interviews

  • Compared with personal trips, 100% of interviewees said they usually spent more time making trip plans when they traveling with others.
  • 3/5 of interviewees felt weariness and time-wasting when discussing the plan of a trip together by chat group on the phone.
  • 2/5 of interviewees said their friends used to complain about missing activities after the travel when they making the travel plan alone.

This result led me to the think about:

How to provide a positive experience for users by improving the efficiency of cooperation?

What causes them to have such a poor experience when doing trip plans with others?

By doing affinity map, I found that most users mentioned pain points below.

  • Miscommunication.
  • Go back and forth to check the tones of messages.
  • Switch multiple platforms to make choice.
  • Hard to saddle on things they both like

I translated users need into:

  • Let communication, sharing resource and creating trip plans happen in one place.
  • Make the messages or comments intuitively.
  • Everybody in the group should be able to edit or check the plans easily.  

IDEATE

Ideate
User Story
Sitemap
User Flow
Heuristic Evaluation

Explore solutions. 

“It would be nice to be able to save the previous information like text exchange or even have a separate chat bubble that gives back and force details.”

From the research and the interview, I found that a key point to improve the efficiency of collaboration when making a trip plan was about communication since everybody’s needs should be considered. That made me think:

What if we provide a positive plan building experience for users by adopting social collaboration design? 

Definition of social collaboration

According to Wikipedia, social collaboration “refers to processes that help multiple people or groups interact and share information to achieve common goals.”

Google for Work (Hangouts, Docs, Sheets, Drive, Slides, etc.), Microsoft Office 365 (Word, Excel, OneDrive, Lync, PowerPoint, etc.) are the example of Social Collaboration Suites. I marked down some great features that they used as they can also work for my project:

  • User can create a public file and invest other users with editing permission.
  • Users could leave comments in a specific section.
  • People in the group will get noticed by email if the file is revised.

Except for the above features, an internal communication feature is also necessary as most travelers need a way to share resources in the group and they’d like to get feedback immediately if possible.

I was also considering that a template option may be a good choice to be included as some interviewees said a template would help and ease the work.

DESIGN

Sketches
Wireframes
Style Guide
Hi- Fi Prototype

Conducted guerilla testing with sketches and reflect the improvement on the wireframe

Now the fun part begins. With all the supporting data presented, I started to create iterations and iterations of hand-drawn sketches before diving into wireframing and prototyping. I always ask myself: "What’s the best way to communicate my thoughts?" These hand-drawn sketches are helpful to keep me from getting too detailed into the visuals.

Once there was no issue with the sketches, I chose to conduct a guerrilla usability test first with 5 participants by asking them to complete a series of tasks. My goal is to check if the logic or hierarchy is clear enough for users and how the CTA works.  

I did a lo-fi prototype with the paper sketches by POP(marvel) and recruited the participants online. What I worried about was that my drafts were too messy to read by my participants, and that apparently would affect the way users make decisions.

After the test, I found it’s not hard for my participant to understand the primary purpose of my App, but there were still some problems that needed to be revised.

Style Guide

Considering the company’s personality, I started with having some adjective words in mind and chose the most representative colors, typeface, and icons to convey the feeling of Brisk, Accessible, and Friendly.

ITERATE

High Fidelity Design
High Fidelity Prototype
Usability Test

Prototype and validate

When everything was prepared, I had my most exciting moment, to build the hi-fi screens and prototype in Figma based on my wireframe works. Then I had to face the challenge below for this part:

  • Pursuing pixel-perfect work.
  • Doing the test remotely and synthesizing the test. 
  • Finding the way to improve the work.

Once I have a big picture in mind, I start visualized my idea in Figma, then optimized it by doing the usability test. I conducted two round usability tests with 11 people to validate the result and improve it.

Improved the details
  • Replaced the initial character with an avatar pic to make it easier to glance and look for.
  • Changed the symbol of notification on the card to clarify what it does.
  • Emphasized the Delete icon by red color to convey the feeling of danger and separate it from the message icon.
  • Added timeline.
Improved the details
  • Replaced the initial character with an avatar pic to make it easier to glance and look for.
  • Changed the symbol of notification on the card to clarify what it does.
  • Emphasized the Delete icon by red color to convey the feeling of danger and separate it from the message icon.
  • Added timeline.

Try the prototype

What I learned

1. Find and solve the fundamental issue, not the symptoms. 

Getting to know what the user needs and exploring the problem is much more important than just starting to rush without a goal. It deserves to spend time coming with some diverse solutions. 

2. Guerrilla test is an effective and time-saving testing method. 

Though the sketches may be very rough or messy, it can still work great to check if I am in the wrong direction and help me not to go far away from my HMW questions. But I will make the sketch more legible if I can go back and do something differently.

3. Get to know your target user usages and behaviors and choose the signifiers thoughtfully

t can make a big difference once you pick the proper elements based on your target user usages and behaviors. For instance, gestures icons, buttons, or color palettes. During the usability test sections, I found different operating system user has a different idea on the same thing. If you want to design an app for both Ios and Android users, it’s better to pay attention to choose a common icon and gesture for the product.

4. Try to be better, don’t try to be perfect, it won’t happen.

This is the most powerful thing that I learned from this project. I use to felt stressed and disappointed when I was stuck in the design process because I was a perfectionist, but my mentor told me to enjoy the process and complete it first.
Once there is work, then you get a ticket to improve it based on the user’s comments during each test, not just from your personal perspective.

Next step

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

What’s next?

Heyo - Music Streaming App Development

From concept to visual, helping people get the most of the subscription by accessing additional-value features in a short time.

CityPups - Adoption App Development

Finding a way to help city people find and adopt an ideal dog easily in 5 days.

Let me know if you want to talk about a potential collaboration. I’m available
for freelance work.

Let’s design your app