TL;DR Responsive Design; Voucher Codes; Retail; White Label Solution, B2B + B2C; SEO-Friendly, Grid-based Layout; Widgets;
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:
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:
Our white label partners had different needs and we had to welcome them by adding a certain level of flexibility to the platform
With most users coming from organic sources, we had to keep all the semantic markups in place
Our shop pages had to be optimised for real life people so we couldn’t be disconnected from what they see onto real shops
At the time we were operating in 12 countries so the responsiveness should be able to deal with all sorts of text expansions
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 ⇲.
A grid-based interface populated with responsive widgets empowered our sales teams and white label partners to craft lively and non-intrusive experiences
Highly-customisable shop pages were optimised for both: search engines and user experience
To reduce the visual monotony and generate more leads on list pages, we introduced the possibility to dynamically highlight well-ranked shops
Hybrid collections of curated and dynamic content enabled sales teams to run seasonal campaigns more effectively
A collection of responsive and interchangeable widgets gave our partners the flexibility to customise the experience of their users whilst not introducing experience flaws
Starting from the smallest view, we tailored the experience for the all major breakpoints
The subsequent delivery of additional material followed the same visual standards defined during the project
A series of straightforward videos were produced to assist users with the redeeming of vouchers