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

After deriving patterns and insights from everyone's business travel experiences, we dove deeper. The next step was to make those insights actionable by forming the classic "How Might We..." question. Some examples the group came up with were very inspiring:

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

Sketch & Wireframe

Quantifying our assumptions

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 and supplemented all of that information with data we could pull with help from our analytics team. We distilled everything down to a couple of main points of focus.

Homepage vision wireframe
Homepage vision wireframe

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

Up until now, the Homepage has functioned as a dumping ground for jumping off points, but without any real thought or direction behind why/where/or what got put on the page. Our new direction is not only a new design but a massive data science effort that will allow us to leverage our 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. Through qualitative feedback, we've heard comments alluding to a lack of relevant content and how it can be hard to complete tasks efficiently.

2. Drive Attach

Attach is our way of saying "Add more products (hotels, flights, cars, trains, activities) to your trip." From a business perspective, this is one of our biggest monetary levers we can pull to help our bottom line. And while we work to make the user's overall experience on the Homepage better, we also needed to be mindful of monetary targets. So when using dynamic data to display the most relevant content, we hypothesized that Attach would be one of the best candidates to start manipulating. We partnered closely with the Attach product team to align on goals and designs.  

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

• Travelers typically travel 1-3x per year
• Arrangers make most of the travel bookings
• Travel Managers are not usually landing on Homepage to book travel

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. Bottom line, our user types have vastly different goals, but our product has never considered those differences.

Wireframes shown below with different users types in mind and various tasks surfaced to the top

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

Design

Visualizing our goals

From previous experience, we know how sensitive our users can be when it comes to making big changes. With this new strategic vision, we really wanted to ease into the massive visual change to ensure we received as little blowback as possible. Our approach to executing this new direction was centered around proving out the concept. In other words, we took baby steps toward our new design, validating each step as we went. 

Original wireframe design

Homepage vision wireframe with trips

Scaled back wireframe design

Homepage vision scaled back with trips

In the initial vision wireframes, we pushed the design pretty far, rearranging and redesigning the entire page. This is great when we consider wholistic design changes, but would likely shock our users. So, a scaled-back design was created. It maintained the familiar 8-column + 4-column layout, and simply created a space at the top of the 8-column to use for dynamic content. Later, we intend to push for a more bold layout redesign, creating a full-width hero section at the top of the page.

Test

Proving out the concept

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

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 seem 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?

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?

One of our customers' biggest points of frustration is related to receipts. From a back-end perspective, the payments 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 released 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

Building 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 stability and focus to the team. With this new push, my product partner and I have been able to revitalize the team. Since writing this case study, we've been able to launch 5 AB tests, testing content inside of the Hero section. Introducing the dark header Hero area was inconclusive from a testing perspective, but that was expected given the type of change. Once we started introducing new content though, the only conclusive winner was moving Upcoming Trips into that area. When users experienced that treatment, we saw just under a 1% uptick in conversion (+/- 0.54%), which is a relatively large number for our business. We also saw a handful of OpinionLab comments positively remarking on the change.

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
CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

© 2019 Lauren Nielsen. Built with Semplice.