User Interviews
After creating my hypothesis, I set up interviews with potential users to get a clearer picture of what was missing from their travel experiences. To start I interviewed three people.
The initial hypothesis was that there would be a desire for an app focused on last-minute travel plans.
Interview Questions:
How often do you stick to a pre-arranged travel plan?
In the past what were the main causes of disruption to your travel plans?
What information do you wish you had readily available while traveling?
Have you used travel apps before? Why/Why Not
If so, what features do you wish were available?
What causes you the most stress when traveling?
What causes you the least amount of stress when traveling?
After conducting these interviews I discovered that the primary focus should be accessibility settings, whether that be for physical or financial concerns.
The Objective
To design a responsive web app for location-based recommendations that meets the requirements of its users and solves the problems they face with existing location-based recommendation apps.
Target Audience: users who need an accessibility-first platform
The Problem: creating a responsive web app that caters to diverse travel experiences
My Role: UX/UI Designer
Solutions: Accessible Color Palette, Familiar Interface, and Robust Accessibility Settings
Tools: Figma, Paper Prototyping
Defining My MVP
Features:
Settings Page with Accessibility Toggles
All icons and images include alt text
When I edit my settings I want to confirm my accessibility needs so I can find travel activities I can do.
Rational:
The site will be miles more effective with permanent accessibility toggles
Features:
Travel icons for foot, public transit, or car, or if its a mix
When travel info is clicked it shows a breakdown of the exact cost of different options
When walking info is engaged it shows icons for flat surfaces, uphill, downhill, or hilly
An accessibility bar showing different accessibility icons displaying what is available at each location
When I need to travel to my destination I want to compare transit options for my budget.
Rational:
On-sight info about travel options
This allows the screen to not be too cluttered while offering necessary info
So that valuable information is given regarding walking
Elevator, escalator, ramp/benches/etc
When I see an activity I’m interested in I want to see if the accessibility requires calling ahead of time so I don’t show up just to be turned away.
Features:
A call indication if accessibility to a location needs pre-arrangement with the site
Rational:
Necessary information for anyone who needs mobility aids provides
When I am traveling I want to see the daily forecast so I can see recommended activities for the current weather.
Features:
Weather forecast integration
Generated travel itineraries related to weather
Rational:
Activities accessible in mild weather are not during harsh weather
Extrapolating User Flows
Project Mood board
I ended up inspired by bullet journals. Bullet journals have a lot of fun and fresh title blocks and aesthetic styling that make planning fun.
I also went for this orange and blue color palette because it compliments the energy the project was aiming for, as well as is one of the most accessible color palettes.
Wireframes
Low Fidelity Wireframes followed my user flows
Methodology: Crazy Eights
Paper Prototyping allowed me to create many iterations without getting overly invested in one idea
After choosing my favorite iterations they were made into paper prototypes and used for another round of user testing
User Testing
Before heading into more complex designs, I created paper prototypes and did another round of user testing.
Aims: To discover any pain points in my current flows
Test Subjects: A new round of potential users, with experience needing accessibility settings
Methodology: Remote screen sharing and video call
This round of testing was extremely useful. Users uncovered valuable insights relating to pain points, areas that could use more depth, and areas that were working well.
UI Design
After this round of testing, I began working on my responsive designs in Figma.
Visual Style:
Fun, engaging, and inspiring
Incorporating bullet journal stylings
Responsive web app, designed at 4 breakpoints
Designs with accessibility in mind
Appealing to disabled users without a typical sterile feel most accessible designs lean towards
