Contextual User Experience

Creating a Contextual User Experience Based on Location

Love’s Connect App

Background

Love’s Travel Stops is a chain of 500+ truck stops and gas stations across the United States.

The Love's Connect app helps professional truck drivers get back on the road quicker. From paying for fuel to checking in for a shower, we provide our drivers with what they need when they need it.

Overview

In 2020 we designed a “refresh” of the home screen in the Love’s Connect app. In addition to a more modern UI, we centered the redesign around providing the user with relevant information based on their location.

My Role

Lead visual designer

Interaction designer

Prototype

Timeline

~6 months
(2021)

Platforms

iOS

Android

The experience changes when a user is within 0.5 miles of a Love’s location

The Team

Here is who I worked alongside for this project:

Additional UX designer
UX researcher
Project managers
Front-end and back-end developers
Stakeholders
Quality assurance analysts

Opportunity

What are timely and relevant features we can provide our users with, based on their current location?

Showers

Fuel Prices

Restaurants

Truck Care

What the Research Says

A survey completed by 4,000 commercial truck drivers provided our team with valuable information.

These are the most important app features for them when at a Love’s store.

‘My Love Rewards’ summary & details

88%

Shower availability & check-in

74%

Fuel prices & mobile pay

61%

Store details (amenities, restaurants, etc.)

49%

Truck care information

46%

Knowing the situations in which our users most frequently use the Love's Connect app is another important factor.

This helps us better understand when and why they open the app.

8.7

Right after pulling in at a Love's

7.7

Waiting in the fuel lane

6.6

Planning next pickup or delivery

5.8

Before checking out at a Love's

5.4

In a restaurant at a Love's

5.2

Broken down readside

5.1

On the road as a co-driver

4.8

Waiting for truck service to finish at Love's

First and Foremost - ‘My Love Rewards’ Info

We gave our users what they want, with a more modern and visual ‘My Love Rewards’ section.

Improvements made:

More distinct ‘My Love Rewards’ badges
Credits (Showers, Drinks, TirePass) or more clearly defined
Gallons purchased progress bar allows users to see how close they are to the next tier

Old

New

Prioritizing Our User’s Needs

Showers and Pay: two of our most important features. It doesn’t take long to find up-to-date info for both.

Rounding Out the Essentials

Quickly see which restaurants are available at your Love’s location, and whether or not saving money with a ‘My Love Rewards’ card is available.

Truck Care refers to things like:

• Oil changes

• Light mechanical work

• Tire care

• …and more

What About when the User is on the Road?

The experience changes, giving the user more relevent information and abilities.

The Truck Care block transitions to a state that is helpful for roadside assistance.

A new block as added, showing exactly how far the nearest three Love’s locations are.

Was the Refresh a Success?

19%

increase in mobile pay users

34%

increase in mobile shower check-ins

84%

loyalty user rate maintained

“I love the layout, it looks a lot cleaner. You can get to a lot of information much more quickly on the landing page, which to me is what everybody is looking at.”

“I think the new [design] is definitely more user friendly and easier to access, without having to fumble through different screens to go where you want to.”

“That looks like everything I’m trying to get to when I’m in a hurry and I pull up.”

“‘My Love Rewards Accepted Here’ banner is very useful to see for restaurants.”

Increasing conversions with an improved webview booking form

Agoda

Agoda is an online travel booking platform under Booking Holdings (Nasdaq: BKNG), serving 3M+ daily users. With a large presence in the Asia-Pacific region, travelers from 200+ countries use Agoda for planning their trips.

Context

Below is Agoda’s accommodation user journey. I am the booking form designer, so I work on the third and final “Checkout” stage.

Select

Checkout

Why webview?

In 2024, we updated the booking form to webview, allowing us to maintain a single codebase with responsive components scaling from mobile to web. Here were the initial motivators for making the move:

Reduce app developer headcount by 80% while achieving similar results
Increase experiment velocity on all platforms
Opportunity to revamp the user experience

My Role

Product designer

Interaction designer

Prototype

Research

Timeline

One year(2023-24)

Platforms

Web

iOS

Android

Opportunity

How can we modernize the booking form UI and improve the UX?

Native
(before)

Webview
(after)

Needle movers

These four revamps resulted in significant positive IBPDs (incremental bookings per day).

Payment panel

Before

After

+649 IBPDs

Price panel

Before

After

+554 IBPDs

Hotel & room summary

Before

After

+296 IBPDs

Thank you page

Before

After

Research

Metrics

Incremental bookings per day (IBPD) measures the increase or decrease in the number of daily bookings on Agoda when we make a change or run an experiment.

+335

overall IBPDs

iOS webview

+782

overall IBPDs

Android webview

Due to booking form’s success, Agoda is going “all in” on webview. Flights, Activities, and other funnels are in the process of making the jump.

Challenges and learnings

1. Communicating webview transition status to fellow designers

Since other designers run experiments on booking form, it was important for me to provide consistent and proactive updates on the native → webview transition.

This ensured that there was a framework in place to maintain a consistent and cohesive design.

2. Responsive design

When scaling up components from mobile to desktop, it was important for me to identify which ones needed manual layout input.

3. Balancing business needs with user experience

It has been proven that urgency messaging and nudges on Agoda help increase booking conversion. However, too many of them can be distracting. Therefore, using them more subtly and with greater intent can benefit both the business and the user.