Frolic.png

a collaborative travel app meant to simplify travel with friends.

 
iPhoneX-frolic-brighter-blue.png

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.

Role: Interaction designer, design specs writing, low thru high-fidelity prototyping, user research, usability testing and analysis.

Team: Janet Longhurst, Robin Marsh, Sooa Chung

What: Native app design - graduate studies

Tools: Figma & Illustrator

Duration: 8 weeks

hmw-frolic2.png
 

Product Preview

Screen Shot 2019-12-09 at 5.37.13 PM.png

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

 

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 may be all be traveling together.

 
 

Research

Method i: Survey

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 visualize the context of where and how our different users plan their group trips.

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

Method III: Competitive Analysis

The competitive analysis showed us where the holes in the market currently are for group travel.

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?

Countless sketches, flows, and affinity diagrams helped us to reach a features list, and ideal user journey for our low fidelity prototype.

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

Results 1

  • 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
 

Results 2

  • 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
 

Results 3

  • 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 works.

 
 

Easy access to your reservations

Screen Shot 2019-12-09 at 4.04.03 PM.png
  • Tapping the wallet icon in the itinerary, connects the user to their reservation.

 
 

Reflection

Time was definitely our biggest constraint.

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 travelers 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 due to time constraints we did not do usability testing. There is also more to figure out in terms of how reservations are added from other sites. The B2B element of the trip wallet was left unspecified and untested.

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

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

    • How will we make tiebreakers when there are too many activities ranked the same, on the Group Likes list? Is it randomly chosen by the computer? Does the computer ask the users to rank the tied activities in order to know better what are the priorities for the group?

  • In the future, we would like to develop a pathway for travel groups to separate for different activities and meet up later.