Homepage Product Vision

Homepage Product Vision

Homepage Product Vision

Homepage Product Vision

Homepage
Product Vision

Egencia

Egencia

Egencia

Egencia

Egencia

Homepage Product Vision

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

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

Company // Product
Egencia // Global Homepage


Date
Aug 2018-June 2019

Role
Lead designer

Responsibilities
Design thinking
Competitive analysis
Strategy
Research

UX / IX design
Visual design
Prototyping
User testing

Platform
Responsive web

Team
1 designer
1 product manager
4 engineers

Company // Product
Egencia // Global Homepage


Date
Aug 2018-June 2019

Role
Lead designer

Responsibilities
Design thinking
Competitive analysis
Strategy
Research

UX / IX design
Visual design
Prototyping
User testing

Platform
Responsive web

Team
1 designer
1 product manager
4 engineers

Company // Product
Egencia // Global Homepage


Date
Aug 2018-June 2019

Role
Lead designer

Responsibilities
Design thinking
Competitive analysis
Strategy
Research

UX / IX design
Visual design
Prototyping
User testing

Platform
Responsive web

Team
1 designer
1 product manager
4 engineers

Company // Product
Egencia // Global Homepage


Date
Aug 2018-June 2019

Role
Lead designer

Responsibilities
Design thinking
Competitive analysis
Strategy
Research

UX / IX design
Visual design
Prototyping
User testing

Platform
Responsive web

Team
1 designer
1 product manager
4 engineers
 

Company // Product
Egencia // Global Homepage


Date
Aug 2018-June 2019

Role
Lead designer

Responsibilities
Design thinking
Competitive analysis
Strategy
Research

UX / IX design
Visual design
Prototyping
User testing

Platform
Responsive web

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 and global platform comparision

Homepage Legacy early 2016; Global Homepage mid 2017

Brainstorm

Creating empathy through storytelling

In order to develop a strategy that would lead our team and product years into the future, we needed to go back to the basics. 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.

The session began with an acknowledgment: that even though the session's methodology is called "design thinking," these tools are not limited to only designers. Each member of this session, no matter which team and discipline they come from, can and should be using creative problem solving throughout their jobs.

2018-08-21 11.35.01
2018-08-21 12.32.56
2018-08-21 11.35.08

Photos from the Homepage Brainstorming Session, Aug 2018

2018-08-21 12.33.30

Based on feedback from users, and general industry trends, we had a pretty good idea of where we wanted to take the product. Going into this session, we were hoping to validate our assumptions. 

Think about your last business trip. 

In order 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.  Notes gathered throughout these conversations served as our starting point for the rest of the session. 

Subsequent exercises were aimed at helping people dive deeper into storytelling and gathering insights. After about 30-40 minutes of sharing stories and taking notes, 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, and this point was an important part for our session. Leisure travelers are primarily 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 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.

2018-08-21 12.45.42

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:

Users want a
personalized experience

Users want
ease & efficiency
when planning and booking

Sketch & Wireframe

Quantifying our assumptions

One thing that was important for my team in particular to remember was that many of these ideas cannot 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.

Whiteboard drawing
Whiteboard drawing
Whiteboard drawing

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.

~70%

Arrangers booking travel for 10+ travelers account for 70% of revenue

1-3x

Travelers take on average 1-3 trips per year

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

With all of that content 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.

Homepage for a self-booking traveler

Homepage for a traveler

Homepage for an arranger

Homepage for a travel manager

Homepage for a travel manager

Homepage for a travel manager

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 with different users types in mind and various tasks surfaced to the top

Homepage vision wireframe
Homepage vision wireframe
Upcoming trips list wireframe
Homepage wireframe travel manager
Homepage wirerame risk alert
Homepage wireframe expiry alerts

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.

Homepage before

Control – No background; user's name in a pill within the search form

Homepage after

Variant – 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.

Upcoming Trips iterations
Upcoming Trips iterations

Numerous iterations created by Sarah, the designer responsible for Trips & Attach. We worked closely together as these designs would be tested on my product.

upcoming-trips-test

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.  

receipts test

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.

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. 

Homepage Vision
Homepage displayed at BTS 2019 London

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 3 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. 

Wireframe design
Wireframe design
Wireframe design

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 optimized for the mobile breakpoint

© 2020 Lauren Nielsen. Built with Semplice.