Hallmark

Inspiring people to express their emotions, each day again.

Hallmark

Hallmark is a heartwarming company that inspires people to express their emotions, each day again. Through post cards, gifts, wooden and chocolate cards people can send their loved ones a message or emotion via the online webshop.

Platforms

1 mobile app (Android & iOS) and 1 webshop for customers

Type of project

eCommerce webshop for B2C.

Project date

2019-2020

My role

UX Designer, UI Designer, Brand Designer, Prototyping, part of 3 teams: the CRO A/B testing team, the team who rolled out the new brand identity, the Marketing & Digital team.

Challenge

The challenge was to optimize the webshop to increase conversion. This was done by researching user data gained from quantitative research, such as surveys. Because there were already usable designs in place, I didn't use much wireframes and could create tests with visual components or I was able to create visual components quickly based on what was there already.

Problem

The problem was that there was so much information from users directly, but not a lot of data like user paths and bounce rates etc.

Actions

We started setting up the data part with Hotjar and Google Analytics. From there I could make assumptions on what the reason could be for bounces or users struggling to find their desired path. With meetings, discussions and test sessions we've created and validated certain ideas and prototypes. From there on, we've created and ran A/B test. This resulted in a lot of winning cases, from where we optimized the website based on these A/B tests. Sometimes, the new solution failed when it was launched on the website so we investigated why. It was either to not being built well or users found it confusing as it was too radical of a change. So we rolled things out step by step in these cases to see if it worked then, and most of the times it did. Cases that still didn't work, strangely enough, were dismissed while the A/B tests gave good results. Sometimes a validated test isn't always the best solution!

Results

Due to multiple A/B tests, the conversion rate of the website went up by almost 38%. Most A/B tests were successors, as the rates were much higher, with some extraordinary winners such as the new top banner. The feedback surveys were more positive as well, where users were highlighting that they could find what they were looking for much easier due to the new top banner! The overall user experience was higher rated than before, as well as the customer satisfaction rate.

Tools

Sketch, Google Analytics, Google Tag Manager, Hotjar, Adobe Photoshop, Adobe Illustrator.

Homepage topbanner - from old to new

The old version of the topbanner
Some of the experiments to create a new topbanner
The new topbanner on all devices, including an active search layout and the difference between gifts and cards on desktop

Navigation

The old header navigation
The first step of the new header navigation
Both old and new shown together for comparison

Landingspage

The old landingspage with a topbanner
A first step to optimize the landingspage with the order process as a topbanner

Add an occasion to your calendar & add a contact to your address book

The old version of the calendar versus the new one
Adding an occasion to your calendar, both old and new
The old versus the new datepicker, in brand identity colours
The old version of adding a contact to your address book on desktop
The new version of adding a contact to your address book on desktop
Adding a contact to your address book on tablet, the new version
Adding a moment to your address book on mobile, the new version

Card editor

The old on the left versus the first step of the new one on the right on mobile

No search results

The old no search results page versus the new ones

Join Hallmark - Hiring

The wireframes of the first new version for mobile

Pricing

From 16 different stylings for pricing to 5 stylings
Other projects: 

© 2023 Stephan van Dijk
All rights reserved