Swell

Dame needed to reach new customers without violating guidelines. They did this by creating Swell, an ad-friendly content resource focused on lead collection and brand awareness. There have been three versions of Swell. This case focuses on version 3, which was executed in five weeks.

Role

Product Owner (v3), Lead UX/UI Designer (v2-3), Front-End Developer (all)

Tools

Sketch, Invision, WordPress

Duration

5 weeks

Background

There have been three iterations of Swell since its launch. At the time of the redesign, version two was live.

Versions of Swell

Version OneSwell 1.0

A completely new and separate brand experience

Jan 2020

Version TwoSwell 2.0

Integrating Dame’s branding without changing name

May 2020

Version ThreeDame.com

Seamless experience between products + content

Nov 2021

The Problem

In 2021, Dame was able to advertise on the NYC subway, though there were limitations that proved challenging. They had to direct that campaign to the blog instead of their main storefront. The blog was temporarily deprioritized since May and needed a makeover, stat. 

Main Constraints

  1. TimingWith five weeks’ notice, right before the holidays, we had to pivot to work on the tight timeline.
  2. DestinationWe were required to link to Dame’s blog, which was not optimized for Dame’s story or products.
  3. ContentThe existing content was not optimized. We had been without an editor or articles for six months, and the new editor wasn’t joining until right before launch.
  4. TechnicalI was also responsible for coding the redesign and managing the migration of the hosting and domain.

Competitor Research

To make Dame.com a cohesive experience with the e-commerce storefront, I looked at patterns used by stores at the forefront of “contextual commerce.”

Key Insights

Be explicit about what Dame is.

The 360 campaign’s primary goal was awareness so we couldn’t rely on subtle hints like Into The Gloss “g” banner.

Integrate products into the content.

Food52’s “From Our Shop” module showed a great way to link education about products with an action item to buy it.

Products + content side by side.

Competitors gave the storefronts top billing in navigation as well as ample real estate throughout the pages themselves.

Design Solutions

Lo-Fi Prototypes

We considered using an article as the header but decided to switch to a hero that could introduce customers to the brand.

To avoid guideline issues, we planned to feature products lower on the page. We decided it was worth moving them just below the fold instead.

Two Wireframes sideby side
Desktop showing homepageMockup
v1
Desktop showing homepageMockup
v2

Hi-Fi Mockups

We had intended to use the campaign imagery for the header. However, we realized that the overload of illustrations lacked a human element.

We swapped out the main hero for a lifestyle photo so the user could connect to a person.

Home Page Mockups

iPhone showing hero
iPhone showing categories
iPhone showing product module
iPhone showing Dame Labs Feature

Article Mockups

iPhone showing mobile menu
Updated Mobile Menu
iPhone showing part of the article
Article View
iPhone showing part of the article
Product Modules in Article
iPhone showing email screen of quiz
Article CTA

Cross-Departmental Solutions

We needed to use the Head of Content’s time efficiently, as she joined two weeks before launch, so I compiled a spreadsheet of existing articles. With a glance, she could quickly identify top performers, favorites, potential product integrations, and brand stories.

Once she had a clear view of options, we had strategy meetings to work through the next steps and she was able to generate the necessary content before launch.

Phone showing various articles

Takeaways

  • In the 2.5 months following the redesign, e-commerce revenue attributed to the block matched the amount made throughout the entirety of the previous year.

  • During crunch time, empathy counts.
It wouldn't be out of place to describe Lauren as a "unicorn". Not only does she have the technical and design skills to implement, she has the analytical ability to improve conversion and process. Lauren also works cross-functionally with ease by being a fast, reliable and communicative team player. This combination of soft and hard skills made Lauren an incredibly valuable addition to the Dame team.
- Jocelyn Floro, Manager
Director of Performance Marketing at Dame Products