End-to-End Project
Created for
Created for
Designlab UX/UI Academy
In this end-to-end project. I dove deep into the full UX process - from competitor research and user interviews to building affinity maps, personas, project goals, and feature roadmaps. I mapped out the user flows, designed the sitemap, sketched lo-fi wireframes the experience with hi-fi designs and usability testing. On top of that, I created the branding and logo to tie everything together into one seamless experience.
View Prototype
Project Type
End-to-end mobile app
Involvement
UX/UI Design, UX Research, Branding, Usability Testing
Tools
Figma, Framer
Project Overview
Background
An average of 2.29 billion people travel cross country every year and this number is rising an average of 2% per year. Many of these people need help finding safe hotels along their route that meet their needs.
Problem
There is currently no platform that are traveling cross country find hotels along their route that meets their specific needs.
Goals
My goal is to construct a portal that permits users to input their preferred journey and the amount of driving hours per day, and then locate hotels in the vicinity.
The
Process
Research
Competitor Analysis
User Interviews
Affinity Mapping
Define
User Personas
Project Goals
Problem Statement
Ideate
User Flows
Site Map
Mid-Fidelity Wireframes
Usability Testing
Design
Branding & Logo Design
Component & UI Kit
High-Fidelity Wireframes
Prototyping
Test
Usability Testing
Revisions
In this end-to-end project. I dove deep into the full UX process - from competitor research and user interviews to building affinity maps, personas, project goals, and feature roadmaps. I mapped out the user flows, designed the sitemap, sketched lo-fi wireframes the experience with hi-fi designs and usability testing. On top of that, I created the branding and logo to tie everything together into one seamless experience.
View Prototype
Project Type
End-to-end mobile app
Involvement
UX/UI Design, UX Research, Branding, Usability Testing
Tools
Figma, Framer
Project Overview
Background
Background
An average of 2.29 billion people travel cross country every year and this number is rising an average of 2% per year. Many of these people need help finding safe hotels along their route that meet their needs.
Problem
Problem
There is currently no platform that are traveling cross country find hotels along their route that meets their specific needs.
Goals
Goals
My goal is to construct a portal that permits users to input their preferred journey and the amount of driving hours per day, and then locate hotels in the vicinity.
The
Process
Research
Competitor Analysis
User Interviews
Affinity Mapping
Define
User Personas
Project Goals
Problem Statement
Ideate
User Flows
Site Map
Mid-Fidelity Wireframes
Usability Testing
Design
Branding & Logo Design
Component & UI Kit
High-Fidelity Wireframes
Prototyping
Test
Usability Testing
Revisions
Research
Research
Competitor Analysis
Competitor Analysis
A competitor analysis was conducted on three websites that assist users in planning cross-country travel by helping them find lodging and activities along their route.
A competitor analysis was conducted on three websites that assist users in planning cross-country travel by helping them find lodging and activities along their route.
A competitor analysis was conducted on three websites that assist users in planning cross-country travel by helping them find lodging and activities along their route.
None of the competitors offer a way to filter on the hotel search for specific needs.
None of the competitors offer a way to filter on the hotel search for specific needs.
None of the competitors offer a hotel comparison tool to make the pricing clear.
None of the competitors offer a hotel comparison tool to make the pricing clear.
None of the competitors offer route details such as mileage to each hotel.
None of the competitors offer route details such as mileage to each hotel.
Friendly RV tool
Friendly RV tool
Offers a free trial
Offers a free trial
Has a map of suggested things to see along the way
Has a map of suggested things to see along the way
Does not have suggestions for websites to book hotels
Does not have suggestions for websites to book hotels
More of an adventure website than a hotel website
More of an adventure website than a hotel website
Easy to navigate website
Easy to navigate website
Has a tab for cheap hotels and hotels along the interstate
Has a tab for cheap hotels and hotels along the interstate
Gives 4 options of websites to book hotels
Gives 4 options of websites to book hotels
Website is minimal and boring
Website is minimal and boring
Does not utilize filters
Does not utilize filters
Does not have the cost of the stay on the first page
Does not have the cost of the stay on the first page
Does not explain route well
Does not explain route well
The "book a hotel in advance" and "hotel along highway" tabs do not work
The "book a hotel in advance" and "hotel along highway" tabs do not work
Easy to navigate website
Easy to navigate website
Has a tab for cheap hotels and hotels along the interstate
Has a tab for cheap hotels and hotels along the interstate
Gives 4 options of websites to book hotels
Gives 4 options of websites to book hotels
Website is minimal and boring
Website is minimal and boring
Does not utilize filters
Does not utilize filters
Does not have the cost of the stay on the first page
Does not have the cost of the stay on the first page
Does not explain route well
Does not explain route well
If the users chooses the "cheap hotels" option the filters are not stored, causing the user to have to re-enter the desired information
If the users chooses the "cheap hotels" option the filters are not stored, causing the user to have to re-enter the desired information
User Interviews
User interviews were conducted with four families who had recently completed a cross-country move.
User interviews were conducted with four families who had recently completed a cross-country move.
User interviews were conducted with four families who had recently completed a cross-country move.
100% of participants stated that they rented a moving van instead of hiring a moving company.
100% of participants stated that they rented a moving van instead of hiring a moving company.
100 % of participants stated that the most challenging part of the move was finding hotels on the route that met their specific needs.
100 % of participants stated that the most challenging part of the move was finding hotels on the route that met their specific needs.
Affinity Mapping
"
The worst part of moving for my family was finding hotels that could accomodate my health issues."
~Shelby
~Shelby
"
The worst part of the move was finding family friendly hotels that allowed dogs."
~corey
~corey
In summary: A platform that allows people moving cross country to enter a specific route and search hotels along their route would greatly assist users in an already frustrating time. The search and filter options enable users to easily find hotels that meet any specific need.
Define
Define
Define
User Personas
Two user personas were developed based on research findings to represent the needs of individuals traveling cross-country in search of suitable lodging.
Two user personas were developed based on research findings to represent the needs of individuals traveling cross-country in search of suitable lodging.
Two user personas were developed based on research findings to represent the needs of individuals traveling cross-country in search of suitable lodging.
How might we help people that are traveling cross country find hotels along their route that meet their specific needs.
How might we help people that are traveling cross country find hotels along their route that meet their specific needs.
Project Goals
Problem Statement
There is currently not a platform that allows users that are traveling cross country to easily enter their intended route and search hotels along the route that meets their specific needs.
There is currently not a platform that allows users that are traveling cross country to easily enter their intended route and search hotels along the route that meets their specific needs.
Ideate
Ideate
Ideate
User Flows
Two user flows were developed and tested to gain insight into how the users navigate the platform.
Two user flows were developed and tested to gain insight into how the users navigate the platform.
Two user flows were developed and tested to gain insight into how the users navigate the platform.
Log in
Log in
Book Hotels
Book Hotels
Site Map
A sitemap was created to gain a clearer understanding of the website's structure.
A sitemap was created to gain a clearer understanding of the website's structure.
A sitemap was created to gain a clearer understanding of the website's structure.
Mid fidelity Wireframes
Mid fidelity Wireframes
Mid-fidelity wireframes were created to conduct usability testing with five participants, focusing on the user flows. I was looking for user pain points in signing in, creating an account, and booking hotels.
Mid-fidelity wireframes were created to conduct usability testing with five participants, focusing on the user flows. I was looking for user pain points in signing in, creating an account, and booking hotels.
Mid-fidelity wireframes were created to conduct usability testing with five participants, focusing on the user flows. I was looking for user pain points in signing in, creating an account, and booking hotels.
Sign in/ Create account
Choose route/ Choose hotel
Usability Testing
Log-in User FLow
Log-in User FLow
Create a sign in button in addition to the icon in the navigation bar.
Log-in User FLow
Log-in User Flow
Create an error message when clicking sign-in without an existing account.
Choose Hotel User Flow
Choose Hotel User Flow
Change the filter buttons hierarchy to be higher than the sort button.
Design
Design
Design
Branding & Logo Design
The Pathotels logo was designed to reflect the four core values: convenience, personalization, reliability, and efficiency.
The Pathotels logo was designed to reflect the four core values: convenience, personalization, reliability, and efficiency.
The Pathotels logo was designed to reflect the four core values: convenience, personalization, reliability, and efficiency.
Convenience
Convenience
We prioritize making your travel planning as effortless as possible by offering seamless route-based hotel suggestions tailored to your daily driving.
Personalization
Personalization
We are committed to providing personalized recommendations that fit your unique journey, ensuring your stops and stays align with your preferences and needs.
Reliability
Reliability
Our platform is dedicated to delivering accurate and dependable hotel options, giving peace of mind throughout your trip with trustworthy recommendations.
Efficiency
Efficiency
We strive to streamline the planning process, saving you time by quickly finding optimal hotel choices along your route, so you can foci=us on enjoying your travels.
Component & UI Kit
A component and UI kit was developed to streamline the design process and ensure consistency across the platform.
A component and UI kit was developed to streamline the design process and ensure consistency across the platform.
A component and UI kit was developed to streamline the design process and ensure consistency across the platform.
High Fidelity Wireframes
High-fidelity wireframes and a prototype were developed to conduct more in-depth usability testing of the platform.
High-fidelity wireframes and a prototype were developed to conduct more in-depth usability testing of the platform. I wanted insight into pain points in choosing a driving route, and choosing a hotel by filtering for amenities.
High-fidelity wireframes and a prototype were developed to conduct more in-depth usability testing of the platform. I wanted insight into pain points in choosing a driving route, and choosing a hotel by filtering for amenities.
Choose route
Test
Test
Test
Usability Testing
Usability testing was conducted with five participants , and revisions were made based on the insights gathered.
Usability testing was conducted with five participants , and revisions were made based on the insights gathered.
Usability testing was conducted with five participants , and revisions were made based on the insights gathered.
Design a create account button on the landing page in addition to the navigation bar.
Design a create account button on the landing page in addition to the navigation bar.
Designed the sort by button to a secondary button.
Designed the sort by button to a secondary button.
Revisions
Revisions
A create new account button was added to the landing page and hamburger menu
A create new account button was added to the landing page and hamburger menu
Sort by button was designed to be a secondary button
Summary
Designlab UX/UI Academy
This project was the Phase 1 of the Designlab UX/UI Academy.
UI/UX design principles
During this project I learned necessary UX strategies such as conducting user interviews, analyzing the data received, deciding which features are important to the product, producing sitemaps and flows, making wireframes, and product testing.
Tools Used
During this project I learned UI/UX design tools such as competitive analysis, user interviewing, affinity mapping, POV and HMW statements, user personas, storyboarding, project goals, feature sets, card sorting, site mapping, user and task flows, wireframes, responsive design, usability testing, and prototyping.
Branding
During this project I learned UI/UX design tools such as color theory, typography, and accessibility.
Summary
Summary
Designlab UI/UX Academy
This project was Phase 1 of the Designlab UI/UX Academy bootcamp.
UI/UX design principles
During this project I learned necessary UX strategies such as conducting user interviews, analyzing the data received, deciding which features are important to the product, producing sitemaps and flows, making wireframes, and product testing.
Tools Used
During this project I learned UI/UX design tools such as competitive analysis, user interviewing, affinity mapping, POV and HMW statements, user personas, storyboarding, project goals, feature sets, card sorting, site mapping, user and task flows, wireframes, responsive design, usability testing, and prototyping.
Branding
During this project I learned UI/UX design tools such as color theory, typography, and accessibility.
In this end-to-end project. I dove deep into the full UX process - from competitor research and user interviews to building affinity maps, personas, project goals, and feature roadmaps. I mapped out the user flows, designed the sitemap, sketched lo-fi wireframes the experience with hi-fi designs and usability testing. On top of that, I created the branding and logo to tie everything together into one seamless experience.
View Prototype
Project Type
End-to-end mobile app
Involvement
UX/UI Design, UX Research, Branding, Usability Testing
Tools
Figma, Framer