Frolic.png

a collaborative travel app meant to simplify travel with friends.

 
iPhoneX-frolic-brighter-blue.png

Team: Janet Longhurst, Robin Marsh, Sooa Chung

For: User Centered Design, graduate course - Autumn 2019

What: Native app design

Tools: Figma & Illustrator

Duration: 8 weeks

Problem

Traveling with friends can come with unfriendly experiences. Deciding on the simple activities to do or where to eat can take up a lot of time, and this loss of time equals lost opportunities, when you’re at your destination. Our aim in designing the frolic travel app is to create a collaborative planning medium, where friends can plan together and achieve relative consensus on a trip itinerary before they leave home.

hmw-frolic2.png
 

Product Preview

pick a

Chose a destination • Invite travel companions • Explore and Like activities • After everyone has contributes a smart Itinerary is created for your group.

 

Our Process

process-asset.png
 

Target Audience / Personas

Our users are both the individual travelers (age 18-54) & the group they are traveling with (group is defined as 2 or more people).

PRIMARY PERSONA

PRIMARY PERSONA

SECONDARY PERSONA

SECONDARY PERSONA

TERTIARY PERSONA

TERTIARY PERSONA

 

The individual travelers will work collaboratively with their travel group to plan their travel itinerary.

Since we created a collaborative planning app, we had to create personas for the spectrum of users who participate in group trips. Polly is our primary persona, because she loves to plan, but considerations were also made for those who do not enjoy planning, because the odds are they could all be traveling together.

 
 

Research

Method i: Survey

The survey helped us understand if our users: like to plan group trips, how they currently plan and organize those trips, and what their frustrations are while traveling with friends.

Screen+Shot+2019-11-27+at+2.12.20+AM.jpg

41 participants

  • 69% like/love to plan

  • 50% of all participants use 2 or more planning methods

  • Only 7% use a tool made for travel planning.

  • What to do and where to eat were the biggest frustrations.

  • Frustrations from group trips stem from time lost due to decision making.

 

Method II: Personal Inventory

This method helped us to understand the differences between people’s behaviors when they plan, as well as show us the context of where & with what devices they plan. We also used this method to help triangulate some data from our survey, primarily, what methods people currently use when planning a trip; iMessage, google docs/maps, web calendar, yelp, multiple methods or nothing at all.

Screen Shot 2019-12-08 at 12.10.08 AM.png
 

Method III: Competitive Analysis

The competitive analysis helped us to see the holes in the market & directed us towards what kind of product made sense for our users needs. We discovered that there really isn’t a free collaborative trip planning app on the market that focuses on what to do and what to eat. Our survey showed that only 3 out of 41 users use an app for travel planning. The competitive analysis helped to explain why that is, in terms of what features might be missing that our users need or want.

competitive-analysis-png.png
key-research-frolic.png
 

Ideation

  • How do individual ‘liked’ items, get shown to the group? How do they decide together on activities?

  • How do we decide which items will make it to the final itinerary?  Is it computer generated?

  • How do we build flexibility into the itinerary for groups to make changes to a computer-generated itinerary?

  • Do suggestions for moving activities need to be approved by the other members of the travel group?

So then we sketched many iterations of each idea, made affinity diagrams & flows, and decided on our initial flow and key features.

 
flow-idea.png
IMG_0722.jpg
Screen Shot 2019-12-08 at 4.48.44 PM.png
IMG_0736.jpeg
postits-ideas.png
signin-idea.png
 

Key Features

features.png
 

Paper Prototypes

paper-feature-none.png

User Testing Results

  • Users had difficulty moving an activity inside the itinerary.

  • Users did not understand they need to toggle between trip names.

  • Users did not understand how to add/like an activity on the explore page.

paper-pro-user-test.png
 

Mid-Fidelity Prototype

Task 1

“Like” an activity, in order to add it to the Group Likes page.

  • Notifications were too subtle when liking something on the explore page. Users did not recognize that they had accomplished the task.

Iteration

We improved the notifications by adding a high impact color to make them stand out better.

Screen Shot 2019-12-08 at 8.47.26 PM.png
notifications.png
 

Task 2

Move an activity within the day, on the itinerary.

  • Users were confused by the left sided gripper for moving within the day.

Iteration

We decided to change the interaction to a long press and drag convention.

Screen Shot 2019-12-08 at 9.06.56 PM.png
long-press.png
 

Task 3

Move an activity to a different day, on the itinerary.

  • Users did not perform a slide left interaction, several attempted and missed the touch target.

  • Visually the left sided gripper appeared like a barrier to a left slide interaction.

Iteration

By removing the left sided gripper interaction, the slide left interaction becomes more actionable.

Screen Shot 2019-12-08 at 9.46.34 PM.png
actionable-interactions.png
 

High Fidelity Prototype

 

Adding Companions & Onboarding Screens

Screen Shot 2019-12-09 at 2.52.55 PM.png
  • ‘Add companion’ button was enlarged & enhanced with color on the sign in screens, as some users missed the button during usability tests. 

  • Onboarding screens were added to help users understand how frolic will help their group plan a trip together.

itinerary-asset.png
GROUP-LIKES-asset.png
 

Easy access to your reservations

Screen Shot 2019-12-09 at 4.04.03 PM.png
  • Tapping the wallet icon on an activity in the itinerary, takes you to that specific reservation inside the trip wallet.

 
 

Reflection

So much work in so little time… 8 wks to be precise.

Time was definitely our biggest constraint on this project with a scope as large as it was.

what we could have done differently?

We could have limited our scope more. Our rationale: the research said it’s what users need.

  • There are several single feature apps for travel, but according to our research, they aren’t being used. Instead users are using multiple methods to plan and organize their group trips. 

  • This suggests that a more all encompassing travel tool may increase user adoption.

what is left unspecified?

  • Our trip wallet was developed throughout the design process, but we did not have time to do usability testing on the mid or high fidelity prototypes. There is also more to figure out in terms of how reservations are added from other sites, and other B2B concerns. Will we send notifications for changes to flights (delays or changes to boarding locations) or other reservations through the frolic app?

  • Some of the technical aspects of how the app and site will function:

    • How we will scrub the net for content for our explore pages? 

    • How the business actually works, subscription or not? How does Frolic make money?

  • How will we make tiebreakers, when there are too many activities ranked the same on the Group Likes list? Does the computer ask the users to rank the tied activities in order to understand the priorities for the group?