BACK TO PROJECTS
UX/UI project
BROKE AND ABROAD TRAVEL WEB-APP REDESIGN
2022/2023
UX/UI Design
Design system
Broke&Abroad is a vibrant and passionate startup in the e-tourisme industry. We truly believe that travel is an valuable investment in oneself. Our primary mission is to make travel accessible to individuals from all walks of life, particularly targeting in young public, by offering affordable and good travel plans accessible through our online platform brokeandabroad.com.
The platform is built to help our target audience have a personalised experience when searching for new travels that suit their individual needs and specific requirements. Through intuitive features and user-friendly interface, we aim to make the travel exploration process seamless and enjoyable.
BROKE AND ABROAD TRAVEL WEB-APP REDESIGN
Overview
Client
Broke and Abroad
Roles
UX Audit
UX Research & Design
Web Art Direction
UI Design
Interactive design
Design system
Hand-on to devs
BUSINESS NEEDS
Client request
The project is dedicated to transforming our existing website Broke&Abroad into a web-application optimized for various devices, especially desktop and mobile.The travel platform is dedicated to making travel accessible and enjoyable for everyone. We aim to elevate our platform to become the preferred booking website for travelers.
Project goals
Enhancing user experience to ensure an user-friendly, informative and transparent experience on website.
Creating an user-friendly and engaging ecosystem in order to reinforce the engagement and connection within our traveler community
Increasing the amount of member subscriptions and active users on website.
Enhancing the amount of trip bookings through our platform
We employed the 'User-centered’ design method to places the needs and preferences of end users front and center in the design process, helping us to break through the user experiences issues effectively.
DESIGN PROCESS
“HOW CAN WE ENHANCE THE USER EXPERIENCE OF PRODUCT TO BECOME THE GO-TO TRIPS BOOKING WEBSITE FOR TRAVELERS?”
Problematic and challenges
RESEARCH / EMPATHIZE
UX Audit the existant
We initiated the UX audit to initially evaluate the performance of the current website's user experience and content quality, while also formulating hypotheses to guide future user research. Some key problems sorted after UX Audit:
90% of users connect through mobile devices.
80% of users access trips through Social Media and Newsletter while 20% prefer accessing them via the website.
There's no distinction between the paths followed by free users and subscribed users.
The poor quality of UI
Unclear question about Onboarding and displaying contents.
Concurrents benchmarks: Airbnb, Voyageprivée, Fairemoove, Kayak, Skyscanner, Voyage Pirates, Eluxtravel
Stage 1
Before the redesign
User Research
( quantitative & qualitative research )
To gain deeper insights into our users and identify pain points within the product, we conducted quantitative and qualitative surveys to refine our customer personas and pain points.
From the UX Audit, 2 hypothesis emerged:
Hypothesis 1 : Users do not understand what the website can offer for them and they can easily abandon.
Hypothesis 2: Users lose interest when clicking on booking trips.
-> Result:
From our research surveys, we collected 172 user feedbacks and extracted key statistics to inform the development of our user personas.
Our 2 hypotheses have been validated by the research findings.
An experience map was built to clear out the challenges and pain points users encounter during their interaction with the platform.
Stage 2
User Personaes
From our quantitative research, i identified 2 primary user segments on our website: young professionals and students dealing with financial constraints or limited travel opportunities. By catering specifically to the needs of our audience, we’re committed to create an personal experience and to offer personalised travel options for them to embark an exciting adventure.
Target 1: Students
Target 2: Young professionals
Stage 3
After conducting and gathering data research, i created an user journey map to clarify the insights and point out the challenges faced by our product across the entire site.
User experience Map
Through user journey research, I identified key findings, revealing 3 main pain points faced by our current product
Pain points & Challenges
DESIGN / IDEATION
Stage 1
Enhancements insights
After identifying key insights and pain points on current website, I ideated design solutions guided by the following UX principles:
MOBILE-FRIENDLY DESIGN : To adapt increasing user neerds on mobile, I used a simple layout, collapsible and fixed menu dedicated for mobile interfaces to ensure easy tapability and appropriate spacing for touch interaction.
SEARCH FUNCTIONNALITY OPTIMIZATION: Expanding the range of tailored search options to enhance search result accuracy and elevate accessibility on user experience.
CONSISTENT AND UNIFIED INTERFACES: A unified and consistent design, creating a harmonious and recognisable experience for our audien
INFORMATIVE AND TRANSPARENT USER EXPERIENCES: The product should prioritize clarity in communication with users, ensuring a thorough understanding and fostering trust among both users and clients, especially for our booking process.
Wireframes
Based on our solution insights, we conducted zoning and prepared low-fidelity prototypes for each screen. This allowed us to establish a clear understanding of the page structure and identify the necessary blocks and sections.
Stage 2
SOLUTIONS & OUTCOMES
NEW ADVANCED FEATURES
Based on ideations and UX principles, we also developed new key features to optimize the user experiences on entire products and to foster the engagement for travel community.
UI Design
We moved on to developing the user interface design. In this phase, we established design components integrated into our UI Kit for easy implementation by developers. This ensures a consistent user experience across all devices.
We create also clickable prototypes, allowing rapid evaluation of usability and clarity. This process helps identify any issues before development, streamlining the process and ensuring a user-friendly final product.
SCREEN SHOWCASE
Desktop Version
Mobile Version
UI Kit
Typography
Intutive and organic typo
Color Palette
Dynamic and colorful
Design asset
CONCLUSION
+30% trip booking
The project has been successfully developed and operational since 2023. Feel free to check it out on brokeandabroad.com if you're looking for an upcoming travel plan that suits your needs. Since its launch, our work has resulted in more than 30% increase in the amount of trip bookings on our website.
WHAT I’VE LEARNT FROM THIS PROJECT:
This project was built from scratch, without any guidelines or orientation. As a result, I occasionally jumped into visual design without following wireframes , leading to inconsistencies and accessibility issues. This experience taught me the importance of following a step-by-step process to achieve effective and well-functional design outcomes.
Striking a balance between addressing business goals and accommodating user needs is a significant challenge. As an Product designer, conducting user research and test & iteration is important step to help us continuously refine our solutions, ensuring they not only meet business objectives but also resonate with and serve the needs of our users effectively.
Throughout this project, I had the opportunity to engage with various roles and steps, which expanded my perspective and skills in UX/UI design domain. It also reinforced my flexibility and adaptability to varying work processes.
