The product
Puffin Maps believes there is a better way to plan trips with friends. Their vision is to build an all in one travel planner that is fun, collaborative, and effortless to use.
The challenge
Although Puffin Maps allows friends to see each other’s cursors on the live map, there was not a way to communicate in real time without an external messenger.
Role
Designer, Researcher
Duration
8 weeks
Category
Trip organizers, Travel planning
Why I made this project
Being a travel enthusiast I naturally scoured the internet for “the best travel planners.” After trying a few options, Puffin Maps became my go-to for planning trips with friends, but there was something lacking.
We could see each other’s cursors on the map but couldn’t communicate in real-time. There was an opportunity for better collaboration by integrating a chat function that would help solve our problems.
User Research
What people are using to plan trips
As travel planning applications are a newer market, most people that I interviewed used Google docs, Google sheets, Excel, or some sort of note-taking app. Others simply relied on communicating through messaging apps such as Messenger, WhatsApp, or iMessage.
People were not completely happy with their current trip-planning process but were unaware of their options. The majority mentioned being open to using trip-planning apps but had the preconception that they were paid services.
Pain points with using group chats to plan trips
Group chats are essential in communicating trip details but can easily become disorganized, with important information getting lost among the sea of messages.
Most people use a combination of a shared document along with a group chat to keep everyone on the same page, but what if we could combine the two?
There are many travel planning websites and applications available that focus on various aspects of trip planning but for the purposes of this project, I have decided to focus on analyzing competitors that are primarily web-based (but mobile-friendly) and feature a live map comparable to Puffin Maps.
Competitive Analysis
Direct competitors
The good
• various sharing options
• able to share + publish itineraries
• prominent notes
• real-time collaboration
The bad
• live updates but no notifications
• unaware of active users
• limited collaboration
• various sharing options
• shows active trip members
• live edits
• customizable plan visibility
• no notification of changes
• unaware of active users
• no chat, limited collaboration
The good
The bad
The good
• built-in live group chat
• additional collaboration features
• notes feature
• ability to share itineraries
The bad
• can only close chat entirely, no minimizing
• floating help button blocks send button
Indirect competitors
X
The good
• plug-in that works with all Google products
• itinerary template + live map
• convenient due to familiarity of
Google products
The bad
• not live collaboration, need to refresh each time to update new information added
• crowded interface, small map and covered by chat
The good
• real-time group chat
• various collaboration features: live cursor, comments, suggested edits
• clear active and inactive statuses of who is on the document
The bad
• limited chat function, no files or attachments
• cannot save chat history
• need to be at least 2 people online at the same time to use
Summary of findings
The rise of live-map, real-time collaboration has been a recent concept for travel planners. The majority of travel planners available on the market focus on the individual and at most allow shared itineraries but lack collaboration in the trip planning process.
I interviewed 5 people with varying experiences with planning trips to gain insight into what applications they typically use when travel planning and identified their motivations and frustrations with group chats.
After analyzing the findings from the interviews and gathering other input from outside sources (e.g. Reddit and blogs), I created a primary persona.
Persona
I used the ideas gathered from competitive analysis and talking to users about what they usually do and would like to see to lay out a plan for prioritizing features included in the chat based on impact and effort to better understand what to tackle and in what order.
Feature Roadmap
Problem statement
How might we make collaboration easier and more organized for travelers trip planning in a group?
Legend
must have
nice to have
Since I was specifically designing for an existing application, I had to see how this feature would be incorporated into the existing flow of how people navigate the site.
I wanted to better understand the steps the user would take if using the feature and to make it fit in as seamless as possible, which removes obstacles and unnecessary steps to use the new feature
User flow
I had gathered insights from talking to people and exploring the marketspace of trip planners so I had some ideas that I wanted to sketch out to figure out the placement of the new chat feature.
Sketches
Using the existing branding, I created an unofficial Puffin Maps design system that I could follow to maintain consistency in my designs.
With a better idea of what features to include and how the new chat feature would interact with the rest of the existing features, I started wireframing to build out ideas with more detail.
A crucial aspect I had to keep in mind while wireframing was that I had to follow the existing UI and design patterns to blend it in as part of the application.
Wireframes
Variations of the chat in low-fidelity wireframes
I aimed to explore many different variations of the group chat to better understand what was the best way to display its key features.
Two high-fidelity designs
I ended up with two final designs and decided to A/B test them to maximize the different features I could put in front of users.
Option A
• three navigation tabs
• notes section
• prominent search
Option B
• simpler interface
• no notes
• search and media/links/files nested in the menu
Prototype
I created two clickable prototypes with my high-fidelity designs for users to test out the chat feature.
I ran usability tests with 6 users to understand their behaviors toward prototype A of the chat feature versus prototype B.
I wanted to better understand the motivation behind user preferences and identify which functions of the chat are most useful or confusing to them.
A/B testing also allowed me to clarify how users would navigate and use a chat feature within a trip planner.
Main tasks
Open and minimize the chat
A
B
A and B
*this task was performed the same for A and B
Reply and unpin messages*
Find a specific article
A
B
In general, users preferred the experience with A over B. However, a few noted that they appreciated B’s simplicity.
Overall, users had no issues with replying to messages but there were some confusion around how to unpin messages.
The notes feature received positive feedback from users whereas the media/links/files feature was deemed not as important as the original design intended it to be.
Findings
A/B testing
After synthesizing the findings from A/B testing and identifying patterns, I made some informed changes in the design.
Revisions
Kept the chat button in the lower right corner, but relabeled it to “Group chat”
Why?
Users liked the chat button in the lower right corner because it was a larger button and more eye-catching.
However, some users brought up the concern of confusing the chat button for a “chat support” with a bot or agent.
Being able to unpin messages by clicking on the actual pin
Why?
More than half of users wanted to click on the pin icon to unpin a message.
Having the pop-up option to unpin a message was also often missed while quickly hovering over messages.
Move media/links/files into the menu, keeping only two main tabs
Why?
Half of users mentioned not referencing the media/links/files enough for it to take precious chat space as one of the main tabs.
They enjoyed B’s simplicity with having the media/links/files nested in the menu, which also simplifies the tabs into chat and notes only.
More extensive notes tab with group notes, personal notes, and export
Why?
Several users were confused if the notes tab was a collaborative group note or an individual personal note. After clarifying that it was intended to be a group note, users mentioned also wanting a personal note.
An export feature was added into the notes tab as a desirable feature from user research.
High-fidelity UI
Chat screens
I would like to see a simulated version of how users would use Puffin Maps to plan out a trip and utilize the chat to collaborate and communicate with their friends in real time. This would help validate the usefulness of the features included in the chat.
Next Steps
Validate revisions with continued usability tests
Key learnings and takeaways
It was challenging but rewarding to work with the constraints of an established design system and to be able to use my creativity to build upon it by designing additional elements such as icons, buttons, and form fields.
Talking to people about how they use products continues to surprise me. No matter how much I prepare for potential follow-ups, our conversations always reveal something new.
Lastly, I’m making a note to my future self to be more strategic in sourcing for my target audience/ideal persona and being able to talk to more of them in order to better inform my design decisions later down the line.
View other selected works
Gains
Personal online fitness training
Oral Health Center
Seamless appointment making
Midori
An easy way to shop by style