Checked In: Connecting travelers to quality experiences through trigger-based deals
Activities and outputs
- AI-assisted UX research
- Experience mapping
- Information design
- UI design
- Design system
- Interactive prototyping
For one month in 2024 I built an interactive prototype from concept to completion demonstrating a context-aware, deal-based travel app that connect tourists with high-quality experiences in Miami, where I live.
The goal of this exercise was to have fun designing the UX for a multi-sided marketplace app and prototype a digital product solution to problems I see tourists in my hometown face--a problem that businesses struggle to meet given a lack of information about their potential customers needs, situations and preferences during their short stays.
Overview
My goal was to design with AI as my “co-pilot” to generate ideas and share perspectives on a problem, develop empathy and inspire design solutions in the absence of a research team, data or access to potential users. I chose to explore a topic I have first-hand insight into as a resident of Miami, a playground for tourism.
By prototyping this deal-based travel app I aim to show how I'm comfortable working in ambiguity and with new AI tools, and to have a public-facing case study showing UI skills (previous product-design projects for clients have been strictly confidential).
What you wont find in this case study is a proper process to first research user needs and pain points, develop a business case through immersion, market research and trends, qualitative and quantitative research. The experience journey and user persona here are informed (but unverified) empathy tools to focus progression toward the goal of creating a prototype for testing and feedback.
Activities & Output
- Object Oriented UX (OOUX)
- Light research with AI: pain points, persona & empathy mapping
- Value proposition and mission statement
- Competitive analysis
- High-level journey map
- Branding and moodboarding
- App flow
- low-fi wireframes to high-fidelity UIs
- Interactive prototyping in Figma
- Design system
- Storyboarding narrative user flows
- Documenting future enhancements
Defining the Challenge
It's hard being a tourist in Miami Beach.
In place of first-hand interviews with tourists post-visit, I asked ChatGPT to assume the persona of a tourist spending 5 days on Miami Beach and list the pain points they might encounter during their stay.
I checked ChatGPT's responses against my own observations as a resident, and prioritized 5 pain points to focus on--narrowing the scope of an app to maximize vacationers' fun and savings.
Each pain point is summarized with a plea to "Help me [do something]" in order to keep the user's job to be done in mind at all times in the process of developing a solution.
Humanizing the Challenge
Persona and empathy mapping
To put a face on that person asking for that help, AI played a role in the UX process again. I asked ChatGPT to describe itself as a UX persona given a context, goals and a comfort with technology.
"Imagine you are a tourist that has booked a five day vacation to Miami Beach. You expect to explore the vibrant culture, oceanside and pool amenities and boutique hotel restaurants the area has to offer, and you're comfortable using technology to do that. How might you describe yourself, as a UX persona?"
The AI responded with behavioral traits, digital tools and apps.
I edited this response based on how I know young people usually travel to Miami (for example, with friends or a partner) and Amal Sorkin from Seattle was born.
I drafted a persona and empathy map to describe what Amal does, sees, thinks and feels (before using the app) in order to structure a narrative where a differentiated travel product could live and actually improve her experience in new ways.
Design an app to be tourists' trusted and helpful guide to maximizing fun and savings on vacation, which also benefits the businesses who serve them.
Value to users
Curated, relevant listings and dynamic promotions for timely, authentic experiences in travel destinations.
Value to businesses
Immediate access to a verified pool of nearby travelers in an experience-seeking mindset who are incentivized by discounts that boost revenue overall.
Structuring a solution
"How might we"
Now, with a high-level value defined for both users and businesses, I returned to our pain points and brainstormed digital solutions phrased as “how might me” questions tied to Amal’s cries for help.
Competitive Analysis
ChatGPT described a UX persona that used navigation and booking apps to manage, share and discover travel experiences. I did a competitive analysis of key apps inside and outside the travel space, selected for outstanding features I wanted to emulate in the design of a localized travel app that guides visitors to curated, authentic experiences while saving them money.
- Storytelling, curation and organization - The Infatuation
- Planing and research tool - Trip Advisor
- Personalized, just-in-time results - FourSquare
- Services at a discount - Groupon
"But what makes this different than other travel apps out there?"
It's more than a travel app. It's a dynamic multi-sided marketplace that connects visitors and hosts where and when they intersect on interest and availability.
All users can explore guides and listings. But in order to unlock deals, users must confirm their reservation at a participating vender hotel. Why? So that participating hospitality vendors are targeting potential customers currently in the city who value high-end experiences.
Travelers enjoy personalized and context-specific promotions to facilitate decision making in the moment as they naturally explore.
- Users share their preferences and travel styles up front to tune their app experiences. But the app also takes their location, weather, traffic and historical data into account. It learns their preferences and improve suggestions for travelers unfamiliar with their options.
- Unlike other travel sites, the app knows its users: how long they're staying, what they enjoy, where they've been. As a result, it connects them with cost-saving experiences they're likely to enjoy.
Businesses enjoy dynamic targeted marketing to travelers nearby via limited-time discounts that drive revenue during downtimes.
- Businesses fill tables, book appointments and draw business by releasing real-time limited offer deals to a target audience through the platform.
- Unlike listing on traditional travel apps, this platform gives venders more control over which travelers receive their promotions based on their behaviors, location and interests. And for how long.
Designing a solution
Structuring content
I began designing the experience by organizing content.
First, I listed the names of actual objects in people's mental model of "Travel." For example: Neighborhood, Hotel, Spa, Point of interest, Guest, Deal, etc. Then I mapped these objects’ relationships to each other with a structured sense-making process called Object Oriented UX.
The benefit of creating a relational object map (before sketching screens!) is to think through and visualize all connections between objects in the real world users would expect. When it's time to sketch, designers use this relationship map to structure navigation and CTAs between objects in alignment with people's mental models, resulting in digital product interfaces that feel intuitive, usable and complete.
Experience mapping
My next step was to plot users' interactions with those objects over time on a high-level phased experience map.
At this point, I started thinking concretely about digital solutions and navigational sections where content would live.
Moodboarding
I created a moodboard as the first step to creating a design system in Figma, where I designed screens, components and prototyped interactions to illustrate specific experience flows that Amal would take. I wanted the app to reflect the vibrant art deco feel of Miami Beach, with bold CTAs and saturated natural photography that conveyed the raw energy of the Magic City.
Prototyping in Figma
From the relational object map and I developed a high-level app flow that diagrammed how users navigate through content to explore the city and redeem deals at businesses.
Once I had structured the interactions, I desined screen layouts for the main sections. I evolved wireframes into interactive components and high-fidelity screens, resulting in a flexible design system and functioning prototype to walk users through key flows.
Helping travelers effortlessly discover authentic experiences at a discount.
How it works
By being art of the exclusive travelers club, you get access to discount pricing on your trip. Complete your profile by answering questions about your travel style to get recommendations tailored for your tastes.
Explore vetted experiences listed in neighborhood and thematic guides. OR use the search feature to uncover hotel amenities like spas, beach clubs, restaurants and points of interest that fit your criteria.
Don't sleep on deals! They're only available for a short time! Simply present the code to your host to scan to enjoy savings on standout experiences.
UX/UI documentation and prototype
Key flows
To prepare the concept for testing with businesses and potential users in the next phase of the project, I created an interactive prototype and storyboards that walk through three key flows.
- Download and create new account: Onboarding + create new account + set travel preferences
- Use deal at a restaurant: Browse guides + search results + filter search + view detail page + view detail + save deal + redeem deal onsite
- Use contex-triggered deal from push notification: view detail + save deal + redeem deal onsite
UI detailed design document
For a deep dive on the thinking behind the user interface, I've uploaded a PDF that documents each screen and component with annotations:
Checked In - UI doc (PDF)User flow storyboards
Future enhancements
Let users reserve or share deals
- Reward engagement by frequent deal claimers with “status,” unlocking the ability to reserve deals for a short period of time, preventing them from missing out once all deals are claimed.
- Broaden possible interactions on deals, like sharing with friends or placing short holds on deals
Ratings and AI recommendations
- Prompt users who claim a deal to rate their experience right then in the app, providing feedback to the provider
- Save a user’s claimed deals to their account, where they can revisit them and leave a rating later (if they did not the moment they claimed it)
- Integrate AI into the vender app (that posts and scans deals), suggesting optimal moments to release deals based on traveler data such as number of users nearby and their likelihood to claim deals based on past behavior or stated preference. Also, leverage environmental and traffic data such as time of day, weather events, or event-related congestion in neighborhoods that may have users looking to avoid
Integrations with existing apps
- SPOTIFY - A new tab displays a city-specific playlist, for users to discover local music artists and enjoy a local vibe wherever they are.
- SOCIAL - add account-holding friends to a Checked In group to share deals and save as a group, or integrate with social messaging platforms to share deals with friends
- UBER/LYFT - For users on their trip and sharing their location, allow a quick tap to order ridesharing transportation to a location on its detail page.
Internationalization
- Allow users to select their language to braoden reach to Miami's international travelers.