The Beginning
A mutual connection introduced me to the Travela team with a simple brief: refine their customer experience and strengthen the overall product journey. Travela had a clear vision to make travel planning in Bangladesh feel modern, intuitive, and trustworthy.
When I reviewed the existing app, the opportunity was immediately apparent. The core functionality was solid, but the experience felt dense and visually dated. Screens competed for attention, navigation wasn’t always intuitive, and the booking flow required more effort than users were willing to give.
My responsibility was to redesign the mobile experience into a streamlined, cohesive, and user-friendly product - one that reduced friction, improved clarity, and presented Travela as a brand travelers could rely on.
Instead of deep research reports, I focused on what mattered:
• Users struggled to find the right Homes, Rooms, and Hotels quickly
• Filtering felt heavy and unclear
• The booking funnel included unnecessary steps
• Payment screens didn’t visually build trust
• Mobile and web used different patterns, causing confusion
• Faster scanning and decision-making
• Clear, predictable navigation
• Stronger visual hierarchy
• A unified design language
• A checkout experience that feels safe
Discovery
Before touching Figma, I spent time understanding who we were actually designing for. Through user interviews and competitive analysis, a few things became clear:
Most booking platforms felt imported and loosely adapted. Language support was inconsistent, and local payment methods were often an afterthought.
Users had been burned by unclear pricing, hidden fees, and slow service. Transparency mattered more to them than fancy features.
Most users engaged with Travela on their phones - often on unstable internet, so the experience needed to be fast, lightweight, and resilient.
The main frustrations fell into three areas: confusing booking flows, unclear trip and policy information, and concerns about payment safety.
How might we design a mobile experience that feels transparent, trustworthy, and effortless for Bangladeshi travelers - while standing strong against international competitors?
Strategy
prioritize clarity, reduce cognitive load, and build a visual hierarchy that guides users without overwhelming them.
Show people what they need when they need it - not everything at once. The IA mirrors how travelers naturally think and plan.
Travel should feel exciting, not stressful. The design system stays flexible and warm while maintaining consistency across the mobile experience.
Optimized for inconsistent connections. Every interaction is built for speed, clear feedback, and gentle recovery from errors.
Design Process
Research & Discovery
User interviews, competitive analysis, and mapping the biggest pain points in today’s booking experiences.
Sketching & Wireframes
Mapping different booking flow structures and testing assumptions through paper prototypes.
Design System
Building a flexible component library with Bangladeshi users in mind - from colors to iconography.
High-Fidelity Screens
Creating the final mobile experience with microinteractions and seamless transitions.
Exploration
I started with quick sketches to explore different ways of structuring the booking flow. Should destination selection come first, or should inspiration lead the journey? How many steps could we remove? Early wireframes went through multiple iterations - initial versions tried to do everything at once, packing filters, recommendations, reviews, and comparisons onto a single screen.
I initially hid pricing details in a separate tab, thinking it would reduce clutter. Users found that suspicious. Pricing needed to be visible immediately, not on request.
The clear version :
At this stage, I created a set of high-fidelity mockups based on all the insights from the usability studies. These represented a clear picture of the final product.
These are a high fidelity design that represents a final product
I designed all key app screens using the finalized typography, color system, and iconography, and built the full component library needed for production. The goal was to present the Travela experience in a clear, polished, and implementation-ready format.
Design Details That Matter
Color styles as secondary color palette for your branded project. Sourced from Tailwind CSS documentation.
The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc.
#DF146D
coral-pink-50
#FDECF4
coral-pink-100
#F8B4D2
coral-pink-200
#F485B5
coral-pink-300
#F05699
coral-pink-400
#ED3182
These colors are used as supporting secondary colors in backgrounds, text colors, separators, models, etc.
neutral-900
#1A1819
neutral-500
#666870
divider-50
#E5E5E5
divider-100
#DF146D 16%
Success
These colors convey the feeling of caution. Generally used across warning states.
success-500
#0FBE84
Desctructive
These colors convey an emotion of negativity. Generally used across error states.
destructive-500
#FF5A64
Warning
These colors convey an emotion of negativity. Generally used across error states.
warning-500
#FFC328
Generic come in black and white. Use these freely in your designs.
generic-white
#FFFFFF
generic-black
#000000
A set of harmonious typography scale with font weight variations. These text style perfectly fit for 4px grid and go well with each other.
Regular
Aa
Inter
Medium
Aa
Inter
SemiBold
Aa
Inter
Bold
Aa
Inter
Display
Font size: 48px | Line height: 64px
Heading H1
Font size: 36px | Line height: 48px
Heading H2
Font size: 30px | Line height: 44px
Heading H3
Font size: 24px | Line height: 40px
Heading H4
Font size: 20px | Line height: 32px
Display Paragraph
Font size: 20px | Line height: 32px
Paragraph Large
Font size: 18px | Line height: 32px
Paragraph Medium
Font size: 16px | Line height: 28px
Paragraph Small
Font size: 14px | Line height: 22px
Paragraph XSmall
Font size: 12px | Line height: 18px
Impact
The redesign delivered measurable improvements shortly after launch.
Balance user needs with business goals - neither works in isolation.
Cultural context matters; assumptions don’t.
Progressive disclosure consistently outperforms information overload.
Increase in booking completion rates During the first two months
Reduction in support inquiries Fewer “How do I book?” questions
Average user rating Ease and clarity consistently highlighted
Good design isn’t just about visuals - it’s about creating solutions that respect real people, real constraints, and real contexts.
Conduct follow-up usability testing on the new app iteration.
Identify any additional areas of need and ideate on new features.
