Selling fashion has always been about inspiring consumers to dress, talk and act a certain way. Unfortunately, text ads and generic product pages are poor ways of inspiring anything much, which is why content marketing is making such a spectacular comeback in the e-commerce industry.
Over the last year, we have seen the leading online retailers - some of whom happen to be Contentful’s customers - use brand storytelling to a spectacular effect. Captivating interviews with brand ambassadors, sharp style advice and artful lookbooks help brands like Mr. Porter, Nasty Gal, Everlane, Urban Outfitters and Gant to stand out from the competition and gain an enthusiastic following among today’s consumers.
Smaller businesses were slower to jump on a bandwagon of the content marketing: in part, because these initiatives generate results only in the long-term perspective; in part, because they can be tricky to implement on legacy publishing platforms. With this in mind, we have put together a practical guide to creating a lookbook on Contentful, which could be easily extended to create engaging long-form articles and interactive style pages.
Nasty Gal actively uses lookbooks to promote new styles and celebrate famous women.
In case you are hearing about Contentful for the first time, it is a lightweight, API-first CMS running in the cloud. Contentful comes with detailed documentation and easy-to-use SDKs; it is easy to plug into a mobile app, a single page app or an existing website; and it provides a user-friendly interface for creating and managing content.
Modeling a lookbook
In the paragraphs that follow, we will focus on architecting a resilient and scalable content model for a lookbook. In the fashion industry, a lookbook is a collection of professional photos conveying an artistic vision of a brand. Its primary purpose is to inspire viewers to embrace a certain style rather than directly promote the product.
The creative nature of lookbooks make them hard to implement in a traditional CMS, which organizes content in hierarchical trees and therefore requires all entry fields to be defined upfront and contained within a page-centric form. By contrast, Contentful embraces the flat content structure, which means that related pieces of content are linked together in a parent-child relationship.
This modular approach comes in handy when a single chunk of information has to be reused on several pages, information needs to be arranged in layers, or a parent entry contains a random number of child entries, which is often the case with lookbooks. As long as the original content type includes a field for entries, editors are free to add an appropriate type and number of entries whenever they need them.
Start with a holding container
We begin defining a lookbook content model by adding a top level content type that we shall name container. The container content type includes very little information — it only has the essential lookbook metadata (e.g. a title, URL, perhaps a cover photo). It’s true purpose, however, is to serve as a holding container for individual lookbook sections, which will be linked to an entry in a form of child entries. Here is how a container structure looks like in practice:
The container content type is used for assembling individual sections into a final lookbook.
If you come from a page-centric paradigm, the decision to separate metadata from actual content might seem counter-intuitive, but it neatly solves the problem of dealing with a constantly changing lookbook structure. Editors still have the option of deciding how long a lookbook would be, what images it would contain and how these would be laid out, but these concerns are dealt with in lower-level content types. As a result, the lookbook container retains a lot of flexibility and easily accommodates constantly evolving storytelling formats.
Next, organize the content
We now move to dealing with the child entries, where actual photos and words live and which corresponds to horizontal sections of a lookbook. Before we decide on the optimal number of content types to be created at this level, it is important to consider the specifics of your situation: what are the project goals, which workflows are in place, and who on the team determines the structure of layout elements.
The custom approach
For scenarios, where a design team wants to exert tight control over the final layout, or there is little variation from one lookbook to another, we could simply define a number of content types covering sections with alternative layouts. For example, there might be individual content types for adding full-width images, inserting quotes, embedding a video or displaying text. We will use a generic section name to describe this family of content types.
An example of content types for lookbook sections consisting of text and photos
Since all the design decisions have been fixed in advance, the custom approach is straightforward to implement and leaves little room for editorial error. Whenever an editor wants to add a new section to a lookbook, she creates an entry of the desired type and fills out the necessary information.
The downside of this approach is that editors might grow frustrated in dealing with fixed design patterns. Plus, over time, the number of content types might grow as the team tries to accommodate minor stylistic variation between sections. You can easily avoid both pitfalls by introducing a dropdown for minor layout options like element alignment or background color.
The universal approach
In teams, where editors are trusted to decide on the visual structure of a page, or there is a lot of variance between lookbooks, we recommend introducing an additional layer for dealing with layout decisions. Let’s call this intermediate content type module and use it to manage how content should be presented within the section. The module type brings a lot of flexibility to the table, for now editors can freely mix photos with text and videos, control item order and decide how individual elements will be arranged in the section.
The module content type enables editors arrange individual layout elements.
Lookbook images, videos, and texts would then be entered as child entries in a module content type. To distinguish the current scenario from the one described earlier, let’s call the content type holding these entries slots. When design decisions are fixed in advance, it might be useful to create separate content types corresponding to alternative section layouts. However, in the more complex scenario, where layout decisions are already handled within the module content type, we can simply re-use the same content type for all types of content.
The slot content type is used for adding images, videos and text to a lookbook.
Integrate product information
Another important component that we have ignored until now is product information. This information typically includes essentials like a title, photo, price, and ID. The idea is that while looking at a branding material, a user can either add the product that caught his eye to a shopping cart or navigate to the product page and complete the purchase there. There are three ways to integrate product info into visual pages:
- Hotspot overlays an image with tooltips, which reveal product information when a mouse hovers over a tooltip (see Ugmonk)
- Call to action (CTA) button, usually placed at the bottom of a lookbook, leads visitors to a product page (see Everlane)
- Contextual product placement displays products within the page, when a user hovers over a particular section (see Mr.Porter, Nasty Gal)
We will not get into the details of implementing these integrations on the front-end, but it is worth examining how they fit into the overall content model. As you’ve probably guessed, the "CTA button" path is the most straightforward to follow - all you need to do is add a link field in the container content type.
Mr.Porter seamlessly integrates its products into the photos used throughout an editorial article.
The appropriate content type for contextual product placement depends on whether products are linked to a section or an individual photo. In the former case, the info should be added to a section/module content type, while in the latter you need to use individual slots. Depending on where your product information is hosted, you can then either reference an external source or link directly to an entry within Contentful.
The 'Hotspot' presents by far the trickiest product integration scenario, because in addition to a product link, this option also requires editors to provide X and Y coordinates for the location of a tooltip on a photo. Filling out this info multiple times for several dozens of images can be extremely time-consuming, which is why we prefer to use the first two approaches.
Dealing with contingencies
To recap, our model consists of a container for holding individual lookbook sections at the top, an optional module for determining the composition and layout of these sections in the middle, and actual photos, quotes and texts at the bottom. To ensure that this content structure serves you well in the future, we now need to proof our content model against unforeseen contingencies and random human errors, which are a part of a daily editorial grind. Here are some commonsense rules to follow:
Educate editors with inline tips
Modular content structure makes it very easy to lose track of where and how a particular piece of content is used and increases the likelihood of wrong content type being linked together. To avoid these problems, always make sure to include useful tips and practical examples helping editors to understand the role of specific fields and content types in the overall structure. Eileen Webb has some valuable advice on the topic.
Be frugal with content types
Defining content types is an art rather than a science, but one rule that consistently yields positive results is keeping the number of types down to a minimum. Capital One bank has created 2,500 pages of content with less than 20 content types, which shows the versatility of a well-designed content model. Eliminate duplicate types ruthlessly, especially when the difference between them is purely stylistic. For minor variations, consider using an options field within a generic content type.
Make use of validations
A modular approach to content creation does not excuse editors from sticking to commonsense guidelines. Missing assets, long paragraph and incompatible entries can easily unravel even a single-column page, not to mention a sophisticated multi-column, responsive template. The great news is that this calamity is entirely avoidable once you learn to use the validation rules. This knowledge base article lists some of the critical errors you can guard against.
The takeaway
Inspirational lookbook content offers a scalable and cost-effective strategy for attracting a loyal audience and differentiating your brand from the competition. Unfortunately, the lack of technical know-how and constraints imposed by common shop software and publishing tools stand in the way of its adoption. Our content modelling series is meant to provide you with a blueprint on how to structure your content so that your developers can quickly enhance your existing tech stack with content. We have a number of other guides planned too, so if you are interested in the topic, don't forget to sign up for our newsletter.
