For many organizations working in the nonprofit or social change space, working with a design agency can be unfamiliar territory. To make matters worse, there’s a lot of jargon thrown around within design agencies that can be a barrier for clients who are unfamiliar with the design process.
As a project manager who made the switch from the nonprofit sector to Constructive, I sympathize with our clients who find the design world rather intimidating. That’s why I’m here, to break down the typical process for a website redesign and make it as approachable as possible!
There are two main phases of the website design process that non-designers should be aware of: information architecture and visual design.
Information Architecture
Once we’ve done our research and clearly defined a digital strategy for a client’s new website, we move into what is called the “information architecture” phase of a project. In layman’s terms, this simply means that we are working to organize a site’s content in a way that is user-friendly and aligns with the organization’s goals for engaging its audiences. During this phase, a designer or UX designer (user experience designer) will be working on two main deliverables: a sitemap and wireframes.
- A sitemap is a diagram that lays out a website’s structure and defines the relationships between content and various pages on the site. From a sitemap, you should be able to discern how a user would navigate through your site. For example, if you want to find where a news article “lives”, you’d follow the flow-chart like diagram from Home, to News & Events, and then arrive at your desired destination, a single news article. It provides you with a birds-eye view of your entire website and lays the foundation for what is to come next in the information architecture process. Here’s what they typically look like:
- Building on the sitemap, wireframes dig a little deeper and flesh out how content and other elements will be organized on a page by page basis. At Constructive, we start with rough wireframes and incorporate more detail as we receive feedback from clients. You can think of wireframes as being like blueprints for a house一they show you how everything will be laid out, but leave out design details. For example, you’ll see black, white and grey boxes that suggest what content will display where, but you won’t see designed elements just yet (that will come in the next phase)! Before finalizing the wireframes, we’ll also make notes about functionality to remove any ambiguity about how certain features or elements will behave once translated from static comps to the dynamic site.
Visual Design
During this phase, you’ll get to see all our ideas on how to improve content strategy and user experience come to life. A designer will be working on two main deliverables: a concept board and several iterations of a design comp.
- Concept boards are a collection of visual elements that convey an overall look and feel to help define a clear direction before jumping into the design of individual pages. We’ll typically provide our clients with two design directions, and work with them to select a direction that feels most fitting for their audience.
- Once a direction has been confirmed, we’ll move into designing individual pages of the site, looking at things like color, type, and image treatment (these are called design comps). Designers might throw some unfamiliar words into the mix, so here’s a list of common elements that are found on most of the sites we work on:
- Hero image: The image in the header of a page.
- Hub page: A page that serves to organize related content. Hub pages are typically found in the navigation and contain unique content, but also group associated content. For instance, the “About Hub” might contain important information about an organization, and then link to a staff and careers page.
- CTA: short for “call to action.” This could be a donate button, or newsletter sign-up.
- Hamburger menu: a common menu style with three lines in a circle emulating a hamburger.
- Kicker: small text above content that serves to reinforce what a user is looking at. For example, a site might display several kinds of research in a research archive, and a kicker would specify if it’s a report, article, book, etc.
- Lorem ipsum: placeholder text used to fill design comps to emphasize design elements over content.
- Hover state: the interaction when a user hovers over a button or linked text to indicate that clicking the element will take you off the current page.
To Conclude
Demystifying the web design process and defining some of the jargon can make the experience a lot more approachable and ultimately more collaborative. Once you cut through the unfamiliar territory and have an understanding of what to expect during a website redesign, you’re ready to confidently take on the exciting and important task of improving your organization’s digital presence.
