Odyseek
Odyseek
Generate personalized travel itineraries with AI
Generate personalized travel itineraries with AI
ROLE
ROLE
Lead UX/UI
Lead UX/UI
TEAM
TEAM
Independent
Independent
TOOLS
TOOLS
Figma, Illustrator, Photoshop
Figma, Illustrator, Photoshop
SCOPE
SCOPE
Product Strategy, User Research, Product Design, Usability Testing, Branding, UI Library.
Product Strategy, User Research, Product Design, Usability Testing, Branding, UI Library.
THE PROBLEM
THE PROBLEM
Vacationers encounter significant hurdles in planning their trips and current mobile experiences contribute to an alarming 86% dissatisfaction rate.
Vacationers encounter significant hurdles in planning their trips and current mobile experiences contribute to an alarming 86% dissatisfaction rate.
DESIGN PROCESS
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 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
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.
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
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.
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
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.
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
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.
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
THEMES
Analyzing primary research data from interviews and competitive analysis, I grouped the notes to reveal common themes and valuable insights.
Analyzing primary research data from interviews and competitive analysis, I grouped the notes to reveal common themes and valuable insights.
USER PERSONA
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.
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
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.
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
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.
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.
I devised a task flow for the key features, mapping out how information flows across screens for an optimized user experience.
Wireframing
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
Collaborative trip planning
Desire for Trip
Flexibility
Desire for Trip
Flexibility
Information
Overload
Information
Overload
Budget and Cost Considerations
Budget and Cost Considerations
Created by Ranah Pixel Studio
Created by Ranah Pixel Studio
from the Noun Project
from the Noun Project
Desire for Personalized Experiences
Desire for Personalized Experiences
Leverage AI for crafting personalized travel itineraries
Leverage AI for crafting personalized travel itineraries
Enable users to share itineraries with friends and family
Enable users to share itineraries with friends and family
Provide travel recommendations based on preferences
Provide travel recommendations based on preferences
Allow users to edit
and book trips seamlessly
Allow users to edit
and book trips seamlessly
Centralize all trip information in a
single app
Centralize all trip information in a
single app
EMPATHIZE
EMPATHIZE
DEFINE
DEFINE
IDEATE
IDEATE
DESIGN
DESIGN
TEST
TEST
BABY BOOMERS
BABY BOOMERS
GEN X
GEN X
MILLENNIALS
MILLENNIALS
GEN Z
GEN Z
27
27
26
26
35
35
29
29
Millennials surpass all other generations in their travel frequency, averaging 35 days of travel per year.
Millennials surpass all other generations in their travel frequency, averaging 35 days of travel per year.
75%
75%
85%
85%
74%
74%
92%
92%
Of American millennial traveler agree that seeing new places is a priority when planning trips
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 agree that they would like to avoid overly “touristy” trips.
Of American millennial travelers are looking for the best deal.
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.
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
“Travel’s 2023 Global Travel Trends Report” - American Express
“Millennial Travel Statistics and Trends” - Condor
Direct Competitors
Direct Competitors
Indirect 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
TRIPMAKER
WANDERLOG
PLAN.AI
Pain Points
Pain Points
Motivations
Motivations
Behaviors
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
Jordan Turner
31 years old
Management Consultant
New York, New York
31 years old
Management Consultant
New York, New York
Plan a unique and authentic trip
Plan efficiently
Be inspired and excited while planning
Motivations
Motivations
Repetitive and basic recommendations
Information overload
Time consuming research
Pain Points
Pain Points
MOODBOARD
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.
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
Warm
Authentic
Authentic
Motivational
Motivational
Golden Ember
#EA8846
Golden Ember
#EA8846
White Text
White Text
Black Text
Black Text
3.2 contrast
3.2 contrast
7.4 contrast
7.4 contrast
AA
AA
AAA
AAA
Midnight Noir
#0F0F0F
Midnight Noir
#0F0F0F
White Text
White Text
Black Text
Black Text
19.1 contrast
19.1 contrast
0 contrast
0 contrast
AAA
AAA
Not Legible
Not Legible
Lustrous Linen
#FDFAF6
Lustrous Linen
#FDFAF6
White Text
White Text
Black Text
Black Text
19.1 contrast
19.1 contrast
0 contrast
0 contrast
AAA
AAA
Not Legible
Not Legible
Whispering Alabaster
#F6F4F1
Whispering Alabaster
#F6F4F1
White Text
White Text
Black Text
Black Text
19.1 contrast
19.1 contrast
0 contrast
0 contrast
AAA
AAA
Not Legible
Not Legible
Soothing Stone Gray
#B5B5B5
Soothing Stone Gray
#B5B5B5
White Text
White Text
Black Text
Black Text
19.1 contrast
19.1 contrast
0 contrast
0 contrast
AAA
AAA
Not Legible
Not Legible
Creamy Coral
#FAE1D1
Creamy Coral
#FAE1D1
White Text
White Text
Black Text
Black Text
15.2 contrast
15.2 contrast
1.2 contrast
1.2 contrast
AAA
AAA
Not Legible
Not Legible
Peachy Blush
#F5C4A3
Peachy Blush
#F5C4A3
White Text
White Text
Black Text
Black Text
12.1 contrast
12.1 contrast
1.5 contrast
1.5 contrast
AAA
AAA
Not Legible
Not Legible
Subtle Sandstone
#F4E7D6
Subtle Sandstone
#F4E7D6
White Text
White Text
Black Text
Black Text
15.7 contrast
15.7 contrast
1.2 contrast
1.2 contrast
AAA
AAA
Not Legible
Not Legible
Frosty Azure
#F6FCFF
Frosty Azure
#F6FCFF
White Text
White Text
Black Text
Black Text
18.5 contrast
18.5 contrast
0.9 contrast
0.9 contrast
AAA
AAA
Not Legible
Not Legible
Rustic Amber
#D19B52
Rustic Amber
#D19B52
White Text
White Text
Black Text
Black Text
7.7 contrast
7.7 contrast
3.5 contrast
3.5 contrast
AAA
AAA
AA
AA
Spiced Maple
#C35C16
Spiced Maple
#C35C16
White Text
White Text
Black Text
Black Text
4.4 contrast
4.4 contrast
4.3 contrast
4.3 contrast
AA
AA
AA
AA
Fiery Citrus Burst
#FF7347
Fiery Citrus Burst
#FF7347
Solar Flare Gold
#FFC738
Solar Flare Gold
#FFC738
Olive Essence
#ABAA73
Olive Essence
#ABAA73
Pure White
#FFFFFF
Pure White
#FFFFFF
White Text
White Text
Black Text
Black Text
0 contrast
0 contrast
19.1 contrast
19.1 contrast
Not Legible
Not Legible
AAA
AAA
Serene Sky Blue
#DDEEF8
Serene Sky Blue
#DDEEF8
White Text
White Text
Black Text
Black Text
1.8 contrast
1.8 contrast
16.1 contrast
16.1 contrast
Not Legible
Not Legible
AAA
AAA
Warm Sandstone
#E9CFAD
Warm Sandstone
#E9CFAD
White Text
White Text
Black Text
Black Text
2.8 contrast
2.8 contrast
12.7 contrast
12.7 contrast
Not Legible
Not Legible
AAA
AAA
Ethereal Charcoal
#64585C
Ethereal Charcoal
#64585C
White Text
White Text
Black Text
Black Text
6.7 contrast
6.7 contrast
2.4 contrast
2.4 contrast
AAA
AAA
Not Legible
Not Legible
Primary Color
Primary Color
Neutral Colors
Neutral Colors
Semantic Colors
Semantic Colors
Interactive Colors
Interactive Colors
Secondary Color
Secondary Color
Warm, Motivational, Authentic, and Clear
“Embark on your personal odyssey with Odyseek, where trip planning becomes an immersive journey”
Warm, Motivational, Authentic, and Clear
“Embark on your personal odyssey with Odyseek, where trip planning becomes an immersive journey”
Aa
Aa
Poppins Bold
Poppins Bold
Aa
Aa
Poppins Regular
Poppins Regular
Icons Only
Icons Only
Icons and Activity Photos
Icons and Activity Photos
Photos Only
Photos Only
HI FI PROTOTYPE
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.
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
Text
Text
345
345
48
48
16
16
16
16
16
16
16
16
24
24
24
24
24
24
24
24
Color: Golden Ember / #EA8846
Radius: 30
Text: H2 / Centered Horizontally / Centered Vertically / Fixed Content
Text Color: Pure White / #FFFFFF
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
Size: Fixed 144px
Color: Golden Ember / #EA8846
Radius: 30
Text: H2 / Centered Horizontally / Centered Vertically / Fixed Content
Text Color: Pure White / #FFFFFF
144
144
User Testing
User Testing
There can never be too much user testing and feedback to further refine the prototype
There can never be too much user testing and feedback to further refine the prototype
Flushing Out Tasks
Flushing Out Tasks
Continuing to build out the app including the onboarding and finding a destination flows
Continuing to build out the app including the onboarding and finding a destination flows
Development
Development
Working with developers to get input on how the application and prepping the Figma file for development
Working with developers to get input on how the application and prepping the Figma file for development
Marketing
Marketing
Looking into how people are brought to the marketing website including tiktok and Instagram adds
Looking into how people are brought to the marketing website including tiktok and Instagram adds
“Dream Big Travel Far” - Expedia
“Dream Big Travel Far” - Expedia
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
Editing a Trip Itinerary
Editing a Trip Itinerary
Creating a New Trip Itinerary