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.
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.
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.
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.
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 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