For this project, I partnered with a small design agency that was hired by a nonprofit organization to overhaul their public-facing website. The agency had recently completed user research and brand strategy work, and it was time to put those new insights into an experience strategy and website plan.
Client Story:
Website Reset
Industry: healthcare, education
Journey Mapping
I started with a series of stakeholder workshops, which allowed us to identify the main pathways and visitor types we wanted to focus on for the website. Instead of a single prescribed journey, I like to map smaller task-based pathways that can be mixed and matched to make up any one individual journey. This more accurately depicts the way people experience a website.
-
How we think about a website
When we know a lot about something (like the organization we work for) we tend to categorize the information in a way that makes it easier to understand. This hierarchical way of thinking can be helpful, but it’s not typically how your visitors see it.
-
How we behave on a website
Every website visitor is a unique human with different needs and challenges. We can’t control their journey, we can only guide them with an intuitive scent trail, and the most personally relevant information.
-
How we experience a website
We experience our world as linear, regardless of the structure around us. A building is experienced room-to-room, and a website is experienced page-by-page. Visitors care more about where they’re going than what the structure of your site is.
Our workshops yielded 3 distinct user groups (personas) with 7 major pathways shared between them. These pathways formed the basis of the site map.
Content Strategy
For each section from the new site map, I collaborated with the client to document…
Intended purpose
The reason why this section exists. It’s usually centered around a user task.Value to user group/persona
Explanation of what the user gets from their visit. This is the user need we are meeting.Points to consider
Examination of the research in order to highlight the most relevant insights.Themes
These generally come from brand messaging and positioning.Tools/Approaches
If there are ideas for features or specific experiences we capture them here.Content Outline
With everything above figured out, we identified the major content blocks and hierarchy of the section.Calls to Action
This is what we want visitors to do next in order to continue their journey. We typically assign both primary and secondary CTAs.
Image: Example of a section’s content map, a visual way of showing how content blocks will flow within a section hierarchy
Homepage Strategy
My client’s existing website had been experiencing organic growth for a while, which was most apparent on the homepage. Multiple initiatives and priorities over the years had been awarded space on the homepage, and as a result, the page had grown quite long.
By looking at the website’s analytics, it was clear that this lengthy homepage was not working well for visitors since 83% stopped scrolling before reaching the page’s mid point.
I collaborated with my client to create a homepage strategy that prioritized access to the key pathways and a governance plan that would maintain the integrity of the homepage for years to come.
Homepage Purpose
The purpose of my client’s homepage was to set brand tone and provide access to key pathways. This was also where they would feature one product at a time, and communicate critical/urgent information when needed.
Homepage Principles
Express diversity, wellbeing and transformation
Present a competent and credible organization with broad acceptance globally
Position our products as being in support of our mission, not just because we have something to sell
Inspire visitors with stories of positive outcomes
Image: Abstracted illustration of the current home page with scroll analytics
Wireframes
My next step was to bring together the strategy and content outlines and begin to lay out the basic structure and features for the new webpages.
Wireframes are the blueprints of the user experience. I keep them as basic as possible with simple shapes and little color because they’re intended to be quick and dirty for gathering rapid feedback.
This initial visual expression of a website helped get my client’s team aligned behind a vision. Team members who had been quiet up until this point began to engage and show buy-in as the new website started to come to life.
These wireframes were fashioned into a prototype and used to gather feedback from stakeholders, partners, and user group representatives. Validating our new strategies built up the team’s confidence and nurtured enthusiasm about the website.
Image: Abstracted sample of my wireframes for this client
Content Creation, Visual Design + Development
As wireframes were being finalized, the overseeing agency engaged their consultants to lead the content creation and visual design work. I continued to ride along as a member of the weekly review team, so as to ensure alignment with the strategy. I scaled my hours down during this time, but stayed engaged until the development team had no more questions.