Beta Travels🛫
(Formally Skybound travel co.)
OVERVIEW
BetaTravels is a travel booking app concept designed to simplify the flight search and booking experience. The goal was to create an intuitive, and trust-driven interface that helps users find, compare, and book flights effortlessly without feeling overwhelmed by cluttered data or unnecessary steps.
.png)
ROLE
UI/UX DESIGNER
TOOLS
Figma — Interface design & prototyping
Illustrator — Logo & visual identity
After Effects — Micro-interactions
DURATION
3 Weeks
The Problem/Challenge
Many flight booking platforms overwhelm users with too many filters, pop-ups, and ads. The result? Frustration and booking abandonment.
I wanted to fix that by building a light, minimal, and human-centered booking experience focused on:
Quick search
Transparent pricing
Seamless booking confirmation
Design Goals
-
Streamline Search: Simplify the input process and present results clearly for easy comparison.
-
Ensure Transparency: Make pricing, flight details, and booking steps unambiguous.
-
Optimize Forms: Reduce friction in the passenger and payment information stages.
Research & Discovery (Understanding the Users)
My design decisions were driven by competitive analysis of major travel apps and common user pain points:
-
Frictionless Access: Users demand fast login methods (Social Sign-in) to minimize data entry on mobile, especially when in a hurry. (Reflected in the Login screen)
-
Information Hierarchy: Flight search results must instantly prioritize price and time, while seat selection must be visually intuitive.
-
Post-Booking Clarity: The final digital ticket (Boarding Pass) must be clean, scannable, and clearly display critical information (Gate, Seat, Terminal) under high-stress conditions.
-
Gate Stress: The final boarding pass must be high-contrast, easy to scan, and clearly display gate/seat numbers for high-stress airport environments.
Ideation & Design Process
The core flow was mapped to simplify the journey from search input to final access:
-
Search Input: Focused on large, tappable input fields to reduce fat-finger errors
-
Selection: Utilized consistent card components for scannability on the "Select Your Flight" screen
-
Seat Choice: Used a visual legend to clearly communicate seat availability and status
-
Checkout & Final Ticket: Consolidated all data into a clear summary screen leading directly to the accessible Boarding Pass.
departure/arrival times, layovers, airline logo, and price).
(Passenger Name, Seat, Gate, Terminal, Flight Number)
QR Code
Color
Primary Colour
#0078C1
Surface White
#FFFFFF
Subtle grey
#E0E0E0
Text/black
#1F1F1F
Typography
Aa
SF PRO
Key Interface Annotations
Login: Two-tab login (Email/Phone) and prominent 'Continue with Google' button address the need for frictionless access.
Flight Selection: Modular Cards allow users to quickly scan and compare flight variables (Price, Airline, Layover) before diving into details.
Choose Seat: Color-coded legend (Blue for Selected, Gray for Reserved/Emergency Exit) simplifies a visually complex task, reducing cognitive load.
Boarding Pass: High-contrast layout prioritizes the scannable QR code and critical flight details (Gate 41, Seat 2B) for rapid use at the airport gate.
Testing & Validation
Although this was a concept project, the design addressed predicted usability findings:
-
Problem Prediction: Users typically struggle with finding necessary details on a ticket screen (Gate, Seat).
-
Solution Validation: The Flight Information and Boarding Pass screens are highly distilled. Key data points are bold and given ample white space, validating the principle that information clarity outweighs density in travel apps.
Outcomes & Next Steps
-
Anticipated Impact: The intuitive flow and visual clarity are expected to reduce the time spent searching and booking by 25% and significantly improve user satisfaction with the post-booking experience.
-
Lessons Learned: The consistency of the card-based design system proved highly effective for handling different types of data (search inputs, flight results, profile fields) across the app.
-
Next Steps: Implement dynamic pricing alerts and design the full experience for the "Offer" section, integrating machine learning for personalized deals.
Conclusion
This concept study for BetaTravels successfully demonstrates the ability to manage complex data and user flows within the constraints of a mobile interface. By prioritizing simplicity in search, transparency in results, and clarity in forms, I designed an application that builds user confidence and drives successful bookings.
This project showcases expertise in e-commerce UX/UI and designing for high-stakes, data-intensive tasks.
Screens
