The M Dash

Background

M.M.LaFleur is a women’s fashion brand specializing in functional and stylish clothing for work. M.M.LaFleur uses The M Dash, their digital magazine, to share career advice and style inspiration to current and potential customers.

Problem

The existing digital magazine felt outdated, inconsistent with the visuals across other channels, and very limited in flexibility and functionality. My teammates on the Creative team had been creating a wide variety of writing and photography for The M Dash but they had no way to distinguish different articles through different layouts, no way to integrate shopping into the content, and very little flexibility to test and evolve their content strategy over time by trying new formats. To get started, we looked at a lot of inspiration across editorial, e-commerce, and fashion sites. The Gentlewoman magazine and the Net-a-Porter style blog became two of our main design references.

My Role

I worked in close collaboration with one other designer from my team, Emalis Robateu. We both contributed to competitive research, presentations, and the design process. Once Emalis left for another design role, I completed the design process, the QA process with developers, training teammates in the new tool, and the redesign of The M Dash homepage. Our art director was Callie Kant. We also collaborated closely with the agency, Studio Simpatico, on the development of the tool throughout the research, design, development, and handoff process. (See their article on the development process here.)

GOAL 1

Design a modular article builder that can be used to create a wide variety of article types.

The first phase of this project was the design of the article builder. Our conversations with the content team gave us criteria for what this tool should be able to create: listicles, essays, profiles, interviews, advice articles, styling articles, and photo essays.

GOAL 2

Integrate shopping functionality from the e-commerce website into The M Dash.

GOAL 3

Redesign the outdated homepage

In addition to the redesign of the article CMS, I also redesigned The M Dash’s homepage and navigation within the same design system.

The M Dash homepage before redesign:

The M Dash homepage after redesign:

These homepage updates were not implemented due to changes in business strategy around 2020 and Covid

The Design Process

As we got closer to finalizing our designs visually with our art director, I began creating a product specification document to keep track of all of the options available in each module we wanted Studio Simpatico to build. This tracked things like which modules had width options, padding options, and alignment options. It also kept track of what text fields were available in each module and matched those text fields to type styles in our type style guide. This is the part of the process where mock-ups and visuals became a flexible, modular design system. See some of the artifacts of this process below:

A snippet of the product specification document to show how it corresponds with the type style guide.

The type style guide - built in Sketch alongside the whole project

Next project: Tory Sport

Conclusion

For further exploration of this project, here are a few examples of articles that have been published with this CMS tool. Each of these uses different modules and elements to create a unique layout for different types of content:

THE PROFILE: 

Mary Cain Refuses to Stay in Her Lane

THE STYLING STORY:

How to Layer T-Shirts Like a Professional Stylist

THE LISTICLE:

6 Tips for Stopping Anxiety in Its Tracks

THE ESSAY:

The Reason 1 in 4 Women Might Quit Her Job

THE INTERVIEW:

M.M.’s Co-Founders on What Makes Their Relationship Work

THE PHOTO ESSAY / LOOKBOOK:

The Story Behind the Ready to Rally Collection