Being a creative while working at a highly skilled dev firm has provided me a lot of insight on how workflows are changing for the better. The days of building sites from high fidelity compositions are fading fast. Development teams no longer have to wait for “signed off” wireframes and designs before getting started. Content, after all, is the UX. And the sooner it begins to populate the site build, the better the experience for all.
Lorem Ipsum Must Die
We’ve all seen it. I’ve relied on it many times when designing sites in the past: Beautiful, pixel-perfect comps with Greek text filling the gaps. Everything lines up nicely and the client can’t wait to use their powerful CMS to build pages to look just like it did in Photoshop or Sketch.
The reality, of course, is this rarely happens. What does happen?
- The customer never gets around to writing the content for all these wonderful comps and the end result is a site that looks half-baked. Or…
-
Content Admins get frustrated that the page templates provided can not accommodate the copy/imagery they wish to insert.
Often times, the agency engagement is over, and the customer must rely on their own IT resources to adjust the template.
Original Creative
Actual Rendering with Content (Now imagine what happens when it gets translated to German.)
So how can this be avoided? After all, the content strategy for the new site may still be getting fleshed out.
Many times, simply using the site’s existing content will provide enough fidelity. (I’ve even seen use of competitors’ site content used as a placeholder.) It provides a more accurate representation of the live site and also help expose gaps early so that they can be iterated on.
Iterations Are The New Workflow
In the past, developers and project managers hated to see modifications made during a website’s build. These changes were often time consuming, expensive and delayed the launch of the site. Often, UX and creative teams were disengaged by that point. It was up to dev teams to patch things up. Ever ask developers, who are pressed to launch, to go backwards? It’s not pleasant.
But what if iterations happened earlier? Much earlier.
By utilizing a Content-First Strategy from the very first sprint, components and pages begin to take shape. Starting with global elements (like header/footer), then moving to pages that represent the most valuable content (like product/article detail pages), the benefit of working with live content is felt immediately.
This “raw” state where CSS styling has yet to be applied – resembles more of a glorified wireframe than a completed web page. Each page is composed of a variety of structural and content components rendered in a default Bootstrap format. It might not be pretty to look at, but it’s there. Actual content is living in the environment for which it is made for – and it’s responsive. Changing the structure of a page or a components rendering to improve the UX can be done on the fly. Nothing is set in stone. And best of all, none of the content will be lost when making these transformations.
Below are examples of three highlight components and how they render in raw and final formats.
Highlights shown in raw (default) styling
Highlights shown with CSS applied
As wireframes and style tiles (see: http://styletil.es/) mature, CSS and interactions are added intermittently to the branch template, and the brand begins to take shape. In the beginning, it might just be fonts, navigation, buttons and a color palette.
I have to admit I was somewhat skeptical about how clients would react to this process. But, as it turns out, they loved it. Not only are they getting a chance to see their site come alive, but they can also see how pages are built within the Sitecore Experience Editor using SCORE. As iterations continue, content components (like carousels, filters, highlights…) begin to take shape. Before you know it, you’ve just built over half of the website, and have an arsenal of re-usable components to use in fleshing out the rest.
This Old Dog Learned A New Trick
I understand this approach is different. Sites have been built for years using a similar formula that goes something like: 1. Research; 2. Content Strategy; 3. Information Architecture; 4. User Experience; 5. Design; 6. Development; 7. Content Entry; and 8. QA (with and a lot more numbers in-between).
I’ve used slight variants of this approach in working on countless desktop, tablet and mobile comps through the years. The one constant, then and now? The client will change their mind.
There has to be a better way, and a Content-First Strategy is a big step in the right direction. Is it perfect? No, not yet. But, as this new workflow is refined, I have no doubt that the old formula will begin to resemble art boards and Rubylith.
This is a great article. There are a lot of UI tools out there that we can use to help drastically different amounts of content look visually appealing, but content-first strategy is best for the business. UI developers always receive comps just like the examples in your article, and we immediately know that we’re going to have to go back and forth with the client when we start content entry. Lorem ipsum looks beautiful in designs, but will never be on a published page. I’m thankful we have great designers at BrainJocks who know our product and are gung-ho about content first!