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

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

Duration

5 weeks (2021)

Tools + Skills

Sketch, Invision, WordPress, Cross-Functional Collaboration

Team

Graphic Designer, E-Commerce Director
Jump to:

Overview

Since its launch, Swell has undergone three iterations. At the time of the redesign discussed in this case study, Swell 2.0 was live.

Swell 1.0

Launched January 2020

The first Swell iteration was designed to attract customers through Facebook ads while adhering to content guidelines. This version featured distinctive branding, using the playful Blenny font instead of Dame's primary serif, Domaine Display. As a UX consultant, I assisted the graphic designer responsible for the UI.

Swell 2.0

Launched May 2020

Swell 2.0 integrated Dame's visual branding while retaining the Swell name. Dame's primary font replaced Blenny, and the colors were updated to align with Dame's brand palette. Given Swell 1.0's underperformance, I partnered with the e-commerce director to lead a redesign that aligned with Dame's branding and improved the user experience.

Dame.com

Launched November 2021

The goal of Dame.com was to create a seamless experience between products and content. It was meant to feel like a home base for Dame's offerings rather than just their blog. As the sole designer, I collaborated closely with the CEO and COO for their feedback. I also helped shape the content to tell Dame's story better. This case study explores this iteration.

Challenges

Dame faced a significant challenge in 2021 after winning the right to advertise on the NYC subway following a lawsuit against the MTA. However, the settlement terms required them to redirect the campaign to their blog, Swell, instead of their
online store.

Several constraints added to the challenge:

  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 Swell instead of the store. However, the blog had been deprioritized without an editor for six months.

  3. ContentSwell was not intended for product integration and failed to introduce users to Dame's brand story. No new articles had been published for six months, and the new editor was not scheduled to
    join the team until shortly before the launch.

  4. TechnicalAs the UX/UI Engineer, I was additionally responsible for coding the redesign and managing the migration of the hosting and domain.

Solutions

To overcome these challenges on an expedited timeline, I focused on a few key strategies.

✍️

Efficient Design

To expedite the design and development process, I concentrated on improving Swell's existing design while tailoring it to meet the requirements of the new version. I aimed to leverage as much of the current design as possible.

📚

Improved Storytelling

I revamped the experience to enhance storytelling since the subway advertisements required deliberate vagueness. The crucial objectives were providing users with a proper context and guiding them on their journey.

💬

Cross-Functional Communication

I developed a filterable spreadsheet of all existing articles to assist the new editor, who joined us just two weeks before launch. This helped her quickly identify top-performing content and potential optimizations, enabling her to create the required content before the launch.

👩‍💻

Technical Implementation

To handle the server and domain changes, I hired an assistant developer to help with that aspect. With their help, we efficiently migrated the hosting and domain to a new platform, improving site speed and reliability.

Discovery

To create a seamless experience between Dame.com and the e-commerce storefront, I conducted extensive research on contextual commerce and analyzed the patterns used by industry leaders.

Competitor Research Findings:

FINDING 01

Be explicit about what Dame is.

Since the 360 campaign focused on awareness, we couldn't rely on subtle hints like the "g" banner on Into The Gloss. Instead, we clearly communicated our brand and offerings across the entire website.

FINDING 02

Prioritize products at a top level.

Seeing that competitors prioritized their storefronts and gave significant space to products, we prominently featured our products and made them easily accessible to customers.

FINDING 03

Improve product integration.

Inspired by Food52's "From Our Shop" module, I created a similar feature that linked articles featuring products with a clear call-to-action to purchase.

Design Process

Wireframes

We prioritized the most important screens to accelerate our design process - the home, article layout, and category view. We knew nailing down the structure was crucial, so we started with wireframes to establish a solid foundation.

Two Wireframes sideby side
Homepage Wireframes

During the design process, we debated whether to use an article or a hero image to introduce customers to the brand. After careful consideration, we opted for the latter, which proved more effective in capturing the user's attention and generating interest in our content.

Initially, we had planned to feature our products lower on the page to adhere to design guidelines. However, we soon realized this would make them less accessible to customers. Therefore, we decided to move them below the fold, ensuring easy accessibility and increasing the likelihood of conversions.

Prototypes

To ensure a seamless user experience, I created high-fidelity mockups and prototypes before proceeding with the build.

Desktop showing homepageMockup
Homepage featuring illustrations
Desktop showing homepageMockup
Homepage featuring person

Initially, we had intended to use campaign imagery for the header. However, the mockups allowed us to recognize the abundance of illustrations required a more human touch. Therefore, we replaced the illustration with a lifestyle photo that added a relatable element to the design, allowing users to connect with the person in the image and enhancing the overall user experience.

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
iPhone showing hero
iPhone showing categories
iPhone showing product module
iPhone showing Dame Labs Feature
Homepage Screens

Takeaways

  1. Monthly revenue increased 380% after the redesign.

    Within just 2.5 months, the blog's e-commerce revenue not only matched but surpassed the total revenue from the previous year.

  2. Tight timelines can help us focus on the essentials.

    In this case, I had only five weeks and a hard deadline. We had to prioritize features and make quick decisions. Having a clear vision and goal was crucial for keeping us on track.

  3. Empathy is essential during a stressful project.

    Even though optimizing articles wasn’t my job, I saw that the new editor would need help getting familiar with the existing content. By giving her a headstart, we ensured that Dame.com was ready in time for launch.

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.

Candid of a smiling woman in glasses.

- Jocelyn Floro, Manager

Director of Performance Marketing at Dame