UX/UI CASE STUDY
Destination: Travel Activity Planning App
Employing user-centric design to create a mobile application that reflects the needs, values, and experiences of millennial and gen-z travelers.
This project was a culmination of a UX/UI immersive at Pratt Institute. The brief was as follows:
A leading travel brand is seeking to develop a mobile application to optimize the activity and itinerary planning process. The target audience is the “adventurer” demographic, which is defined as a single or newly married individuals (no children) with limited disposable income and who travel for more than a week at a time (occasionally in groups). The company is looking to identify the needs, experiences, and values of this demographic, meaningfully synthesize this information to identify overall user goals, ideate associated functionalities, create a structural foundation for the application, and ultimately create a high fidelity prototype.
Role and Scope
This was an individual project that spanned the UX/UI process, beginning with user interviews and concluding with the delivery of a high fidelity prototype. The project spanned from June through early August of 2020. This was an agile process in which I worked on multiple pieces of the project simultaneously.
Tools
Miro, Mural, Whimsical, SurveyMonkey, Otter.ai, Adobe Indesign, Figma
Note: Click to enlarge images. Full sized images are available upon request.
Research
User research was conducted via remote user interviews. Participants included 7 adults between the ages of 18-35 with no children and an income of <100k yearly (or <200k household income) who had traveled for leisure at least once in the past two years. All participants had prior experience utilizing digital platforms for planning travel in the past. Prior to participation, participants filled out a screener questionnaire to ensure they met the aforementioned criteria for inclusion.
Research sought to uncover the following:
The ways in which adventurers (defined as young adults with limited budgets, no children, and experience traveling for leisure both individually and in groups) typically learn about and plan activities for trips
Preferred methods for recording and sharing itineraries
How adventurers approach group planning
Digital platforms that members of target demographic utilize to plan itineraries
User-perceived perceived strengths and limitations of existing platforms
User ideas about how seamless itinerary-planning experience (or app) would look
Research also consisted of a comparative analysis, during which popular digital travel activity-planning platforms were examined. These platforms included TripAdvisor, AirBnB, and Expedia.com.
Research Analysis and Synthesis
Each interview recording was transcribed with the assistance of the otter.ai app; the most salient quotations and ideas were gleaned from each interview and were grouped with ideas and quotations from all other interviews. Using affinity mapping, common trends (including user motivations, attitudes, behaviors, values, and pain points) were identified and categorized. Further analysis and synthesis was carried out via the creation of empathy maps, user personas, and user journey maps.
Empathy Maps
Empathy maps were generated for each individual participant, then consolidated into one large map to represent the group as a whole. These processes allowed for a more in-depth breakdown of user statements, thoughts, actions and feelings. Empathy mapping facilitated identification of common threads during both individual interviews and amongst the group as a whole. Commonalities were represented using color-coding, which allowed for easy visualization of trends both amongst participants and as they related to the “says, thinks, does, feel” quadrants. The image below represents a single user, while the second represents all users.
Empathy map for individual user
Aggregate empathy map for all users
Color key
Isolated, enlarged section of aggregate empathy map
Personas
Through examination and analysis of individual and aggregate empathy maps, it was evident that there were some incongruences between users’ approach to planning activities, types of activity reviews they prefer (i.e., word-of-mouth versus anonymous user feedback), approach to group planning, and pain points. It became clear that a single persona would not adequately represent the all of the users that were interviewed. Two distinct personas would more appropriately represent the users, as the majority of insights from affinity and empathy mapping fit well into one of two broad categories.
Creating the personas represented a clear way to visualize and summarize the information gathered from previous steps, yet advanced the design process by offering relevant user goals and synthesizing information into a more tangible deliverable. An abstract conglomeration of ideas was suddenly more humanized.
Journey Map
The next step in the exploratory phase was to map users’ (now represented by the two personas) experiences throughout each step of the travel activity-planning process. This phase was imperative in identifying opportunities for improvement and innovation, which would be addressed in the generative phase of the design process. In order to remain true to the users, direct quotes and sentiments accompany the various phases of the planning process.
Both personas experienced frustration related to deciding which activities to partake in and in integrating all of their travel information and plans (flights, accommodations, and activities) into one organized itinerary. Conversely, the users’ experiences diverged when it came to initiating activity research, sourcing activity reviews, making reservations, coordinating travel between activities, and adjusting and re-arranging the itinerary as needed.
This information was useful in identifying areas of the activity-planning experience that could be improved; preliminary suggestions for specific improvements were devised in response to the areas that were lacking in user satisfaction. The universal pain points could be addressed via one solution, but the points of divergence needed to be addressed individually. The final deliverable would need to be flexible enough to accommodate the needs of both user groups while maintaining usability.
Isolated, Enlarged Segments of Empathy Map
Top: Summary of personas with associated goals; Bottom Left: Ideation segment of planning phase touching on various moments, positive and negative moments, platforms used, and opportunities for improvement; Bottom Right: Emotions throughout the first 3 phases of planning, with associated insights and direct quotes.
Click images to enlarge
Generating Solutions
Identifying Functionalities
The app’s functionalities were devised based on the pain points, opportunities, and user goals identified in the prior step. Because there were a total of 11 goals between the two personas, the decision was made to consolidate user goals into 7 which were felt to fairly represent both groups of users. This decision was made with the notion of the “paradox of choice” in mind. Too many features and functionalities could end up making the application difficult and confusing to use, which would go directly against the notion of optimizing the activity-planning process.
Organizing Functionalities and Creating a Sitemap
A close examination of the functionalities revealed an emphasis on collaboration with friends and other users. To address the significant the social interactive component, a social media feature was devised. Through this feature, users could could connect with friends, co-trip planners, and other users. For increased ease of use, users would be able to either search by name or import their phone contacts. Using the social media feature, app users would be able to view friends’ itineraries for trips to common destinations along with their ratings and reviews of various activities. In-app messaging would allow users to communicate with each other for additional recommendations and tips for planning their trips. The social network was designed with the users who prefer word-of-mouth feedback in mind. Users would also have the option to browse activities based on ratings and reviews from all app users. This option would address the needs of users who preferred anonymous user feedback.
Additional app features sought to directly address user needs and pain points identified in previous steps. Because many users lamented the lack of an “all-in-one” itinerary planner, the app would offer an itinerary that allowed users to add activities from the app directly onto the itinerary and input flights and hotel information. The itinerary would be flexible, allowing users to add, delete, or change plans with minimal clicks. This, in particular, would likely make itinerary-planning more approachable to the users who preferred a more open-ended, spontaneous travel experience. Finally, an in-app navigation feature would integrate closely with the itinerary and help users plan their days in a way that made logistical sense; there would be no need to open a secondary navigation app.
After consideration of all of the above, it was decided that the 5 main screens should be Activities, User Profile, Itinerary, Navigation, and User Profile. All other functionalities fit fairly neatly into these 5 categories.
Wireframes
Now that the information architecture had been addressed, the focus shifted towards visual organizing of content in an intuitive, easy-to-navigate manner.
During the wireframing process, it became clear that some aspects of the sitemap needed to be altered. For example, the option to add/remove activities from itineraries as well as the option to review itineraries should was moved to a secondary screen. This screen would include a description of the individual activity. Had these functionalities been added to the main Activities screen (as outlined in the sitemap), the interface would appear cluttered and users would likely be overwhelmed by options. This could result in users becoming both visually and cognitively overwhelmed, which would (in accordance with Hick’s Law) make the app less usable.
Another significant change that arose during the wireframing phase was the removal the user profile from the primary navigation (which in this case, took the form of a bottom navigation bar). In the sitemap, the landing page (which would highlight upcoming trips and recent social networking information) was not included. It seemed important to add this, as this summary would be a nice way to welcome the user back to the application after login and facilitate re-immersion in the tasks they were completing prior to their last log-in. Because of the utility of that screen, it would be useful for users to have it handy. As such, it made sense to include it in the navigation bar. However, this would mean that the bottom navigation bar would include 6 icons, which would be difficult to distinguish visually and difficulty to tap with precision given the close proximity between icons. The User Profile function was removed from the bottom navigation bar and the Main screen was added in it’s place. A secondary means of navigation (such as a hamburger menu) was considered, but ultimately rejected due to lack of a meaningful way to split up and prioritize the existing functionalities. Instead the User Profile would now be accessible by tapping the profile picture on the Main screen. This functionality was suggested by integrating a cog icon into the profile picture design.
The structure and design of the Activity screen was explored more concretely in the wireframing process. The first dropdown menu allows users to search by activity category (food, drinks, attractions, entertainment, tours, adventures), while the second allows users to filter listings (by price, proximity to location, highest rated by all app users, highest rated by friends, and reviewed by friends).
The interactivity within the app is based on common patterns found in other widely-used applications, such as the iOS apps. For example, swiping left on a card gives the user the option to delete the activity/itinerary/etc. The dropdown menus expand when the bottom arrows are tapped, a nearly universal concept in the digital age. On the navigation screen, tapping the arrows in between the text boxes reverses the starting point and destination. Drawing upon these patterns that many smartphone users have already committed to memory would make the application simple and intuitive to navigate with a minimal learning curve.
Isolated and enlarged segments of annotated wireframes
(click to further enlarge)
Visual Design: The Prototype
Visual Style
Because many users indicated feeling stressed or overwhelmed during at least one part of the travel activity-planning experience, the visual design sought to evoke a sense of calmness while maintaining a playful and inviting spirit. This translated into a cool color palate, which set a relaxed tone for the travel-planning process. Playful 2D illustrations were placed throughout the app in order to frame the activity-planning experience as something fun and lighthearted rather than stressful. Microinteractions, such as color-changing buttons and loading screens were included to make the app more engaging and enjoyable.
The graphic interface was designed to make it as easy as possible for users to navigate throughout the app and find the information or features that they needed. This meant making some small changes to the wireframes as the visual design took shape. For example, the Activities screen was split into two separate tabs; one in which the user could search for an activity by name, and another where the user could browse activities by selecting categories and filters. Including all of this in one screen, as initially planned, was deemed too cluttered. This became much more apparent during the visual design process (as opposed to the earlier wireframing process).
Login
The login screen features vivid, cool tones and a playful animated illustration to frame itinerary planning as an enjoyable, stress-free experience.
Activities
Users can search by activity category and choose to view activities by overall user rating, ratings and reviews from friends, or proximity to another location.
Throughout the app, the call to action buttons are solid with white text, as exemplified on this screen.
Navigation
The in-app navigation screen utilizes a layout similar to what smartphone users would expect, based on their knowledge of well-known navigation apps. Actionable items are in color to make them easier to quickly identify.
Home
The home screen provides quick links to upcoming trips, bypassing the need for additional clicks. The use of colors differentiate different functionalities and makes the screen more scannable.
Itinerary
The use of color and typography easily distinguish activities from each other. This screen makes use of iconography (such as the “add” icon and the share arrow on the top right) to eliminate superfluous text.
Social Media
The social media component of the app allows users to share experiences with their friends. The main social media screen distinguishes functionality by color. New message alerts are displayed in blue, and new social media activity is indicated (on other screens) by a magenta dot above the social icon.
Screen Recordings
Usability Testing
Synchronous usability testing was conducted amongst classmates via Zoom. Users were able to navigate the app quickly and efficiently and perform core tasks successfully with no misclicks.
Outcome and Conclusions
This project was an excellent opportunity for an in-depth exploration and execution of the UX/UI process. It truly illustrates the ways in which each step of the process informs the next. In the future, I would like to explore ways in which the Destination app could sync with popular booking platforms to auto-populate travel and accommodation information, obviating the need for manual user input. Furthermore, I would like to integrate the ability to browse and review accommodations in-app, drawing upon both aggregate user reviews as well as reviews from within the user’s social network.