Inclusive Design, Day 13/15: Mind the Mobile, Design for Low Bandwidth

This is day 13 of 15 in a short series on inclusive design. If you missed any of the earlier posts, see day 1 here or view the full list.


Bandwidth is a Precious Resource

Speed and connectivity should be considered be a major factor in exclusion. Just ride the BART in San Francisco. 😀

Joking aside, much of the world does not enjoy the wonders of high-speed bandwidth yet.  Like William Gibson famously said, “The future is here, but it’s not evenly distributed.” Kansas City Google Fiber gigabit on one end, on the other Tegucigalpa less-than-Edge with wires hanging off a string.

As evidence of the disparity consider the “lite”* apps built by tech giants for markets where they want to drive adoption. The need for a reduced-weight experience in places with low-speed wired broadband and tenuous mobile broadband highlights the case of exclusion. Where large populations are left out of the “modern web” due to connectivity limitations, cost of entry, archaic device types, and many more reasons both cultural and political. (*Side note: what the heck is with that spelling?)

One story I noticed recently that mentioned speed as a leading tech market indicator involved WhatsApp’s growth in India even as Facebook lags behind them, via The Economist, January 27, 2018. Sluggish web app performance is a factor in Facebook’s lack of adoption in India. People who pay by the megabyte or gigabyte prefer to use a service that is leaner, faster, less bloated. They’re voting with their app choices.

Photo of a story in The Economist about WhatsApp and Facebook
Screenshot from a story in The Economist about WhatsApp competing with Facebook in certain markets, winning there in part because of low bandwidth and connectivity.

In more ways than one, WhatsApp is the opposite of Facebook… whereas Facebook requires a fast connection, WhatsApp is not very data-hungry.

As a result [of this and other reasons], WhatsApp has become a social network to rival Facebook in many places, particularly in poorer countries. Of the service’s more than 1.3bn monthly users, 120m live in Brazil and 200m in India.

Extend the Benefits to Everyone

On the plus side, designing for speed brings about broad improvements to everyone else in the world. People should love the simpler interface with fewer settings and menus, alongside the bandwidth savings and reduced footprint for the app’s data storage needs.

Logically, “Design for low bandwidth” is on the Automattic Inclusive Design Checklist under “Bringing inclusion into designs.”

Automattic Inclusive Design Checklist item about designing for low bandwidth.
Screenshot from the Automattic Inclusive Design Checklist about designing for low bandwidth.

Back to the trend of tech giants creating lighter versions of their apps. When I take a closer look at the apps like “Twitter Lite” and “Facebook Lite” — at first they appear to be primarily designed for speed on slow connections. Yet the changes bring a new and different experience to many people who are mobile-first or non-technical.

The design enhancements resulting in a simpler and more intuitive app extends the benefit to a wide variety of people. For example, better readability from larger text size and the usability win from simpler navigation and clearer labels. That sounds like something the AARP crowd would all buy or click on or subscribe to.

If you’re curious about the “lites” — here’s further reading.

Twitter Lite:

Facebook Lite came out two years earlier: Announcing Facebook Lite (June 2015).

With Facebook Lite, our goal is to provide the best possible Facebook experience to everyone, no matter their device or connection. And we hope that by sharing how we built the app, we can encourage more people to build for the next billion coming online. — via How we built Facebook Lite for every Android phone and network

The next billion coming online! Ambitious.

Is Calypso Fast Yet?

WordPress.com teams pay a lot of attention to improving the user interface with a focus on speed, yet still have a long way to go to catch up. Much of the improvement happens “below the hood” in the Calypso React app — developers improve how the app bundles assets such as CSS files, images, and external JavaScript libraries. Loading files asynchronously when needed and not on the first page load, finding ways to remove extra weight from each page load, caching data in more places — all to make everything look, feel, and load ultra-fast.

Goal: Calypso is the WordPress Lite.

Calypso designers also pay attention to the user interface, of course — recently we’ve made the text size larger and improved the color contrast for readability. My team at WordPress.com is now digging into label changes and interactions needed for a refreshed, simpler navigation for managing WordPress websites.

For those curious, we track speed improvements in Calypso on this data-rich website: iscalypsofastyet.com. And, we’re hoping to improve both the mobile web performance and the usability of the app even more in 2018.

Is Calypso Fast Yet website screenshot
Screenshot from the Calypso project performance status site: iscalypsofastyet.com.

In a blog post Speed is a key design attribute John Maeda highlights two strong voices in recent web history — speaking out on the value of speed and performance: Marissa Mayer and Lara Hogan. They’ve both been preaching this same topic for years. I’m sure today no one argues the pivotal role of speed in Google’s early success and how it led them to market dominance.

Feel the Slowness to Build Empathy

Testing bandwidth limitations even on a fast network is a great empathy challenge. I’m grateful to John Maeda for sharing two ways to do this: Chrome has a throttling setting in developer options to try out slower speeds with your site or web app, and the Network Link Conditioner for XCode 9.2 for macOS.

I’ve felt this slowness most times I travel, even in the US — in airports, hotels, taxis, trains. Most definitely when in other countries, because I’m limited by my data plan’s built-in speed limitation. Or, as when I visited a WordCamp in Nicaragua, the slow mobile “broadband” is the reality for everyone living there.

Keeping in mind much of the world now sees the web only through a mobile device. Which brings us to a message from WapuuMind the mobile!

mind-the-mobile.png
Wapuu says: “mind the mobile.” (Background image: Pexels; Wapuu illustration by John Maeda.)

For day 14 of 15 of inclusive design, I’ll share behind-the-scenes details of the work Automattic designers put into our inclusive guide and checklist.


About this Inclusive Design series In 2 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 13 of 15. Read more about the series.

Inclusive Design, Day 12/15: Improved Publishing Confidence on WordPress.com

This is day 12 of 15 in a short series on inclusive design. If you missed any of the earlier posts, see day 1 here or view the full list.


The pre-publish confirmation step in the WordPress.com editor.
Screenshot of the pre-publish confirmation step in the WordPress.com editor.

I’d like to share another example of solving for one case, extending to many. This one comes from my team at Automattic. We’re called “Delta” — and we focus on making the editing–publishing flow for WordPress.com as smooth and pain-free as possible.

The WordPress.com blog in English.
Screenshot of the WordPress.com blog in English. This blog is read by 40-plus million people.

From our own experience, we know that publishing content to the entire world can be nerve-wracking! This “publishing confidence” experience started out with a specific case in mind: the WordPress.com announcements blog. With 43 million email subscribers as of the latest count, the authors at Automattic writing for this English-language blog never want to accidentally hit that “Publish” button before a new announcement is polished and ready to go.

That’d be a total disaster, right?

Many years ago, we solved this by placing a tiny plugin created for our VIP customers on the WordPress.com blog. It’s super simple, a JavaScript alert() dialog intended to add a quick warning before publishing. Developed for use on high-end client sites running on WordPress.com, it looks like this:

View of the VIP plugin for publish confirmation.
Screenshot of the WordPress.com VIP plugin for “are you sure?” publishing confirmation.

Fast-forward to 2017 — the Delta team starts revamping these same publishing flows as we upgrade many of the key features in the new WordPress.com interface. As we researched the pain points in the experience, we realized that this same feeling of anxiety could be shared by many other people. In fact, our customers often wrote in to request this exact thing for their own blogs.

There needs to be an “Are You Sure” button on the publish section, I’ve accidentally published a blog post too early so many times. — A WordPress mobile app user, writing it to support in 2017.

What if we could make a product change to reduce that same anxiety for everyone? Well, yes — it makes sense. The team also upgraded the blog post preview pane to add in a switcher for screen sizes — mobile, tablet, and desktop — to further improve the confidence in the end result.

Solving this in the WordPress.com editor experience means making it much harder to accidentally publish on any blog. The change enables all of our customers to breathe easier. Like us with the WordPress.com announcements blog — they can now feel more confident that the changes they’re sharing are ready for the world.

The WordPress.com editor screen
Screenshot of the WordPress.com editor screen, showing the confirmation step in the sidebar. Note the opt-out checkbox to remove this extra step if it’s not helpful.
The WordPress.com preview pane.
Screenshot of the WordPress.com preview pane, showing screen size options. This way you can review your post before it goes live: in mobile, tablet, and desktop sizes.

See also Publishing on WordPress.com for a project-level report on improving this publishing experience written by colleague Shaun Andrews.

For day 13 of 15 of inclusive design, we’ll look at speed and connectivity as an exclusion example. How the trend of “Lite” apps built for certain markets to drive adoption brings needed improvements to everyone.


About this Inclusive Design series In 3 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 12 of 15. Read more about the series.

Inclusive Design, Day 11/15: OXO Figured It Out

This is day 11 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.


The “OXO Good Grips Story” is an astounding example of inclusive design, solving for one and extending to many. An opportunity that grew from one person’s kitchen solution into a $60 million business.

A view of the original kitchen vegetable peeler made of metal.
The original peeler is made of sharp metal.

Sam Farber — who created Copco enamel cast-iron cookware in 1960 — later developed what is now the quintessential OXO kitchen peeler from seeing his wife struggle with the classic shape and size of metal kitchen tools. He solved her pain by creating an ergonomic and comfortable grip that even people with arthritis could use. Turns out everyone else loves it, too.

The idea was always, from the start, to make useful products for people of all ages and levels of dexterity. We can improve every day life for people, without them even knowing or thinking about it. — Sam Farber

Watch the video, “Objectified: Smart Design OXO Good Grips Story,” for a behind-the-scenes look at OXO’s product development process and inclusive mindset.

Read more history in a case study from The Center for Universal Design: OXO International Becomes a Universal Design Icon (2000).

A view of the OXO peeler with an ergonomic handle.
The OXO version of the peeler in good design for everyone.

For day 12 of 15 of inclusive design, I’ll share about reduced anxiety when publishing to WordPress.com websites. A problem solved originally for one use case by adding an extra step for confidence.


About this Inclusive Design series In 4 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 11 of 15. Read more about the series.

Inclusive Design, Day 10/15: Making Your App Accessible Benefits Everyone

This is day 10 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.


Making your app accessible to visually impaired users benefits all your users. — Ayesha Zafar on the Invision blog

Taking the principles of inclusive design from idea to action means changing how and what we design. A reminder that technical details matter as much as the intention.

Via the design.blog/inclusive checklist under “Building inclusion into designs” we see how this relates to accessibility, “There’s no inclusion without accessibility.”

build-inclusion-into-designs.png
Screenshot of the “Building inclusion into designs” section on the design.blog/inclusive checklist.

The amazing thing about doing the hard work for universal access is that the changes benefit everyone. Design for slow bandwidth? It’ll load faster for all people.

Here’s the full text for this checklist section, for reference:

There’s no inclusion without accessibility. Accessible designs will present differently depending on the medium you’re working in; consider physical, visual, auditory, financial, and other factors as well as an individual’s temporary or permanent limitations to accessing each. Is your video accessible to someone with hearing impairment? Is your website accessible to someone with a low internet bandwidth? Is your copy readable by individuals with different education levels, for whom the text is in a second language, or who are new to the subject matter? The more contexts you consider, the more accessible and inclusive your designs will be.


For a real-life example, I love this in-depth look at providing an accessible mobile app experience for visually impaired users by product designer Ayesha Zafar. Written for Invision, makers of software for digital designers. To understand inclusive design at both the highest level, the why — means you then need to deliver at the detail level, the what and how.

Read the full article to learn about: How to Design Mobile App Experiences for the Visually Impaired.

Screenshot showing the Invision app experience of inclusive design
Screenshot showing the Invision blog article about inclusive design applied to visually impaired mobile app users.

Ayesha also wrote a similar guide — focused instead on blind users — that’s also full of accessibility tips and inclusive design principles: How to design accessible mobile experiences for the blind.

Image of Ayesha Zafar saying
Ayesha Zafar says “empathy is key when designing app experiences.”

On a digital product team it is everyone’s responsibility to have empathy for users and thus all users, no matter their ability, should be considered in the design process. — Ayesha Zafar on the Willow Tree Apps blog

Thank you, Ayesha. 💯

For day 11 of 15 of inclusive design, another example of “solve for one, extend to many — accessibility and usability considered first in the design: the story of “OXO Good Grips.”


About this Inclusive Design series In 5 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 10 of 15. Read more about the series.

Inclusive Design, Day 9/15: Review of Principles

This is day 9 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.


Today I’d like to pause, take a deep breath, and review the principles of inclusive design as I’ve come to understand them.

Here’s the working draft we’re using in Automattic, with a nod to Kat Holmes’s work on Microsoft’s inclusive design toolkit.

1. Recognize exclusion.
2. Broaden perspectives and build empathy.
3. Bring diversity into teams and processes.
4. Solve inclusively for one, extend to many.


 

Kat herself describes these principles of inclusive design superbly in this brief video, from an O’Reilly design conference in March 2017.

For day 10 of 15 of inclusive design, I’ll share a story about making an app accessible to visually impaired users — which then benefits all users.


About this Inclusive Design series In 6 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 9 of 15. Read more about the series.

Inclusive Design, Day 8/15: Expand Your Market By Solving One Case First

This is day 8 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.


Adopting inclusive design isn’t just about being a good person. It’s a solid foundation for good business — focused on solving real needs for real people.

Barclays Bank understands this and is putting it into practice. Thanks to Beatriz Lonskis for pointing me to this example of smart business and good design.

We’re committed to inclusive design and accessible services — using new technology to make banking easier for you. — “Barclays Access” statement

The full case study is in The Guardian — Barclays Bank learned that embracing inclusive design, starting with accessibility, creates a better solution for all their customers. It’s a commercial opportunity when meeting a real need — not an expensive compliance issue.

 

Another Barclays accessibility piece in The TimesSmarter technology is improving the lives of disabled people.

Today, I manage all my financial affairs by smartphone,” she says. “It has genuinely transformed my life, cutting out all those frustrating trips to the bank.” — June Maylin (a blind customer of the bank).

June’s story provides an insight into how the technologies designed to make banking easier for everyone can be particularly effective for people with disabilities, and are steadily giving people much more control over their money. Even small, relatively low-tech initiatives can make a big difference.

By the way, I love this aspiration for leadership in this emerging practice on the Barclays Access Twitter profile: “One of our ambitions is to become the most accessible & inclusive FTSE org. Tweets about accessibility & disability issues.”

Small changes make a big impact, and inclusive design can have a major impact on revenue and business success by solving for one and extending to many.

For day 9 of inclusive design, we’ll review the principles discussed so far: 1/ Start with exclusion, 2/ Broaden your perspective to gain empathy, 3/ Bring diversity into teams and processes and 4/ Solve inclusively for one, extend to many.


About this Inclusive Design series In 1 week I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 8 of 15. Read more about the series.

Inclusive Design, Day 7/15: Roku and the 10-Foot Rule

This is day 7 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.


“Solve for one, extend to many” is a key principle of inclusive design which I learned from Kat Holmes and her work with Microsoft.

Via fellow WordPresser Leo Postovoit, I learned more about how Roku followed this principle to achieve commercial success. “From a small hardware start-up to a publicly listed company with an estimated 2017 revenue of $500 million and a $5 billion market cap,” according to Variety.

hero-roku-homescreen.png
A typical Roku home screen. One click Netflix is as simple as it gets.

Roku is successful because of how user-friendly everything is. Along with Apple TV, Chromecast, Android TV, and others — the experience is a big improvement over traditional TVs.

CEO Anthony Wood explains in Variety:

Roku’s original user interface was anything but flashy. Wood instead aimed for simplicity, banning all but the most essential buttons from Roku’s remote control, and calling apps “channels” to help TV viewers in their transition to the new medium. “Companies commonly overdesign something and make it kind of pretty, but not easy,” he says. “Customers, what they really want is easy.”

Here’s what people love about Roku:

— The minimal interface takes full advantage of “10-Foot UI” principle by using simple, intuitive navigation based on a grid. Large and readable from ten feet because you have no mouse/keyboard, viewing from the couch. (The navigations options are limited to left, right, up, down — click to select). Requires no fancy 100-button or huge user manual. Setup is a breeze.

— A trimmed down TV remote with programmable buttons; plus dedicated buttons for popular streaming services like Netflix. No menus to scroll through, go straight to viewing.

— Voice commands to search via the remote, and the search matches available content quickly from your input. Leo says: “My favorite feature is the universal search, where it actually queries every channel for listings, fuzzy searches too. You can find every “Batman” movie, including the Dark Knight!”

— Packaged as low-cost hardware — basic streaming kit sell for $29 — Roku positions itself as an attractive alternative to regular TVs that require a cable or satellite subscription. Streaming requires WiFi, and increasing broadband speeds boost the value of high-quality, always available content.

— One of my favorite features is the earphone jack in the remote control — great for private listening and for those who need a little extra hearing assistance.

[More about the 10-foot UI, if you’re curious like me: Wikipedia article and a user design guide.]

Though I couldn’t find evidence for it, the person Roku seems to have in mind in solving the typical TV problems is a cost-conscious, non-technical person over a certain age. Your grandparent might prefer a simple gadget that does one thing well, for example.

Fewer cords to plug in. No need to tinker or walk through endless steps of complicated menus to set up the TV. They certainly don’t love or wish to understand how to operate 100-button remote controls. [That’s why they call you over! “Fix my TV again, please.”]

roku-homepage.png
Roku — a player for every kind of streamer; and more than a smart TV.
featured-packed.png
Featured-packed. Entertainment filled.

The beauty of “solve for one, extend to many” is that the same elegant UI and intuitive remote works well for seniors and the elderly — but also works great for everyone else.

As Leo told me, “It benefits all people.”

Erica Manfred explains her love for Roku as a hard-of-hearing senior citizen: Aging With Geekitude: Why Roku is My New Crush:

Roku has terrific little feature, a headset jack on the remote so you can listen to your favorite shows and movies without bothering anyone. For a hearing aid wearer like me this is a godsend. The Roku also supports closed captioning, another huge benefit for the hearing impaired and anyone who can’t understand current slang.

(Leo notes 30-40 percent of Roku content still isn’t captioned.)

Roku proves to me that simple and inclusive hardware+software is good design and good business.

For day 8 of 15 of inclusive design, I’ll share a business success story — how to expand your market by solving for one, extending to many. Because inclusive design is great for business.


About this Inclusive Design series Coming up next week I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 7 of 15. Read more about the series.

Inclusive Design, Day 6/15: Recognizing Exclusion

This is day 6 of 15 in a short series on inclusive design. If you missed earlier posts, see day 1 here or view the full list.


Missing the market

Exclusion is often about mismatched conditions. The opposite of a market fit — a market miss. Because we start from our own biases we naturally exclude people not like us.

Think about how you feel when using a product or website. Is it friendly and welcoming? Do you feel at home and valued? Or does the experience make you feel “dumb”? Are you left out, unable to fully participate? Maybe you don’t understand a key phrase or confusing jargon, and fail to continue.

Inclusive design starts with exclusion because finding the mismatch at the beginning of the process can lead to making impactful decisions to improve everyone’s experience.

Essential reading: Tragic Design and Technically Wrong

Jonathan Shariat and Cynthia Savard Saucier explain exclusion succinctly in Tragic Design: The Impact of Bad Product Design and How to Fix It.

Without good design, technology quickly turns from a help to a harm. It can kill, but that isn’t the only negative effect. It can cause emotional harm, like when a social app facilitates bullying. It can cause exclusion, like when a seeing-impaired person doesn’t get to participate in socializing on a popular website because simple accessibility best practices have not been attended to. It can cause injustice, like nullifying someone’s vote, or simply cause frustration by neglecting a user’s preferences.

Exclusion is a failure of design. Good design listens to its users; bad design ignores them. Good design goes the extra mile to make sure everyone is happy; bad design takes the shortest path to meet business goals. Good design assumes the designer’s point of view is biased; bad design assumes it represents all users. Lastly, we shouldn’t wait until we or someone close to us needs it to start caring about accessibility.

Another recommended book on this topic is Sara Wachter-Boettcher’s Technically Wrong: Sexist Apps, Biased Algorithms, and Other Threats of Toxic Tech. I also learned from her previous book, Design for Real Life with Eric Meyer.

Recap: “Design and Exclusion” conference

In April 2017 Automattic organized a Design and Exclusion conference — an amazing venue to hear stories from a diverse set of voices. The site includes the full program of engaging guest speakers, interviews, and articles. You can dive back in, anytime.

We tend to think of the digital products and services we build as tools that promote equality and access. Yet we often create inhospitable, uncomfortable, and non-inclusive spaces despite our best intentions, and despite design’s overarching goal to foster inclusion.

If you’d rather dip briefly into parts of the program, I recommend accessing the audio podcast format which includes transcripts and the clip of each section.

x-conf-panel-1.png


Brief exclusion examples

Recent exclusion examples that I came across

Emoji in Twitter Titles. This one was mind-opening for me! I learned that emoji can be exclusionary to those who use screen readers to navigate the web. Note: Work is being done in this open Trac ticket to make emoji accessible in WordPress.

The “Cheatin’ uh” message in WordPress is more inclusive as of last week. Tammie Lister, design lead for the Gutenberg project mentioned this improvement.

Cost as exclusion, with expensive conferences. Prices for big events in the tech industry can be enormously exclusive, and if you’re a small company — or independent — it prohibits you from participating. Conferences can cost hundreds if not thousands of dollars. That kind of cost makes me extremely grateful for events like WordCamp. $40. Forty dollars. For two days of talks, meals, a workshop, and more. That is inclusively designed: more people can come participate, learn, and network.

Jargon, acronyms, and fancy words and phrases that set someone apart from others — read my take: TOA (Thoughts on Acronyms).

Other examples of exclusion could include inside jokes, arcane sports or pop-cultural references, stereotypes based on age, gender roles, sexuality, race, or ethnicity. And many other types of biases. Too many to list.


To be aware, notice, and shift

Once I recognize the exclusion, I can shift. I might even recognize and welcome it. Then, as teams and companies, we can work together to rework, realign, and redesign that flow or screen or phrase to make it more clear. More welcoming. More inclusive.

It’s not about creating perfect solutions every time. It’s not about creating lowest common denominators or one-size-fits-all solutions. Rather, it’s a new way of finding new design constraints to challenge old paradigms and outdated norms. It’s about being mindful of the gaps we create between people and the world around them. — Kat Holmes

To recognize exclusion is to gain empathy and make a connection.

Inclusive design has a way of pointing to something real. It’s both good design and good business. As I become more aware of exclusion — and fluent in inclusive design — I’ll connect with more people naturally as they see themselves welcomed and included in my work. And Automattic + WordPress can grow into a broader market because our products and services become more accessible.

For day 7 of 15 of inclusive design, I’ll talk about Roku’s usability and commercial success, the “10 Foot UI,” and principles of inclusive design for an aging population.


About this Inclusive Design series In 10 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 6 of 15. Read more about the series.

Inclusive Design, Day 5/15: To See Yourself in Imagery

This is day 5 of 15 in a short series on inclusive design. If you missed the start, jump to day 1 here.


An inclusive design case study from the design team at Automattic.

Details matter for inclusive design, as noted in this item from the Inclusive Design Checklist found under the “Building including into designs” section: Choose copy and imagery with care.

choose-imagery-with-care.png
Screenshot from the inclusive design checklist.

As a practical example from 2017, I’d like to point to an inclusive illustration project led by Automattic designer Joan Rho with an illustrator named Alice Lee.

Quick scenario: You’re on your phone, going through the onboarding flow for a new app you just downloaded. Helpful illustrations appear, guiding and educating you through the process. Now hold up: are the characters in these illustrations diverse or mainly white? Do they seem to be young tech-oriented millennials, mostly men?

Tech illustrations often feature the same sets of things: young, white people (usually men), surrounded by gadgets, with a cup of coffee, in a beautiful tech world. For consumer-oriented products, this creates an incredibly limiting and exclusive brand image…

When the WordPress.com design team asked me to develop their illustration brand and 60+ product illustrations, these values were a major focus of the project, especially as part of their mission to democratize publishing. — Alice Lee

Here’s the end result of the work to create a more representative set of illustrations, showing the English-language WordPress.com blog home page as a visual example.


Read a full project rundown on the WordPress.com blog: Inclusive Illustrations, By Design (May 2017).

inclusive-illustrations.png
The WordPress.com blog post explaining the project.

Alice Lee wrote up her thoughts on her site, as well: Inclusiveness in illustration — WordPress.com: Designing an Inclusive Illustration Brand.

alice-lee-inclusive-illustrations.png
Screenshot from Alice Lee’s post about the project.

If there is one takeaway I’ve learned from this project, it’s that it is challenging but always necessary to address your own biases & assumptions in order to produce better, more inclusive work.

This was also an incredible learning experience with respect to the lessons in inclusivity. It’s by no means a finished product or a checkbox to tick off and forget about; it’s a constant work in progress, and I’m happy to have grown along this spectrum. — Alice Lee

To see a similar project from another company, check out Illustrating Balanced and Inclusive Teams by the Atlassian design team.

atlassian-meeples-2017.png
Screenshot of Atlassian’s updated “meeples” illustration library for 2017.

(And let me know in the comments if you’ve seen other examples of this type of inclusive design work elsewhere; I’d love to see it and learn more.)


Inclusive design considers everyone. Wouldn’t you want to see yourself in the imagery?

Starting from a high-level ideal is important — diversity and a broader representation — yet the finished product must reflect that vision down to the smallest design details.

For day 6 of 15 of inclusive design, I’ll dig more into recognizing exclusion as a starting point for better design and good business.


About this Inclusive Design series In about 10 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 5 of 15. Read more about the series.

Inclusive Design, Day 4/15: When Defaults Don’t Fit

This is day 4 of 15 in a short series on inclusive design. If you missed the start, see day 1 here.


When do defaults fit?

This is a key question to consider when bringing inclusion to design. Can we assume that using “default” content and “default” appearance will represent our audience?

Inclusive means design or products that consider and acknowledge that their users experience the world differently, based on many factors that are out of our individual control. Design should not assume a default user with default characteristics or background. — John Maeda

What does it mean to design with the understanding that there is no normal case? Throwing out the notion of an 80/20 rule — a mental model we often take for granted as product experience designers. In practice, we see that every human is unique with their own set of abilities, experiences, and expectations. To ignore “normal” is to start with exclusion — asking questions and investigating and learning — and see what to build from there.

To design inclusively is to look at the full range of human ability with a genuine interest and curiosity.

Microsoft’s inclusive design strategy

Kat Holmes underlines the importance of human beings in all interactions. “Inclusive design is about creating a diversity of ways for people to participate.” Because there is no single “normal” type of person.

In this video (March 2017) Kat explains the now-famous example of the United States Air Force designing a new flight deck in the 1940s, for World War II, based on an average of many measurements. Meant to fit everyone — the cockpit ended up an ergonomic disaster because fit no one. Down the road, this led to advancements in adjustability and customized equipment, so pilots could dial in the settings to get a better fit. (This story is detailed in the book The End of Average by Todd Rose.)

Coming at problems with this broad range of diversity informs and guides the design from the start, explains Kat Holmes in a the #13 interview with High Resolution (May 2017). I’m paraphrasing a bit here:

  • “We seek to understand how people adapt and find out what motivations people have in common.”
  • “It starts with those most excluded. [At Microsoft] we bring in expertise from people using technology in a different way, then we consider “normal” as being their perspective. We find a diversity of designers from these backgrounds so we can apply their skills to new challenges. For example, someone with limited mobility who’s an expert at working with assistive devices might be an idea designer to consult with for building a code editor UI for small screens [intended for anyone to use].”
  • “It’s not about creating a bland or trimmed down product experience. We use the constraint from the beginning as a starting point.”

An example of solving for exclusion first is Microsoft’s OneNote dyslexia learning tools that display a variety of ways, giving the student control over the interface. Based on educational research, this UI lets people adjust to make it work best for them. However, even if dyslexia is the starting point — it applies to lots of other contexts including first-time language learning.

Screen Shot 2018-02-05 at 21.10.42.png
Screenshot of a Microsoft news story explaining how OneNote can help dyslexic children read and spell.

Clear, strong voices for inclusion at Automattic

At Automattic, we might not have as wide an array of representative human abilities as Microsoft and other tech giants, yet I’m proud to say we represent many clear and diverse voices.

Cate Huston, head of mobile and a talented engineer, explains how diverse teams make better decisions.

…That is why representation matters, not just to those who are represented, but to all of us. Because it expands our sense of what’s possible, and what we have reason to expect.

cate-on-hiring.png
Screenshot of Cate Huston’s article on improving diversity in hiring.
  • Cate’s leadership has taught me to better understand new points of view, such as underrepresented people in technology. Including introducing me to amazing women in computing history like Grace Hopper, Anita Borg, and many others.
  • She’s also pushed me and other hiring managers to pay more attention to details like gender, cultural diversity when finding the best candidates — for a better, more inclusive team culture.
  • Bonus — in hiring we use a tool called Textio to create more inclusive job descriptions for our open positions. It’s helped me reveal my biases and improve the language I use when describing the expectations of the ideal candidate.

Marina Pape, a marketing designer for the WooCommerce team recently shared key inclusion insights learned from marketing.

All we can do is stay open to learning where we have a bias, be relentless in our effort to reduce our own, and gentle and honoring in pointing out that of others.

Is it possible to create brands that are still full of flavor, personable, alive and bold whilst keeping them inclusive, non-cultural and in a sense ‘neutral’? Yes.

What it takes to produce something inclusive is a diverse group of makers so we should build diverse teams. And/or surround ourselves with diverse discourse and break out of our echo chambers.

We need people alongside us who will be radically honest with us. A variety of people.

Marina uncovered an unconscious bias and is now more aware of situations for exclusion in our messaging, characters in brand stories, or virtually any branding decision we make. Even more crucial in companies like ours than span the globe — as shown in her example of “Spring” marketing copy as viewed in the autumn for anyone living in the southern hemisphere.

marina-pape-on-woo-inclusion-marketing.png
Screenshot of Marina Pape’s article on inclusion lessons from WooCommerce marketing messages.

Davide Casali, mobile designer/developer and UX leader, found a stellar example of inclusive design in action on a Google signup form — shared via maeda.pm. Adding the “Other” option for gender choice to the form allows anyone to enter their own identification and not choose from a defined preset.

…When designers are able to address the “mismatched human interactions” that can be presented with solutions that are more likely to match then that’s a much better design. — John Maeda

Every situation is different when it involves people, John reminds us. No default will every do the trick perfectly.

For day 5 of 15 of inclusive design, we’ll look at a recent applied design example of inclusive illustrations for WordPress.com — “to see yourself” — with Alice Lee and Joan Rho.


About this Inclusive Design series In a week and a half I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 4 of 15. Read more about the series.