Let’s explore that broader view and how it applies to UX. As is discussed in Chapter 3, when considering sustainability as part of the UX design process, we must consider the entire life cycle of our products and services as well as the ramifications of our choices. Understandably, many UX practitioners focus exclusively on features and design elements that directly affect end users. Often, bigger-picture complexities are handled by product or program managers. But this is a stack with many layers. There are the UX and data layers, with which most practitioners are familiar:

And then there is the cultural and socioeconomic stack that makes it possible for us to do our work:

Figure 5-2. Stacked up: considering the entire spectrum of UX

To truly integrate sustainable thinking into our process, the most important question to ask ourselves is this: Are we using these stacks to design solutions that promote accessibility, renewable energy, and break down socioeconomic barriers, or are we perpetuating a system of inequity? As a UX designer, it might be easy to say that conflict minerals and unfair labor practices, for instance, are not your problem (but most likely you wouldn’t be reading this book if that were your stance). If you are a product manager, they are precisely your problem. As Green America’s content strategist Bernard Yu pointed out in his presentation at the 2016 Sustainable UX conference: “Where in our UX process do we not only figure out how the products we’re designing are made ethically, but even whether or not we are trying to solve the right problem?... Where do we step back and say it’s not the product that’s broken, it’s the entire premise?”^[125]

With these big-picture questions in mind, how do we fit sustainability goals into design workflows to create more sustainable experiences across the board? Design teams should shepherd the process of helping both users and their clients make more sustainable choices across the entire life cycle of a product or service. But we should ourselves also create more sustainable solutions with efficient workflows and streamlined user flows.

UX designer, Amber Vasquez, advocates for dovetailing the two: giving users the best experience while also helping them make more sustainable choices.

It’s about collaboration

Online creative portfolio community Format surveyed more than 2,000 photographers, designers, illustrators, artists, filmmakers, and other creative pros to understand how they prefer to spend their time.^[126] In the survey, “49% prefer to share their work when it’s fully complete, over sharing it when it’s an idea or a work-in-progress.” This is a problem.

If you run a search on the most common complaints about web designers, there is consistency in the results: “They disappeared.” Or “I couldn’t get in touch with them.” Or “They didn’t communicate enough.” To make the design process both successful and efficient, you simply must collaborate. Often.

20th-century waterfall thinking won’t work in the age of sustainable UX, where ongoing shared learning is valued and preparation trumps planning every time. Consensus from all parties must be reached at consistent touch points throughout a project’s life cycle in order for it to stay on track. This is just as critical for software teams as it is in agency/client relationships.

Figure 5-3. You can’t have a successful project without ongoing collaboration

As Pete Markiewicz notes on his blog, “sustainability is best achieved by a team of ‘hybrids’ who know each other’s work. This allows issues like efficiency to come up through the iterative design process. In a hybrid world, the hardcore coder may not be a great designer, but they have taken some design classes and understand why design is important. The designer may not be a hardcore coder (though hopefully they understand HTML, CSS, and JavaScript), but they understand it well enough to design for its effective use.”^[127]

According to Philip Clarke and Zach Berke at Exygy, a software company and certified B Corp based in San Francisco:

To repeat a common theme of this book: Less waste = more sustainable.

Streamlining user task flows for efficiency becomes one of several design imperatives when creating more sustainable digital products and services. If we consider the preceding strategies while auditing a website for sustainability, we are led to some of the following questions:

In the 20th-century, design took a top-down, one-way approach, but 21st-century sustainable design is a collaborative conversation. Here are some tactics to follow that can help make your design process more efficient and hence more sustainable.

Lean personas

You want to be sure the audience you’re trying to reach is interested in what you plan to build, but with hundreds of tools at your disposal to extract behaviors and preferences from social media profiles and other online sources, it can be easy to fall into the rabbit hole of design research. Doing too much research wastes time and resources. Not doing enough risks missing the mark completely.

“Research is a big carbon cost in our projects due to amount of travel we do to where they are,” says James Christie, director of experience design at MadPow. “I favor remote methods when possible. But the cost of not doing research and so wasting effort by requiring redesign is too high to risk not doing it.”

Amber Vasquez notes that in general she doesn’t think designers or agencies are doing enough research. When trying to pare down budgets, research and testing are often the first things to go. In many cases, user research isn’t part of a budget, and that undermines project potential.

To compensate for this, she sometimes relies on “proto-personas,” or lean personas, for projects where time or budget for research are restricted. Lean personas are based on hunches rather than hard research and serve several purposes: to jump-start the research process, to facilitate discussions with clients, and to align business goals with user needs.

The design team starts these lean personas based on their understanding of project requirements. The personas are then workshopped with the client, who fills in gaps based on its often deeper understanding of its users.

Figure 5-4. Proto personas are helpful tools for quickly defining user needs

This process often occurs alongside a matrix exercise that compares client business and marketing goals with user goals to find the common ground. Finally, the design team fills in any remaining gaps with actual research from a variety of sources: online networks like LinkedIn or Facebook, user interviews, and so on.

The point is to run through the process quickly and efficiently through collaboration to glean key insights, and then fill in the gaps with more time-consuming research efforts, rather than the other way around. By starting with online research tools, it can be easy to get lost in the data.

Personas are meant to gain consensus on who you’re designing for so that this understanding can inform design decisions throughout the process. Overthinking them wastes time and energy.

Lean wireframing

With many wireframing tools, you can get very granular in the amount of detail you include in wireframes. But at what point does all that detail become too much? How much time is wasted going back and forth about the placement of a button or slider, especially when it is likely that said component has an established content and display pattern to which users are already accustomed. Similarly, a one-size-fits-all tool like Adobe Illustrator might offer less value, because it gives you so much control. A more focused tool like InVision can yield better results faster. A quarter of a century into the Internet, why reinvent the wheel?

Some might argue that more detail in a wireframe leaves less room for interpretation (or misinterpretation), but if you focus on collaborative problem solving with an established design system rather than overthinking page element placement, you can likely reach better results faster.

“Rather than create wireframes,” Amber says, “whenever possible we focus instead on creating design systems that include pattern libraries for components.” The wireframing process then becomes simply a matter of combining components in a way that fits the intent of the page. Often this is done with sticky notes on a whiteboard (where each sticky note represents a component) or by simply sketching them out. Let’s explore this a little deeper.

Figure 5-5. A content pattern meant to display event info

Figure 5-6. A wireframe contains way more detail than a content pattern

Content patterns and page briefs

Every site, product, or service is made up of different types of content: hero images, banners, news feeds, forms, events, blog posts, text prompts, videos, white papers, and so on. These content types are often displayed in different ways, depending on the page upon which they exist. Content patterns show how the information for each content type is displayed.

For example, suppose that you are a company that throws a lot of events. You might want event announcements on your home page, in a sidebar on your blog, or in a footer on strategic pages. Even though all these announcements could potentially promote the same event, they will each have unique content patterns that define their size, type, and layout. Often, these patterns will seem instantly familiar because they are commonly used on websites all over the Internet.

Page briefs, on the other hand, do work at the page level rather than the individual content-type level. A page brief works exactly like it sounds. It’s a short document that describes each page’s purpose and includes specific conversion goals. Page briefs help both client and agency answer several important questions:

• Why does the page exist?

• What is the page’s conversion goal?

• What is minimum amount of content that users need to see to make that conversion?

• What is the list of supporting information?

Page briefs help content creation teams achieve clarity about their own resources or constraints. In creating them, the content workload becomes much clearer. Page briefs also give design teams a helpful set of guidelines by which to create page layouts with designed components.

Figure 5-7. Because they are based on common interactions across the Internet, content patterns are familiar and easy to use

Display patterns and component design

A content pattern is different from a display pattern, which shows how that content type will be displayed to fit within the visual design system defined during the style tile process. Components are concrete implementation of design patterns. With display patterns and component design, rigid full page templates are less necessary. By building a library of content and display patterns that can be applied to specific components, you can create a modular design system that lets you mix and match components for optimal flexibility.

Figure 5-8. The component library Mightybytes created for NACSA let it mix and match components on its own to fit unique content needs

After you have a library of approved patterns and components, directives from your page briefs will help you choose which are most relevant to suit the page’s conversion goals. Component design is beneficial to clients, as well, because as soon as a site goes live, the flexibility inherent to this system makes the process of creating new unique pages much easier.

So how do we make this work for a team? Who does what? In a blog post titled “Content and Display Patterns,” author Daniel Mall notes, “When thinking about patterns, content strategists are primarily thinking about Content patterns; designers are primarily thinking about Display patterns; and frontend developers are responsible for bringing the two together.”

Give it a Rest

In the article “Design through the Twelve Principles of Green Engineering,” the authors P.T. Anastas and J.B. Zimmerman write that “Products, processes and systems should be ‘output pulled’ rather than ‘input pushed’ through the use of energy and materials.”^[129] In other words, don’t make your product run when it doesn’t need to. Give users control over functions whenever possible. If a product or service has built-in notifications or backups, for example, let users control how often that happens and keep energy use in mind when making default settings. This is a great opportunity to highlight more sustainable choices in your designs as well. Your product will use far less energy checking twice a day for new data than it will every five minutes.

Figure 5-9. Let users decide when their product goes to sleep or how often it sends notifications

If an app uses a phone’s camera, WiFi/mobile data, and GPS capabilities at the same time, as in the case of Snapchat, it can significantly impede performance, drain batteries, use high amounts of data traffic, and waste a lot of energy. Keeping this in mind during UX exercises will also encourage conversations about usability and energy efficiency to happen in tandem with each other.

Like many design firms, for years Mightybytes delivered standard design comps—pixel-perfect visual renditions of key site pages—for website projects. Getting client approval on those comps was a critical part of moving projects forward. During this process, we sometimes became stuck in extended design revision loops, or when we moved to the build phase, complications around the approved design comps arose. Occasionally both happened. Even when we added wireframes to the mix, we still ran into challenges. Clients were often understandably confused by the process of reviewing just a static screen or two and projecting what the end result might entail. Design comps only represent a single state of a single page of your website or application, so this is not surprising. They’re a snapshot in time and do little to help clients or users understand the broader implications of choices made long before there is anything with which to interact.

“It’s easy for people on both client and agency side to fall into the Stockholm Syndrome trap of waterfall-based design,” says Amber Vasquez. “It’s human nature to apply old methods to new mediums, but the reality is that rarely works. People still try to shoehorn the print design process into web projects, but time and time again they fail, or at the very least go wildly over budget.”

Still, imagining a project without design comps can be hard for clients to wrap their heads around. Our presale process for helping them better understand a more efficient way of designing digital products and services is as follows:

Let’s look at this way of doing things in more detail.

At Mightybytes, some of our earliest design deliverables are style tiles, which communicate the essence of an online visual brand. More detailed than mood boards and designed specifically for websites and applications, style tiles include the most common visual assets of a website: font, colors, image styling, interface elements, and so on. Their purpose is to help client and agency find a common visual language with which to design the various components of a digital product or service. Because they are independent of layout or UX, style tiles can help agency and client teams gain consensus around how site components will be styled. Style tiles form the basis for creating layouts.

If the client has an existing style guide or brand book, that can be very helpful for creating style tiles. Font choices and color swatches already exist for other mediums. Design teams create style tiles to translate how those guidelines will work on the Web. They also create styles for iconography, image treatments, buttons, and other common interface elements. Those elements then form the basis of styles defined in cascading stylesheets, which control the look and feel of an entire site. If it is decided that header fonts should be gray instead of black, that’s a thing that can happen quickly.

Figure 5-10. These style tiles helped the team at Bike & Build better understand color schemes, image stylings, and button treatments well before they were applied to site components

In the early 2000s, sustainability-minded designers suggested using darker colors in digital design to reduce the energy required to power white or brightly colored pixels. In fact, there was even a Google search spinoff created by Heap Media, called Blackle that, as of this writing, purports to have saved 5,461,326.853 Watt hours of electricity by allowing users to search Google on a dark rather than white screen. Whereas this energy-saving effort held true when most monitors still used cathode ray tubes to beam red, green, and blue phosphors across your screen, LCD monitors or LED-lit LCD screens can actually use more energy to display a black screen than a white one.^[130]

But LCDs aren’t the only screens out there. In OLED screens, found in newer smartphones and tablets, each pixel produces its own light (rather than using a backlight like LCD monitors), so if the primary color of your design is black, no pixels are activated, which results in much less energy use.^[131] However, white-on-black screens are often harder to read, introducing an accessibility problem. So although it might be lower energy with OLED, if people have to peer at a page for twice as long to make sense of the content, it’s a net loss.

Given this, when designing interface screens does it matter which colors you choose? The answer depends on two things:

First, hundreds of products, including many tablets, devices, and smartphones by Samsung, Panasonic, and others use OLED screens.^[132] As of this writing, the iPhone still uses an LCD screen.^[133] Design choices that are energy efficient on one type of screen use more energy on another type of screen. If you know that the majority of your users will be on a specific type of device, you can make an educated choice, but how often does that happen?

Similarly, accessibility guidelines for people with low vision might require making a high-contrast stylesheet. A style tile might have a set of reduced, high-contrast colors for this use case.

Second, colors are important enough to any organization’s brand that it is very likely brand consistency will trump energy efficiency in most scenarios. A potentially more useful decision might be to make use of “flat” assets—images that contain large swaths of flat color rather than gradients, bevels, or other effects—in your design work. File sizes for CSS buttons and vector-based SVG files are smaller than their raster-based counterparts, meaning less data to download. Plus, flat images can be scaled more easily in a responsive design.

Figure 5-11. Which color choices uses the most energy? It depends

Designers have thousands of typographical choices to use in their digital products and services. How sustainable they are depends on two things:

Let’s take a look at common font types and the pros and cons of each:

Figure 5-12. System fonts, web fonts, embedded fonts: which best suit your needs?

Here are some other good practices to consider:

Weigh your options carefully when making typographical choices for your digital product or service. If the project calls for high design, go with a web font. If it requires optimal performance, perhaps a simple system font will work just as well. Or, maybe the web font works well for desktop users but a system font works on mobile devices. Just make sure that the font options you choose don’t impede performance. If you’re not sure which choice to make, refer to your page weight budget. Do you have the extra kilobytes to spare?

Let’s explore some things you can do with visual assets on your site, such as photos and icons, to keep file size down while still maintaining visual integrity.

Figure 5-13. Images add both visual impact and weight to your page—use them wisely

Images can add a large amount of extra data to your page. First of all, ask yourself if you even need an image. Is a photo or other sort of image critical to telling your story or teaching a concept inherent to the success of your content? If you decide an image is absolutely necessary, can you achieve the same result using resolution-independent CSS effects or even web fonts?

Which format?

Vector image formats such as SVG are resolution-independent and can scale up or down without adding additional weight to your page. These are great for shapes, icons, logos, and so on. But they are completely unsuitable for complex imagery like photos. That’s where raster images like PNG or JPGs are better. Raster images use pixels on a grid to display an image. Because of the way they are constructed, raster images will also be bigger files than their vector counterparts, so it makes sense to consider the display need carefully as you ready files of web delivery. Here are some guidelines to keep in mind.

• PNG or GIF files are great for diagrams or graphs that have flat line art and don’t need to scale. PNG files also support alpha transparency.

• JPG is a great option for photos, but logos or other line art will look jaggy because of JPG’s compression scheme.

• SVG, as just mentioned, is great for resolution-independent line art with flat colors (gradients, not so much). When scaled up, they will retain their sharpness. Because vector images are stored as geometric equations, they can also take more computing power to render. They also offer more flexibility because they can be animated or controlled with CSS for richer interactions.

Figure 5-14. Which image format is best for your needs?

Compress those images

Be sure to run all of your images through a compressor like Smush.it, Kraken.io, or Image Optimizer to shave off extra file size. Choosing “Save for Web” in an image editing tool like Photoshop can add extra unnecessary metadata and export files up to 50% larger in size than other optimization tools.

Also, from a visual design perspective, black and white photos or illustrations are both less data-heavy than retina-ready JPGs.

Figure 5-15. Compression matters: strive to find that perfect balance between quality and file size

Use CSS sprites

CSS sprites combine multiple graphics or images into a single file and use CSS properties to display only the portions necessary for a specific need. With this technique all your site’s icons, for instance, can be downloaded once, cached by the browser, and displayed across all screens without incurring additional HTTP requests or the additional data size associated with multiple small images.

Figure 5-16. One image, many uses. CSS sprites cut down on HTTP requests and file size

Inline images

In some cases, it might be helpful to inline an image right into your HTML. Using Base64 encoding (which, having been first proposed in 1987, predates even the World Wide Web), images can be included directly in your HTML, reducing HTTP requests and allowing pages to load faster.

Several Base64 image encoders are available for free online. Simply drag and drop an image to convert your image into a Base64 file. Some will also compress images before reencoding them as a Base64 file.

This approach is best used on small, single use images. Encoding large photos, even when using compression (which you always should), will result in slower page loads because Base64 encoding doesn’t reduce the actual amount of data being sent to the browser. It only reduces the lag time caused by HTTP requests. This approach is also better for images that are used only once rather than those commonly reused, like icons, or navigation elements, because they don’t cache in the same way a CSS sprite would.

Also, if images are an important part of your SEO strategy, this is not the way to go, because Base64-encoded images will not show up in search engine results at all.

Figure 5-17. Patrick Sexton’s Base64 image encoder will turn your image into a data stream

Yes, people do still print web pages—not often, but it happens. Recipes, bank statements, contracts, FAQs, maps, directions, and so on are all prime candidates for printing. How do your screens look when printed? One of the quickest ways to waste massive amounts of paper, ink, and other resources is to print pages that aren’t optimized for a printer. Sustainable design principles dictate that printer-friendly screens or web pages use the least amount of resources while still providing acceptable results.

To do so, print should be treated as an equal alongside other media types, like screen and speech. Although most browsers will by default change colors automatically to save ink, this is often not as effective as a custom solution. You can use media queries in CSS3 to look at the capabilities of a device and check a number of things, including width/height of viewport or device, landscape or portrait orientation, or screen resolution. Using these queries, you can call individual style rules or separate stylesheets to adjust your page based on different criteria.

Figure 5-18. You might not realize it, but people do print your pages; not optimizing them can lead to wasted paper, ink, time, and other resources

Print stylesheets, provided as additional CSS files for a site, don’t need to include all relevant styles, only the differences between screen and print. If you use the print media query, default styles will generally be included. It is important to define the differences clearly. For example, while pixels are the default unit of measurement for screens, for print it’s inches or centimeters, so include things like margins and padding in those units.

Here are some things to consider when creating print styles:

The important thing to remember is to keep the file size small while still maintaining acceptable print quality. Web teams often overlook print styles, but in doing so they unwittingly contribute to waste of resources. Taking a bit of extra time to make your pages printer-friendly can make a difference and reduce user frustration.

Finally, as we discussed in other places throughout the book, ground all your design efforts in a solid strategy for measuring success. Set goals early and work through strategies to decipher whether you are meeting those goals quickly. Make no assumptions on your design decisions or those requested by clients. Instead, build user testing into every step of the process if you can. By testing design decisions with real users, you can move your process forward based on hard data. This will help keep those uncomfortable conversations driven solely by subjective emotion—“But I feel it should be green”—at bay.

A/B testing—whereby two UX options are presented to users and interactions are tracked—can go a long way toward getting better design decisions based on data made faster.

Figure 5-19. Measure what matters: the most successful design projects are those that use data to support decision making

Resources like Optimizely, UsabilityHub, Optimal Workshop, and others can help move design decisions forward quickly without exorbitant expenditures on custom user testing workshops. Those of course have their place, but not all projects have the luxury of bringing a room full of target users together for an entire day of testing.

Ken-Laurin Kramer notes in User Experience in the Age of Sustainability (Morgan Kaufmann, 2012) that “Sustainable design should strive to be inclusive and ‘universal’ in its appeal. Through using universal design practices and following those design guidelines, we can practice sustainable design and accessibility in one effort.” In other words, accessibility-compliant products and services that work across the widest array of computers and devices, including screen readers and other enabling technologies, are potentially more sustainable solutions than those that don’t consider the entire spectrum of users.

When someone talks about a digital product or service being accessible, they’re often referring to whether it works for people with disabilities. The World Wide Web Consortium (W3C) publishes the Web Content Accessibility Guidelines (WCAG), which can help product teams create more accessible and hence sustainable experiences.

WCAG includes twelve guidelines organized into four categories:^[135]

Mobile-first is a term coined in 2009 by Luke Wroblewski to define a design strategy for mobile devices.^[137] It has three components:

These parameters require you to focus on content that’s most important for your users. Mobile-first strategy requires designers and content creators to consider the needs of users on mobile devices before considering those on desktop machines, which typically have larger screens and more processing power. This follows the basic principles of progressive enhancement (which we’ll cover next), the thought being that if something offers a great experience on smaller devices with fewer resources, that experience can be enhanced for users on more powerful devices rather than the other way around. Mobile-first forces a product owner to consider content and interactions that are most essential to meeting its goals and user needs before adding any additional bells and whistles. This can be a helpful exercise for clients who cling to their content regardless of how it performs.

When designing a digital product or service using mobile-first strategy, content patterns and component design become critical steps to achieving success. With only so much real estate in which to display your content and interactions, agency and client need to work together to reach consensus on the most essential elements for each screen. This in turn informs design decisions for larger screens.

Figure 5-21. Focusing first on what mobile users need allows for more scalability

Mobile-first is a more sustainable strategy because when content, transactions, and interactions are prioritized with mobile devices in mind first, end-user devices load less data, which means they consume less energy. Similarly, when visual design decisions are made with mobile-first in mind, mobile pages load more quickly while using less bandwidth, resulting in energy savings, as well.

Progressive enhancement is a web strategy that applies technologies in a layered approach which gives everyone access to basic content and functionality and increases functionality as a user agent, such as a browser, will allow. In other words, the more modern and feature-rich a user agent is, the more features are revealed by a page that uses progressive enhancement.

This is relevant for designers and UX practitioners because rather than designing for graceful degradation—that is, creating experiences with the most bells and whistles for top-of-the-line machines first and worrying about smaller/older/slower devices as an afterthought—progressive enhancement flips the equation with a focus on maximizing accessibility. When designing with progressive enhancement in mind, consider the lowest common denominator first and create the best possible experience for that, and then layer additional enhancements atop that experience.

Figure 5-22. Progressive enhancement insures that users on lower-end devices still have access to basic content and functionality

Mobile-first is a natural extension of progressive enhancement. Like the other strategies and approaches in this section, its focus on accessibility makes it also a more sustainable strategy.

The term responsive web design was coined by Ethan Marcotte in a 2010 article for A List Apart.^[138] Responsive designs accommodate different screen resolutions using fluid grids that respond to a device’s screen size by resizing accordingly. This is typically done by using media queries in CSS3, which give pages the ability to tailor themselves to a specific range of output devices without changing content.

Critics of responsive web design note that responsive sites can take longer to load because the media queries used to make a site responsive simply scale or resize assets based on the requesting site’s viewport size. Thus, a responsive page on a mobile device could in fact be loading the same assets as it does on a desktop site, which is an unfortunate waste of resources and bandwidth. But when used in tandem with mobile-first and progressive enhancement strategies, responsive web solutions can deliver optimized experiences for users across devices, making them more accessible to more people while still using fewer resources.

Similarly (but not quite the same), adaptive designs adapt to the width of the browser at specific points. In other words, an adaptive site is only concerned about the browser being a specific width, at which point it adapts page layout.^[139]

An analytics tool will provide you with information about which pages have high amounts of traffic from mobile devices. If budget or timing are concerns (and when aren’t they?) you can begin by tweaking those pages first.

Figure 5-23. Sometimes responsive designs just scale down desktop-sized images using HTML, which can cause lag times on mobile devices

Regardless of how you address the needs of mobile customers, doing so is absolutely critical. We have passed the tipping point: more content is accessed via mobile devices than not. More searches are done on mobile devices than on desktop machines. Thus, it’s a safe bet that the majority of your users are on mobile devices. Plus, in April 2015, Google announced that its updated search algorithms would rank mobile-friendly sites higher than their nonmobile counterparts in search results. So you actually are penalized in search results for not having a mobile-friendly site.