Safar Market

Bridging the B2B Expertise to a New B2C Market with Safar Market

Image
CASE TIMELINE

October 2018 — September 2019

BRAND

Safar Market | Tourism Marketplace

ROLE

Product Designer

NUMBER OF PAGES

~320 Pages

TECHNOLOGIES

Sketch App / Zeplin / Plant / Atomic Design / Market Research / Interview / Sketching / Wireframing

1. The Challenge:
From B2B Expertise to a B2C Marketplace

IRSA, with a decade of experience in the B2B travel industry, recognized the need for a consumer-facing platform. They envisioned Safar Market as a central hub where their vast network of travel agencies could connect directly with travelers. However, transitioning from a B2B to a B2C model presented several key challenges:

  • Diverse Product Offerings: Safar Market needed to accommodate 9 distinct travel product types, each with its own unique parameters, attributes, and booking flows.
  • Seamless User Experience: The platform had to be intuitive and easy to use for a diverse user base, including tech-savvy millennials and less experienced online bookers.
  • Scalability and Performance: With a projected user base of over 2 million annually, the platform needed to be robust, reliable, and capable of handling high traffic volumes.
  • Rapid Development Cycle: To meet the aggressive project timeline, we had to balance speed with quality, delivering initial designs quickly to jumpstart development while ensuring a well-researched and user-centric foundation.

2. Our Approach:
Agile, User-Centric, and Data-Driven

We adopted an agile design methodology, working in close collaboration with the development team. Our approach was rooted in user-centered design principles and a commitment to data-driven decision-making. Here's a breakdown of our key strategies:

Phase 1: Discovery and Research (4 weeks)

Stakeholder Interviews: We conducted 8 in-depth interviews with IRSA stakeholders, travel agency partners, and potential users to understand their needs, pain points, and expectations.

Competitive Analysis: We analyzed the UX/UI of leading travel marketplaces, including Skyscanner, Kayak, Wego, and Momondo, to identify best practices and opportunities for differentiation.

Market Research: We studied global and regional travel market trends, user demographics, and booking behavior to inform our design decisions.

Image
Phase 2: Define and Ideate (6 weeks)
  • Kick-off Meetings: We held workshops with the development team to align on product vision, prioritize features, and establish clear business journeys.
  • Persona Development: We created detailed user personas representing key target audiences, including "The Budget Backpacker" and "The Family Vacation Planner," to guide our design choices.
  • Sitemap and User Flows: We developed a comprehensive sitemap to define the platform's information architecture and mapped out key user journeys to visualize the user experience.
Image
Phase 3: Design and Prototyping (12 weeks)
  • Sketching and Wireframing: We started with low-fidelity sketches to explore layout options and quickly moved to detailed wireframes to define content hierarchy and functionality.
  • Visual Design: We developed a visually appealing and consistent design language that aligned with the Safar Market brand, focusing on usability and accessibility.
  • Rapid Prototyping: We used Sketch's prototyping tools to create interactive prototypes for early testing and validation.
Image
Phase 4: Testing and Iteration (8 weeks)
  • Usability Testing: We conducted 15+ usability testing sessions throughout the design process to gather feedback and identify areas for improvement.
  • Iterative Design: Based on user feedback and data analytics, we iterated on the design, making adjustments to improve usability, accessibility, and conversion rates.
  • Accessibility Audit: We conducted an accessibility audit to ensure that the platform met WCAG 2.1 standards and was usable by people with disabilities.
Image
Image
Phase 5: Design System Development (Post-Launch)
  • Atomic Design: We implemented a scalable design system based on atomic design principles, creating a library of reusable UI components.
  • Efficiency Gains: The design system reduced Sketch file size by 80% (from 350MB to 70MB) and streamlined the design and development process for future updates.
Image

3. Key Features and Design Highlights

  • Multi-Product Marketplace: Safar Market offers a wide range of travel products, including flights, hotels, tours, car rentals, and travel insurance, all accessible from a single platform.
  • Intelligent Search: A powerful search engine that allows users to quickly find flights, hotels, tours, and other travel products based on their specific needs and preferences. We implemented predictive search, filters, and sorting options to enhance the search experience.
  • Unified Booking Flow: A streamlined booking process that guides users through each step, from selecting their desired product to making a secure payment. We designed clear and concise forms, progress indicators, and helpful tooltips to minimize user errors and frustration.
  • Personalized Recommendations: A recommendation engine that suggests relevant travel products based on user browsing history, search queries, and preferences.
  • Agency Profiles: Dedicated profile pages for each travel agency, showcasing their services, ratings, and reviews, fostering trust and transparency.
  • Mobile-First Design: A responsive design approach that ensures a seamless experience across all devices, from desktops to smartphones.

4. Understanding Our Users:
Persona Deep Dive

To ensure that Safar Market met the needs of its target audience, we created detailed user personas. Here are two examples:

Image

5. User Flow Example:
Booking a Flight

To illustrate the user experience on Safar Market, let's walk through the process of booking a flight:

  • Step 1: Homepage: User enters origin, destination, and travel dates in the search bar.
  • Step 2: Search Results: User views a list of available flights, filtered and sorted according to their preferences.
  • Step 3: Flight Details: User selects a flight and views detailed information, including price, itinerary, baggage allowance, and agency reviews.
  • Step 4: Passenger Information: User enters passenger details (name, passport information, etc.).
  • Step 5: Payment: User chooses a payment method and completes the booking.
  • Step 6: Confirmation: User receives a booking confirmation email with all the necessary details.
Image

6. Results and Impact

  • Successful Launch: Safar Market launched successfully, becoming a leading online travel marketplace in Iran.
  • User Growth: The platform has attracted over 2 million users annually.
  • Positive User Feedback: User reviews and feedback have been overwhelmingly positive, highlighting the platform's ease of use and comprehensive features.
  • Increased Revenue for IRSA: Safar Market has become a significant revenue driver for IRSA, expanding their reach and market share.
  • Streamlined Design Process: The implementation of a design system has significantly improved the efficiency of the design and development process for ongoing updates and new features.

7. Key Takeaways

  • The Power of User Research: Investing in thorough user research early in the project was crucial to understanding user needs and ensuring that the platform was designed to meet those needs.
  • Collaboration is Key: Close collaboration between designers and developers throughout the project was essential for a smooth and efficient workflow.
  • Design Systems for Scalability: Implementing a design system was a game-changer, improving consistency, reducing design debt, and streamlining the development process.
  • Iterate, Iterate, Iterate: Continuous testing and iteration are vital for creating a truly user-centric product.

8. Conclusion

The Safar Market project was a challenging but rewarding experience. By combining agile methodologies, user-centered design principles, and a data-driven approach, we were able to create a successful platform that has revolutionized the way people book travel in Iran. This case study demonstrates the power of UX design to create impactful and user-friendly products that drive business growth and enhance the user experience.

Image
Image
Image
Image
Image
Image

Next project

IranSalary

Product Design — Website
Image