Case study: Redesigning a website with the core model
How I used the core model to align an organization on a shared vision for their website and redesign it from the inside out
Imagine you are a designer tasked with redesigning an organization’s website. You start by doing some stakeholder interviews to identify the organization’s business objectives for the redesign, then some user research to understand the needs of the site’s key users, and finally a full site audit to familiarize yourself with the current site experience. After this time intensive process, you synthesize all of the information and crank out some wireframes.
When it comes time to review initial concepts with stakeholders, you find that they can’t provide constructive feedback because they don’t have a unified vision for the redesign. Jane from marketing needs a particular module on a page to meet her department’s goals, while Tim from the fundraising department wants a “Donate” button front and center on every page. Their goals might also conflict with the needs of the site’s users, and you realize a lot more conversations need to happen to get everyone on the same page.
A collaborative way to start the design process
Recently, I helped a company called Human-I-T redesign their website using the Core Model framework. I ran workshops with various departments across Human-I-T and we brainstormed the website together. In essence, the framework had us think critically about what the core pages of the website are and what content should be on those pages to best help users accomplish their key tasks. It resulted in less time aligning on which buttons and modules should go where, and more time building a shared vision for how the site could best help its users.
About Human-I-T
Human I-T’s mission is to provide more equitable access to technology by diverting it from landfills to the hands of people that need it. Rather than let e-waste sit in a landfill and cause both harm to the environment and the people that live around them, Human-I-T refurbishes and restores technology so that it can be redistributed at a lower cost. They also help communities get connected to the internet by identifying low cost options in their area and providing digital literacy training and tech support.
While still a pretty young company, Human-I-T is growing fast. They have distributed over 161,000 devices and diverted over 8 million pounds of e-waste. Like any ambitious business, they needed to get their message across to more people, expand their services, and make it easier for more customers to work with them. However, their current website was not set up to scale and suffered from a slew of user experience issues. It was difficult to understand what Human-I-T’s core offerings were, and pages did not serve users helpful content for accomplishing their tasks (see image below).
Human-I-T was ready for a website redesign. They took my offer to run a series of workshops using the Core Model framework to guide the goals of the redesign through the lens of their business and their core users.
The Core Model: An overview
Users go to a website to get something done, and the pages on a website should support their tasks. A business also needs to accomplish specific goals with each page of a website. The core pages of a website are ones where these business goals and user tasks overlap, and are integral to a website’s effectiveness. Non-core pages typically serve some sole business goal, and don’t serve a user task. For example, Human-I-T had a page to help them get more contracting & consulting gigs, but users were never looking for that! You can run core model workshops differently depending on your needs, but my goal for Human-I-T was to first identify their core pages, model each page with them (saving the homepage for last), and finally establish a loose information architecture.
The Core Model framework emphasizes the need to identify and model core pages before thinking about the homepage and information architecture. Stakeholders are often eager to tackle these facets of a website first, but they end up being less impactful when prioritized over its core pages. After all, the homepage is meant to inform users and drive them to pages that can help them accomplish their tasks. How can it be designed before knowing what those core pages are?
Aligning on Core Pages
The first step was identifying Human-I-T’s cores. What pages must the site provide that allow users to accomplish their most critical tasks and also support goals of the business? I facilitated this exercise via a “Core Page Identification” worksheet. The top section of the worksheet included:
- Mission Statement: Why does the organization exist? Every page on the website should ladder up to the organization’s mission.
- High-Level Business Goals: What does the organization want to achieve? Business goals, if accomplished, should accomplish the organization’s mission! The idea is to think more high level at this point — no need to have well-defined KPI’s.
- High-Level User Tasks: What do users want to get done? Users go on a website to accomplish a task, and the site must support the user in accomplishing that task well. User tasks can be determined empirically via user interviews, surveys, and other research methods.
The bottom section of the worksheet helped us document the core pages: the pages where the business goals and user tasks overlap. This was done by assigning a core page to at least one business goal and user task combination. For example, the high-level user task, “Sign up for internet access” overlapped with the business goal of “Removing barriers to accessing internet & technology.” Therefore, we identified “Getting low cost internet” as a core page.
Modeling the Core Pages: 5 Steps
The goal of the next series of workshops was to model each core page as a group. This was done by completing a core model worksheet together for each core page. Ideally, these workshops should include every major stakeholder (e.g., marketing, business development, fundraising, and even the CEO!) so all aspects of the business can be deeply considered.
1. Identify the primary audience
The first step was to think critically about who would primarily be using the page. Defining the primary audience helped stakeholders build empathy and hone in on user tasks and goals. In the case of Human-I-T, users could be community organizations that want to put on technology focused programming for their communities, individuals interested in various technology services, or corporations that have reusable e-waste.
Let’s use the example of the “Get low-cost internet” core page that was identified in the first workshop. The primary audience we agreed on was lower income parents with one or more children looking to get internet for their family. Many parents use this service for finding low cost internet because they are struggling financially, and are unaware of the options available to them. Stepping into the user’s shoes helped us think deeply about how to quell anxiety surrounding cost, and clarify Human-I-T’s process for finding options in their budget.
2. Expand on business goals and user tasks
The prior core page identification workshop helped to identify high-level business goals and user tasks for the “Get low cost internet” page. The next step was to expand on them for this specific page by answering the following questions as a group:
- What does Human-I-T need this page to accomplish so the business can remove barriers to accessing internet?
- What do users want to do on this page before signing up for internet access? What do they want to know?
The content we ultimately choose to surface on a page should ladder up to the expanded business goals and user tasks identified in this step. We identified the following for the “Get low cost internet page.”
3. Identify inward paths
The core model considers the entire user journey, not just the page in isolation. There is always something driving a user to a page, whether it is an advertisement they received, or a simple Google search. In the case of the “Get low cost internet page,” we thought through all of the most common scenarios how someone might get there. One of our stakeholders from marketing was also able to pull up Google Analytics to get data on the most common digital touch points. We uncovered inward paths like:
- Inserts in a Human-I-T computer they just bought
- Organizations we partner with emailing their communities about getting low cost internet
- Google searches for low cost internet
This approach really helped the stakeholder group step into the user’s shoes and think about what led them to a particular page.
4. Create a content outline
Every core page on a website must surface content that serves the goals of the business and the users. At this point, we wanted to focus more on what we wanted to convey rather than how it would be presented. For example, we knew we wanted a “How it works” section on the “Get low cost internet page,” so users knew exactly what to expect in the sign up process. However, we didn’t nail down exactly how this would be done (e.g., a video, infographic, image + text, etc.). I’ve found that identifying the appropriate module is better left for the design phase.
In addition, all business goals and user tasks should be accounted for when modeling core content. To do this, we discussed what message we wanted to convey to address each user task and business goal, and crossed them out as we went. As we brainstormed content, I also tried to order it in a way that flowed nicely. This helped the group imagine how it could manifest on the page, and served as an effective content outline.
5. Identify forward paths
The final piece of the Core Model worksheet is identifying forward paths; what should a user do after seeing the page? Pages on a website should always drive users to take an appropriate action. In the case of the “Get low cost internet page,” we ultimately wanted to drive people to connect with a support specialist to help with internet sign up. Users on the page might also benefit from going to the digital literacy training page because high cost has deterred them from getting internet in the past.
Thinking about forward paths also helped resolve a core issue on Human-I-T’s site involving overlapping audiences. While the primary audience for the “Get low cost internet” page was low-income families, organizations could also work with Human-I-T to provide low cost internet services for their entire community. We opted to focus core content on individuals, and provided a forward path to a page providing more details for organizations.
A new information architecture and navigation
Now that all of Human-I-T’s core pages were identified and modeled, we could start to organize them into new top level navigation categories. Since users were coming to the Human-I-T website to accomplish a particular task, we phrased navigation categories as task-oriented verbs. This is known as a task-driven navigation, and has been shown to be more effective for helping users navigate websites.¹ Human-I-T’s original navigation was audience-driven. Important navigation categories were labeled as “Community Services” and “Business Services,” relying on users to self identify and know which category would help them get to where they needed to go.
The new pages were modeled with key user tasks in mind, making it easier to group them in a task-driven manner and provide a better user experience. Below is part of a worksheet I created to organize core pages into task-driven categories.
From core model worksheets to a finished website
The Human-I-T team was able to use the core model worksheets as a way to articulate their vision to a creative agency and guide the design process. The end result was a beautiful website with a task-oriented information architecture, a homepage that clearly articulated Human-I-T’s mission & core offerings, and a suite of user-focused core pages with effective forward paths.
The “Get low cost internet” page was redesigned to better explain the process for signing up for low cost internet and provided a clear forward path for organizations interested in providing service to their communities. The language used on the page was crafted to empathize with users that are likely struggling financially, and helped convey how Human-I-T could help them find a solution.
Results
The new website was launched in August 2021, and is already showing significant improvement. The bounce rate for the new site is approximately half that of the old site, with the new site yielding a 27% overall bounce rate compared to 53% on the old site. These results indicate that when users land on a Human-I-T webpage, they are significantly more likely to continue to another.
What about the “Get low cost internet” page that was used as an example throughout this article? The results were quite stunning. Bounce rate is significantly lower for the new version of the page, with the new version showing a 0.67% bounce rate compared to 51.79% in the old site! While more data still needs to be collected, hopefully this is enough so far to demonstrate the value the Core Model framework can bring to your organization.
Conclusion
The next time you are tasked with redesigning a website, or even just a single page on a website, I highly recommend starting with the core model framework. It is an exciting opportunity to involve external stakeholders in the design process and align everyone on a shared vision.
If you would like access to any of the templates referred to in this article, please feel free to email me at zeke@zekeskovron.com. If you are interested in learning more about the Core Model, I highly recommend Ida Aalen’s article below.
References
[1] Gerry McGovern. The benefits of a single task-driven classification / navigation.https://www.linkedin.com/pulse/benefits-single-task-driven-classification-navigation-gerry-mcgovern
