Senior UX Designer
Heartwood and Oak UI-29.jpg

Heartwood & Oak

Heartwood & Oak

Client: Rewards Network Year: 2017 Role: UX Research, Wireframes Team: Larry Koss: Creative and UX Manager; Kristina Sczech: User Interface Designer

Background: Rewards Network partners with the world’s most powerful loyalty programs to attract guests to restaurants. Rewards Network owns multiple partner-branded websites for 17 million users who can receive various rewards for dining at Rewards Network restaurants. When a user dines at a qualified Rewards Network restaurant, they can earn airline miles, cashback, hotel miles, and more! Clients include TrueBlue by JetBlue, TotalRewards, and Delta Skymiles Dining. Rewards Network owned over 11 rewards websites that offered rewards for dining in restaurants, and would also have specialty online merchants advertise on the site for extra rewards for users.

Heartwood and Oak, a wine merchant client, wanted to be featured on our dining sites to get access to a new and motivated audience to bring new and repeat customers to their website.

Problems:

Rewards Network in the midst of transitioning their websites from legacy to responsive sites, and had two very different designs to work with.

Legacy designs (seen below) were less accessible to our users, and responsiveness was an issue. Engagement on these sites were already proving difficult.

There are a lot of things on the screen competing for the users’ attention

With so much information being shown, it was difficult to find where to put placements on our website that didn’t look like outsider advertisements.

Stakeholders were hoping for a quick solution, but the initial solution proposed would likely not encourage user purchases

The initial stakeholder proposal was to introduce Heartwood and Oak through more subtle advertisement banners put throughout the site. When clicked, members would be taken to the Heartwood and Oak landing page. After looking at user data from the last few months, the banners only generated a 1% click through rate, and won’t not guarantee a lot of conversions to Heartwood and Oak.

How can we reliably promote this merchant to our 17 million members and encourage conversions at the Heartwood and Oak website?

 

UX Research and Recommendations

Utilizing the Hotjar analytics tool, I looked at user recordings on our site to better understand where our users were clicking, how far down they scrolled on the page, and what prompted user behavior. After watching over 20+ user sessions and reviewing similar behavior data through Google Analytics, I begin creating wireframes to showcase areas of opportunity to guarantee more conversions. My recommendations included:

Promote multiple instances of Heartwood and Oak throughout our dining websites.

Based on the user recordings I reviewed, we knew that users were curious to see what restaurants were available to them nearby, and were willing to explore our websites more thoroughly. I encouraged stakeholders to include the partnership placements in between our restaurant information tiles, instead of keeping it at the top of the page (where most people were registering placements as an advertisement to take them off-site.) After looking at the data, I encouraged marketing directors to add this specialty partnership to our “Earn More” page, a specialty page that shows how users can earn miles outside of dining. This page typically included special bonus offers (ex: 2x the miles on this date when you dine here). I encouraged the team to expand this to host specialty partnerships as well.

Create a more in-depth landing page to explain to users how to get their rewards.

Below was the user journey pitched to our stakeholders. Since users were being taken to a third party site to make their final purchase, we wanted to make it as clear as possible to our users how to get the most rewards out of their dining program, and to make sure they were using their card on file with the dining program.

Lean into Heartwood and Oak promotion, without annoying our users.

I encouraged a one-time modal for new and returning users to the site coming to show them that that Heartwood and Oak was a partner, and potential award earnings and wine could be massive.

Final Designs and Results

Below are examples of finished UI designs completed. Heartwood and Oak banners were tailored to match the brand guidelines of TrueBlue Dining (responsive), TotalRewards Dining (responsive) and United MileagePlus Dining (non-responsive).

In the end, this specialty partnership was a wild success. Customer spend increased by 330%, 4,100 tickets were generated, and Rewards Network got $360k in qualified spend in two months (which beat the projected $110K).