Constructive Group Created with Sketch.

Why Brand Strategy is So Important To Website Design

Want to learn more about the connections between brand strategy and website design? Sign up for our upcoming webinar, Designing for Online Engagement: How to Build Your Website with Brand Strategy, hosted with the Foundation Center.


Imagine you hear about a really interesting social impact organization that sounds like it’s doing important work in an area you have a lot of interest in. You’re immediately curious and want to know more. What’s one of the first things you do? Head right to their website.

You might be on your phone at a conference, working at your desk, or at home surfing on your tablet. You might go directly to their homepage, or you might be clicking a link someone shared that goes to a page deep within their website. Wherever you are and whatever you’re doing, the second you arrive, you’re presented with a snapshot of the organization.

And in this instant, you start forming an opinion. Is this organization interesting? Do they reflect your values? Are they credible? Effective? Trustworthy? Relevant?

Decisions the organization made months or years ago to introduce you to its brand at this moment—from the budget they set for the website, to the partner they worked with, to their content, design, and technology choices—are now significantly influencing what you’ll do next. Will you explore further, perhaps sign up for a newsletter, and hopefully visit again? Or will you leave without viewing another page, likely never to return?

Of course, the difference between a website that helps build a meaningful relationship with someone and one that turns them off for good isn’t as cut-and-dried as our hypothetical scenario. But it’s not an overstatement to say that websites play a pivotal role in how effectively nonprofits are engaging audiences and turning that engagement into action.

Understanding Brand Value

So, why do people choose to engage with social impact brands? And what role does a website play in creating this engagement?

We engage with nonprofits because they give us an opportunity to put our values into action. Purpose-driven organizations provide us with ways to help realize a world more like the one we’d like to live in.The nature of this relationship—and why it matters to us—is based on the kind of engagement we’re looking for.

“Casual” supporters such as donors, volunteers, and brand advocates are typically attracted by a nonprofit’s intangible and aspirational value—subjective things like the kind of world we’d like to live in, our emotions, and how we’d like others to see us. For these audiences, imagery, storytelling, and campaigns bring them closer to issues they identify with  and are usually the most important part of their experience with the brand.

More engaged audiences, such as issue area experts, practitioners, and policymakers are also influenced by intangible qualities. Taking it a step further, though, they also want to know the tangible ways social impact organizations can help them be more effective in their own work. For these audiences, access to things like knowledge resources, tools, and networks is usually the most important part of the brand experience.

Of course, whatever a person’s specific needs and interests, it’s the job of a nonprofit’s website to create an experience that bridges the divide between interest and action. And if it is to be an authentic and effective expression of a nonprofit’s brand, a website must represent an organization and respond to the needs of its audience as well as we would if we were representing the organization in person.

Designing Digital Brand Experiences

When an organization creates (or redesigns) its website, there’s an understandable focus on things like making sure it’s “visually appealing,” “well-organized,” “mobile-friendly,” and other fundamentals of good design. These are all important things, but they only scratch the surface of reasons why people visit our websites. Design’s role in translating different types of brand value goes further than these basic principles of effective design.

If social change brands are to build the kinds of relationships they want with audiences—and if they are to have the kind of impact they envision—we must approach the design process with the goal to provide different people with the kinds of value they seek in a nonprofit and its mission. The website is simply a conduit for this exchange.

Using brand strategy as the lens through which we view the websites we create, website process is the best way to ensure we accomplish this goal. Because if successful design (and by this I mean design’s true definition) is all about context, then brand strategy is by far the best way to give everyone who contributes to the process the insight they need to create a website that helps social impact organizations achieve their goals online and in the real world.

To learn more about principles and practices you can use to weave brand strategy thinking into your next website project, join me on June 21st for our webinar with the Foundation Center, Designing for Online Engagement: How to Build Your Website with Brand Strategy.

Decoding the Website Design Process for Non-Designers

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.

  • 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:

design process sitemap example

 

  • 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. Here’s an example:

design process wireframe example

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. Here’s an idea of what you can expect:

design process concept board example

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

What Do Web Developers Actually Do?

Web Developers: You’ve heard of them. You’ve seen them in movies and tv shows.  You’ve probably even observed one while checking out at the grocery store. Perhaps you think of us as elusive, sunshine-starved individuals who keep the internet alive and overflowing with cat videos. While you’re not wrong, in reality, we’re actually pretty normal.  We’re not magicians or mad keyboard scientists; we just know how to tweak code.

A Quick History Lesson

A little more than 40 years ago, computer coding wasn’t an actual job; it was a skill you picked up as part of your career. In the early days of the modern computing revolution, a scientist might be required to learn how to code a program to complete their research tasks. It wasn’t the computer part that was important, but the task at hand that defined the job. I look at web development today in the same way. I’m in the business of creating solutions for an organization and their audience on the web. Coding is merely the means I use to accomplish the task.

Open Source Coding

Obviously, a lot has changed, and much of the “development revolution” has come from collective efforts of thousands of developers, working on open source projects through bug reports, suggestions, code pull requests and evangelism. Thanks to endless hours of hard work by developers across the globe, on softwares such as JavascriptNode.jsnpmwebpackgitWordPressDrupal (and countless other softwares), I am able to deploy code to a live website, through a controlled process, within seconds. From there, I’m working on top of what others have already figured out.

Community efforts almost always lead to exponential leaps in coding performance and reliability. Take the PHP language for instance—today it’s used to power a significant portion of the web, but it wasn’t always well-suited for enterprise solutions.  Then Facebook came along. It ran on PHP and worked around much of PHP’s flaws. Part of that focus brought about great change for PHP and further legitimized its reputation on the web. Much of the work was open source and available to the community.

We Come in All Shapes and Sizes

The term “web developer” is an umbrella term that describes professionals with very different backgrounds, who work on very different kinds of projects. Some web developers have experience in design, support, and other technical coding work, while others come from different professions completely. I have experience in IT support, sysadmin, and a bit of design.  Before that, I took a shot at a music career and wanted to be a comic book penciler in high school.

The polymath is the exactly the type of person that gets into web development and makes a living from it. And for that reason, I don’t think you’ll be surprised to discover there are many ways to be a web developer.

Frontend Some developers are experts in frontend development and style what you see on a website and how it works. Honing in on the right visual feel and experience is their bread and butter. This work takes a creative eye, and consequently, many frontend developers tend to have some sort of arts background.

Backend Developers that work on the backend like to handle data, connect the dots, and automate testing for bug free code, the latter of which clients and other developers depend upon. This skillset is easy for developers from other computing languages and sectors to pick up. These folks are the backbone of the web.

Site Builders Some developers are equal parts designer, dabbling in web technology and able to take a WordPress site from start to finish with out-of-the-box tools (and a little know-how when needed). Many freelancers fit this bill. They typically have varying levels of coding and scripting experience.

Sysadmins A “sysadmin” is a technologist experienced in different systems needed to host and serve web technologies.This skillset isn’t necessarily a standard focus for most web developers,  but it’s incredibly important in the web and internet as a whole when it comes to complex deployments.

Et al The above skills are the most commonly applied in web, and certainly not an exhaustive list. There are also those that cover testing, spoken language, compliance, data science and many others.

We Work Well With Others

Many people imagine web developers sit in rooms or cubicles by themselves, coding away in a vacuum. But in reality, most websites require considerable collaboration and a multi-disciplinary approach. As a website developer who works at a creative agency, I work closely with designers, project managers, and other developers. When I’m solving problems, I’m usually doing it with the help of these fine people.

Designers Here’s an oversimplified explanation of how we work together: The designers make designs and then hand them off to the developers. That’s how some teams do it, via a linear production line. While it may work for some, this method doesn’t make sense for a tight production team.  Instead, we share ideas. We think about the possibilities. We equally divvy up success and failure. Without Visual and UX Design, developers are missing key points of focus.

Project Managers I couldn’t do my job without talented project managers (PM). They keep me sane and schedule time for the many mishaps that come with web development. I’ve worked with the good and the bad, always making sure to let PMs know I appreciate what they do. I like to think of my PM as a good football coach that keeps all the teams within the team working together to win the day.

Other Developers Sharing code, helping another developer solve a tough problem, or simply offering kind words when it feels like there’s no end in sight — Developers helping other developers is what makes the fight worth fighting.

The Cat is Out of the Bag

Web development isn’t a mysterious or complicated profession.  The coding can be, but our ultimate goal is simple:  We work with the rest of our team to build a product that [hopefully] satisfies the client’s vision. Often times, it takes different types of developers to successfully see a project through, but we’re all working towards the same objective, just doing so from behind the computer screen.

Total Cost of Building A Website: Looking Beyond the Price Tag

My last article on this subject focused generally on website cost and technology, but from conversations with colleagues and clients, it’s become clear that there’s a need to shift the thinking around the total cost of technology. This article is the first of four where I’ll discuss which specific drivers impact cost.  In future articles, I will provide framework, tools, and processes to accompany this expanded view.

Total Cost: An Overview

We need to alter the way we think about the total cost of technology and what drives it. As I said at my 17NTC session on the same subject, the total cost of technology is comprised of financial, time & human capital, opportunity, and brand impact.  Let’s pick this statement apart and examine these aspects of total cost.

Financial

Money and budgets are what people generally refer to when they think  about the cost of technology. What are my capital expenditures here? What up front (financial) costs do I need to take on to get my project done, or to support initiatives? What will it cost to host and maintain my website?

Time and Human Capital

It’s not enough to think exclusively about a flat project expenditure. Instead, how many people (and for how long) does it take to get something done? How hard are the tasks? What’s the impact on the schedule? Do we have the right people to do this? What are we paying them? What work is being diverted or ignored by involving our staff in this project? Do we need outside help? Is the technology we’re using the right technology to support or hinder our people?

Opportunity

It’s important to keep in mind opportunity cost when planning the execution of your website. Is it worth expending the time and resources to develop a new website? What will we be giving up in order to do this? Will the outcome be worth the reallocation of assets, resources, and results? Content is a great example. Often times flashy website features, while exciting and enticing, don’t outweigh the cost of construction. (For a comprehensive explanation, check out this article by one of our web developers!)

Brand Impact

Successful execution vs. poor execution, both technically and organizationally, can impact your brand and its goals. It can make a difference whether or not people trust or mistrust your brand. Additionally, this has cost implications not only financially, but also in your ability to accomplish your mission effectively.

Drivers to Total Cost

Broadening the way you think about the total cost of technology, along with understanding what drives cost, will help you to better plan and advocate for your needs in order to accomplish your goals.

Open Source vs. Paid

While open source software is free, you can opt to pay for software services in the form of managed services, subscriptions, support and training. That being said, commercial products don’t always equate to higher quality or usability. As your needs evolve, you need to make sure the tech you choose evolves with you.

Think about what kind of development will be needed for an open source vs. a commercial proprietary platform. Proprietary systems require specialized skills and development costs can be higher because of this. What about customizations to a platform to ensure it meets your functional goals? Are they easily accomplished or will they become an entity requiring hacking around limitations? (Generally, hacks are not sustainable over time and cost more in the long run.)

Even when choosing open source over something commercial, there may be a difference in development costs based on the system. For example, Drupal development tends to be higher cost (in time & money) than WordPress because of the nature of its underlying CMS architecture. But don’t let that discourage you from choosing Drupal if it’s the right fit for your organization’s goals, especially if you have complex enterprise integrations or functional needs.

Lastly, while not an immediate cost, what if in the future you need to migrate infrastructure from one commercial platform to another or to an open source platform? Getting your data out of a proprietary system and migrated might not be an easy lift or even possible.

And if you feel overwhelmed reading this and you have no idea how to choose a platform, rest assured—we’ll discuss how to get answers and make decisions  in series 2-4!

Integrations

Integrations can be one of the most significant drivers of cost. What systems does your website need to integrate with?

Externally, not all systems’ interfaces (APIs) are created equally. This rings particularly true with CRM (Customer Relationship Management) systems. Zoho integration is not the same as Salesforce. They require different levels of effort to ensure they play nice with your website. Leaving your website and clicking out to an external CRM (a ‘Click Here to Donate’ button that brings you to an entirely new website) is “cheaper” from a budget, time, and effort perspective, but is it what you want experientially for your users? Are you choosing the right CRM for your organization’s needs? Is it overkill operationally? Financially?

Internally, you can think of integrations as the relationship between content within your website. How are you relating internal content and how do you surface those relationships? Is your site search simple or complex? Are related items to a piece of content manually curated, dynamically surfaced, or both? The lift in implementing these relationships and features can drive cost, especially if you choose a CMS that isn’t specifically friendly to complex relationships.

Timing

Timing can be a big driver to cost. Website launches that are tied to event-driven initiatives are a good example. Website redesigns demand significant attention from internal staff, do you have the organizational capacity and schedule availability to meet the event deadline? If you’re not planning with enough lead time, costs can and often escalate: late nights, premium costs for rush development from agencies etc. What happens if you miss the deadline? What does that cost you?

Hosting

Hosting a website might be obvious (it has to live somewhere!), but you need to understand the impact to cost. How “managed” is the hosting—are updates to servers handled by the hosting company or are you on the hook to do them? If you’re using internal IT, what kind of timing and costs are associated?

You also need to think about the costs outside the web server. What about network management, i.e database servers, backups, and maintenance? Are you using a Content Delivery Network, and if so, what are the bandwidth costs? Similarly, what about your website availability and failover needs? If you’re asking for high uptime, availability, and full disaster recovery capabilities, be prepared for the price tag to go up.

Operations

It’s not often thought of or budgeted for when planning your website, but there are operational costs once it’s up and running. Content needs to be produced and managed. Have you planned for that? What resources and what amount of time is going to be needed? Is it easy to manage your content or is the back-end of your website causing additional overhead and stress for staff?

The website also needs to be maintained from a technical perspective. Who’s going to do that? And what about the administrative overhead in coordinating your website operations?

Going Forward

There’s a lot to think about once you’ve expanded your view on the total cost of technology and what drives it. Thinking about total cost in this manner might give you a headache initially, but it will also give you a clearer sense of what you’re realistically getting into, where your gaps in knowledge around costs are, and help you be better prepared to advocate for more budget, time, and resources to accomplish your organization’s mission.

In part 2/4 of this series, I will build upon this thinking, providing a framework and tools for evaluating and estimating total cost, as well as a practical process for implementation.

Web Animation: Delightful or Distracting?

If you do a quick survey of design-forward websites you’ll most likely find that motion and web animation has become a common feature—images and text appear to fade into the page, sign-up blocks slide in and out from offscreen, buttons morph in response to our clicks. Aside from being in vogue, animation offers designers and developers a powerful tool for increasing engagement with users. However, it also presents a challenge: despite being visually interesting, animations can actually distract and confuse our users. So how do we use animation to serve our content and create a greater connection between our audience and our websites?

What exactly is web animation?

Let’s first establish a common vocabulary; web animation is not to be confused with cinema animation—we’re not talking about Mickey Mouse here. The term web animation broadly covers many different methods of animation, such as user interface (UI) animation, CSS animation, and JavaScript animation. It can refer to anything from making a button shake when clicked to designing a complex digital game. At its most basic though, web animation is changing a property over a period of time. So while most people think of animation elements in motion, it also includes changing the opacity or color of an object.

A Gif of a homepage shows an example of web animation with images moving in and out of the page.

Finding the Sweet Spot

One of the first things to consider when designing animations is the duration of a given action—i.e. how long does it take for an object to move or morph? Though it sounds simple, getting the timing right can be tricky; too fast and the animation will be abrupt and shocking, too slow and you risk boring or frustrating your users.

Fortunately, we have studies and best practices to guide our decision-making. Jakob Nielson’s seminal usability study on the interaction between humans and computers revealed three response time limits that are now as used as goalposts for animation timing. The study found that in 0.1 second (100 milliseconds) a computer response will appear instantaneous to a user—so an animation lasting 100ms would be imperceptible to most people. As the computer response time increased, the study showed that at 1 second, users’ attention was maintained but after 10 seconds, most users become disconnected or bored.

A graphich showing Jakob Nielson's response time study for web animations

Studies also show that humans’ ability to perceive and process visual stimuli, known as a temporal beat, varies from person to person. Some people are naturally capable of perceiving very quick visual movement or changes. But as we age our temporal beat slows, making it more difficult to process quick visual stimuli. In other words, someone with a quick temporal beat might be able to see change as quickly as 70ms, whereas an older person might be able to see that same change in 700ms. To account for this significant gap in processing time, animations should be timed around the 100ms to 1 second “sweet spot” to ensure users are able to perceive the animation without being confused, but are not slowed down or pulled out of their flow of engagement with the content.

An example of the same website with and without animations. The gif on the right shows how animations help reorient the user to the new page.

Loading Animations

As users transition from one website page to another, we can use the sweet spot to help optimize their experience and the perceived performance of the site. Perceived performance is a measure of how long a user feels like they have been waiting for a website to load. Though one might assume the faster the better, we know from Nielson’s study that anything less than 100ms will appear to be an instantaneous jump cut from one page to another. Jump cuts can be confusing for users and overwhelm their cognitive load. We want a speedy website but not at the expense of our users’ ability to process the information on the page. So to signal transitions without boring users with a blank loading page, designers are increasingly using loading animations.


Google’s branded loading page animation

As well as helping to reorient the user to the new page, loading animations offer a chance to do something creative that further engages audiences. Viget ran an experiment to see how long users were willing to wait for a page to load with branded versus generic animations. They found that users were willing to wait longer and the abandon rate was lower with branded animations. The colorful and creative branded animations were intriguing to users, offering something they weren’t accustomed to seeing on other sites.

Eases

In addition to optimizing the duration of animations and page transitions, it’s important for animations to mimic the laws of physics so that they feel natural and intuitive to users. This becomes particularly important when setting up an animation’s rate of acceleration or deceleration, known as easing. Linear easing, i.e. animations that moves at a steady pace, are rarely used because in the natural world, objects either speed up, slow down, or remain stationary.

Easing example for a web animation
An example of changing a linear ease to a decelerating ease

In addition to mimicking the acceleration and deceleration of the natural world, easing choices should be based on whether or not the user is expecting an action. Humans perceive changes and movement differently based on whether they believe they have initiated the change or the change is unexpected. Easing should make the user feel like the website or interface is reacting to their actions. So if the response is user-initiated, for example a click or a hover, the animation should begin quickly and decelerate–the user will not be confused by the initial speed because they will be expecting an action.

A user-initiated decelerating ease example
An example of a user-initiated decelerating ease

On the other hand, if the animation is not something a user asked for, like a sign-up modal, we must be mindful of not surprising the user. The element should come onto the page slowly, giving the user time to process its appearance, and then accelerate as disappears from the page.

A decelerating sign-up modal

An example of a decelerating ease for a sign-up modal

Design for Your Users

Your primary objective for using web animations should be to make websites feel more responsive and intuitive to your users. Designed thoughtfully, animations can be a powerful tool for helping your audience achieve their goals and feel engaged with your content. Using our understanding of human perception, we can avoid the pitfalls of designing animations that despite their creative application, ultimately distract, confuse, or frustrate our user. Remember, the more comfortable our audience is on our site, the longer they will stay, the more opportunity to reach them and make an impact.

Put Your Content First: Prioritizing Features During a Website Overhaul

I have certainly been blown away by fancy websites with their well-intentioned and occasionally well-thought-out animations and functionality. Be it a smart filter for a mountain of content, a complex and flashy history timeline or beautifully-fitted tabbed content in a compact space, replete with sliding animations and other eye candy. At best, my mind is blown and I took home an insight I didn’t have before. At worst, I missed the point of both the presentation and the content. Content is King, but you don’t necessarily need a tiger or something crazy like that.

 

A picture of Shiva the Tiger from The Walking Dead.

 

Even a visualization can be represented as simply as a flat image with no animation. A text heading can be just as impactful in place rather than rising up from the ether. A single photograph can be worth a thousand words.

Now, you may already be sensing that I’m here to crush your dreams – and I have to be honest, I totally am.

Let’s take a look at a few popular website features and explore why you might consider ditching them in favor of something else.

The Features

The Slideshow Banner or Otherwise Hidden Content

Fairly ubiquitous on the web these days, the slideshow banner typically has at least three slides with an image, copy and a call-to-action button that directs the user elsewhere. One word: outdated. Still, it’s a popular choice for combining a group of different messages in one block.

The same effect happens with tabbed panels or any sort of expanding content. The user is not getting the message unless they take the time to use the controls.

 

A screenshot from the Nike website shows tabbed panels

 

In this Nike example, there are 7 different slides with their own copy, buttons and even videos. A lot of work went into this that perhaps could have been spent on a grid as seen lower on the page. After all, they all lead to a landing or purchase page.

A screenshot from the Nike website shows a grid

 

Is it effective? Doubtful. The primary issue with a slideshow is they only allow you to see one thing at a time and most users simply move on and don’t see more slides after the first couple.

Could it be better done better? For sure it could. Sometimes all you need is a row or two of promoted content with headings, supporting text below and a call-to-action button to get the user moving where they want to go (and where you want them to go).

Potential savings? Some savings might be gained by leaning towards a static presentation, but the primary gain by going static over a slideshow is that all your important promoted content and focal points are visible 100% of the time.

The Underutilized Content Filter

Filters are a handy way of getting through hundreds, if not thousands, of content items quickly and effectively. When you’re shopping on Amazon, filtering is a big win. However, when you’re trying to filter through 20 content items, it’s quite possibly a waste.

We recently developed a Drupal site that filters thousands upon thousands of content items of a few types, each with different facets. The system works great and was of high value to the client; it made sense given their goals and content, and was well worth the investment.

However, if you’re dealing with a limited number of content items, it may be worth thinking about if you’ll be adding enough in the near future to justify a filter. You very well may not need a filter if a keyword search does the trick or content can be presented in a way that exposes what people want exactly where they expect to find it.

Is it effective? It definitely can be if the need is there. The big question: is the need there?

Could it be done better? I’d dare say trust that your users can find what they’re looking for if they’re just perusing through five pages of indexed items. The chances that they’ll find what they’re looking for with or without a filter when dealing with a relatively small site should be about the same.

Potential savings? If an unnecessary filter is ditched in favor of allocating budget for content enhancing services, significant savings. No development, testing and retesting are needed for all the important parts it takes for a filter to function.

Non-Interactive Animated Visualization

If you’re selling a luxury product like $200 running shoes or an industrial design laptop, featuring a single purpose animated visualization can make a lot of sense. You can generate hype about the products’ features and create excitement amongst potential customers.

Animation for interactive visualizations can also be extremely effective, however, without the interactive element it’s totally possible to use simple flat images or a very basic animation to pull attention to your visualization and still get the message across.

A screenshot from the Apple website shows a animated presentation of the new Macbook Pro.

 

Apple’s animated presentation of their new Macbook Pro line is definitely smooth and sophisticated. Here it’s showing off the functionality of their new Touch Bar when the page is scrolled. It undoubtedly took a good amount of time to design and develop.

Is it effective? Animated visualizations can be stunning to the eye and mind. However, the end message of the animated visualization versus the static version will be much the same.

Could it be done better? In this case, I wouldn’t say it could be done better, but often a flat image can definitely speak to the same concept as an animated one and will be more easily sharable on the web.

Potential savings? Extra design and development time will dramatically inflate the cost of such a presentation. On a limited budget, it could be a huge loss for your content.

The Proof Is In the Pudding

I think it’s important to take a look at a couple of excellent examples of social change organizations that spent their time and money on quality content (including copy and imagery) instead of expensive dramatic visual features. One is by our team here at Constructive and the other another party.

Bold and Beautiful Content

http://www.redstonestrategy.com/

This site has hardly any moving parts and is static for the most part. The top banner says what it needs to say, directions to the two primary hubs describing the mission (Strategies and Sectors) are presented as beautiful static blocks with all the information you need.

Our own Senongo Akpem took great care to make sure that the content sings while remaining largely static and in-place.

A screenshot from Redstone Strategy website shows well-executed static, simple design

Less Can Be More

https://www.grownyc.org/

This is definitely not the fanciest or most modern site on the web, but the heading on the homepage says it all. This is what we’re doing and why. There’s no giant slideshow. There isn’t a hip video background, fading in and out elements or animated visualizations.

One could easily have loaded the four blocks below the heading into a slideshow, but here the content is available all at once.

A screenshot from Grow NYC website

Hear My Roar!

Like Shiva the tiger from The Walking Dead, your content wants to let its presence be known. You have important things to say and there are many ways to say them. As a developer, I’m on the tail end of many animation and visual complexity discussions (and intimidating tiger requests) that come up.

It Helps to Know How to Deal with Content Heavy Websites

In my experience, investing in your content is the best bang for your buck. You can enhance your content by investing in content strategy, copywriting, quality stock images to supplement your existing images, and assistance with your overall messaging. When a client works with us on those tasks, the result is head and shoulders above a site whose content didn’t get due attention.

Common reasoning against investing in content assistance might be that “our team can take care of that,” or “it can be taken care of later.” I’d suggest that instead of thinking that way, think of your content first and any fancy features can be added later. The burden of content can be overwhelming for even the most talented and well-staffed internal teams and it shouldn’t be underestimated.
I mentioned previously that serving the content and user experience are sacred goals. Content must be the dominant focus of any website – especially for a social change organization. As much fun as animations and interactive elements can be, content can be more potent and user experience more natural when content becomes the twinkle in our eyes and all else takes a back seat.

I might have said I was setting out to crush dreams, but maybe I should have said my primary message to anyone wishing to redesign their site is that your content almost always will need a redesign as well. When undertaking a website overhaul, find a partner who can look beyond the feature set, but can also help with your content and overall message!

Designing User-Friendly Faceted Navigation

For designers, presenting lots of content clearly on a webpage can be challenging. In many situations, it’s simply impossible, since no one wants to scroll forever. People want a way to quickly find the information they are looking for, without too much stress. However, often without realizing it, digital users form very strong expectations of how website tools will and won’t act. These expectations, along with their own needs and preferences, are called mental models. Designers can tap into these mental models to create usable, functional search interfaces that feel “natural” to their users.

A Few Design Scenarios

As designers and content specialists, our job is to make sure the resources and content we offer work seamlessly with our users’ expectations. Here are a few different situations that can benefit from a well-considered approach to faceted navigation and filtering:

You have lots of packaged data to present: this can be in the form of executive summaries, interactive datasets, or longer pages of published research.

You have lots of constantly updated features: content feeds are a powerful reason to have faceted navigation, as readers have different topic, date, and browsing preferences.

You want to provide a path to action: for many nonprofits, options like downloading reports or booking training sessions are examples of content that requires action.

Though they are all scenarios requiring faceted navigation, each of these calls on a slightly different mental model. Let’s look at how to break the scenarios down and design a faceted navigation that works for each one.

 

Two iphone screens, side by side, show filtering and sorting options.

 

Define Appropriate Mental Models

There are 3 key design patterns we can design around: searchingfiltering or sorting. Each matches a specific mental model that web users have created around the process of finding things, so we need to be careful to design interfaces with animations and functions that fit those models.

Let’s look at them in a bit more detail.

Searching is when users want to find the options that match their own defined keywords. Imagine a user saying to the website “OK, out of everything you have, show me only the widgets named Forest.”

A screenshot from a website shows a search field with the word "forest" typed in it.

 

Filtering is when users make choices that reduce the number of items available to them. Imagine a user saying to the website – “OK- out of everything you have, show me only the green widgets.”

A screenshot from a website shows an example of filtering design, allowing users to filter resources by topic, type and date.

 

Sorting is when users choose the order of the items available on the website. Here, imagine a user saying to the website – “Ok, out of everything you have, show me all the widgets from newest to oldest.”

A screenshot of the Nike website, shows a sorting option that allows users to sort shoes by Newest, Highest Rated, Lowest Price or Highest Price

 

With these concepts in mind, we can start to extend the 3 mental models to encompass all the actions our users will take while looking for content on our site.

Design the Navigation around the Mental Model

We want the interface to feel natural and responsive to our users. A great way of doing that is to design it around a spoken statement or command from the user. Here’s an example, containing all the statements we need – “OK. I want to download a climate and environment report for my next office meeting. Show me only the reports with the word Forest in them. Now, put the newest published ones on top.”  That is a clearly stated mental model that describes, verbally, what your audience expects from an search/filter interface. As with any web interaction, remember to be “be forgiving to mistakes” and allow for things like plurals, alternate spellings, and the general messiness of natural language.

Matching an interface to mental models also has a physical dimension. It should always be put where the audience expects to see it. It is rare for faceted navigation to go in the bottom-right of a page, just as it is uncommon for a search bar to go in the bottom left of a page. After decades of these patterns being used online, a clear design consensus has emerged. To think even more broadly, a mental model of the internet itself is steadily emerging, an idea I think is fascinating. Designers should absolutely use that to our advantage. If this is how our audience views the web, we can design with that in mind.

 

A screenshot shows a well-designed website that allows users to both search, filter, and sort.

 

If we go with a horizontal faceted navigation, it’s a bit easier to make it feel like a natural sentence or mental model. Also called filter bars, they often resemble a pattern users are familiar withfrom desktop programs like MS Office and mobile apps like Instagram.

 

A screenshot from a website shows a filter bar that allows users to filter by topic, section and format.

 

Conclusion

The need for clear and logical options for sorting, searching, and filtering content is a common issue for knowledge-driven organizations. They produce a lot of material with the intention of it being found and consumed, but often audiences struggle to find what they are looking for on content-heavy websites. This is where designers can make a real difference and logical mental models come in handy. After defining them, we can design user interfaces that support, rather than hinder, them. Of course, I recommend starting every project like this with usability testing and research, but I hope this is a solid start.

 

Designing for Density: Best Practices for Content-Heavy Website Design

Everything is moving online quickly, if it isn’t there already! Every day, the web holds more and more content—much of it very complex and rich with important information, like online reports, research papers, and reference material. With this volume of content also come all the tags, authors, and other metadata that make it easier for people to find it. And when you think about it for even a second, it truly is unbelievable how quickly we are able to access and explore the world of ideas.

Unfortunately, while we have an embarrassment of riches when it comes to accessing all this valuable content online, too often, the way it’s often presented leaves a lot to be desired. And for organizations whose work revolves around providing perspective and thought leadership, if how content is designed and delivered isn’t on par with the quality of thinking it contains, they’re selling themselves short—and undermining the very ideas they seek to advance.

For organizations whose missions are advanced by publishing and sharing knowledge, the design of that content says a lot about what audiences can expect from it. And research has proven that design has a significant impact on credibility, and that people come to some very quick conclusions about an organization while visiting their website. With an embarrassment of content riches just a click away, if that design does not hold up; then audiences are likely to leave and find other places to get the content they want.

As with all things on the web, usability research and design strategy provides us with ways forward. With well-thought-out design, we can find ways to present content-heavy websites clearly and effectively, encouraging our audience to visit, download, and read what we have to offer. We’ve talked about the key principles for effective content-heavy website design before. Now let’s look at these strategies put into use through design execution that presents complex content so that it’s clear, compelling, and accessible.

Different Types of Dense Content

Complex Academic Language and Text

Academic language and research can often contain complex words, sentence structure, and ideas. While keeping in mind our intended audience, we can still analyze the complexity of the content we are publishing. The Flesch-Kincaid Scale is a tool we can use to measure how difficult it is to understand written content in English; it gives our content a readability and grade level. For example, it seems appropriate that the New York Times is about a 10th grade (US) reading level, offering insight into how it’s editors tailor their content to reach a wide audience. However, not all the content we put online is meant to be read at an easier reading level, especially in the world of research and policy where content is often quite academic and complex in nature. This can mean larger words, scientific context and charts, and other dense, scholarly material that expert audiences  around the world need to access.

For example, this introductory text to this report on ClimateWorks, a site Constructive created last year, comes out at a grade 17 on the readability scale.

ClimateWorks Report Readability Report

This means the content is most appropriate for people who read at a post-graduate level. That’s pretty heavy reading, especially for a single paragraph! But in speaking succinctly to the expectations and sensibilities of expert audiences, we establish an accurate, compelling preview of what the reader can expect as they explore further. This creates a better user experience that strengthens the brand.

Large Bibliographies and Linked References

Even when reports and research are specifically written for the web and published in smaller chunks, it’s still important to cite sources by including bibliographies and references. In historical reference sites, or research pages, we can see long sections of links and bibliographic text. While the more casual reader will skip over this, researchers, managers, and analysts not only need to access this material, they may also judge the credibility of the content they’re reading based on what they find here. They have their own papers and content to produce as well, after all! The bibliographic listings on the Qatar Digital Library do a great job with this.

Bibliography on content-heavy webistes

Open and Diverse Tagging and Grouping Systems

Often, the more complex digital content requires more complex tagging systems. Overly complicated tags can be difficult for any team to manage in a CMS, and fiendishly difficult for your audience as they browse your site.  In a paper about tagging and usability, HP stated tagging is fundamentally about sense-making, a process in which information is categorized, labeled and, critically, through which meaning emerges.

There are a few ways to bring this meaning to the surface clearly on content-heavy websites, by using proven interaction design patterns, and applying them to a broader UX design strategy. For example, our search features can intelligently display suggested results as users type, letting those complex tagging systems work their magic in the background. Typographic fundamentals of spacing, proximity, and rhythm can create visual relationships between tags and key text. When we arrange tags near content, we make the entire site more easily scannable and heighten reading comprehension. Most importantly, open and clearly designed tagging systems help the audience get a good idea of the types of content on the site, and then select a topic or category to read more about.

Typographic Hierarchy Example

Visually Grouping and Reusing Text

In content-heavy websites it’s crucial to establish context and help audiences find and explore content related to their interests. As a designer, it’s my job to create greater meaning from separate or discrete pieces of content by stringing a connective thread across a user’s experience at a website; we do this by grouping those pieces together in a process called “chunking.” In the higher parts of the site, such as the homepage or section hubs, this means designing elements like “teaser” blocks and planning to add short titles and intros to pages with longer titles and more dense content.

It’s important to standardize what these teasers look like, creating a small design system for them. This gives our audience a very good idea of what they will find when they tap one of the teaser blocks and navigate to a page. In order to do this, I reference my design system and typographic choices, unifying similar content and text styles. I keep elements like dates, tags, and author names very similar across the entire site. I want to make sure the audience has a visual pattern to understand – once this has been established, the content becomes more visually aligned with the knowledge it contains.

Visually grouping example for content heavy websites

Provide Breathing Room

With the amount of text and links on these content-heavy websites, the human eye needs a place to rest. Too much content on a page overwhelms the user and means that nothing is readable, a sure way to force your audience to click away. This is where open or white space becomes important to the site experience. By interspersing the content groups we looked at above with open spaces, we increase retention, clarify relationships, and make sure they are visually eye-catching. This is especially true for complicated or technical subject matter, like in this example from academia.edu.

White space example

Design-Linked WayFinding Systems

Even after visually grouping content and designing effective white space, we are still left with sites that have a lot of pages and content. Working with knowledge-driven organizations, that is a common challenge. One of our key goals is to design a meaningful path for audiences to follow as they navigate around these sites. These paths, often called wayfinding systems, are the same as what you might find in a large museum or tourist-friendly city. They operate the same way, too.

Digital wayfinding patterns focus on the main menu, breadcrumbs, faceted navigation, search bars, and clear site links in the footer. Dennis Kardys calls this network of available pathways the circulation system. If there is a chance your audience will get overwhelmed in content-heavy website, designing a clear wayfinding system saves them time and energy.

It’s an extra layer of context that we deliberately design for, giving your audience a memorable experience as they navigate and read through dense content. Careful design choices in the main menus and navigation of a site elevates the brand in the eyes of your audience, making the site a credible place to revisit and learn from.

Acadia Center WayFinding example

Content-Heavy Websites Conclusion

Design can serve a key role in the spread and readability of content online. When creating or updating sites that contain a lot of text and dense content like reports and bibliographies, we have established user-friendly ways of designing for them. Whether it is grouping like items clearly, designing open, accessible tagging systems, or even navigation and wayfinding systems that promote easy exploration, we can make these information-dense sites welcoming and engaging.

Yes, it’s unbelievable how much content is moving online. But we can rely on years of usability research and design strategy to show us how to accommodate it all. Carefully-thought-out visual and UX design enable us to discover ways to present dense content clearly and effectively, encouraging our audience to visit, download, and read what we have to offer.

Atomic Docs: Awesome or Awful?

Atomic Design is the concept that we aren’t designing pages anymore. Rather, we’re designing systems of components. In short, we can start with atoms, such as a title, a byline, or a link. From those atoms you can create molecules and organisms, i.e. a blog post preview or site header. Our page templates are then made up of different combinations of our organisms. Atomic Docs is a new tool that manages your components (and their underlying code) and automatically generates a frontend style guide. I recently came across it in an article and wanted to put it to the test to see how it would impact my workflow. Here are my takeaways.

Easy Setup

Atomic Docs was very easy to get started with. I set up a WordPress site with our distro and starter theme. Then, I downloaded the source files from github and moved them into the root of my theme. That’s pretty much it. I simply needed to change the destination CSS file path in our gulpfile.

Naming Things

One of the hardest and most important tasks of a frontend developer is naming things such as classes, ids, field names, filenames, etc. The names we choose must convey meaning to other developers, designers, and site admins and the choices are endless. Atomic Docs makes this task much simpler. The user interface is intuitive and easy to use and you can easily rename your components and categories, saving you from needing to go into many different places in your project to manually change names. The best part is, it generates all the SCSS and PHP partials you need for development, and puts them in organized folders and in the proper order. The extra head space Atomic Docs provides allows you to focus on what your components will be called, rather than where they will live and if they’re in the right place in your folder structure.

Design Driven Development

As the name suggests, Atomic Docs is a great tool for the Atomic Design process or Style Guide Driven Development. Atomic Docs isn’t limited to these processes though. The practice of developing and designing your user interface separate from backend technology can benefit any team. You can also deliver a living style guide to your client and design team for future use.

file-name-screenshot

BEMr’s Beware

When using Atomic Docs, it’s important to remember to name categories and components the same way you would manually. Most importantly, do not use spaces, as filenames with spaces are obviously invalid. This is not a major fault, however, it wasn’t clear initially that there was a one-to-one correlation between the generated filename and the name you assign it in the tool. This is also worth noting if you use BEM naming conventions. Filenames have the potential to get a little confusing when you get down to the Modifier level as you can see in the screenshot above.

Conclusion

Atomic Docs is awesome! It delivers a great developer experience for creating and managing SCSS partials and makes it easy to create a living style guide. I’m looking forward to utilizing it on my next project.

If you’d like to learn more, get in touch!

What Am I Buying?! Understanding Website Technology & Costs

Your website is a critical part of how audiences experience your organization’s brand. The choices we make about web technology significantly determine how effective it is in accomplishing our goals—usually having impacts that are felt for years. It’s critical, then, to be as informed as possible about what it actually takes to build and maintain your site.

But what’s a person to do if they are confused—or flat-out turned off by—technical jargon? And how on earth can you evaluate the cost of building your website if you don’t speak the language?

Well, there are many factors that impact both the quality and cost of building a website. And when I talk about cost, I mean more than the financial impact. Cost also encompasses time and effort—and a big driver of a website’s “total cost” is how our technology choices impact an organization’s operations and a website’s user experience.

Since web technology—everything from how your website is built to the systems that will be integrated into it—impacts nearly everyone in an organization in one way or another, it’s critical that technology choices be widely understood. As a design-driven development web development firm, our approach is to approach (and discuss) technology from a human-centric perspective.

What choices do we have and how will they impact our organization, it’s people, and our mission? This all starts with getting past the first stumbling block.

The Technical Hurdle

Similar to the medical industry, the biggest barrier to understanding web technology is the over-reliance on jargon in technical discussions. All those acronyms, weird phrases, foreign concepts, and inside jokes like the ID10T error—they almost seemed designed to keep non-technical folks on the outside looking in.

When people try to explain how the internet works to the layman, there’s an analogy that is often that it’s like “a bunch of pipes.” Now, while this may be passable, it’s also a gross oversimplification that completely limits how we understand the web. For example, a pipe implies, from everyday experience, continuous flow and permanent connection. But that’s not how the Internet works.

The internet is a distributed network of wires, radio waves, machines, and software. It’s governed by standards and protocols. Information transmission may seem continuous, but in fact is broken up, sent to travel across many paths, and then reassembled as needed. (That’s the TCP/IP protocol for you.)

There are machines and software that route and filter these broken up packets to their destination. Most everything has an IP Address, sometimes several. There are public, private, and hybrid parts of the Internet. Firewalls to secure the perimeter. Servers (not the restaurant kind) that are actual machines, and servers that are software running on these machines. One example of a software server is a database. Another, a web server. Another, an email server.

In “the cloud” there are often server machines running “inside” server machines—and server software running “inside” those, known as Virtual Machines (VMs). Sometimes it’s not VMs on these machines but things called “containers” running server software.

Your website runs on some variant of all this, and more. Coded up in HTML, CSS, Javascript, databases, and “written” in some programming language customizing a CMS (Content Management System). Oh, and those pipes? Size does matter.

See what I mean? If you’re nontechnical your mind is likely spinning right about now—and that’s OK!

What Do I Need to Know?

You don’t need to dive as deep into understanding network protocols, code, or deployment scripting. You should, however, understand the basics of what a website is and what it takes to build one. Otherwise, you very well may wind up with a website and a combination of software platforms for things like CRM and Grants Management that don’t do their job well together—making whatever’s spent on them a sunk cost that delivers little value.

What’s Actually Being Built?

You’ve probably heard of user experience (UX) design (or information architecture), but what is it? Combined with the functional requirements of your website (written descriptions of how it needs to work), they’re the blueprints to your website. If you think of your website as a house with plumbing and electricity, this is the foundation of what you’ll be building. When it comes to technology, through code and configuration of the server and content management system, web programmers take “UX and specs” along with design comps and style guides to assemble the pieces needed to meet the design. Some web programmers focus on the stuff behind the scenes (the backend) while others on how the site looks when delivered through a browser (the frontend).

The What End?!

The backend includes all the things you don’t see when visiting the site: the configuration and organization of content administration, databases, and integration with other systems. The frontend is what you see when you browse your site. How the backend is organized can affect the frontend, in fact, there is value in spending time crafting a well-designed backend—it can help dramatically with administration of your site.

Our choices in functionality and experience all influence the level of effort needed for frontend and backend programmers. Sometimes, what seems like a simple change can actually significantly drive up development costs. That’s why having programmers be a part of the conversation from the beginning of the process, all the way through to UX, functional requirements, and visual design process is invaluable to helping everyone understand the costs and trade-offs between different choices. The sooner everyone knows, the less likely you are to generate cost overruns.

Does My Choice in CMS Matter?

Absolutely! Programming for one content management system over another (for example, Drupal or WordPress)makes a huge difference—not only in how much time, effort, and cost it will take to build your website, but also in the impact it will have on your organization’s operations. For example, there are big differences across CMS’s in what’s offered out-of-the-box (think of this as “standard” when buying a car) vs the extras via third-party modules (or plugins) that add advanced features. And your choice in CMS especially matters for the people who are going to be using the CMS every day—your site administrators. A CMS that’s hard to work with is a long-term drain on costs and productivity that’s often a demoralizing burden on your people.

The choice in CMS can also determine how easy or difficult it can be to integrate other systems into your site. Need a newsletter signup? What about your CRM needs, like Salesforce or Zoho? Do you have or are you going to allow users to login to your site? What about Single Sign On? Your website is an epicenter of your organization’s digital strategy that’s connected to systems that significantly impact operations. Getting the choice of platforms right matters! (Want to know more? Watch our webinar: WordPress vs Drupal, The Choice is Yours)

Where Will My Website Live?

Your site will run (be hosted) on servers and infrastructure I mentioned earlier, and that has to exist somewhere. That somewhere must meet the technical needs of your website, and there are many hosting options to choose from. Your budget and capacity to manage the infrastructure (or not) should be factors in any decision—but long story short, for most websites, a solid shared hosting plan or cloud-based solution that leaves server administration and maintenance to your host provider (so you only need to worry about your website and CMS) is the best way to go.

OK, What Else?

While choice in technology can impact cost significantly, as I alluded to earlier, the impact of non-technical decisions about things like functionality and features should not be taken lightly—especially at the start, where choices can have cascading effects on other areas of your website.

Web developers use UX documentation and specifications to make your vision for your website concrete; to build according to the design. Programmers are specialists who spend time researching, writing, and testing countless lines of code to create the user experiencing (for your audience and your site admins). The devil is in the details, and not surprisingly, the more complex a website is, the more developer time is needed, and the more it will cost.

Uncertainty and unknowns about technology are also risk factors for blowing your website budget. If your organization uses other platforms such as CRM or grants management software, before initiating a major website redesign consider the value of undergoing a technology audit (or business systems analysis) to understand your technology landscape. It’s an ideal time to make sure your different systems work well together, deliver the best possible experience with your brand for all involved, and allows your agency partner explore proof-of-concept work when evaluating systems and integrations.

Having a clear sense of your goals and functional requirements bridged with technical insight can help understand the bigger picture in what it will take to execute. Focus on what’s important for you, your users, and your organization—and give it the budget it deserves! If you don’t have the budget, rather than trying to fit in every feature and wish-list item into a redesign, consider about using a phased approach. While it’s tempting to try and solve every problem in the first go-around, it’s much wiser to build a solid foundation that’s designed to scale and last for the long term; then add intelligently over time as more resources are available.

What Can I Do to Learn More?

Yes, web technology is confusing (and constantly changing!). But you don’t have to become a technologist to make better decisions when it comes to your website. If you have a technical expert in your organization who can help you bridge the knowledge gaps for you—great. Bring them into the conversation and rely on their expertise to inform the decisions you make. If you don’t, we’d love to talk with you about how Constructive can help you use web technology to strengthen your organization and your brand.

In the meantime, Constructive will be holding workshops for the social impact sector that will give the non-technical get a foundation in understanding the fundamentals of web technology to better understand the technology you are using, the cost, recommendations, and strategy. If you’re interested in learning more, sign up for our monthly newsletter at the bottom of our website and we’ll let you know when the workshops are open.

Check
Copied to clipboard http://...