Black Friday is one of West Marine‘s largest sales events each year. It was also the highest profile sale event I worked on each year, giving me an opportunity to make a difference for West Marine’s business and customers.
Through the three years I managed the Black Friday sale page, I took it from our worst performing sale to a snappy, eye-catching, accessible and responsive experience.
Technologies used
- HTML & CSS
- JavaScript
- Bootstrap
2018
Where we started
When I started working at West Marine, the usual sale page experience consisted of an event banner, a 3-column grid of product offers, and not much else. Needless to say, 2018 was one of our worst-performing Black Friday events on record, with most customers losing interest before they scrolled past the upper third of the page.
The mobile experience was even worse; we didn’t have a 2-column layout developed for mobile at this point, so customers would have to scroll through nearly 100 product offers to find what they were looking for.
Analytics showed that this user experience is, understandably, terrible. “The way we’ve always done it” proved to be less than ideal, so moving forward, we had to go back to the drawing board and develop something much, much better.
A smaller campaign with only 20 offers is one thing, but Black Friday? We couldn’t afford to have another miss.
2019
The Print Flyer
The print team, several months ahead of the web team in terms of sale campaigns, kept a few of the successful elements from 2018’s design including the pink tag Black Friday lockup. Other than that, the entire visual experience was completely overhauled to better appeal, with larger product images, vibrant colors, and bold savings messages.
User experience improvement
In 2019, I introduced a few significant updates in the user experience.
One request that I implemented was a “preview” version of the page: viewable, readable, fully functional, but with no links or CTA buttons. I achieved this by using a combination of JavaScript and CSS to make a Preview Only banner that stuck to the top of the page window even as the user scrolled down on both desktop and mobile. CSS also allowed me to use rules to disable all of the links without having to edit any of the HTML in the regular sale page. It took some trial and error to make it work on all browsers (including older versions of Internet Explorer), but I’m happy to say that it worked in the end.
This is also when I started working with Bootstrap to develop a more responsive user experience. The desktop version of the page was quite tall on its own; creating another single-column mobile experience would give us the same results as the year before. Bootstrap’s grid system allowed me to add element widths into the CSS classes of each containing div, and the ability to define different widths for different screen sizes was immensely helpful.
It’s still an exceptionally tall page with a lot of content, but I feel that with the updated graphics, more prominent savings messages, and more varied layout throughout the page, it’s a huge step up from the previous year.
Other components
This campaign also had emails, social media banners, and marketing banners for use on other categories on the West Marine website. All in all, it came out as a much more engaging and attractive campaign, cohesive and unified, in a way that showed up in an incredible year-over-year improvement in the final sales numbers.
2020
Refining it further
2020 brought, among many other unrelated things, a refresh of the core design elements for the Black Friday event. Through the COVID-19 pandemic, West Marine’s stores remained open to serve emergency services personnel and other essential workers. However, the bulk of marketing during 2020 was aimed at steering customers toward the website.
The most significant change was moving away from the bold, prominent savings messages into something that didn’t take over the page quite so much. I also worked on expanding my use of Bootstrap’s built-in grid classes to help me refine the user experience for both desktop and mobile. With the use of a tool that can reorder elements within a container, I was able to better arrange some of the product offers to present more effectively on the page.