Mobile Interface
Web Interface
![](https://framerusercontent.com/images/vg2W9MzfTuXavaRg1CoL47P769k.png)
![](https://framerusercontent.com/images/4pD14C072iDOvWu1bC3OmL87KEM.png)
![](https://framerusercontent.com/images/8I0rvWQKuWntwSeQQ0WcY7Ujqw.png)
Expedia Quest: Travel, Play & Win
Role
Visual Designer
Timeline
Nov 2023 - Dec 2023
Industry
Travel Technology
Team
Manasi Nipane
Abhijit Barman
Anand Kalukae Atharv Joshi
Disciplines
Visual Design Interaction Design
Prototyping
Tool
Figma
Project Overview
A user-friendly experience on Expedia for diverse travel challenges. The Travel Challenges section inspires users with unique experiences and rewards them for achievements with exciting prizes.
The design incorporates gamification elements and effortless integration with the booking platform for a holistic and engaging travel experience.
Over 1 month, my cohort team developed a mobile app feature for Expedia. As the UI designer, I worked with the team to evaluate the problems and business needs of Expedia and propose a feasible design solution.
Problem
Travelers fail to accomplish their travel goals due to uncertainty, motivation, and a lack of recognition for their achievements.
Lack of Inspiration
![](https://framerusercontent.com/images/czAZ3w5VMU74WeNPlOIdkd6D9k.png)
Travelers are unsure where to go or what to do when they travel.
Lack of Motivation
![](https://framerusercontent.com/images/VS9GwypbbbG6xFbEC9E4C8Ci8g.png)
It can be difficult to stay motivated to achieve travel goals.
Lack of Rewards
![](https://framerusercontent.com/images/z6Bcp458tgL57hxLVeVvu3EqZyw.png)
Travelers are not rewarded for their travel accomplishments.
The Solution
Travel Challenges: Inspiring Travel Goals and Rewarding Experiences
![](https://framerusercontent.com/images/9DGfWz11EmG3Tdly1fnp0Aq66k.png)
How might we inspire users to travel more and plan better itineraries?
Users can effortlessly choose from a variety of travel challenges.
Serves as a motivating factor for users to enhance their travel experiences.
![](https://framerusercontent.com/images/YTlHGqi6xahxE0F8DPpqlSb3VE.png)
How might we boost user motivation for achieving travel goals and ensure fulfilling journeys?
Users receive a comprehensive travel itinerary to guide them during their journey.
The Memory Wall, earned by completing all challenges, motivates users to accomplish tasks.
![](https://framerusercontent.com/images/LwALu2bSNScV5UF7dLHURaIkOo.png)
How might we improve the rewards system to better support users in accomplishing their travel goals?
Users are offered a diverse selection of reward coupons.
These coupons are redeemable on Expedia for booking flights or accommodations
Process & Reasons
How does Expedia compare to other platforms?
We conducted an in-depth exploration of the App Store to identify travel apps that excel in using gamification elements to boost user retention. By analyzing user reviews and app features, we also pinpointed which popular travel apps were missing this engaging component.
![](https://framerusercontent.com/images/cVCniVEiG9bmpUewprQwuoWwl8.png)
Booking.com
![](https://framerusercontent.com/images/F2RR4lG30vMtfNPRjxoGk2al4no.png)
Make My Trip
![](https://framerusercontent.com/images/FyWH49rG3Zlrxw6w1NNL8CEjmTY.png)
Polar Steps
![](https://framerusercontent.com/images/5F6aGGZzuAzGiuwAINIdVDBd04.png)
Roadie
![](https://framerusercontent.com/images/e8QGNtQOKpfCRVJ5pOKhQM5JPg.png)
TripIt
Major Insights from Secondary Research
![](https://framerusercontent.com/images/35DyrUKq5cM0Mq6Qpx6EWtbQc9U.png)
Design decisions in this project were guided exclusively by secondary research, as no user interviews were conducted. We utilized existing data and insights to drive the design process.
Wireframing to Prototyping
What could our new screens look like?
We designed low-fidelity wireframes to visualize the new layout and navigation. Afterwards, we built a high-fidelity, interactive prototype to test the design.
Initial Sketches
![](https://framerusercontent.com/images/6SltOBALVypJtcSTvQ8O5roJc.png)
![](https://framerusercontent.com/images/JCpuhAzrcaHUrEOHoFyCyl8Xhk.png)
![](https://framerusercontent.com/images/ukEzCEI0xdwBf7XXMFOuRAPN8o.png)
![](https://framerusercontent.com/images/kVTrUsHkT5x0Ml1OwRLEEIAjugw.png)
![](https://framerusercontent.com/images/7GVeBb4rM7l8HbrHWjKSkO6t98.png)
![](https://framerusercontent.com/images/eQqnFPKx3cI8OnKlXF5OVdZTss.png)
![](https://framerusercontent.com/images/XawHHnEHnsZuXlojbAef3SCmNA.png)
![](https://framerusercontent.com/images/v1LcyHefQHiiqGHzA4hrtkmp9AA.png)
![](https://framerusercontent.com/images/M4gIJKNLk18DclCbWDoN4tGHdE4.png)
![](https://framerusercontent.com/images/rfx1rHk2LYPqqYzdul8kVTypCSM.png)
![](https://framerusercontent.com/images/4HC2mkOxfLvuIyYJznqTh1UIU.png)
![](https://framerusercontent.com/images/d4P8BsQSKKB4ln8ajgebmUEH5z0.png)
![](https://framerusercontent.com/images/zYXONeltkKSrhqNvfb70huzqB4.png)
![](https://framerusercontent.com/images/mCcYp6v0Tf3Tmj8ogYqpM97BSM.png)
![](https://framerusercontent.com/images/UAU059YxvPWc7KDX8Jgy4nr7F0.png)
![](https://framerusercontent.com/images/m5QD6JH6tVSzvB3vjYUQvEHncOw.png)
![](https://framerusercontent.com/images/SRmf8dRcfBMKIe5AYDB97YxHZwQ.png)
![](https://framerusercontent.com/images/2kepLrWFoF7fIYBet7JjncSdFV8.png)
Inspiration Mood-board
We drew significant inspiration from Duolingo's use of gamification to enhance user retention and Google Pay's implementation of games to encourage users to return to the app for the chance to win rewards.
![](https://framerusercontent.com/images/DXkKLLVl988Qh3jXwPbWBYEgyg.jpg)
![](https://framerusercontent.com/images/IQUbPH3sKCmzuUy5t07PEI5U.jpg)
Dulingo
Google Pay
![](https://framerusercontent.com/images/mG4kHlS3UQN9wLfjvsZNaJmbsw.png)
![](https://framerusercontent.com/images/iBFEEvrCLOK4kGBQJnBtlySacM.png)
![](https://framerusercontent.com/images/TJQrNPqG02mnrr1Lb66dHjo1KeI.jpg)
![](https://framerusercontent.com/images/kySIUPqjvSl0BhtrQQQRlmialA.png)
Memory wall as end reward
Solving granular design problems
Introduction of 'Travel Challenge' feature in the app
A banner on the main screen and an icon in the bottom navigation bar for accessing the challenges.
This dual approach enhances accessibility by providing immediate visibility through the banner and easy, consistent access through the navigation bar, seamlessly integrating the new feature into the app’s existing interface.
Homepage Before
![](https://framerusercontent.com/images/R2C7PeOwlP8l61UyDkmeBYBQtjw.png)
Homepage After
![](https://framerusercontent.com/images/FvK4sIlYxQJFX52zhJlL72JRcE.png)
![](https://framerusercontent.com/images/D2H74AVznXkJz04l7gYFXHFZI0o.png)
Challenges
Maintaining intuitive navigation for users to discover and engage with challenges
To ensure intuitive navigation for users to discover and engage with challenges, we implemented the following features in the app.
Expedia Quest Dashboard
![](https://framerusercontent.com/images/xrIBcmRiemXSuMzAvwmYwodJIk.png)
A centralized hub where users can easily find and track ongoing challenges.
Restart Quest from Homepage
![](https://framerusercontent.com/images/OrtYVQO9UfD3JbNfmrON9zb2sM.png)
Quick access from the homepage to restart previously attempted quests, enhancing user convenience.
History of the Quests
![](https://framerusercontent.com/images/xbYzy7PkTlJTeLkx6tK4PMq500.png)
A dedicated section to view the history of all attempted quests, allowing users to revisit and manage their past activities.
Ensuring visual consistency
Creating text and color styles, along with an icon library, that seamlessly integrate with the existing app's visual design.
Typography
Titles
Title1, Semi Bold, 16
Title2, Semi Bold, 14
Body Text
Body-Text1, Medium, 18
Body-Text2, Medium, 16
Body-Text3, Regular, 14
Body-Text4, Regular, 12
Body-Text Small, Regular, 10
Headings
Heading1, Medium, 20
Heading2, Semi Bold, 18
Heading3, Semi Bold, 16
Image Headings
Image Heading1, Bold, 32
Image Heading2, Bold, 28
Iconography
Colors
Icon Primary Color
Primary Color
Secondary Color
Tertiary Color
Image Text Color
Success Message Primary Color
Success Message Secondary Color
Error Message Primary Color
Error Message Secondary Color
Text Card Primary Color
Text Card Secondary Color
Visual Design Iterations
How User Testing contributed to refining the screens?
We conducted usability tests with a diverse group of users to validate the design and identify areas for improvement. Based on the feedback, we made necessary adjustments to the design.
Expedia Home Screen
A lack of clarity about the challenge, with the name not conveying a gaming aspect
Users were uncertain about the rewards they could ultimately earn
Before
![](https://framerusercontent.com/images/CZI15DpAiqTwJzAChYd8xhmQA.png)
After
![](https://framerusercontent.com/images/zdHYK9saYBxYe6inGAGUKomRImg.png)
Changed the banner with a vibrant image, introduced the tagline 'Travel, Play, Win,'
Clarified that users could earn rewards discount by participating in the challenge.
Expedia Quest Dashboard
Confusion regarding the roadmap and rewards cards.
The roadmap doesn't specify which challenge is ongoing
No proper visual and information hierarchy
Before
![](https://framerusercontent.com/images/JxLeMCdfx7l1O7UNTeDVXPXL0.png)
After
![](https://framerusercontent.com/images/tu03e3gITWgpC3rR5k1H0ybwABE.png)
Restructuring coins, rewards, and progress status into separate tabs
A more streamlined and compact layout for enhanced user experience
Rewards Screen
Confusion and disorientation with the previous interface
Before
![](https://framerusercontent.com/images/hiqLaIwUmODsN2Fq9ENzjmmOPY.png)
After
![](https://framerusercontent.com/images/F4tVT2FZ4cvVWYIqXCsttMuMgl4.png)
Converted rewards into coupons for increased real-world familiarity
Introduced a new tiered system: 'Blue,' 'Silver,' and 'Gold' memberships
Component Insights
Crafting better quest cards
A seemingly simple component turned out to have numerous parameters that significantly impact the user experience. Below are some insights and design decisions I considered to create an exceptional experience.
![](https://framerusercontent.com/images/bnep3dP8Rohsq6QTvkqUIR0IHk.png)
Implicit Version
![](https://framerusercontent.com/images/X8OOi0VyMjmmdu6nRGMoOueQo.png)
The cards failed to indicate the information of ongoing challenge.
The information provided was insufficient.
Poor visual hierarchy making it difficult to prioritize information.
Unclear call-to-action buttons.
Inconsistent visual design elements.
Explicit Version
![](https://framerusercontent.com/images/nHqNLzaBBtrmmvYf8TJMIYMA6I.png)
The cards convey better information of ongoing challenge.
Providing detailed information including challenge descriptions, rewards, and user reviews.
Clear call-to-action buttons.
Consistent visual design elements.
Developing multiple variants for the various elements of the Expedia Quest feature.
I created multiple variants for key elements of the Expedia Quest feature, including buttons, offer states, task states within challenges, and membership states. Each variant is crafted to enhance the user experience, ensuring consistency and clarity across different scenarios and interactions.
![](https://framerusercontent.com/images/YLHDAlt88JzL538FAU8yhOSKKxk.png)
The button variants cater to various call-to-actions at different stages in the app.
The offer states indicate different stages of reward availability.
The task states provide a clear progress indicator throughout the challenge.
The membership states reflect different levels of user engagement and benefits.
Key decisions made during the journey
The reason behind strategically incorporating 'Blue', 'Silver', and 'Gold' membership tiers around the challenges.
The reward system was already in place within the app; we designed the challenges to complement this system, benefiting both users and the business.
![](https://framerusercontent.com/images/Msbev20iHfJxCu1QL7HecTTRXYw.png)
The 'Blue,' 'Silver,' and 'Gold' reward tiers are specifically crafted to offer users a variety of perks and exclusive deals from Expedia.
An added advantage for Expedia's business growth, ensuring users stay actively involved and invested in the platform.
Reward users with 100 coins for accomplishing each task within a challenge.
This decision is based on the strategic goal of offering users a immediate incentive upon task completion.
By consistently providing users with tangible rewards for their efforts, we cultivate a sense of accomplishment and sustained motivation throughout the challenge.
Reflections
User-centered design is an iterative design process that focuses on the users and their needs in each phase of the design process.
Understand the reasoning behind each design choice, supported by user research.
Usability testing is a critical step in the user flow process. Identifying diverse user types and unique scenarios helps in finding better solutions.
Manasi Nipane
2024