Beyond being great for managing navigations and extending the native Pages functionality on your production website, we’ve found that NavEE and Better Pages, when paired with Bootstrap, make it incredibly fast and easy to create clickable wireframes.

Why Clickable Wireframes?

Not only are clickable wireframes critical for any kind of user testing of your information architecture (IA), they are superior in every way to handing your client a flat document with your proposed sitemap. Allowing your client to actually click around the architecture and really experience the IA will reveal issues earlier and leave everyone feeling more confident that you are on the right track.

You can skip straight to our method for creating clickable wireframes, or continue reading to learn how we get there.

Getting to Clickable Wireframes

Before we get into the nitty-gritty of how ExpressionEngine, NavEE, Better Pages, and Bootstrap can be combined into an awesome wireframing tool, let’s talk about how we, at The Outfit, get to the point where we are delivering clickable wireframes. I realize everyone has a slightly different approach to this process, but this is what we tend to recommend to our clients. For this example, let’s assume that the client has an existing web property that is going through a full redesign/redevelopment process.

Kickoff Meeting(s)

You have to start somewhere, right? We meet with our clients to understand their company, their existing website, their users, and what they define as success for the future of their web property. We work collaboratively to determine what is and is not working with their current website, what they like and dislike about their competitors’ websites, and look at websites they feel are truly successful.

Personas

The next step is creating personas for their users. The goal is to understand the different types of users who will be visiting their website and what they’re trying to accomplish.

KJ Exercises

Based on the personas, we host a series of KJ exercises. We include internal team members from different departments as well as actual users representing the different personas. At the end of this process we deliver a report with our findings to the client.

Sitemap

We use the results of the KJ exercises, as well as the information we gathered during the kickoff meeting about what is and isn’t working on the current website, to create a proposed sitemap as well as very low-fidelity wireframes of each of the unique templates that will be used throughout the new website.

Creating Clickable Wireframes

At this point, we have all of the information we need to create clickable wireframes for our client.

Use Bootstrap to Create Each Template

You don’t have to use Bootstrap, but it is fast and easy to implement. At this point in the process we are more interested in testing the IA, so the templates don’t need to be particularly high fidelity.

We’ll create a fictional record label for the purpose of this example.

Create a Wireframes Channel in ExpressionEngine

We start by creating a channel in ExpressionEngine specifically for our clickable wireframes. The channel can contain as much or as little information as you need, but for the sake of this example, we’ll keep it simple. Our channel will include the following fields:

• URL & Template: A Better Pages field, which enables us to create a unique URL and select a wireframe template to use.
• Headline: A simple text field for the H1 of the page.
• Brief: We like to create a Brief field to describe the functionality of the final page, as well as to list any assets or new copywriting that may be needed for the final page.
• Navigation Item: A NavEE fieldtype which enables us to quickly add a new page to the navigation while we’re publishing.

Better Pages Setup

Our Better Pages field is configured so the only templates that can be selected are the Bootstrap wireframes we created. Keep in mind that if you need specific fields to populate some templates, but not others, you can use Better Pages to show or hide fields once the user has selected the appropriate template.

Build the Navigation Using NavEE

Now we’ll build our full sitemap using our new ExpressionEngine channel. You can create as many navigations as you need to power the clickable wireframes, but for this example we’ll set up a Main Navigation, Utility Navigation, and Footer Navigation.

With NavEE it’s easy to make changes to your IA as you do your user testing. Making changes to your clickable wireframes is as easy as dragging your navigation item to a different location. The beauty of this method is: as you make changes, all pages across your clickable wireframes are updated immediately.

In our wireframes, the highlighted sections below are all powered by Main Navigation. Further below, I’ll include NavEE code snippets for each section using the Bootstrap markup.

Primary Navigation

This is the primary navigation at the top of each page. It outputs the top-level items in your navigation.

<div id="navbar" class="navbar-collapse collapse">
  {exp:navee:custom nav_title='wf-main-nav' class='nav navbar-nav' selected_class='active' no_wrap='true'}
    <li{if class != ''} class='{class}'{/if}>
      <a href="{link}">
        {text}
        <span class="navbar-link-subtext">{custom}</span>
      </a>
    </li>
  {/exp:navee:custom}
</div>

Sidebar Navigation

The sidebar navigation is dynamically generated based on the page you are currently on.

{exp:navee:nav
  nav_title='wf-main-nav'
  start_nav_from_parent='true'
  selected_class_on_parents='true'
  selected_class='active'
  class='nav nav-pills nav-stacked sub-nav'
  only_display_children_of_selected='true'
}

Breadcrumbs

The breadcrumbs are also dynamically generated based on your current page.

<ol class="breadcrumb">
  <li><a href="/wireframes">Home</a></li>
  {exp:navee:custom_crumbs wrap_type='none' nav_title='wf-main-nav'}
    {if is_last_item}
      <li class="active">{text}</li>
    {if:else}
      <li><a href="{link}">{text}</a></li>
    {/if}
  {/exp:navee:custom_crumbs}
</ol>

Create a Sitemap Template

One final thing we recommend is to create a unique Sitemap template. This allows us to output the current state of the full IA which is kept up-to-date as changes are made during the user testing process.

Taking Things Even Further

This example is, admittedly, fairly simple for the sake of brevity. However, because your wireframes are built on a system as robust as ExpressionEngine, it can always be extended to do more.

Template Notes / Feedback

If you want to allow your client to let their stakeholders make notes on content needs, or on pages in general, you can turn comments on for any of your templates. Doing so will enable users to have conversations in-line at the bottom of each page of their clickable wireframes.

Content Development

Once your user testing is complete and your IA has been approved, you can use your Wireframes channel to let your content creators start flowing actual content into the website. Doing this is simply a matter of replacing the placeholder text in each wireframe template with an actual ExpressionEngine channel field.

Update Clickable Wireframes During Design Process

Now that the IA has been approved, you’re likely moving into the design phase. As you move to higher fidelity wireframes for each template, and then final designs, there’s no reason to not replace Bootstrap templates with their refined counterparts.

Your clickable wireframes become a place for your client to watch the design process unfold in a way that’s more satisfying—and revealing—than via Photoshop comps. Additionally, your client will be able to see the responsive nature of your designs without flipping between different comps.

Transparency

We find that the earlier we get our clients looking at and interacting with the skeleton of their future website, the easier it is to mitigate any risks incurred by doing too much work behind closed doors. Being transparent about the process and having frequent deliverables not only helps avoid large amounts of back-tracking, it also increases transparency in the IA process.

If you’d like to learn more about this process, or if we can help you with your project, give us a shout!