LANTERN TRIPS TRAVEL PLANNING APP

UX DESIGN / UI & VISUAL DESIGN 

The Brief

Create a minimal viable product (MVP) prototype for travelers to easily co-create and share itineraries that other travelers can use to inspire their own trips.

The travel market is steadily growing annually and millenialls are leading the pack. However there are no dedicated apps that allow travelers to plan on the go. Lantern Trips is a startup aiming to fill that gap and be the most trusted source for collaborative travel planning and sharing, utilizing user-generated itineraries.


THE PROBLEM
When Lantern Trips came to us, they had a broad idea in mind: create the go-to travel app that provides authentic itineraries and experiences that other travelers can like & save, therefore fueling a community of wanderlust. They were looking to our team to provide some insight on what areas their MVP would focus on.
THE SOLUTION

A mobile application that travelers can use to auto-generate their itinerary, send and approve activities with other trip attendees, and share content on social media or publish to Lantern Trips for other travelers to save & iterate on for their own trips.


THE PROCESS

Team: Gigi G (me), Jacob K, Purcell C

My Role: Lead UI Designer, User Research & Interviews, Rebranding, User Journey Map, Affinity Mapping, Design Studio, Wireframe Sketching, User Flow, Logo/Icon Design, Wireframing, High Fidelity Prototype, User Testing

Tools: Sketch, Axure, Photoshop, Google Slides & Sheets

Platform: Mobile App

Timeline: 1 Week of research, 2 Weeks of design, prototyping, testing, & iterations at General Assembly

UX PROCESS

In this project we were able to complete the UX process and iterate after in-house testing.

Step 1:
RESEARCH

Step 2:
DESIGN

Step 3:
PROTOTYPE

Step 4:
TEST

Step 5:
ITERATE

View prototype

Step 1: Research

Interviews
Research Synthesis
Persona
Journey Map
INTERVIEWS

We created a qualifying survey to target millennials that also share their trip. From those who qualified we interviewed over 15 candidates then proceeded to affinity map value statements to see like findings.

RESEARCH SYNTHESIS

From our affinity maps we found out the following insights:

  • If traveling for leisure, most users travel in groups.

  • User post on their phones in real-time or within 1-2 days

  • 90% of content posted are images, sometimes with accompanying text.

  • When sharing to social media, 98% users posted to Facebook or Instagram.

  • Trips that cost more (such as international trips) are more likely to be shared.

  • Users trust reviews or websites that collect authentic experiences over blogs or articles they might presume are commissioned. 

The following quotes highlight our user’s goals and pain points concerning when they post to social media, what/who are their travel resources, how they sort through content, and how they plan:

It's best to post in the moment because then it's fresh.
Ian C.
Ian C.
Accountant
I wish there was a way to mark the photos I want to post. Like if I have 5 versions of a photo I want to mark which one I want.
Veronica M.
Veronica M.
Event Planner
I use my friends as a trusted source because we share interests.
Amy L.
Amy L.
Designer
Being able to share an itinerary and making decisions was a real pain. It was too much information.
Maggie N.
Maggie N.
UX Designer
PERSONA

With the data that we gathered we compiled a persona that exemplifies the motivations and frustrations of our users:

Lillian Tanaka

Lillian Tanaka is a 27-year-old Brand Manager in Los Angeles, CA.

She is an avid traveler who finds inspiration in others to explore the world. She often plans her trip around “off-the-beaten path” reviews online or “insider scoops” from locals, but once a trip starts she believes in letting the whole experience happen organically.

For Lillian, everything will be alright as long as she has her phone with her to document everything on the way.

  MOTIVATIONS

  • Be able to find authentic reviews or experiences that inspire her own travels

  • Freedom to share and post whenever the moment is right

  • See, share, and edit her schedule with other members of the trip in real-time

  FRUSTRATIONS

  • Planning with friends on multiple platforms and in different formats

  • Unable to see itinerary plans on mobile device when using spreadsheets

  • Unable to post with restricted wifi

  • Overwhelming amount of content to sort through when sharing photos or videos

USER JOURNEY MAP

Next we mapped out Lillian’s emotional response before, during, and after a trip with current technology to see the opportunites we can directly address.

Compare with
Competitors
Information
Architecture
Feature
Prioritization
Branding
Shift
C & C FEATURE ANALYSIS + HEURISTIC EVALUATION

Before attempting to re-invent the wheel we looked at our top user-generated content competitors to see what areas we could capitalize on and what best practices were already in place with a C&C Feature Analysis and Heuristic Evaluation. In terms of trusted travel sources, our main competitors were Trip Advisor and AirBnb, for sharing travel – Bonjournal, Facebook & Instagram.

C&C FEATURE ANALYSIS
HEURISTIC EVALUATION

We found there were no platforms that catered to all the points Lantern Trips wanted to cover, but that platforms that concentrated on one feature set were more successful and easier to use than those that were attempting multiple functions.

INFORMATION ARCHITECTURE

We used card sorting combined with competitor offerings and the app’s top level tasks to come up with our main menu and proceeded to create a site-map that would encompass future iterations of the app that allow exploration, which would unfortunately be unavailabe for the first-generation of users.

FEATURE PRIORITIZATION

In order to decide on which features to concentrate on for the MVP we created a feature prioritization matrix that allowed us to visualize which features would make the highest impact at the lowest cost to produce.

UPDATED BRANDING STATEMENTS

With our concentration on auto-generating itineraries, collaboration, and sharing, we updated Lantern Trip’s branding statements to match.

Step 2: Design
Design Studio
Sketching
Scenario
DESIGN STUDIO WITH CLIENT

We presented our research findings to the client so they would be on the same page and invited them to do a design studio with our UX team to quickly develop the framework for the app.

Problem to solve for:

How do we design for members of a trip to collaborate on an itinerary or sort content just using their phone?

INITIAL SKETCHING

Taking all the ideas from the design studio we began our first round of hand-sketches.

SCENARIO

We developed the following scenario for Lillian to cover the 3 main features we wanted our MVP to include: Collaborating on an itinerary during her trip, sorting through shareable content, and posting to Lantern Trips or social media.

Step 3: Prototyping
Ideal user flow
Paper Prototype
Medium Fidelity
DEFINING THE IDEAL USER FLOW

Using the scenario we mapped out the steps Lillian would need to take in order to efficiently complete her tasks.

PAPER PROTOTYPE

We began to wireframe each step into a paper prototype. Once we finished frames for each step in the user flow, we again invited our clients to review our work and confirm we were going in the right direction.

MEDIUM FIDELITY WIREFRAMES

Once we got our client’s approval we proceeded to digitize our sketches applying design principles to ensure visual weight and white space were being used effectively. I also created a set of icons for us to use in our bottom navigation.

Step 4: Testing
Protocol
User Testing
High Fidelity
Clickable
Prototype
USABILITY TESTING PROTOCOL

Once each step was created in medium fidelity we made a usability protocol in order to keep our documentation of our testing consistent and to define how we would conduct testing.

Testing protocol
USER TESTING RESULTS

We found that it was necessary to nest user options at a high level in order to prevent confusion and provide a clearer path for each screen’s task. Additionally we corrected other visually confusing icons.

  1. Users confused if icons were clickable. We removed icons on segment page level, and only kept on the parent page level.
  2. Buttons were being confused for tabs. We edited them to look more like individual buttons.
  3. Users were unsure where the link leads to, or if it was auto-generated. We gave the link a title.
  4. Users were unable to see who was going and who were admins. We took the overlay off so we could see the images and gave stars to admin.
HIGH FIDELITY WIREFRAMES

We added imagery and color to each medium fidelity wireframe then did another round of testing. This time around we had to correct any color affordance confusion, text sizing, and layout that caused poor readability.

CLICKABLE PROTOTYPE IN INVISION

Step 5: Iterate
Review Results
Present Files
Next Steps
REVIEW RESULTS

In the clickable prototype we found the users confusion peaked when trying to sort through the photo content. This step is particularly specific in the scenario we’ve created so unfortunately we were unable to remedy this issue completely. We were however able to adjust some visual conventions to make them more understandable. 

  1. The Albums page was becoming too icon heavy, and wasn’t providing any user benefit, so we changed to a text based convention.
  2. Users were not sure what the number on top of the photo meant, so we changed the visual to look like a stack of images.
CLIENT PRESENTATION

We updated our Sketch files and our prototype for our final client meeting. With our compiled research we created a presentation deck in Google Slides so we could tell a fluid story to our client. The last thing they had seen was the paper prototype so they were thrilled to see their idea come to life in high fidelity.

NEXT STEPS

While we had created the features our client had discussed we encouraged them to narrow down the app further going into their MVP production. We suggested that instead of hosting content it might be more feasible to utilize integration with a platform travelers already use, such as Google Photos.

GIGI GUITING

 

EMAIL
gguiting(at)gmail.com

 

Copyright © 2017 Gigi Guiting