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
Tools + Skills
Sketch, Invision, WordPress, Cross-Functional Collaboration
Team
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:
-
TimingWith five weeks’ notice, right before the holidays, we had to pivot to work on the tight timeline.
-
DestinationWe were required to link to Swell instead of the store. However, the blog had been deprioritized without an editor for six months.
-
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. -
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.
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.
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.
Takeaways
-
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.
-
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.
-
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.
