Header Bar 2.0: Simpler, better, crispier
How Westwing moved from in-house CMS tool to a third party one to nail the launch of a promotional space on all platforms
As Black Friday 2018 approached, Westwing Product Managers and business stakeholders wondered: what is a simple way of cross-promoting Westwing and WestwingNow during the weekend sales? How can we give access to sister promotions without usurping the familiar user experience, heightened by the Black Friday craziness? Can we utilize our scattered banners, or we come up with something new altogether in the next month and a half?
And that’s how the Header Bar banner was born. And it was used. Occasionally.
“DD.MM.YYYY: We deliver as usual”
Fast forward to 2020 and the COVID-19 era: online shopping is booming, and customer care is overwhelmed with numerous delivery question, both on Westwing (our “Club” membership based model) and WestwingNow (regular “Shop” shopping site). The Product Managers upload Header Bars across all platforms informing customers we deliver as usual.
The only problem? A new image banner needs to be uploaded every day as it has the current date. On the image. Hardcoded. Desktop and mobile. Both of our sites. Different dimensions. Different rendering. Cannot be scheduled in advance on WestwingNow.
We needed something new, dynamic, pixel perfect and crispy clear.
The Birth of 2.0
We used this chance to increase the usage of the Header Bar feature by doing it right . The requirements were fairly simple:
- Crispy clear presentation on all platforms by native rendering of text and colours (instead of uploading images)
- Dynamic text such as date or a countdown
- Input based colours for text, background fill and close X icon
- Unified layout of the CMS setup tool for both sites
- Possibility to schedule multiple Header Bar banners
- Possibility to show the Header Bars on specific platforms and defined pages
- Keep the old functionalities: linking, dismissal, reappearance timing
A normal process followed: detailed specifications for the setup tool (presumably to be done in our internal CMS tool called Bob), designs for every platform, screen size, edge case, and kick-off meeting with five development teams.
Together with the teams, the MVP (Minimum Viable Product) and MLP (Minimum Loveable Product) rollouts were agreed on.
Everything was in place. But then we started (re)discussing the setup tool.
Enter: Contentful.
Contentful: A third party CMS tool that will help us to build the M̶V̶P̶̵ MLP
As initiated by our CTO, discussion were started between the Tech Leads to create the setup tool outside of our own CMS tool. After several meetings and evaluations, the development heads settled on Contentful.
Why third party?
Moving away from the in-house developed CMS tool meant:
- Less development time for creating modules from scratch every time
- “Plug & play” approach to building various setup tool modules
- Same tool for Club and Shop
- Tackling almost all setup tool requirements, successfully building the MLP instead of the MVP
- Easy modifications
- Fresh start
Challenges
Translating the setup tool requirements into Contentful module layout was simple: text fields, validations, help texts and endless. PMs and developers alike could build a module.
The greatest challenge was syncing across different web and apps teams for both Westwing and WestwingNow to define the appropriate API connection to Contentful and the appropriate responses.
The API structure and communication was built in a way that we can easily update the Header Bar module in Contentful by including new or modified fields that don’t break old app versions, with the additional development is minimised.
Once the API was ready, it was a question of tuning additional functionalities such as showing in specific country and on specific platform. We decided not to tackle specific page display at the moment as it was not really needed at the moment.
Future 2.0
The main goals we wanted to achieve by introducing Header Bar 2.0 were aimed at having a usable promotional and informational space that is:
- Easy to set up and customise
- Great looking on all platforms
- Suitable for cross-promotion between Westwing and WestwingNow
- Capable of showing dynamic information such as the current date
- Possible to update without a major project
And above everything, we wanted to enable a new element that all departments of the company would use for communicating important information to our customers, such as:
- Cross-model promotions
- Vouchers
- Special events and sales
- Ongoing messaging e.g. normal deliveries, VAT reductions and more.
Until Header Bar 3.0,
Milan Djordjevic
Lead Product Manager, Apps, Club Sites and Email communication
