Nora Molnar-Ercsei
UX designer

Travel Agent Portal

The journey of designing a centralized Agent Portal system and creating an effective and fast booking process experience.

Project Background

My task was to create a self-service based Agent Portal system for our International client that allows Agent Users to make purchases of sports tourism packages for their customers.
I was leading the project with the help of the Experience Design Director and as a participant in the technical meetings, the Tech lead.

The main goals were:

  • Increase Sales and Ops Efficiency

  • To provide different order flows for Agent Users

  • To create a seamless booking process experience for Agents

  • Provide a better user experience by making it faster and more efficient

  • Manage the Agents in one centralized place

Software/Tools Used In This Project

  • Miro - Collaboration

  • Figma - Design

  • Google Applications(Google sheets, Google meet etc.) - Sharing or gathering information

  • Trello - Project & task management

  • Confluence - Documentation

  • Maze - Usability testing

Project phases: Discovery and UX sprints
Remote user interview

Remote user interview

Interviews & Workshops

During the discovery phase of the project, I conducted user and stakeholder interviews as well as workshops in order to get a better understanding of the problems and needs.

These sessions were online, as the client and the users were in Japan and I lived in New Zealand.

With stakeholders, we had an Alignment and Solution Co-Creation workshop, and with agents, we had in-depth interviews about their experiences, struggles, and needs and created empathy maps and user stories based on that.

The main takeaways were:

  • As there is no self-service option currently, that means agents have to jump in and out of different systems, spreadsheets, and websites to finish an order.

  • Knowing and managing the inventory of different packages, tickets and events are essential for effective customer service.

  • Saving and sharing customer details and history would help agents to provide a better customer experience and make the booking process faster.

  • Managing orders and seeing the status of the orders is important for agents and later for reporting purposes.

  • Receiving notifications about actions taken by agents, the business or customers is essential for a smooth service process.

Empathy map

Empathy map

Empathy map

Based on the interviews/workshops we set up empathy maps/personas. We referred to them throughout the entire product development process.

The agent user, the target user is the one whose needs will be the main focus of the portal, then the admin and the agents' managers.

Having clearly defined pains and gains helped us to start brainstorming solutions and ideas with the team.

Wireframing and User Journey

We mapped out the users’ steps to see how we could simplify their journey to help them reach their most important goals with the product.

We created user stories, user flows, sitemaps, blueprints, and from that, we started the wireframing process in Figma.

We paired up the user stories with the user flows to get a clear understanding of what happens with the user in each step of the process.
The sitemap and information architecture helped us to simplify the steps and make it more accessible for agents to quickly start a new order and find the right information at the right time.
Using all this information we created the wireframes, using the current white label design system, modifying a few components to fit the needs better, but by reutilizing the current elements, we were able to cut down on time and budget, and it was also helpful for the developers to use the same design system and a lot of similar elements and functionalities.

We also documented all the MVP functionalities, technical requirements, and roadmap for the features in a separate shared document that was available for developers, and stakeholders from the client's side.

Blockframes Sitemap / Blueprint

Blockframes Sitemap / Blueprint

User Testing Feedback

User Testing Feedback

User Testing

We decided to use Maze, a user testing software, because of the availability of and time zone differences with our user testing subjects.

We received qualitative and quantitative results as well.

The aim of the testing was to see if the agents find the booking process easy, fast, and intuitive, and to find out what functionalities they would use the most and why and how can we make their experience even better.

Some statistics and feedback from the testing:

  • Users rated the orders page 4.3 on average out of 5 which means they think it is useful.

  • Users rated the overall experience with the agent portal prototype 4 on average out of 5 which means they were satisfied with it

  • 100 % of the users answered that they could see themselves using the platform

All page views - Figma

All page views - Figma

UI Design

Once the tests were done, we started reiterating the screens in Figma.

We designed:

  • login

  • the new order booking flow with cart functionality, package details, and inventory information, the ability to configure the order and add customer and participant details and submit the order

  • the manage orders page where agents can see the status of their orders, the status changes, and can access their order details.

From here we added annotations to our design for the developers and then went through the details with them so they will be able to provide a more accurate scope and timeframes.

Key stakeholders co-design
Features identified as core
Of the user testers were satisfied with the experience
Features identified as potential