Why Developing a UX-Driven Content Framework Saved Our Higher Ed Site

As Santa Clara Law’s content strategist, I found myself in an interesting position: our team (led by me) would need to create new pages with new functions for our site, but we had to do it without a developer.

Fortunately, our team had carefully designed a user experience-driven content framework that allowed us to continue our work – even without access to our website’s backend, CSS stylesheet, or other critical website elements.

Inspired by Buffer’s post earlier today, I wanted to share how our team set ourselves up for success (and how your organization – higher ed or not – can do the same).

Background: “Backend? Who Needs Access to the Backend?”

In 2014, I joined the Santa Clara University School of Law digital media team as a content strategist. My role was to bring a content focus to an agile development process as our team redesigned the website. Though higher ed websites tend to be 2-3 years behind most commercial sites, our team aimed to make Santa Clara Law’s new site as modern and user experience oriented as possible.

Our site has a pretty customized WordPress build. Because of how our site’s WordPress build was compiled, everything needs to be changed on the backend instead of the WP Dashboard. This made access to our backend – access only the developer had – pretty critical for any updates.

When we had our developer on board, everything was gravy. Changes were pushed quickly using GitHub as our repository (and method of maintaining version control), so we were able to blast through development at a breakneck pace.

Unfortunately, that only lasted for about 12 months.

Shortly after we completed the first year of work, we lost our developer. This person was a unicorn – someone with competent front-end and back-end skills. By hiring this person, the school was able to have just one web developer instead of two or three.

Unfortunately, replacing our developer proved to be a challenge. Being a higher ed organization located in Silicon Valley, we simply weren’t able to offer a competitive salary to attract someone with the same skillset. The university legal team also delayed the hiring of web developer contractors. By the time our contractors were on board, almost a year had passed.

Imagine that: an entire year without a developer. A year without the web designer or me (the content strategist) having access to the backend of our site. A year without being able to make changes to our CSS stylesheet, develop new page templates, or even install new plugins

In most cases, this could be a disaster. But fortunately, our forward-thinking content framework allowed us to continue site development (including redesign projects) without developer support.

Since many higher ed organizations desperately need to update their websites but lack extensive financial or personnel resources, hopefully sharing our framework can give a digital marketing manager an idea for her own framework.

Developing Our Content Framework

Our first task as a team was to re-imagine the Admissions portal. With the goal of delivering a UX-driven microsite developed around audience experiences, we got to work.

The first thing we did was interview stakeholders. This helped us understand the business goals behind the Admissions website experience, informing our design choices.

In addition to interviews, we reviewed website analytics data. Though we only had a month or so of available data when we began our first redesign project, future projects had the luxury of greater data sets. This allowed us to draw significant conclusions about how users’ expectations matched or differed from stakeholder intentions.

We also reviewed hundreds of other admissions sites from around the country, helping inform our understanding of how other schools were deploying modern tools to enhance their messaging.

Finally, we determined our content framework needs. We knew that the Admissions portal was simply the first microsite of many we would need to redesign. Due to our limited resources, we knew we didn’t want to develop a new page template for every project.

Solving these problems led us to develop several versatile page templates that have served as the backbone of our content framework. Built on Bootstrap’s (and its grid layout), We can deploy the same page template with just about any specific layout we need.

With this framework, we’re able to quickly design, deploy, and iterate new microsites. Best of all, we can do this without needing access to our website backend.

For example, with this framework, we were about to redesign Northern California Innocence Project’s site in about 3 weeks.

Here’s our whole process for developing microsites:

• Understand what needs the microsite serves (discovery). Business goals, audience expectations, content delivery, etc. We achieve this understanding through reviewing available site data and interviewing stakeholders.
• Create a site map. Based on the discovery phase, I create a new site map that compares existing site architecture with the proposed architecture. This step is useful in helping stakeholders see we aren’t going to “erase” any of their important content. (Since site maps are created based on available user data, they also help neutralize “gut feeling” objections about planned website elements.) This site maps helps us keep track of 302s, plan which content we can reuse (or which content we need to rewrite), and other necessary web development processes.
• Develop mockups. Once the site map is created, our team uses our content framework templates to quickly create mockups. These are shared with stakeholder for microcopy adjustments. Though a mockup of the home page is usually sufficient for the initial review process, we’ll create mockups of other pages when necessary (such as during the Admissions microsite redesign).
• Revise mockups and create sub-pages. Using the Design Mode Chrome extension makes stakeholders think our team can do magic. We revise several times until the stakeholders are satisfied with the redesign.
• Go live, then iterate. We publish the new site, then continue gathering data on how the site is being used. This helps us iterate design changes and improve each microsite further.

Read my post on creating a content-driven redesign for higher ed websites for a few more details on this process.

Our Content Templates

Because of our UX approach, every new page redesign allows us to deploy audience specific experiences.

Here’s what the content templates looked like before our redesign:

As you can see in the examples above, the site felt very dated. There was no clear audience path. In fact, the audience tends to be bombarded with an overwhelming number of options. Business goals are unclear. Customization is non-existent.

After implementing our content framework, we developed the following page templates:

Main Home Page

This template is fairly locked-in (until we get a developer), but we have the ability to customize the “Jumbotron” hero text, main content callouts, and featured news stories. Events are dynamically updated.

(Plus, through a quick-and-dirty hack, we can change the main hero image.)

Eventually, we’d like to make the main content callouts dynamic, too.

Microsite Home Pages

Based on a simple Bootstrap template, our homepage templates can be fully customized according to our needs. While every site shares the same basic content template, individual page elements are chosen based on the specific business goals of each organization.

For example, here’s NCIP’s page:

The new homepage segments the audience into individuals needing NCIP’s services, prospective clinic students/volunteers, and donors.

The other home pages we’re developing follow a similar pattern.

News Pages

Blogs and news have been redesigned to be more visually pleasing and incorporate lateral navigation.It enables readers to view more posts by author or organization, enhancing content discovery.

The main News page was developed to dynamically update as faculty, alumni, student news, press releases, and other news items were created. We have the option to add any news story to the Featured section at the top.

We also have the ability to feature stories on the main Santa Clara Law homepage with a simple checkbox:

Supporting Content Pages

With a little bit of Javascript, we created content page templates with scrolling right menus. This enables us to use microsite-specific menus and enhance content accessibility within the site.

This also serves the function of keeping the user in the microsite, helping guide the user experience. We’ve found this makes our microsites much more audience-relevant, delivering a better website experience overall.

Event Pages

Before, we used a system that required us to create pages in addition to calendar Event posts. Now, we utilize a redesigned Events post. These new Events pages are content rich and semi-optimized for conversions.

As seen in previous screenshots, Events are displayed throughout the site using widgets – main home page, news page, etc. Like connecting faculty members and organizations, this creates accessible lateral navigation and increased discoverability.

Moving Forward

Because we carefully designed our content framework with future website redesign projects in mind, we were able to continue working even without a developer. This saved our tails – if we’d relied on the kind of traditional content frameworks (or lack thereof) I’ve seen in higher ed, we would have been unable to continue working without a developer.

Our Content Framework isn’t perfect. Without backend access, testing specific site design elements (and conducting proper UX iteration) doesn’t really work.

We also can’t change certain design elements that are tied to our theme, such as the website logo (which is out of date).

In the meantime, we’ll continue creating new microsites to serve the Santa Clara Law community. We’ll also be able to adjust existing pages to better meet the needs of our audiences and pursue our business goals.

Like this article? Great! Let’s chat.