Alsharq travel
Revolutionizing Travel Planning with Personalized, Budget-Friendly Solutions
I was the sole product designer working with a small team to redesign a travel app for a community-based travel agency in Jeddah, Saudi Arabia. By digging deep into user and business needs, I was able to find win-win solutions to multiple issues.
Tl;DR
The mission
ALSHARQ, based in Jeddah, Saudi Arabia, offers a community-based travel agency that enables travelers to travel with ease of mind without worrying about budget, suitable accommodations, and exploring new places. However, their existing app had usability issues and lacked several key features that users needed. The app needed a redesign to better meet the needs of modern travelers, especially during uncertain times like the COVID-19 pandemic.
The outcome
A responsive app that meets current travel app best practices while being tailored to the ALSHARQ community. The new design addresses previous key issues (lack of flexibility, insufficient detail, and absence of price alerts), and aims for visual consistency and ease of use.
My Role
As the sole product designer, I owned ideation, strategy, and design. I presented ideas to and strategized with their small team (founders and customer experience) regularly. Here are things I did:
• Product Management
• User Research
• Ideation & Strategy
• UX and UI Design
• Usability Testing & Prototyping
• Branding and Illustration
Throughout, I consulted with engineers & stakeholders to assess technical feasibility.
ANAS ABUD
Problem space
But what does “better” even mean?
The ALSHARQ team wanted to create a travel app that married best practices with the specific needs of their clientele, helping them with their biggest travel pain points while working with the limitations of the current technology. They didn’t know what I should work on, or even how to prioritize. They just knew that something was wrong.
My game plan to figure out what needed to be fixed:
1. Know who I was building for (their needs, pain points)
• This meant sending out a survey to existing users and talking to a few of them.
2. Know the other stakeholders
• This meant understanding the nuances of the ALSHARQ business community, talking to travel agents and support staff.
3. Understand best practices
• Looking at comparable companies, see how they handle certain elements of the business.
4. Understand the current business and how it was performing
• This included a full app inventory, and a deep dive into data and analytics.
The goal was to have a solid research base to make assumptions about what was working and what wasn’t, all while keeping the needs of the users and players in mind.
KEY INSIGHTS
Here’s what I discovered.
No. 1: Safety was the top concern.
Safety emerged as the top priority for travelers, particularly in light of the COVID-19 pandemic. Users emphasized the need for comprehensive safety information and real-time updates on travel restrictions to feel assured about their wellbeing during trips.
No. 2: Lack of Flexibility
Existing travel platforms often lacked flexibility in travel plans, offering rigid packages with limited customization options. This highlighted the opportunity to design a feature that allows users to easily modify travel packages to suit their unique preferences and needs.
No. 3: Competitive Edge
ALSHARQ needed distinctive features to stand out in the competitive travel market. Real-time price alerts, robust package customization, and personalized recommendations were identified as potential game-changers to exceed user expectations.
No. 4: Post-Booking Support
Ongoing support before and after booking emerged as a priority for users. Features such as live chat support and comprehensive FAQs are essential for addressing user concerns throughout the travel planning and execution phases.
COMPETITIVE ANALYSIS
What are the current best practices in the space?
I broke the design down into key components (search functionality, package creation, user onboarding, etc.), and observed how top travel apps accomplished each step. I looked at top travel models like Expedia, Booking.com, and Skyscanner to see what was being done.
The biggest insight was that those competitors, catering to global audiences, had different priorities. Their main focus was often on providing vast options and advanced search filters. In comparison, ALSHARQ needed to simplify the user experience by offering curated travel packages and flexible customization options.
The Opportunity
What am I building?
What were we building? After doing the research and identifying the biggest pain points, the team and I agreed that these were the biggest opportunities:
1. Safety and Reliability:
• Highlight safe travel options and provide detailed safety information.
2. Flexibility in Travel Plans:
• Allow users to easily customize and adjust travel packages.
3. Simplified Information Hierarchy:
• Present information in a clear and concise manner to avoid overwhelming users.
4. Unique Features:
• Introduce competitive features like price alerts and package modes
From a visual perspective, I also knew I wanted to create more consistency—this meant rethinking typography and main components, and creating a more consistent icon set.
.jpg)
ux phase
Putting it all together
On every screen, I created research-based or best practice-based assumptions about what a user would need to see, and what could safely be de-emphasized. Every application of a best practice was deeply considered and not blindly followed, which meant that I intentionally deviated from those practices several times in the design. Each screen began with multiple iterations, slimmed down through debate and testing.
Some of the questions I asked myself during this stage:
- How can I help a user feel safe and informed about their travel options?
- How can I provide flexibility without complicating the user experience?
- How can I better display travel information to make decision-making easier?
UI Phase
The Solutions
Here are a few of the design solutions as they related to the discovered core problems.
Challenge No. 1:
Onboarding and Customized Travel Options
Key design decisions here:
• Personalized Onboarding Questions:
- During the onboarding process, we ask users a series of tailored questions to understand their travel preferences, budget, and safety concerns. This helps in creating a user profile that informs subsequent recommendations.
• Customized Travel Options:
- Based on the responses gathered during onboarding, the app suggests travel options that match user preferences. This includes preferred destinations, types of accommodations, and activity interests, ensuring a personalized and relevant user experience.
• Efficient Sign-Up Process:
- Inspired by dating apps, we designed a quick, efficient, and frictionless sign-up process. This reduces user drop-off rates and ensures that users can start exploring travel options without delay.
Challenge No. 2:
Safety Information and COVID-19 Precautions
Key design decisions here:
• COVID-19 Summary Page:
- We implemented a dedicated COVID-19 summary page that displays real-time data on active cases for each country. This helps users make informed decisions about their travel plans based on current health situations.
- Safety information is prominently displayed through visual cues and alerts, ensuring that critical information is easily accessible and not overlooked.
• Country-Specific Precautions:
- For each destination, the app provides detailed information on safety precautions, local health guidelines, and travel advisories. This includes mask mandates, social distancing requirements, and quarantine protocols, ensuring users are well-prepared and safe during their travels.
Challenge No. 3:
24-Hour Post-Booking Support
Key design decisions here:
• Comprehensive Help Center:
- To provide continuous support, we integrated a live chat feature that is available 24 hours a day. This allows users to get immediate assistance with any issues or questions they may have before, during, and after their trip.
- We built a detailed help center with FAQs, troubleshooting guides, and travel tips. This self-service resource empowers users to find answers quickly and easily, reducing dependency on live support.
- Users receive proactive notifications and updates about their bookings, including reminders, changes, and important travel information. This keeps them informed and reassured throughout their journey
Challenge No. 4:
Editable and Customizable Travel Packages
Key design decisions here:
• Flexible Package Customization:
- We designed a feature that allows users to edit and customize travel packages according to their needs. Users can adjust flight dates, choose different types of accommodations, and select or exclude activities based on their preferences
- customization process is streamlined and user-friendly, with intuitive controls and clear instructions. This ensures that even users who are not tech-savvy can easily modify their travel packages.
- Users can save multiple versions of customized packages and compare them side by side. This feature enables them to weigh different options and choose the best one that meets their needs and preferences.
Usability Testing
Welcoming Surprises
As designers, we all start out with an idea of how things will go, and sometimes we end up being surprised.
Here’s an example of how feedback shaped design:
Original:
We initially designed a comprehensive onboarding process, believing that detailed questions about travel preferences, budget, and interests would allow us to provide highly personalized travel recommendations. The onboarding included multiple screens of questions covering various aspects of travel planning.
Testing:
During usability testing, we observed that users found the lengthy onboarding process cumbersome and frustrating. Many users abandoned the process midway, feeling that it took too long to complete. Feedback indicated that users preferred a quicker setup that would allow them to start exploring travel options sooner.
Pivot:
Based on the testing insights, we streamlined the onboarding process significantly. We reduced the number of questions to focus on the most critical preferences, such as preferred travel destinations, budget range, and key interests. We also incorporated a progress indicator to show users how much of the onboarding they had completed, providing a sense of advancement and reducing frustration.
UI Phase
Branding and Visual Design
In designing the ALSHARQ travel app, the goal was to create a visually appealing and cohesive user experience that reflects the brand's values of elegance, trustworthiness, and modernity.
Here’s how I achieved that:
- Color Palette:
• Primary Color: Deep navy (#00044D) conveys sophistication and reliability, prominently featured in headers and key UI components.
• Accent Colors: Bright sky blue (#37ADFF) highlights interactive elements like buttons and links, ensuring they stand out.
• Secondary Colors: Rich purple (#444B94) adds depth without overwhelming users, while vibrant pink (#FB3780) and warm orange (#FEAB14) are used sparingly for call-to-action buttons and alerts. - Typography:
• Headings: Lora brings a touch of classic elegance, enhancing the premium feel of the app.
• Body and Small Titles: Montserrat offers a clean, modern look, ensuring readability and a sleek appearance suitable for detailed descriptions and informational snippets. - Visual Elements:
• Icons: Custom icons with clean lines and gently rounded shapes align with the app’s modern aesthetic, color-coded with the accent colors for easy recognition.
• Buttons and CTAs: Buttons use bright sky blue for primary actions and rich purple for secondary actions, maintaining a clear visual hierarchy. Vibrant pink and orange are reserved for urgent actions or alerts.
Lessons Learned / Next Steps
Being clear, keeping boundaries
There was a moment, as I was wrapping up visual design and showing the latest prototype to the team, that one of the team members piped in. “I realized belatedly that it would be really nice if we had somewhere to put the promos. It shouldn’t be too difficult I think.” Famous last words. (…it actually took me hours of rework.)
One of the biggest key points that I took away from this project is the importance of setting scope, putting it in writing, and holding to it. I had done that verbally during meetings but allowed scope creep, which made the project much longer than I expected.
This project is currently under development, although I am still helping with redlining. Already, we’ve significantly improved the user experience, making it easier and more enjoyable for travelers to plan their trips. Looking forward to seeing how it continues to perform!
