Homepage Product Vision

Egencia

Floating macbook displaying a new design for a travel search form

How might we create a user-centric and task-focused homepage?

Company
Egencia
Date
2018 – 2019
Platform
Responsive web
Role
Design lead
Responsibilities
Design thinking, competitive analysis, strategy, research, UX / IX design ,visual design, prototyping, user testing
Team
1 designer, 1 product manager, 4 engineers

Since early 2015, the Egencia Homepage team was tasked with migrating the codebase from multiple legacy platforms onto a single, global platform. This massive effort took over three years to complete and required the full attention of the entire team. This commitment meant that there was little time or energy left over to devote to developing a product strategy, which led to a disjointed experience. It became clear that this lack of vision meant we weren't doing a good job of helping users with task completion or efficiency.

As the migration project came to a close, we began to feel a combination of excitement and anxiety about what lay ahead for our product. What we needed was a new vision, a strategy to take us beyond migration and into a strong future.

Homepage Legacy early 2016; Global Homepage mid 2017
Homepage Legacy early 2016; Global Homepage mid 2017
Research
Workshop

Creating empathy through storytelling

In August of 2018, I facilitated a Design Thinking session involving half a dozen different functions from across the company. Alongside Homepage product managers and engineers, we had members from Account Management, Sales, and Leadership, as well as designers and product managers from multiple other products. We felt strongly that in order to develop a well-rounded story, we needed to include as many perspectives as possible.

To practice building empathy, the session started with partner interviews. Since everyone in the room had traveled for business previously, it was an easy topic to talk about. Subsequent exercises were aimed at building upon these stories and gathering insights. Soons, fairly striking patterns began to emerge. Here are some examples:

  • Staying within policy while maximizing comfort
  • Location-based planning
  • Being able to set and save likes and dislikes
  • Collaborating with coworkers
  • Collecting personal loyalty points

Business travelers are inherently different than leisure travelers. Leisure travelers are motivated by price, whereas business travelers have a variety of motivating factors, including personal travel points and status, office proximity, and company policy. These differences became more apparent as we continued the conversations throughout the session.

Turning insights into actionable statements

• How might we collaborate and coordinate with co-workers while traveling?
• How might we leverage and identify existing tools users rely on for travel?
• How might we personalize the individual’s experience?
• How might we gather users’ preferences and allow them to book accordingly?

These HMW questions guided each group in another round of ideation. Hundreds of ideas were generated, creating a truly wonderful and colorful sticky-note graveyard. The best part about the ideation exercises was that the group really stretched outside of the box, coming up with things that normally wouldn't see the light of day.

Photo of pink sticky notes placed in 3 different categories of implementation levels
Implementation framework mapping

Our final exercise, as photographed above, helped put a framework around the spectrum of ideas. From the lens of implementation, the first category was Incremental, the next, Evolutionary, and lastly, Revolutionary. Each group worked together to categorize their sticky notes accordingly. These conversations helped everyone understand technical limitations in a way that grounded their ideas in reality.

Key takeaways from the session:
Key takeaways from the session are that users want a personalized experience and users want ease and efficiency when planning and booking
No items found.
Sketch & wireframe

Quantifying our assumptions

One we needed to remember was that many of these ideas could not be controlled by our team. However, Homepage is a user’s first touchpoint into the product – for all users – so the goal for the session was to see which aspects were important for business travelers, and how Homepage can facilitate in making those happen. The brainstorming session proved to be invaluable in our quest to define a product strategy. We spent a handful of days afterward synthesizing all of the themes and ideas that came out of the workshop.

We also collected data to supplement all of our new ideas. The metrics below are a couple of the primary examples. What this data tells us is that our users vary from true power users to people who only visit the site a few times per year. We needed to create a product that addresses the needs of this broad spectrum of users without negatively impacting their experience.

Key data points that helped shaped our decisions are that travelers take on average 1-3 trips per year, and that arrangers booking travel for 10+ travelers account for 70% of revenue.
No items found.
Design

How might we create a user-centric and task-focused Homepage?

With all of that data combined and considered, we distilled everything down to our primary focus. And we wanted to answer this question by doing 2 things.

1. Customize the experience

Over the years we've collected anecdotal data that suggests our user types aren't all coming to the website with the same tasks. There's actually quite a range of actions a user needs to do. With that in mind, we realized that the homepage does not facilitate the most efficient way to accomplish those actions. Our user types have vastly different goals, but our product has never considered those differences.

Screenshot of the homepage for a traveler, arranger, and travel manager. The screenshots have minimal differences.
It's the same....

2. Surface the most relevant content to the top of the page

Up until now, the Homepage had kinda functioned as a dumping ground everything, but without any real thought or direction behind what got put on the page. So the new direction is not only a new design but a massive data science effort. We teamed up with the data science team to utilize machine learning that will help us to leverage users' past behaviors to help them complete future tasks. We're hoping to empower our users to complete their day-to-day tasks much faster with less friction.

Wireframes shown below illustrate various tasked surfaced to the top of the page depending on the user type.

High fidelity wireframes showing examples of different directions we could go for actions, alerts, and trip planning.
Exploratory wireframes for new dynamic content
No items found.
Test

Proving out the concept

• Introduce the "Hero" section
• Test actionable content within that section
• Partner with other teams to meet overall business goals

I need a hero!

Test 1: The first AB Test we built drove us straight into our vision. We introduced the Hero section, queuing our users into changes ahead. All content surfaced into the dark blue area will be dynamic, relevant, and actionable, but it will not exist unless there is something to do. If there is no actionable content, the default would be the Search form. This is an exciting moment for homepage because we are starting to contextualize the product and make it a little more user-friendly.

Another goal of this design is to help users more easily access their profile page, and in the future, we can start playing around with things like document and credit card expiration warnings, nudges to finish filling out profile information, and more.

Image of a test that changes the top of the homepage to dark blue and has a greeting to the user
Control (left) – No background; user's name in a pill within the search form // Variant (right)– Dark blue background; user's name within a greeting at the top of the page

When is my next trip?

Test 2: Immediately following the Hero test, we tested the first round of actionable content – Upcoming Trips. Since we know that most of our users only travel 1-3 times per year, as a user with a trip in the near future, it's more likely that a user will want to interact with that itinerary than start booking a new trip. Plus, our Road Warriors (people who travel 12+ times per year), will have better insight into their trip cadence. This module was tested above the search form inside of the Hero area. In the images above, you can see the control for this test, with the Upcoming Trips module below the search form.

Iterations of different designs for a trip card
Numerous iterations created by Sarah, the designer responsible for Trips & Attach. We worked closely together as these designs would be tested on the product I supported.

Where are my receipts?

Test 3: One of our customers' biggest points of frustration is related to receipts. From a back-end perspective, the payment systems are incredibly complicated, involving multiple players and merchants of record. When it comes to expensing a trip though, users don't care how complicated the payments process it is – they just want to be able to find their receipts in order to get their money reimbursed.

After the Upcoming Trips test (above) was rolled out as a new feature, one of the enhancements we decided to test as a follow-up was around addressing this problem with receipts. The idea is that we would maintain a past trip in the Upcoming Trips section with a direct ingress into their receipts.  

Example of a test to show travel receipts on a past trip card
A trip in the past would occupy the space of one of the upcoming trips for 7 days post-trip in order to display a link to retrieve receipts.
No items found.
Solution

Creating a foundation for the future

Below are the current (March 2019) solutions for the first big push toward our new direction. The product culture at Egencia is incredibly iterative, which means we'll be moving quickly toward this goal, and moving beyond it within the next 6-12 months.

No items found.
Image of a giant screen in a conference booth displaying the Egencia homepage at a large business travel conference in Europe. Lots of people milling around.

Egencia participates in all the industry events around the world, including the Business Travel Show in London, Feb 2019. Hundreds of industry insiders and all of our competitors attend this conference to see product demos, including the Homepage, seen above (image taken right before the Hero test was launched).

Results

Building a New Homepage

This new strategic direction has helped bring purpose to the product. We’ve been able to focus all the work and feedback on whether or not it aligns with our goals. We’ve really only started with a small subset of features and ideas, and there are so many more out there. When we look at the user journey, it can be bucketed into three main areas: pre-trip, during trip, and post-trip. But when we cross that with each user role type we can immediately see there's tons of opportunity to continue personalization, making each user’s homepage their own.

All of the tests we've launched have been feeding a model we're creating with the data science team. In a few months, we want to be able to state with data which actions are most important to our users with a specific order of importance. Then use this model to influence page layout at a user level.

Personal learning: We still don't know our users very well

Despite the research and anecdotal data supporting our hypothesis, the AB testing data seems to suggest that we were incorrect to move the search form lower on the page. Even though users can have many tasks when landing on the Homepage, the most important task still seems to be searching. We are still investigating the root cause of the data trends we are seeing, but it looks like any content we test in the Hero area causes a dip in conversion. Going forward I plan to lean more heavily into user research by working with our actual users (not just usertesting.com). Given that we were all a little surprised by the results of the first round of tests, this would help better prepare us in the future.

On the bright side, I helped deliver some big wins thus far:

• Refreshed overall page design
• New trip cards design
• Further optimization for the mobile breakpoint

More projects