A Tale of Responsive Design & B2B

Mid 2014
Savings United (PCVG)

TL;DR Responsive Design; Voucher Codes; Retail; White Label Solution, B2B + B2C; SEO-Friendly, Grid-based Layout; Widgets;

Discover & Understand

The Web is Now Mobile

The rapid increase of users coming from mobile devices made us aware that there was an urgent need to deliver an experience that would be intuitive and pleasurable regardless of screen size.

With that in mind, the next natural step was to understand better how people were using our websites on different devices and which kind of experience we wanted to provide.

The challenge was that, for a company on its early stages, there’s very little legacy data available to support any hypothesis so we had to work with lots of subjective data sources, such as:

Google Analytics Event Tracking

Heatmaps & Scrollmaps

BI Insights

Stakeholder Interviews

Legacy Version
Define

The Challenge of Flexibility

The data we gathered allowed us to tailor which areas of the platform would need to be addressed first and also helped us to understand better the expectations and constraints.

The hybrid nature of the business (B2C+B2B) certainly added an extra layer of complexity when defining deliverables, that had to account for:

Modular Structure

Our white label partners had different needs and we had to welcome them by adding a certain level of flexibility to the platform

Optimised for SEO

With most users coming from organic sources, we had to keep all the semantic markups in place

Shop Branding

Our shop pages had to be optimised for real life people so we couldn’t be disconnected from what they see onto real shops

Localisation-friendly

At the time we were operating in 12 countries so the responsiveness should be able to deal with all sorts of text expansions

Design

Grids are Here to Stay

Before starting to produce the first deliverables, we took me some time to shape our heads around what responsiveness really was.


Although we read many articles on how to design responsive interfaces, what really helped was to setup a Bootstrap ⇲ environment and build a component-based responsive interface from the scratch.

The process eventually led me to the creation of this, believe it or not, still popular starter pack for interface designers ⇲.

Examples of base grids we created

Deliverables on the Spotlight

The House of Vouchers

A grid-based interface populated with responsive widgets empowered our sales teams and white label partners to craft lively and non-intrusive experiences

The Shop Experience

Highly-customisable shop pages were optimised for both: search engines and user experience

Smart Lists

To reduce the visual monotony and generate more leads on list pages, we introduced the possibility to dynamically highlight well-ranked shops

Promotional Pages

Hybrid collections of curated and dynamic content enabled sales teams to run seasonal campaigns more effectively

Widgets

A collection of responsive and interchangeable widgets gave our partners the flexibility to customise the experience of their users whilst not introducing experience flaws

Mobile First

Starting from the smallest view, we tailored the experience for the all major breakpoints

And More

The subsequent delivery of additional material followed the same visual standards defined during the project

Onboarding & Help

A series of straightforward videos were produced to assist users with the redeeming of vouchers

Learnings

Multiple Sizes Fits All

  • The new platform was released to small chunks of users at different countries, allowing us to fine tune the experience before rolling out to the whole database
  • We managed to keep all semantic markups in place so it wouldn’t affect our organic rankings
  • Micro-interactions made the whole experience of redeeming vouchers much more delightful
  • The fold does matter: the first iterations had less call to actions above the fold and that increased the bounce rate from shop pages.
  • Bootstrap was on its early stages so the performance of the page was not as smooth as we would have hoped