Overview
Lancong is a specially designed travel app UI kit that helps designers create seamless and engaging travel-related applications. The UI kit focuses on providing modern, user-friendly components for booking trips, exploring destinations, managing itineraries, and discovering local experiences. Lancong aims to simplify the process of building travel apps by offering pre-made UI elements that can be customized to suit the needs of different users and travel platforms.
Goals
The primary goals of the Lancong UI Kit are:
- Simplify app development: Provide ready-to-use UI elements for developers and designers to quickly build travel apps.
- Create intuitive interfaces: Offer easy-to-use, engaging designs for travelers to book trips, explore destinations, and manage itineraries.
- Maintain consistency: Ensure a cohesive look and feel across various screens and app elements.
- Adapt to different platforms: Design responsive components that work seamlessly across mobile and tablet devices, providing a great user experience.
The User & Audience
The main users of Lancong UI Kits are:
- UI/UX designers: Professionals designing travel apps who need pre-built components to accelerate their design process.
- App developers: Developers looking for polished UI kits that can be easily implemented in travel apps.
- Travel agencies and startups: Businesses that want to create customized travel apps with minimal design overhead.
- Travel enthusiasts: End users who interact with apps built using Lancong, benefiting from a well-designed user experience.
Role & Responsibility
As the Product Designer for Lancong UI Kits, my key responsibilities included:
- Research: Identifying key features and design trends in the travel industry to create relevant and modern UI components.
- UI Kit design: Designing a complete set of UI components such as booking interfaces, destination cards, search bars, and user profile screens.
- Prototyping: Creating interactive prototypes to demonstrate how the components fit together in a complete app experience.
- User testing: Conducting usability tests to ensure that the UI components are intuitive and easy to use across different types of travel apps.
- Collaboration: Working with developers to ensure that the components are easy to integrate into various platforms and that they perform well across devices.
Tools Design
- Figma: Used for designing UI components, wireframes, and high-fidelity prototypes.
- Sketch: For early-stage wireframing and component layout.
- InVision: For prototyping and collaborative reviews.
- Adobe XD: To create interactive flows and test component interactions.
- Zeplin: For design handoff to developers with detailed specs.
Scope
The scope of the Lancong project included:
- UI kit development: Creating a complete set of UI components specifically tailored to travel apps.
- Customizable components: Ensuring that every element (buttons, forms, cards, etc.) is flexible, allowing designers and developers to modify them to suit different branding and functionality needs.
- Cross-platform compatibility: Designing components that are responsive and perform well on both mobile and tablet devices.
- Feature-rich design elements: Including key travel-specific features such as booking systems, itinerary planners, and destination discovery cards.
Process
User Research:
- Conducted research into existing travel apps (like Airbnb, Expedia, and Google Travel) to identify common patterns, user expectations, and areas for improvement.
- Collected feedback from designers and developers to understand what UI components they frequently need and where existing UI kits fall short.
Sketching:
- Sketched out key components such as booking forms, destination cards, exploration tabs, and profile management screens.
- Focused on designing elements that were easy to use, visually appealing, and aligned with user behaviors in the travel space.
Wireframing:
- Created wireframes to map out how different components would fit together in a cohesive app interface. This included mapping user journeys like booking a trip, exploring destinations, and managing travel itineraries.
- Defined the layout and structure for critical screens such as Home, Explore, Booking, and User Profile.
Prototyping:
- Built an interactive prototype in Figma to show how the UI components worked together, simulating interactions such as searching for destinations, booking trips, and adding activities to itineraries.
- Focused on creating smooth transitions between pages, intuitive navigation, and fast-loading components.
UI Design:
- Designed the final UI components with a focus on flexibility and visual appeal. The kit included:
- Buttons: Different styles for primary, secondary, and icon buttons.
- Cards: Destination and activity cards with images, descriptions, and quick actions.
- Search and filters: A search bar and filters for users to find destinations, activities, or trips.
- Forms: Booking forms with fields for date selection, number of guests, accommodation preferences, and payment details.
- Designed the final UI components with a focus on flexibility and visual appeal. The kit included:
User Testing:
- Tested the prototype with travel app designers to ensure that the components were intuitive and easy to customize.
- Iterated on the design based on feedback, improving areas like button visibility, spacing between elements, and mobile responsiveness.
Inspiration
Inspiration for Lancong came from travel apps like Airbnb, Skyscanner, and Booking.com, which excel at delivering smooth user experiences and rich visuals. I also drew inspiration from Google Material Design to ensure the UI kit maintained a modern and minimalistic feel while remaining functional across different platforms. The goal was to strike a balance between form and function, ensuring that users have an enjoyable experience while quickly finding the information or booking options they need.
Sketching
During the sketching phase, the focus was on:
- Modular design: Creating UI components that could easily be reused and adapted across different screens, such as buttons, cards, and forms.
- Visual hierarchy: Ensuring that important actions, such as Book Now or Explore Destinations, were clearly visible and easy to interact with.
- Interactive elements: Designing clear visual indicators for active states (e.g., filters, selected options) to help users easily navigate and engage with the interface.
Wireframe
The wireframes provided a structural overview of key screens:
- Home Screen: Featured destination cards, a search bar, and buttons to access bookings and saved itineraries.
- Explore Screen: Showcased recommendations for destinations and activities with filters for price, location, and type of experience.
- Booking Flow: Included a streamlined, multi-step process with clear progress indicators for selecting travel dates, accommodations, and payment methods.
- Profile Screen: Allowed users to manage personal information, view past bookings, and save favorite trips or destinations.
Struggle
Key challenges faced during the design process:
- Balancing flexibility with ease of use: Ensuring that the UI kit components were customizable enough for designers but still simple to implement without excessive modification.
- Maintaining consistency across platforms: Designing components that looked good and worked well on both mobile phones and tablets, ensuring responsiveness.
- Optimizing for travel-specific needs: Integrating key travel features, such as search filters and itinerary management, while keeping the UI kit adaptable for different types of travel apps.
Defining Design Elements
- Typography: A modern, sans-serif font was selected to ensure readability across devices, with clear hierarchy for headings, subheadings, and body text.
- Color Palette: A combination of cool blues and warm oranges was used to create a sense of trust and adventure. These colors were paired with neutral backgrounds to allow destination images to stand out.
- Buttons: Large, touch-friendly buttons were designed for primary actions (e.g., Book Now, Search), with hover states and active feedback for better user engagement.
- Cards and Lists: Destination and activity cards were designed to be visually appealing, with large images, ratings, prices, and short descriptions to encourage users to click through for more details.
Mockup
The final mockup included:
- Home Screen: Featured an interactive search bar at the top, with destination cards below, showing images, ratings, and short descriptions. A CTA button like “Explore More” encouraged users to dive deeper.
- Explore Screen: Included filters at the top and a grid layout of destination recommendations and activity suggestions.
- Booking Flow: A step-by-step process with a progress indicator, showing fields for selecting dates, travel preferences, and payment options.
- Profile Screen: A clean layout where users could manage their personal information, view past bookings, and save favorite destinations for future trips.
Design Decisions
- Modular Components: Components were designed to be easily interchangeable and adaptable for different travel apps, ensuring versatility and reusability.
- Focus on Visuals: Travel apps rely heavily on imagery to sell experiences, so destination cards were designed to prioritize images while still providing key details like pricing and ratings.
- User-friendly Navigation: The UI kit prioritized clear navigation with large buttons and easily accessible menus, allowing users to move between screens with minimal effort.
Result
The final Lancong Travel UI Kit provided:
- Time-saving for designers: The modular components allowed designers to quickly build and customize travel apps without starting from scratch.
- Enhanced user experience: The intuitive design elements, combined with responsive layouts,
Are you ready to dive deeper and discover more of our exciting projects filled with creativity?