Intra
🚀 A Inclusive travel booking platform designed to provide inclusivity for better travel experiences. 🌏
📐 Wireframing: Visualizing the Skeleton & Layout & features
Wireframing to establish the foundational structure and layout for Intra's interface. I transferred the hand sketches to digital wireframes using the software Balsamiq.
Our team had regular collaboration sessions which allowed us to gain insights and feedback on eachother designs.
Annotations for Clarity and Insights: To explain design decisions and functionalities. This guided the design team and stakeholders, ensuring a shared understanding of wireframes' purpose and intricacies.
Additional Considerations: Interaction Design
Settings Page
Split View: For navigation convenience.
UI Slider Movement Design: For intuitive drag motion and precision to adjust settings. I considered if it should be snappy or continuous - Considering people with physical difficulties I decided to test and do more research.
Chatbot Page
-
Chatbot is accessible everywhere so if users are confused or unsure, the bot is ready assist.
-
Responsive Split View: Left pane shows the page they are on. The bot will be answering based on the hotel selected.
3D View Page
3D View Intuitive Controls: Pinch to zoom. Move your finger to control the view or use arrows.
Info Icon: Shows the instruction/tutorial on how to use and control.
Our Solution
Intra: Inclusive Travel Booking
"Empowering Every Journey - Where Everyone Can Travel Without Limitations!"
Imagine a world where travel is truly accessible to everyone. Where booking a trip isn't filled with uncertainty, inaccessibility, no one is held back by physical barriers, lack of information, or frustrating booking experiences. That's where Intra comes in designed with accessibility at its core.
🚀 What is Intra?
A inclusive travel booking platform designed to empower every journey—ensuring that no one is left behind. Whether someone has mobility challenges, cognitive disabilities, visual impairments, or other unique needs, Intra makes booking seamless, accessible, and stress-free.
🛫 Why Intra?
-
Breaking Barriers: Intra removes limitations, making travel more accessible for everyone.
-
Fostering Independence: Every traveler should have the power to plan with confidence.
-
Empowering Diverse Needs: More than just an accessible platform—it’s an inclusive experience for people with disabilities, elderly travelers, budget-conscious individuals, pregnant women, and beyond.
🔑 Key Features That Set Intra Apart
-
Accessibility at Its Core: Designed following WCAG guidelines, with adjustable brightness, text size, and assistive features like text-to-speech and speech-to-text.
-
Inclusive Information Sharing: Detailed hotel facilities, 3D views, and chatbot assistance ensure travelers can make informed decisions.
-
Emotional Well-Being Focused: Trigger warnings on reviews create a safe space for users to navigate experiences without distress.
-
Empowering User Control: Customization options for a personalized experience—from sound settings to readability.
-
Seamless & Efficient Booking: A streamlined, error-free process with minimal steps for ease of use.
-
Continuous Adaptation: User feedback drives improvements, ensuring Intra evolves with emerging technologies.
🌟 The Impact?
Travel has been exclusive and issue for people with disabilities - Intra changes that. With a user-first approach, that fosters independence, and empowers people to explore the world with confidence and joy.
🌍 Intra: Where Everyone Can Travel Without Limits. ✈️
👩🏻💻 My Role
Ux/UI & Interaction Designer
Tablet/Ipad screens designer
Design System Designer
UX Researcher
⌛ Project Duration
March - June, 2022 (3 Months)
🤝 Team Members
UX/UI/IxD Designers:
-
Bopha Sean (Desktop)
-
Nutthida Amorntiyanggoon (Mobile)
🧰 Tools Used
Figma, Miro, Balsamiq, Photoshop
📝 Research Methods: Uncovering the Barriers to Inclusive Travel
Before designing Intra, we needed to deeply understand the real struggles people with disabilities face when traveling. To do this, we conducted a multi-method research approach, ensuring a comprehensive, human-centered, and data-driven for our design decisions.
Online Ethnography - Social Listening
Observed 60+ Posts & Stories
We gathered real-world opinions and identify trends in accessibility struggles from accessibility communities where people share their travel experiences on Twitter, Reddit, blogs, reviews, Facebook, travel agencies and medical websites.
Competitor Analysis - Learning from the Market
Analyzed 3 Key Competitors
To identify gaps and opportunities in the industry we evaluated companies on how they handle accessibility which guided our design to make our product more desirable, user-friendly to gain a competitive advantage.
💜 Client Brief
Focus/scope: Design a booking travel app that is disability-friendly and accessible for everyone, e.g. people in wheelchairs, people with vision impairment, people who can’t afford to travel or have other conditions that make it difficult to travel and book "regular" tours.
The Challenge
💢 People with Disabilities Often Encounter Numerous Obstacles When Traveling & Booking — An Overlooked Market ✈️
-
Accessibility needs are often disregarded in the travel industry.
Information Scarcity
Limited reliable accessible information and travel options, services and accommodations makes it difficult for people with disability to travel.
Accessibility Awareness
Lack of awareness and sensitivity among tourism providers and the general public about the needs of travelers with disabilities leads to negative experiences and exclusion.
Large Population
1 in 5 Australians have a disability
Demonstrating the substantial size of the market. People with disabilities have less opportunities to travel without worries when traveling due to lack of platforms and universal design.
Significant Travel Spending
$3.2 billion is spent annually
on traveling by Australians with disabilities. Highlighting the considerable economic impact and opportunity of this market.
02 DEFINE | SYNTHESIS
🔎 Research Summary: Uncovering the Barriers to Accessible Travel
Through qualitative (ethnography) and quantitative (competitive analysis) research, we explored the real stories and challenges faced by individuals with disabilities when navigating the travel booking process. Our findings revealed a critical gap in accessibility, transparency, and support, which became the foundation for designing Intra—a platform that empowers all travelers.
🌍 1. Lack of Clear Accessibility Information
Challenge:
-
Accessibility features are hidden, vague, or incomplete - forcing users to rely on forums and word-of-mouth for accurate information.
-
Platforms use ambiguous terms like "wheelchair-friendly" without providing specifics
Impact:
❌ Users feel uncertain and frustrated, leading to last-minute cancellations and disruptions.
❌ Travelers spend extra time double-checking by contacting hotels or other travelers.
Design Solution:
✅ Detailed, Transparent Accessibility Filters – Intra provides comprehensive accessibility reviews and filters, allowing users to find accommodations that meet their specific needs with ease.
Key Quotes
"I travel 2,000 miles, only to realize the place wasn’t accessible." (#44)
"Hotels claim they are ‘handicap-friendly,’ but most have stairs or small elevators that don’t fit wheelchairs." (#40)
🩹 2. Complicated & Inaccessible Booking Process
Challenge:
-
Most booking platforms are not designed with accessibility-first in mind.
-
Limited or inconsistent digital accessibility features make booking difficult for users with physical and cognitive challenges
Impact:
❌ Users face cognitive overload from unclear information.
❌ People with limited mobility struggle with small buttons, complex navigation, and long booking flows.
Design Solution:
✅ Seamless, Intuitive, and Inclusive Design - We prioritized large buttons, adjustable text sizes, speech-to-text, and clear navigation to create a user-friendly experience across all devices.
Key Quotes
"I find it really difficult when I try to plan a holiday, so many difficulties." (#22)
"I'm having trouble finding tour companies specializing in accessible travel." (#18)
🎭 3. Mistreatment & Poor Communication
Challenge:
-
Staff ignorance and poor communication about accessibility needs cause frustration and humiliation.
-
Lack of empathy in customer support results in exclusion and negative experiences.
Impact:
❌ Users feel mistreated and excluded, which discourages future travel.
❌ Miscommunication leads to booking errors and unmet accessibility needs.
Design Solution:
✅ User Education + Accessible Support - Intra integrates clear communication, accessible support features, and user education to ensure staff and travelers are equipped to meet diverse needs.
Key Quotes
"Being paralyzed gives me added challenges, but I get satisfaction from overcoming them!" (#10)
"My husband is in a wheelchair, and we faced staff ignorance during a ferry ride despite prior notice." (#50)
02 DEFINE PHASE
🛠️ Crafting Clarity from Complexity
After gathering extensive research insights, we transformed raw data into clear problems, user needs, and design objectives. This phase was crucial in shaping Intra’s human-centered, accessible travel booking experience.
👥 Understanding User Profiles & Their Journeys
To truly empathize with our users, we created four detailed user personas based on our research. Each persona represented different abilities, travel motivations, and challenges.
-
Alex (Wheelchair User):
-
Struggles with booking accessible hotels and transport. Needs clear accessibility details and seamless navigation.
-
-
Samantha (Visually Impaired):
-
Relies on screen readers and voice assistance. Needs audio features and high-contrast visuals.
-
-
David (Limited Mobility):
-
Avoids places with steep inclines. Needs easy-to-filter accessibility options.
-
-
Emma (Caregiver):
-
Books for her father and requires trustworthy accessibility reviews to ensure a smooth experience.
-
🎯 Impact: These user profiles helped humanize our design decisions, ensuring every feature solved real-world pain points.
💡 Key Problem Statements: HMWs
Based on our research, we framed "How Might We" (HMW) questions to reimagine and enhance the hotel booking experience.
🎯 Impact: These HMW questions guided brainstorming sessions, pushing us to think beyond surface-level solutions.
How Might We Provide an Easier Booking Process?
How Might We Offer a More Considerate Booking Experience?
How Might We Prevent Errors in the Booking Process?
How Might We Display Sufficient Details Without Overwhelming Users?
🚀 Establishing "Jobs to Be Done" (JTBD) Framework
To further refine user needs, we used the JTBD framework, ensuring that every design decision aligned with users' travel goals.
-
Booking with Confidence
-
Users need accessibility details that are transparent and easy to find.
-
-
Exploring Accessible Locations
-
Users need a way to filter and plan their trip around accessible places.
-
-
Convenient & Inclusive Travel
-
Users need an intuitive, fast, and reliable booking experience.
-
-
Efficient Booking Despite Health Challenges
-
Users need a system that minimizes cognitive and physical effort.
-
🎯 Impact: These objectives ensured Intra was designed to simplify, not complicate, the travel experience.
✨ The Outcome of the DEFINE Phase: Accessibility from Definition to Implementation
By the end of this phase, we had a clear vision of what Intra needed to be an accessible, intuitive, and empowering travel booking experience. Accessibility is identified and prioritized as a fundamental principle based on research insights which directly influenced our design process, ensuring every feature mitigates real user needs.
💡 The findings from user research highlight the diverse needs of individuals with disabilities, older adults, and others requiring inclusive design considerations. This phase ensures that accessibility is not an afterthought but a core priority in shaping the design objectives.
Key questions such as "How might we make booking seamless for users with different abilities?" and "What accessibility challenges exist in current platforms?" guide the design direction.
03 DESIGN & DEVELOP PHASE
Crafting a Seamless and Inclusive Travel Experience
After deep research and defining user needs, the Design & Develop Phase brought Intra to life. This stage focused on transforming insights into a functional, user-friendly, and accessible travel booking platform.
My favourite part, was the collaborating and sketching with team members to visualize abstract ideas for Intra's travel booking system.
-
Objective: Ideate, initial concept design, and interaction exploration. Explore endless design possibilities 🎨.
Responsive Across Devices
-
Objective: Tailor to different devices for optimal user experience.
-
Actions: Defined a responsive plan ensuring a seamless experience that adapts across 🌐 Desktop, Tablet, and Mobile so users can browse and book their travels on all devices.
Each member was in charge of breakpoint screen size and booking section.
I was the lead designer for the
-
Tablet device was chosen for usability, and portable format ideal for users seeking to book detailed hotel information while on the go.
-
Accessibility Settings Design: For customizability and optimal booking experience.
✏️ Hand Sketches: Shaping Ideas & Concepts
My Design Decisions in a Nutshell: For Better Visibility, User Experience & Interactions.
I explored various layouts to accommodate different accessibility needs. From portrait to Landscape Shift: Initially, I designed the tablet interface in portrait mode. However, considering user comfort during the 3D view, with team feedback I decided to pivot to landscape.
-
User Comfort: More users prefer landscape mode for enhanced comfort.
-
More Space in Landscape: Allows for more white space, larger text, icons, and buttons, ensuring easy navigation.
-
Optimizing 3D View: Recognized the need for a 3D view, aligning with user expectations for a seamless interaction in the tablet interface.
✍🏻 More Sketches, Iterations & Annotations
After many paper sketches. I transitioned to sketching on my iPad using Procreate and went through 3 more design iterations for continuous improvement and refinement.
1. Hotel Booking Page
Action & Purpose of the Page
This page is when users selected a hotel to choose and book their rooms and select additional services they want.
Will be a base interface for hotel CMS.
Team Feedback on Designs
-
Room selection should indicate that it is a scrollable list.
-
It might be a bit too crowded on the bottom.
-
Place the chatbot somewhere else.
Final Design Decision: Iteration 3
After hearing feedback I designed iteration 3 and made it Is less confusing. Iteration 3 design sections are more structured and clearer to navigate.
2. Settings Page
Action & Purpose of the Page
Adjustable settings appear when the hamburger button is pressed. Users can change brightness, text size, sound, language and currency.
Team Feedback on Designs
-
If users need to change settings of brightness, text size and sound, users will have to tap and go to a new page to change their preference - Too many steps.
Final Design Decision: Iteration 3
From feedback I designed iteration 3 and implemented a split view for a more easy experience. As it requires fewer steps and taps. With a selection indicator for clarification. Users don't have to go to a new page to adjust.
3. Chatbot Page
Action & Purpose of the Page
Increase customer support and service. Assist users in choosing the right room. Able to ask specific questions and provide detailed info.
Team Feedback on Designs
-
What if the user forgot what they want to ask, they would have to close the chatbot look back at the hotel page and open the chatbot again and ask.
Final Design Decision: Iteration 3
I design iteration 3 based on feedback received. Hence I decided to design a split screen so users don’t have to go back and forth.
4. Photo Gallery Page
Action & Purpose of the Page
Photos are the best way to show the benefits of the hotel. Help users choose the right hotel. Select any image to show the photo gallery.
Team Feedback on Designs
-
Users might be confused with the other feature - the 3D view. No dots.
-
Like as the list of views of the hotels and the indication of where the user is viewing.
Final Design Decision: Iteration 3
The first iteration used the same design as the 3D view page, so to differentiate itself, I decided to design different design, to prevent confusion. I used a carousel to save space it's also intuitive and easy to use and navigate.
🔄 Wireflows: Connecting the Dots & Flow of User Interactions
-
Objective: Illustrate user interactions and journeys for clear navigation and accessibility across devices. Ensure a seamless and intuitive flow across the booking process.
-
Strived for an efficient, logical, and enjoyable journey for users from exploration to confirmation.
🌐 User Flow: Navigating Accessible Booking Experience
-
Objective: Meticulously designed a journey that prioritizes clarity, ease of use, inclusivity and user-friendly experience.
-
Action: We had lots of brainstorming collaboration sessions and listed features, steps, and pages for our design flows. This ensures a purposeful and efficient navigation experience.
We envisioned Intra eventually covering searches and bookings for Hotels, Flights, Restaurants, Transport, and Activities. Due to time constraints, we decided to prioritise hotel booking for initial development.
Let's embark on a step-by-step exploration of how users navigate through our platform:
My Responsibilities
-
My sections had the most features thus I had to consider my design decisions and user flow, navigation more.
-
I was in charge of creating the Settings page thus I had to design the design systems and create the components for the other devices to use to ensure responsiveness and consistency.
-
Mapped seamless navigation from hotel selection to checkout.
-
Ensured error prevention, minimal steps, and an intuitive experience.
⭐ Accessibility-First UI Design: Setting Clear Design Objectives
With a strong understanding of user struggles, we defined Intra’s core design principles to ensure seamless, accessible experience and onboarding booking process. Accessibility is executed and implemented through intentional UI and UX decisions. Thus by ensuring accessibility is embedded from the Define Phase to the Design Phase, Intra creates an inclusive travel booking experience that empowers every user, regardless of ability.
The research insights gathered in the Define Phase translate into practical design solutions, such as:
Visual Clarity & Usability
Followed the WCAG guidelines, including adjustable text size, brightness, and screen reader support. Accessible fonts, contrast and colour ratio.
-
Why: To enhance readability for users especially to include people with visual impairments.
Minimal Cognitive Load
Concise and digestible information, clear instructions, and appropriate language..
-
Why: Prevent information overload for users with fatigue, short attention spans. Ensure overall clarity and respectful communication style.
Inclusive Interactions
Include features like text-to-speech, speech-to-text and sound notification feedback.
-
Why: Assist users with poor hearing, hand coordination challenges, limited vision and difficulty reading.
Seamless Navigation
Simple and straightforward flow for effortless booking. Consistent navigation and smooth transitions in process.
-
Why: Minimize confusion for an overall positive experience.
Error Prevention
Ensure users can review accessibility details before booking to avoid bad experiences.
-
Why: Create user-friendly experience to reduce steps, clicks, cognitive load, and chances of errors for all users.
Bigger Buttons & Target Size
Ensure easy clicking, interaction experience. Have big and visible buttons for everyone.
-
Why: Assist users with weak arms, trembling hands, and visual impairments to easily press.
Reviews & Trigger Caution
-
Objective: Provide clear instructions and tooltips. Alert users about potentially distressing content or bad experiences.
-
Why: Ensure users are emotionally prepared and feel safe when using Intra to book and travel.
Grid Layout: Responsive Design Across Devices
We developed a flexible grid system ensuring a seamless experience on mobile, tablet, and desktop. We decided to utilize this standard set of grid systems for flexibility and alignment. This was critical in ensuring we could design and build quickly and consistently.
🎨 Design System: Crafting Visual Identity & Consistency
👍 To Prevent Duplication of Efforts, Leads Quality Work at Efficient Speeds Shared Across Devices.
✨ Logo
The Intra logo is a testament to our commitment to inclusive travelling. With a royal purple hue, the logo spells out "Intra," short for "Inclusive Travel".
📖 Typography: Helvetica Neue - Readability
-
After researching the most accessible font we decided to use Helvetica Neue as our primary font as it's recognised for its high legibility and web-safe experience.
-
We adopted the Major Third (1.250) type scale to enhance hierarchy and readability for diverse screen sizes, it elegantly organizes content, making it a design winner.
🎨 Colour Palette
We chose purple because the contrast ratio of the colors, texts and elements are higher than 4.5:1. Additionally the color purple is associated with disability accessibility and inclusion. It's used to symbolize solidarity, respect, and a commitment to equal opportunities for people with disabilities.
-
We followed the 60-30-10 Rule to create a sense of balance and ensure users' eyes move comfortably from one focal point to the next.
-
Primary Colours: Shades of Purple:
-
For contrast with colour text.
-
Each shade serves a purpose such as chatbot bubbles, active buttons.
-
-
Basic & Grey Shades: To differentiate different levels of hierarchy such as backgrounds. showing states of buttons and slide bars.
-
Indicator Colours: To guide users, conveying meaningful insights such as warnings status, ratings ect.
🖲️ UI Components: Icons, Labels, & Buttons 🌟
I was the lead designer for the UI Components and Intras Design System:
-
Icons: Crystal clear, intuitive, and universally recognizable icons to reduce cognitive load and confusion.
-
Labels: Accompanying icons, and labels find their home either on the right side or bottom, ensuring clarity in navigation.
-
Button States: Wider buttons mitigate errors, fully rounded with a radius of 25 or 9 (device-dependent). Coloured buttons signify states and CTAs, with Moderate Purple leading the charge.
05 DEVELOP PHASE | HI-FIDELITY PROTOTYPING
🚀 Creating a Functional, User-Centric Experience & Interactive Prototype 🖥️
Objective:
-
Create a visually appealing and functional robust prototype that seamlessly integrates inclusivity into every detail.
-
Make it as realistic as possible.
-
Ensure to incorporation of visual richness, and refining of user interactions and overall design.
📝 Usability, A/B Testing, Heuristic Evaluation: To Validate Accessibility & Iterate Design Decisions
Objective: To gain valuable insights and feedback to improve and identity areas to refine, enhance usability by assessing the effectiveness and ensure our design aligns with user needs to avoid errors and confusion. Improve the usability of our user interfaces by identifying and addressing common usability issues.
Tested with 3 Real Users & 3 Designers
Our tests are based on Jakob Nielsen's 10 Usability Heuristics for interaction design, unveiling insights from various perspectives.
-
We tested with a diverse audiences: From travel lovers to industry experts and UX/UI designers.
-
Additional A/B Testing: During the high fidelity prototype I designed more iteration designs and design variantes to test, to allow me to understand user preference and validate my designs and iterate based on user needs.
07 IMPLEMENTATION
🛠️ Design Iterations Made Based on Testing & Feedback 🗂️
🔧 Despite the positive feedback there were major design changes & decisions made. Here is a glimpse of the changes made:
1. Hotel Booking Page Iterations
1.1 Reservation Calendar
Feedback from Testing
-
Distraction, can't concentrate.
-
Too over whelming.
-
Messy.
Final Design Decision:
To solve the issues from testing, I decided to change whole design and use a modal/background overlay. This solution creates
-
Clearer way for users to know how to use it.
-
Fewer distractions.
-
Straightforward Call to Action button.
-
Splitting up tasks into smaller steps.
1.2 Button Design Iterations
For this design I actually did A/B testing and tested 3 different design options as I wasn't sure which was best.
-
Option 1: Small Plus Minus Buttons
-
Option 2: Dropdown List
-
Option 3: Bigger Plus Minus Buttons
Feedback from Testing
Option 1
-
Hard to tap.
-
The button is too small.
-
Hard for people with disabilities to tap.
Option 2
-
The drop-down list would be an inconvenience to select and doesn't work or look good in a card design.
-
Blocks the view, will have to scroll for the number.
Final Design Decision: Option 3
With all the feedback received, I decided to go with Option 3 and did some adjustments in the design based on research.
-
For bigger target and touch areas I had to make sure that the buttons are 44 pixels wide and 44 pixels high to be easily tapped by users
Feedback from Testing:
-
Users thought this design was better than the drop-down as it’s more direct.
1.3 Additional Designs for Seamless Experience
Things I thought would be nice to add to the design for better user experiences.
Showing Hotel Service Provided
Added more information for clarification about what the hotel provides
-
Used intuitive labels with familiar icons to provide extra information and clarity.
Currency List?
Initially I thought it would be convenient to provide a currency drop down menu for users to allow users to easily change to their currency and or compare currency prices. So I tested if that's the case
I was wrong from feedback from testing:
-
Users suggested removing the currency selection as there is already one on the settings page.
Adding Words & Removing Components
For more clarity for users to avoid miscommunication I added a few messages. Including
-
Children age limit
-
Rooms are costs Per Night
I also decided to remove the Room section as the rooms will be selected in the Choose Your Room section instead of the Top. This will avoid confusion and give more space to breathe.
'Select' CTA Button Animation
I decided to make the process even clearer for the user I added a button animation.
-
To help user confirm their room selection. With indication in the footer.
-
For better feeback.
2. Chatbot Page Iterations
2.1 Split Screen - Card Desgin
The orginal Hotel Booking Page especially the card design won't fit in a split screen or it will be too scramp so I need to redesign the whole layout to be more responsive.
Feedback from Testing
-
Need to redesigning the card,
-
Hard to read with the smaller text
-
The card will overflow the split screen.
-
The dropdown list is hard better to use counter buttons.
Final Design Decision
Based on feedback, considering size and space I decided to repositioned the card direction and changed card layout.
-
From a horizontal to a vertical view.
-
Fits the split section without changing the size of the components and font sizes.
-
Better scrolling experience
Subtle Changes:
-
Image iCon size bigger for users to tap
-
Changed to more intuitive icons
-
Changed buttons to Plus & Minus Buttons
2.2 Chatbot Design
These changes were based on research and what I observed from other platforms to make user experience as real as possible
Design Added & Design Decisions
-
Removed Icon: For less distractions and more header space as the bubble already has the picture so it's not needed to have another on top.
-
Change Chat Bubble Design: The sharp edge from top to bottom. Make it more familiar and intuitive.
-
Re-implemented Chat Options Section
-
Less typing will be needed if users want to ask common questions.
-
-
Used Minimal Icons (Send Button)
-
A larger with less detail icon button, so it’s large enough to be easily tapped.
-
Better finger precision to prevent errors
-
3. Settings Page Iterations
3.1 Settings Control
For the settings page I made some design decisions based on feedback as well as what I thought would be better.
Feedback from Testing
-
Unrealistic volume settings can be deleted because you can directly adjust the volume on the devices.
-
Consider eliminating screen brightness and sound.
Final Design Decision
Resized Left Panel (Navigation)
-
Allow more space for the right panel (settings). So settings can more spread out, less crowded and overwhelming.
Removed Volume Settings based on user feedback
Additional Design Considerations:
Applied CTA Button Animation
I decided to make the button show a little animation for better feedback and an indication for users that the setting has been applied.
Additional Design Considerations:
Settings Control Indicator & Slider
Compared to the wireframes
-
I thought the old design might make it very messy and strain users eyes as the number and bubble follows the finger as they slide it. so it's better to make the number stay in one position which is great for alignment and clean look.
Added Currency Page (Same layout as the Language Page)
-
Users may be from anywhere in the world allowing them to change currency and comparing prices is necessary.
-
Search bar for easy search.
-
Labels and icons for clarity.
4. 3D View Page Iterations
Feedback from Testing
-
An unrealistic floor plan needs to account for furniture.
-
Don't know the purpose of the floor plan, it's unnecessary.
Final Design Decision
-
I decided to remove the floor plan for less confusion and complicated.
-
Added Instructions before using the feature.
-
Teaches users how to use the 360 view feature.
-
Ensure user is not going in blindly. For clarity added a touch icon modal before using the feature.
-
-
Added a section indication
FINAL PROTOTYPE + RESULT
🎨 Final Designs
User Flow
🚀 Final Figma Prototype:
🚀 Next Steps: Building Tomorrow's Inclusive Travel
NEXT STEPS
1. Implementation Rollout:
-
Real-World Launch: Transitioning from prototype to a live platform, unveiling Intra to the world for tangible user interactions and community impact.
-
Work with developers, and get investors.
2. Continuous User Feedback:
-
Feedback & Testing Loop: Establishing channels for continuous user feedback, ensuring real-world usage insights continually refine and improve Intra's design.
-
Plan to test with people with diabilities, people in the travel industry and designers to ensure it's fully accessible by adding more accessiblity settings.
3. Adaptive Evolution:
-
Agile Adaptations: Remaining agile, Intra will adapt and expand features in response to user needs and emerging technologies, pushing the boundaries of accessible travel.
4. Community Collaboration:
-
Inclusive Community: Forging partnerships with user communities, disability advocates, and travel industry stakeholders to foster a truly inclusive travel ecosystem.
-
Create Awareness for the travel industry to use and input their hotel details in our platform.
🎓 Lessons Learnt: Reflecting on the Intra Journey 🌈
MY REFLECTION
The Intra project offers many lessons, blending creativity, empathy, inclusivity, leadership, and continuous learning. We reflect the insights gained from users led the path forward, inspiring future projects dedicated to breaking down barriers and creating a more accessible world for all. 🌍✨
Prioritizing Accessibility (WCAG):
Navigating the complex world of WCAG accessibility standards became a cornerstone. Intra's commitment to inclusivity meant learning and implementing these features seamlessly.
Guiding the Team to New Heights & Skills:
As the team wasn't familiar with Figma, design thinking, and UX/UI presented an opportunity to lead and inspire I assisted and supported them in navigating these complexities to enhanced the collaborative process.
Continuous Skill Enhancement:
Intra was also a personal growth journey, enhancing my UX/UI and Figma skills. Each challenge became an opportunity for improvement, and the iterative process strengthened my expertise and design skills.
A Shift in Perspective: Desk Research Findings
We dove into real-life travel stories, expecting to find caution and hesitation. Instead, we found resilience, determination, and adventure.
-
A woman, paralyzed from the chest down, wrote about her determination to explore the world despite every obstacle thrown at her.
-
A man who lost mobility in a motorcycle accident had visited 22 states and four countries with his wife.
-
A soldier, injured in a scaffolding accident, struggled with his new reality until he joined a ski trip with Blesma, an organization for limbless veterans. That trip changed his life.
People with disabilities aren’t scared or avoiding to travel because they don’t want to go. But because of the lack of accessibility when traveling and extra booking and considerations needed.
🔍 Research Begins: Looking for Answers
With this newfound understanding, we needed more proof, more data. We needed to find the pain points. We framed clear research objectives to guide our design:
-
Explore the daily and travel challenges of people with disabilities.
-
Understand travel motivations and how travel impacts confidence, independence, well-being, emotions and frustrations they experience.
-
Analyze demographics, including age, income, and disability types, to tailor solutions.
-
Identify barriers in the booking process (What exists, what’s missing, and what can be improved).
-
Compare experiences between able-bodied travelers and those with disabilities to identify pain points.
-
Mitigation Strategies: Explore strategies to assist with challenges and ways to make travel booking inclusive - Competitive Analysis.
01 RESEARCH + EMPATHISE
📖 How Intra began: A Research-Driven Journey
👀 The Problem We Didn’t See Until We Listened
We first need to understand the landscape of inclusive travel, the problem and user needs. It all started with a simple question:“Why isn't travel easy for everyone? Who does it affect? and How might we help mitigate the challenges faced?” At first, we assumed the biggest challenge for travelers with disabilities was lack of desire due to medical and health conditions, mobility issues, or recovery from serious injuries would make travel less of a priority. We were wrong!
🌏 Initial Exploration in Understanding Diverse Disabilities
We focused on specific disabilities to gain a comprehensive understanding of different needs. We explored Autism, Dyslexia, Acquired Brain Injury, Mobility Loss, Elderly but we then realized that travel barriers weren't just about disabilities, they extended to a much broader audience. So we then researched on other possible stakeholders including, pregnant travelers, budget-conscious individuals, cultural diversity considerations, people recovering from injuries or illnesses.
📌 Design Constraints Considered
We addressed physical, cognitive, and emotional limitations to build a platform that meets a diverse range of needs:
🧩 Bringing It All Together
Our research revealed that accessible travel is not just a luxury - it’s for everyone. Through Intra, we address the most pressing barriers and provide a platform that:
✅ Empowers Users – Travel is a way to regain independence and joy, and Intra ensures users feel confident in their journey.
✅ Simplifies Accessibility – Transparent filters and intuitive design make it easy to plan trips without the burden of extra research.
✅ Fosters Inclusion – We prioritize education, support, and clear communication to create a safe and welcoming experience for all.
Intra is more than a booking platform - it’s a tool to accessible travel and open the world to everyone. 🌟
