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 millennials 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
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
Step 1: Research
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:
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:
Ian C.
Veronica M.
Amy L.
Maggie N.
PERSONA
With the data that we gathered we compiled a persona that exemplifies the motivations and frustrations of our users:
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
FRUSTRATIONS
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.
Competitors
Architecture
Prioritization
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.
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 unavailable 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.
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.
- Users confused if icons were clickable. We removed icons on segment page level, and only kept on the parent page level.
- Buttons were being confused for tabs. We edited them to look more like individual buttons.
- Users were unsure where the link leads to, or if it was auto-generated. We gave the link a title.
- 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.
- The Albums page was becoming too icon heavy, and wasn’t providing any user benefit, so we changed to a text based convention.
- 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.
