Content-First Redesign of Two University Sites
The client has had a campus in Wisconsin for over a century. They had their website for… not quite as long. Long enough though that it needed an overhaul. At the beginning of this project, they also took on a sister university and needed a site for it, too. So whatever we were going to do, it would need to be leveraged twice.
The Basics
The client, a Lutheran University, came to us asking for a new website look to go along with a rebranding our agency was doing for them. I led this site redesign by first recognizing that a new look applied on top of the existing site would not accomplish their goals. I collaborated with the client’s internal team to understand their existing problems and what they had been attempting to accomplish before bringing us in to help.
We learned that their current site has grown organically in good ways and bad over the years. They no longer felt that they could keep it going well enough. And they need to leverage this design to work for a sister university. They also felt the site lacked the powerful message of their Lutheran faith.
My Contributions
Research & Discovery
- Stakeholder Interviews
- Secondary research analysis and implementation
- Client and competitor web audits
Information Architecture and Content Design
- The site overall via the site map and user flows
- Key areas of the site, such as what should make up the academics section
- Page-level design, including wireframes and content outlines
Collaborating on a modular design system
- A modular design and content system that the client could use to build out the remaining 1,000+ pages
The Process
Research and Discovery
In addition to my (and my coworker’s) experience with this and other higher-ed clients, I gathered secondary research on university website usability to inform our decisions. I also did audits of the client’s existing sites and competitor websites. I reviewed the stakeholder interviews that our agency did as part of the rebranding process and talked with several of them myself.
The Process
Information Architecture
I worked on the information architecture and content of the site on three levels: the site overall, the key sections of the site, and at the page level. At the page level of things, I designed wireframes for our designers and content outlines for our writers.
The Process
Content Modelling
Once we had the pages of the site map, we needed content for each of them. Initially, it isn’t about the specifics of the school, but what people need to know -which questions are they trying to answer as they search for a school.
I started with design sprints to discover everything that could go in a section or on a page and then narrowed that down based on what the school offers or had to say about particular subjects. The initial lists were informed by our research and audits.
Basic outlines to complex layouts
After gaining agreement with the team on the basic outlines, I moved on to making them more detailed and more specific to the school’s brand and content needs. For each key page, I developed a low-fi outline wire, a mobile content-based wire, and a desktop wireframe. I also created Word doc outlines the describe the needs of each section of the page. Theses were used by our writers to ensure consistency.
The Process
Modular Design System
The client’s initial request was simply for a handful of templates. After auditing their site, it was clear that a few well-designed templates weren’t going to cover it. Instead, I designed the pages using a system of content blocks that could be rearranged and reused.
This allowed the client to build out the rest of the site after our time on the project was over. The system included both reusable design blocks as well as extensible writing guides.
Collaboration on design and development
I worked with our team’s designer as he matched the new brand look to the modular wires. We did this for both universities, altering colors and graphics to match, and moving content around per each school’s needs. In the end, we created a guidebook for all of the modules and templates. This described the admin features, the look of each piece, and when to best use it.
I also worked with the client dev team to help bring that system into their CMS. I helped research capabilities and possible methods, while also guiding them about what inputs and relationships would be necessary to make everything function as designed.
The end?
The Results
The site launched to great client and audience satisfaction. They have been able to continue evolving it via the modular system as they learn more about their audience behavior. It exists as a great example of collaboration between the agency and client teams.
Page Views Increased: 29% for Site A and 80% for Site B
Pages/Sessions Increased: 97% for Site A and 91% for Site B
Bounce Rates Decreased: 34% for Site A and 43% for Site B
Thanks for taking the time to get all the way down here.
Want to talk about this project and maybe get into the weeds about it?
I’d love to discuss this project (and any other) with you. Just reach out to me at gray.benjamin@gmail.com.