ExploreMore
Transforming travel booking with gamification
Introduction
ExploreMore, a travel company specializing in off-the-beaten-path adventures, needed a landing page to inspire users and drive bookings. I designed an engaging, retro-style UI/UX with interactive, gamified elements to highlight unique destinations, address safety concerns, and provide a seamless booking experience. The distinctive design combined nostalgia with modern usability, creating a platform that inspires trust and adventure.
My role: UI/UX/Interaction designer, UX writer
The challenge
I received a brief and wireframe to design a landing page, but the initial concept was too generic and didn’t capture user attention. After market research, I introduced a unique retro game style with interactive, gamified elements to create a fresh, engaging experience.
Insights
Market Research
The claim
There is a growing desire for unique and authentic travel experiences. The rise of social media influences adventure travel trends.
The problem
Social media platforms condition users to expect quick, engaging stimuli. Travel agencies lack social proof and engaging ways to keep attention.
Competitive analysis
The good
The sites offer user-friendly interfaces and easy navigation with consistent design language.
The bad
Lack of social proof and visuals to engage users without a specific travel plan. Users feel overwhelmed due to information overload and cluttered design.
Persona and new ideas
I developed a persona to guide user-focused, impactful design decisions:
- Interactive controller: a standout, interactive element designed to immediately capture attention and establish trust through social proof.
- Adventure meter: a gamified visual tool that provides clarity about tour intensity, and offers additional insights through tooltips.
- Simplified packages: clear, customizable booking options that streamline decision-making and reduce friction in the user journey.
- Detailed tour guides: showcased the guides’ backgrounds, expertise, and experiences to reassure users and build confidence.
User flow
To improve Sean’s booking journey, I created a flow diagram outlining the main user tasks. I devised strategies to reassure users about their safety and comfort. This included adding sections about tour guides and packages tailored for different user groups.
Design
Wireframe
7 new sections and elements
After researching how nostalgia and retro-tech boost stability for Gen Z, I designed a wireframe. It captures attention quickly and keeps users engaged with gamified elements. The interactive controller links to social proof, fostering nostalgia and trust.
The research articles are from Forbes, the University of Pittsburgh, Yahoo News, and Harper’s Bazaar.
Logo, colors and typography
I gathered inspiration from retro video games, focusing on their bold contrasts and vibrant colors. I selected a palette that fits this aesthetic while highlighting the CTA and maintaining readability. I chose the pixel-style Joystix font for the headings, paired with the clean sans-serif Lato for legibility. Both fonts support Latin-extended characters. I also designed a logo to create a consistent visual look for the brand.
Gamified animations
To make the booking process more fun and engaging, I designed interactive, gamified elements. I took inspiration from retro games to create a nostalgic feel in the animations. To keep the design organized, I used Figma components for all the animations.
Testing
Prototype and accessibility
I created a high-fidelity design with strict adherence to WCAG contrast guidelines, ensuring accessibility for all users. To enhance the visual appeal, I curated stock photos for the packages and tours. I also refined the UX writing to improve clarity and engagement. The process concluded with a fully interactive prototype, showcasing a polished and user-centric experience.
User testing and iteration
I carried out a detailed online testing process:
- CTA placement refinement: A/B testing revealed that placing a “Start” CTA at the top significantly increased user engagement with the controller.
- Interactive controller feedback: 75% of users found the interactive controller engaging, but 65% found its usage unclear, leading me to add clear, intuitive instructions for easier navigation.
- Pre-selected package optimization: 87% of users expressed interest in adventure travel with their partner, so I pre-selected the “ExploreMore Duo” package to align with their preferences.
Behind the scenes
The controller was the most challenging interactive component. The D-pad and XYAB buttons had to work seamlessly to recreate a real game controller feel. I refined each interaction and ran continuous tests to ensure smooth functionality and authenticity.
Impact
- User testing showed strong engagement, validating my approach to interaction design.
- The design team praised the innovative design, noting they had never seen anything like it before.
Interactive features and micro-animations captivated users, enhancing engagement.
Learnings
Creating this project was both rewarding and challenging.
Here are my main insights:
- Pushing boundaries: I explored Figma’s capabilities by creating interactive prototypes, which taught me the value of perseverance in design.
- Component creation: Building components from scratch improved my workflow and the overall quality of the design.
- New interests: I discovered a strong interest in gamification and interaction design, inspiring future projects.
- Next steps: I plan to learn a specific prototyping tool to enhance my skills and create more engaging user experiences.