Sondr Travel App

Sondr is an app for travel lovers to help users organize trips they have taken, places they want to go, trips they are presently planning, and share their plans with others.

The purpose of this project is to build an app that will relieve the stress that travelers face when trying to organize plans over so many different apps and programs presently.

Role

Sole UX/UI Designer

Timeline

April 2021

Highlights

UX, Testing, UI, Branding

a small green arrow pointing down

Introduction

What is Sondr?

The purpose of this project is to build an app that will relieve the stress that travelers face when trying to organize plans over so many different apps and programs presently.

Goal #1

Mobile app design

Concept documentation, branding and UI kit, pixel perfect high-fidelity designs.

Goal #2

Travel organization

Engaging features that alleviate the stress and uncertainty often associated with trip preparation.

Goal #3

Email integration

Incorporate email for effortless streamlined travel planning and organization.

Challenge & Solution

Challenge: How can we streamline travel planning to reduce stress for our users?

Streamlining travel planning for our users is a priority. We aim to simplify the process, providing intuitive features, clear information, and personalized recommendations.

This approach empowers our users to make informed decisions, ultimately enhancing their overall travel experience.

"I really love making my travel plans but I do get anxiety about forgetting things or getting a time wrong so I’d like to get more organized"
- Anonymous survey response

solution #1

Itinerary planning

Discover travel destinations and itineraries to include in your schedule, or create your custom travel plans from the ground up.

solution #2

Visual mapping

Envision road trip pitstops, urban strolls, and your travel past, present, and future through personalized map views.

solution #3

Email importing

Connect email accounts or forward email messages from airlines, hotels, etc. for effortless and efficient itinerary building.

Research

User interviews

I chose to interview a handful of travelers to determine any pain points in their travel organizing process, as it is now. I determined that the primary market would be more frequent travelers, with experience using apps over paper organizers.

User surveys

Following my interviews, I designed a survey to delve deeper into the apps frequently used by travelers (both travel-related and not). This approach allowed me to incorporate familiar design patterns and affordances, thereby enhancing user recognition and usability.

Commonly Used Apps:

• Facebook
• iCal
• iMessage
‍• Gmail

Key takeaways from surveys and interviews

• All 11 survey and interview participants noted that they prefer to be “fully planned ahead of time” versus partially planned or no plan at all.

• 87.5% of survey and interview participants send travel plans to friends or family via email.

• More than half of survey and interview participants keep up with their travel plans in their email… though less than half are happy with how they organize travel plans presently.

Competitive analysis

I devoted considerable time to this analysis as I aimed to gain a comprehensive understanding of the features offered by competitor apps. Given the nature of this app's concept, I recognized the importance of incorporating existing app patterns that users are accustomed to and would likely prefer to utilize.

Competitor weaknesses

• No guest app access
• Cluttered UI
• Mediocre learnability and accessibility
• Too many platforms to use at once

Competitor strengths

• Integrated emails for seamless planning
• Search for nearby places or activities, like Yelp
• Adding multiple stops on routes
• Allowing ratings and reviews on locations
• Adding photos/locations with the camera
• Intuitive autofill on search results

Topic research

I conducted extensive research within the travel industry, focusing on itinerary booking services, apps, and programs. My primary goal was to uncover user behaviors and characteristics that could enrich and inform the project concept.

On average, travelers use 10-12 apps throughout the searching, booking and traveling parts of their trip. -Hotelmanagement.net Survey

67% of travelers identify being able to see an entire trip itinerary in one place as a top-3 most important feature. -Hotelmanagement.net Survey

Concept and Wireframes

Persona

From the specific insights gathered during the initial user research, I created the user persona "Allison."

The findings from interviews and surveys indicate that, for the Sondr app's MVP, a single user persona suffices. However, as the brand expands and matures, the possibility of incorporating additional personas may arise.

Feature forecasting

The competitive analysis sparked numerous ideas regarding potential product features.

Initially, I encountered challenges while attempting to narrow down the scope to define the MVP. In response, I revisited Allison's persona and reevaluated the results of the competitive analysis.

This process enabled me to prioritize the Sondr features effectively, aligning them with user needs and competitive insights.

Task flows

Taking into consideration Allison's requirement for a seamless and frictionless way to organize and access itineraries, I developed three essential task flows for the app. The objective was to streamline the user's interactions and minimize the number of screens and touches required.

Concept sketches

Using one of the task flows and the patterns found in the competitive analysis, I sketched out versions of the main screens and navigation styles. I found that I would only need a few icons for navigation and most of the screens could follow similar templates.

Wireframes

After sketching the low-fidelity wireframes, I brought the designs into Figma in mid-fidelity to map out the most common layouts and identify any immediate issues.

Wireframe testing

I tested users on the wireframe with one task to complete: Create a new trip.
Objectives:
• Test overall usability of the main pages, specifically through the itinerary building process.
• Determine if users understand the icons, writing, and flow.

Findings and next steps

I pinpointed concerns related to the positioning of the "add a new trip" icon, as well as issues with card headers and text hierarchy. Additionally, user feedback highlighted the desire for features such as the ability to rearrange plan details on the itinerary, customize itinerary titles, and perform "nearby" searches for plan details.

To address these identified areas of improvement, I revisited the initial competitor research and began the high-fidelity design phase.

Branding and UI

Branding

For the Sondr brand, I drew inspiration from the elegance of straightforward, universally recognizable Earth maps. I wanted to evoke a sense of global connectivity and simplicity within the brand's visual representation.

I sketched preliminary logo concepts during this process and eventually honed in on a stylized wordmark logo. This wordmark logo design not only effectively conveys the brand's identity but also serves as a distinctive highlight.

User interface kit

In parallel, I created a comprehensive UI kit that encompassed typography, iconography, and a full range of UI elements and components. These design elements were thoughtfully chosen to match the modern yet classic theme of the new Sondr brand.

This cohesive blend of visual elements offers users a visually pleasing experience while reflecting the essence of the Sondr brand.

Testing & High-Fidelity Design

Usability testing

Leveraging the amended wireframes and UI Kit, I designed the first iteration of the complete Sondr UI prototype with the intention of usability testing.

The primary goals were to identify and address any potential pain points, assess usability and learnability, and ascertain whether users found this approach more delightful than their current methods of organizing plans. This comprehensive testing approach aimed to refine and optimize the user experience based on real feedback.

usability testing #1

In-person tests

• I used this method for qualitative input to see exactly where users were clicking and have the ability to ask them questions behind their thought process and what they were expecting.

• There were issues identified with the “add a flight” button location, as well as the “import emails” feature location.

usability testing #2

Unmoderated tests

• I tested users on the Maze platform because it offers the ability to mark an “expected path” that you hypothesize that users will follow. This method gives me quantitative data of whether or not users will understand the intended task flow.

• Most of the tasks had a good direct and indirect success rate, but there were issues with the “add a flight” task again. The users had a high mis-click rate of 28% on the first three screens alone and one ended up ending the task early.

A/B Testing

Slider alignment

Two different alignments were arranged to see if users understood that they could slide the cards to change the placement and time on the itinerary.

The users preferred the slider handles on the right side, because of comfortable thumb zones.

A/B/C Testing

"Add a flight" task flow

The biggest issue uncovered during the initial testing was with the "add a flight" task. Users were confused by the button style and placement.I analyzed the original competitive analysis and decided on three common patterns to test on users.

It was determined that users more intuitively found the FAB versus the original fixed button, so I replaced the button and tested the prototype again.

A/B/C Testing

"Your Trips" navigation

After uncovering some confusion in the usability test, users were tested on three different navigation styles for the “Your Trips” section.

Most of the users decided the grey/white tabs were the most intuitive pattern style.

Amended prototype testing

After amending the prototype to option C’s FAB, I retested users on the same task: Find your trip to Nashville, and add a flight to your itinerary.

re-testing results

Amendments = success!

In the earlier round of testing, I found that only 44% of users were successful in completing the task, and there was an 11.1% bounce rate.

In this round of testing using the most updated prototype, 85% of users were directly or indirectly successful and there was a 0% bounce rate.

Final designs

The UI designer and I collaborated closely to design this experience, making sure that every transition was cohesive, flawlessly smooth and that the content would be captivating for girl scouts.

Conclusion

Final prototype

Following the completion of the final testing phase, I made necessary adjustments to the Figma clickable prototype.

You can explore the updated version by navigating through the pages to observe the changes in real-time action. To expand the prototype to full screen, click the expand button in the top right corner.

Outcomes and next steps

Every iteration in this process was guided by user feedback and decisions, resulting in the most user-friendly version of Sondr thus far. While it's essential to note that this project originated as a student endeavor, though I wanted to point out next steps to take if it were to ever reach development stages.

Based on the tests and research, these are the most important next steps:

• Continue to consider ways to integrate imported emails more seamlessly.
• Consider more sharing and social features, such as public user profiles and ability to share itineraries between users.
• Suggested itineraries and tour plans.
• Ability to connect within the app to travel-based apps (airlines, hotels, etc) for immediate imports.
• Redline and annotate the design file for development handoff.

top