Wander Travel is a travel planning platform designed to simplify and personalize the travel planning process. It allows users to create customized itineraries by adding attractions, restaurants, and hotels with unique features such as multiple sharing options for collaborative planning, detailed information on places, including operating hours and websites, and real-time distance visualization between planned activities.
Role: Product Designer
Team: 4 Product Designers, 1 Project Manager, 3 Engineers
Duration: Current
Background
Wander Travel was conceived to address the complexities and frustrations commonly associated with travel planning. Inspired by the modern traveler's desire for personalized experiences and the challenges posed by the overwhelming number of choices, the platform serves as a simplified, user-centric solution for crafting custom itineraries.
Problem
Existing collaborative planning features need more personalization and ease of use, leading to confusion among users when sharing plans with friends.
Key Features
Visual Collaborator Overview
Pain Point: Users had to actively click on the 'Share' button. This process makes it difficult to quickly grasp the context of collaboration.
Improvement: With avatars for each participant, it offers a seamless and immediate understanding of all collaborators, enhancing the overall user experience.
Multiple Sharing Options
Pain Point: Sharing itineraries could have been more varied and convenient, reducing collaboration effectiveness.
Improvement: Itinerary sharing through email or unique links fosters more collaborative and efficient planning.
Clearer Navigation for Restricted Access
Pain Point: Users accessing private links were redirected to the homepage, causing confusion without clear direction.
Improvement: A 404 page for restricted links now informs users of invalid access, enhancing clarity and navigation.
Design Process
Research
Comparative Analysis for Collaborators Avatars and Trip Sharing
I conducted a comparative analysis with well-known document-sharing websites. This helps understand user preferences and design familiar and intuitive interfaces. These products often lead to adopting design trends and best practices, which is crucial for staying updated and integrating these trends into our designs. Below is a summary of our findings on these two features.
The research showed that avatars indicating active user status and a stacked style are most commonly used. Interaction is typically enabled upon hovering over each avatar. Displaying a number after 5 people appears to be the norm, with avatars usually shown as profile images or names. These insights guided our subsequent design decisions and discussions with the development team and founder.
Regarding Trip Sharing, we found that only Google allows users to invite non-registered emails. Accessing a private link typically prompts users to sign in. The 'Copy Link' feature is always available, regardless of whether the sharing option is public or private. If a user is an editor, they can change the sharing settings. Regarding making changes, only Google Docs prompts users to save, while others auto-save.
Ideation
Design Iteration and Exploration
Building on the insights gained from our comparative analysis, the ideation phase involved creating various design versions influenced by these findings. This process was pivotal in exploring design possibilities aligning with user expectations and industry standards.
- Avatars Design Iterations: I proposed with multiple avatar layouts and interaction styles. This included testing stacked avatars, hover interactions, and different ways of displaying user information, aiming to find the most intuitive and visually appealing approach.
- Trip Sharing Feature: Inspired by the functionality observed in leading platforms, I developed several trip-sharing feature versions based on user type. Each focused on improving the sharing process while ensuring robust privacy and access control options.
- 404 Page Design: I proposed a new 404 page for clearer navigation where users encounter restricted private links. This aims to inform users about restricted access and guide them back to relevant sections of the site.
Design Evolution
This phase involved making crucial decisions to balance innovative ideas with the priorities of development feasibility and user experience.
- Avatars: The initial concept of displaying online/offline status and collaborator locations was ambitious but required significant development effort. We pivoted to a more feasible 'count people' feature, enhancing user experience while considering the display of two and three digit numbers.
- Sharing Feature: Shipped the error message enhancement in the production stage, improving user experience by preventing repeated invalid entries. The development of a pop-up form for sharing permissions is still under discussion, leading us to prioritize the 404-page development to address user confusion in accessing private links.
- 404 Page: After several discussions, we opted for a simpler design that aligns with the business brand identity, focusing on clear guidance for users encountering restricted access.
Design System
Avatar Variants
Utilizing various avatar statuses and types within our design system allowed swift and uniform changes. This approach made it easy to adjust avatar names and statuses simultaneously, ensuring consistency and saving time among the team.
Share Feature Components
Component variants in designing the Share feature facilitated effortless switching between public and private access. It also simplified text property adjustments.
Button Management with Components, Variants, and Properties
Employing properties in our design system reduced the number of button variants from 24 to 8. This made our button library more accessible and increased design efficiency.
