Design from the Inside Out
The digital design process needs constant refinement. One of the most impactful refinements we have made to our design process has been to wireframe and design the homepage last. After many years of thinking about the homepage as the hub of our design process, this change has streamlined our work, increased code reuse, produced a more consistent user experience, and achieved better results for our clients.
Every page is a homepage
Social media sharing and search engine traffic often drive users directly to content within a site. The user completely skipped what we used to think was the most important page! They get right into the content they are interested in first, then, if you are lucky, they back up and turn to the homepage for more context — what is this site, who are these people?
A recent client with a content-heavy site was the first to admit that the vast majority of their users bypassed the homepage and came straight into articles from social media. Their data showed that the homepage received less than 2% of the total traffic over a six month period. While there is high emotional value attached to a brand’s homepage, the numbers show that content pages — in this case article and taxonomy templates — are much more important to get right. Big media outlets have known this for a long time, and traffic from search and social just keep rising.
Mobile First & Homepage Last
It turns out that the Homepage Last philosophy fits very well with a Mobile First process.
Way back in the dawn of responsive design (all of about six years ago), Luke Wroblewski advocated that web apps be designed with the mobile user in mind first. That philosophy is standard practice now. The idea was pretty simple — the mobile experience has limited screen space, and that limitation forces designers to simplify and concentrate on hierarchy, actions, and user feedback. If your content was bloated, poorly written, or lacked calls to action, it would be evident very quickly.
The mobile-first movement was not only about mobile, it was about content. At its core, it was a content-first philosophy, sold within the trendy (at the time) mobile use case. One way to design content-first, then, means to centralize design around the core assets of a brand or business — their content. The types of content will vary from business to business, but we typically see a focus on articles, products, and services. These should be the first templates to tackle in a design project.
The homepage is not the core content. For new users, it serves as an important introduction to the brand, its values, and what differentiates it from the competition. It is a sales tool, educating users about the company and the deeper contents of the site. For your returning visitors, it can sometimes get in the way of the core content they are seeking.
When it comes to the design process, only after you truly understand the content of a site and how it needs to be presented to a user can you successfully frame the pitch of a homepage. So, start with the content first to help build that understanding.
Homepage Last quickens the Process
Interior pages — like a product or article — should contain common components that can be reused elsewhere in the overall site experience. A good example might be a block of “Related Products” or “Suggested Reading” to keep users circulating on your site.
With a content-first approach, you will find that once the content design is solidified, 75% or more of the components that are needed for the site’s homepage have been designed. With so many design decisions already made, the homepage comes together very quickly, and you have the added benefit of being able to get development underway before the homepage is 100%. Any changes needed for a landing page or homepage should be limited to color highlights or a change in label language.
Let’s think about this conversely for a second. When we designed projects homepage first, we’d often start with a list of components that it needed to include. These components were frequently out of context, pulled out onto the homepage because of some business goal. The design would go well until we applied these modules to the inner pages. Invariably, design decisions made for the homepage wouldn’t work well in a content context, leading to increased design time and in many cases and increase in development time as well. We now have two versions of the same module because we started from the wrong place.
The homepage should be the exception, not the rule.
Homepage Last keeps Engagement High
We all need goals to keep a project moving along and to keep the client engaged in the design process. Too often we have seen excitement drop if we lead with and finish homepage design — the most rewarding work is done, and clients feel that the rest of the process should be simple and smooth, and need less input or attention from them. With a content-first approach, the Homepage becomes a carrot that we can dangle to keep engagement high through the entire process.
Since so many design decisions have already been made, when we do finally get to the homepage, the focus is on the the core message and the sales pitch that a homepage design needs to convey.
Advocate for Content First, Homepage Last
We have noticed that wireframing, designing and developing the homepage last is quicker, more efficient, and contributes to higher client engagement all the way through the design process. It frames the site design in a series of modules, which guides design decisions organically and often speeds up development. Features can be developed as object-oriented modules to provide a consistent user experience, whether they reside on an internal page or the homepage. Homepage Last helps us deliver reusable design and code, which means a more consistent UI for the end user throughout a site. If you haven’t started framing your process this way, we encourage you to try it on your next project.
