Odyseek
Generate personalized travel itineraries with AI
ROLE
Lead UX/UI
TEAM
Independent
TOOLS
Figma, Illustrator, Photoshop
SCOPE
Product Strategy, User Research, Product Design, Usability Testing, Branding, UI Library.
THE PROBLEM
Vacationers encounter significant hurdles in planning their trips and current mobile experiences contribute to an alarming 86% dissatisfaction rate.
DESIGN PROCESS
My design narrative is a dynamic journey, guided by a seamless blend of creativity and strategy, shaping purposeful and impactful design solutions through a process of Creative-Strategic Iteration.
MY USER
At the outset of my design journey, I prioritized defining my target user. This focus streamlined my perspective, guiding research and marketing efforts with precision.
RESEARCH
Once I identified millennials as my target audience, delving into their current travel habits and values became paramount. This exploration aimed to uncover insights that would inform and enhance my design approach for this demographic.
COMPETATIVE RESEARCH
Discovering an 86% dissatisfaction rate among millennials using existing travel apps, I initiated thorough market research. This strategic move aimed to pinpoint gaps and opportunities, providing valuable insights to inform and refine my product for a more satisfying user experience.
AFFINITY MAPPING
I engaged in interviews with six American millennials who have traveled within the past year. After meticulous review of my notes, I categorized the gathered insights into three key areas: pain points, motivations, and behaviors. This structured breakdown serves as the foundation for crafting targeted design solutions.
THEMES
Analyzing primary research data from interviews and competitive analysis, I grouped the notes to reveal common themes and valuable insights.
USER PERSONA
To enhance my grasp of the user, I crafted a persona based on insights gleaned from interviews. This persona serves as a detailed archetype, providing a tangible representation that guides design decisions and ensures a user-centric approach throughout the product development process.
USER FEATURES
Having defined my user, I proceeded to ideate various tasks they might want to perform. This exercise aims to inform the incorporation of relevant features into the application development, ensuring alignment with user needs and enhancing overall functionality.
APP ARCHITECTURE
Considering these features, I designed an app architecture to visualize their placement. I then focused on two key features, delving deeper into their development to address the most crucial needs of my users.
TASK FLOW
I devised a task flow for the key features, mapping out how information flows across screens for an optimized user experience.
Wireframing
After developing my task flows, I gained clarity on the necessary screens and modals. Drawing inspiration from various UI designs, I personally sketched out ideas and translated them into wireframes using Figma, iterating on them for refinement.
USER TESTING
After two rounds of user testing on my mid-fidelity prototype, a hurdle emerged: users faced difficulty replacing an activity in their itinerary. Recognizing this, I revamped aspects of the task flow to ensure a more user-friendly experience.
WORDMARK
Inspired by the moodboard, I crafted the Odyseek wordmark. This subtle yet impactful element not only defines our brand's tone but underwent iterative refinement to strike a balance between unique recognition and simplicity for scalable appeal.
BRANDING
The 8-grid specimen serves as a precise reference guide, ensuring alignment with the established brand identity. This framework thoughtfully guided the creation of my hi-fidelity prototype, facilitating the seamless infusion of colors and maintaining a cohesive and harmonious aesthetic throughout the design process.
COLOR INJECTION
Experimenting with color injections in my app, I faced a challenge on the calendar page. Balancing information clarity with a clean aesthetic was tricky. After testing three approaches and gathering feedback, I decided on using icons consistently to streamline information and enhance the user experience.
UI LIBRARY
I built a thorough UI library for consistent design across the app and marketing materials, fostering efficiency within the team. It's structured into foundations, atoms, molecules, organisms, and templates for seamless integration and cohesive branding.
MARKETING WEBSITE
To boost app promotion and user acquisition, I crafted a marketing website. Prioritizing mobile accessibility, I adopted a mobile-first approach, later extending it into a responsive design for optimal user experience across various devices.
NEXT STEPS
The design process is perpetual, and project timelines are often limited. Looking ahead, my goal is to continue evolving both the app and the brand, embracing an iterative approach for ongoing refinement and enhancement.
COLORS
Turning to the moodboard, I extracted colors to evoke warmth, adventure, and authenticity. I tested various color combinations to envision their translation into the UI. Each choice was meticulously assessed for accessibility, ensuring inclusivity for all users.
Collaborative trip planning
Desire for Trip
Flexibility
Information
Overload
Budget and Cost Considerations
Created by Ranah Pixel Studio
from the Noun Project
Desire for Personalized Experiences
Leverage AI for crafting personalized travel itineraries
Enable users to share itineraries with friends and family
Provide travel recommendations based on preferences
Allow users to edit
and book trips seamlessly
Centralize all trip information in a
single app
EMPATHIZE
DEFINE
IDEATE
DESIGN
TEST
BABY BOOMERS
GEN X
MILLENNIALS
GEN Z
27
26
35
29
Millennials surpass all other generations in their travel frequency, averaging 35 days of travel per year.
75%
85%
74%
92%
Of American millennial traveler agree that seeing new places is a priority when planning trips
Of American millennial travelers agree that they would like to avoid overly “touristy” trips.
Of American millennial travelers are looking for the best deal.
Of American millennial travelers agree that it is important that their travel experience be unique and custom to them.
“Travel’s 2023 Global Travel Trends Report” - American Express
“Millennial Travel Statistics and Trends” - Condor
Direct Competitors
Indirect Competitors
USER REVIEWS
INSTANT BOOKING
CALANDAR VIEW
RESTAURANT RES.
SPECIFIC NEEDS FILTER
RECOMENDED ACTIVITIES
TRAVELOCITY
TRIP ADVISOR
AIR BNB
EXPEDIA
SHARE WITH FRIENDS
ENTER INTERESTS
RECOMEND LOACTIONS
IMPORT BOOKINGS
RECOMEND ACTIVITIES
FULLY EDIT ITINERARIES
TRIPMAKER
WANDERLOG
PLAN.AI
Pain Points
Motivations
Behaviors
How might we cater to Millennials' needs and desires, so that they can effectively craft personalized experiences aligned with their unique preferences and interests?
Jordan Turner
31 years old
Management Consultant
New York, New York
Plan a unique and authentic trip
Plan efficiently
Be inspired and excited while planning
Motivations
Repetitive and basic recommendations
Information overload
Time consuming research
Pain Points
MOODBOARD
Feeling satisfied with my mid-fidelity prototype, I shifted focus to crafting the UI of the application. It all began with curating a moldboard, crafted to maintain consistent branding and messaging for my users.
Warm
Authentic
Motivational
Golden Ember
#EA8846
White Text
Black Text
3.2 contrast
7.4 contrast
AA
AAA
Midnight Noir
#0F0F0F
White Text
Black Text
19.1 contrast
0 contrast
AAA
Not Legible
Lustrous Linen
#FDFAF6
White Text
Black Text
19.1 contrast
0 contrast
AAA
Not Legible
Whispering Alabaster
#F6F4F1
White Text
Black Text
19.1 contrast
0 contrast
AAA
Not Legible
Soothing Stone Gray
#B5B5B5
White Text
Black Text
19.1 contrast
0 contrast
AAA
Not Legible
Creamy Coral
#FAE1D1
White Text
Black Text
15.2 contrast
1.2 contrast
AAA
Not Legible
Peachy Blush
#F5C4A3
White Text
Black Text
12.1 contrast
1.5 contrast
AAA
Not Legible
Subtle Sandstone
#F4E7D6
White Text
Black Text
15.7 contrast
1.2 contrast
AAA
Not Legible
Frosty Azure
#F6FCFF
White Text
Black Text
18.5 contrast
0.9 contrast
AAA
Not Legible
Rustic Amber
#D19B52
White Text
Black Text
7.7 contrast
3.5 contrast
AAA
AA
Spiced Maple
#C35C16
White Text
Black Text
4.4 contrast
4.3 contrast
AA
AA
Fiery Citrus Burst
#FF7347
Solar Flare Gold
#FFC738
Olive Essence
#ABAA73
Pure White
#FFFFFF
White Text
Black Text
0 contrast
19.1 contrast
Not Legible
AAA
Serene Sky Blue
#DDEEF8
White Text
Black Text
1.8 contrast
16.1 contrast
Not Legible
AAA
Warm Sandstone
#E9CFAD
White Text
Black Text
2.8 contrast
12.7 contrast
Not Legible
AAA
Ethereal Charcoal
#64585C
White Text
Black Text
6.7 contrast
2.4 contrast
AAA
Not Legible
Primary Color
Neutral Colors
Semantic Colors
Interactive Colors
Secondary Color
Warm, Motivational, Authentic, and Clear
“Embark on your personal odyssey with Odyseek, where trip planning becomes an immersive journey”
Aa
Poppins Bold
Aa
Poppins Regular
Icons Only
Icons and Activity Photos
Photos Only
HI FI PROTOTYPE
After conducting color tests on key screens, I distilled my learnings to apply a cohesive color scheme across the entire prototype, shaping the foundation for my high-fidelity design.
Creating a New Trip
Editing a Trip
Text
Text
345
48
16
16
16
16
24
24
24
24
Color: Golden Ember / #EA8846
Radius: 30
Text: H2 / Centered Horizontally / Centered Vertically / Fixed Content
Text Color: Pure White / #FFFFFF
Size: Fixed 144px
Color: Golden Ember / #EA8846
Radius: 30
Text: H2 / Centered Horizontally / Centered Vertically / Fixed Content
Text Color: Pure White / #FFFFFF
144
User Testing
There can never be too much user testing and feedback to further refine the prototype
Flushing Out Tasks
Continuing to build out the app including the onboarding and finding a destination flows
Development
Working with developers to get input on how the application and prepping the Figma file for development
Marketing
Looking into how people are brought to the marketing website including tiktok and Instagram adds
“Dream Big Travel Far” - Expedia
Editing a Trip Itinerary
Creating a New Trip Itinerary
Made the profile icon smaller to align with other icons
Added the hamburger icon
to create better symmetry
Lowered the line weight on the search bar to not conflict with the text hierarchy
Enlarged margins to create more white space and reduce information overload