A multi-craft approach for accessible landing pages
How the Marketing UX team designed an accessible landing page for the ‘Born for Business’ docu-series
At Shopify, our mission is to make commerce better for everyone. The Shopify Studios docu-series ‘Born for Business’ is a beautiful example making entrepreneurship accessible in action.
Stats from the Bureau of Labor Statistics highlight that many people living with disabilities are self-employed twice as much as their peers. The ‘Born for Business’ television series chronicles the lives of four entrepreneurs with a diverse range of disabilities. This series reveals an insider’s look at what it takes to run a small business. It also sheds light on entrepreneurs with different disabilities, ranging from generalized anxiety disorder to spinal muscular atrophy.
Given the show’s subject matter, the UX Brand and Audience Expansion team decided to do a deep dive into best practices for accessibility when creating the ‘Born for Business’ landing page and marketing materials.
As a Marketing Content Designer at Shopify, an essential part of my work is identifying my audience and their needs to craft content designs that are valuable for users. Alongside my colleagues, Jack Bowman (Marketing UX Designer), Willow Cheng (Front End Developer), and Ronald Rabideau (Senior Motion Designer), I scrupulously researched accessibility principles.
This research approach included conducting interviews with our Diversity and Belonging team, looking up articles on Shopify’s Intranet, and reading a range of external studies. My colleagues also read various literature from The World Wide Web Consortium (W3C) and renowned UX blogs like UXPA Magazine. For our team, designing for accessibility wasn’t just an exercise in making accommodations; it was a lesson in maximizing the clarity of our designs.
Designing for accessibility wasn’t just an exercise in making accommodations; it was a lesson in maximizing the clarity of our designs.
Creating the ‘Born for Business’ landing page was no small feat. It was also the first time many of our team members had done a deep dive on accessibility principles. During the project’s ‘Build’ phase, our team took a multi-craft approach to learn best practices for building a site that was accessible, aesthetically pleasing, and reflective of the official ‘Born for Business’ branding.
We built out a landing page and email campaign to support the world premiere of ‘Born for Business’ on Crave and Peacock within about a month. Ultimately, this project amplified Shopify’s mission of building a diverse community of entrepreneurs, and drove new users to our website. We were able to drive around 14 thousand sessions to the web page within the first month of the launch. Over 95% of those visits were new users.
Read on to hear what our developers, designers, and content designers learned while working on this project.
Beyond Binaries: Why we went with a black and white color palette
Since it was essential to have accessible and highly legible content for people with a broad range of abilities, we optimized the contrast on our page by increasing the contrast on our page elements.
Making sure all web elements have a contrast ratio of 4.5:1 (as per WCAG standards) makes webpage text more readable for users. For the first time, we designed two high-contrast versions of our landing page: Dark Mode and Light Mode (a nod to iOS’s Dark and Light modes). Finding colors that were reflective of the show’s brand, high-contrast, and complementary made creating this palette a challenge, but, ultimately, we settled on the palette seen below.
A Dark Mode or Light Mode version of the web page is generated automatically depending on the users’ preference on their native device. The Dark Mode version of our page played with a distinct black background contrasted with white text and yellow accents. In comparison, the Light Mode version had a white background and used black text and green accents.
This Light Mode/Dark Mode approach was applauded by stakeholders and the organization RespectAbility, a disability-led nonprofit that works to create systemic changes for people with disabilities. We’ve since leveraged the Dark Mode/Light Mode method in other marketing campaigns.
Optimizing content for screen readers
Beyond creating high-contrast visuals, we carefully optimized the page layout for screen readers, which convert text into speech. This action allows users to navigate web pages by listening to the screen reader reading the page’s content.
We created a very linear layout for our landing page so that the screen reader would allow users to navigate the page easily. While the human eye can jump all over the page to read content and move laterally through a carousel, a screen reader will present all of the content in one linear format. Creating a long-scroll vertical layout made the content more accessible for people with visual disabilities by reducing the likelihood of the screen reader processing content in the wrong order.
Balancing motion: learnings for motion designers
The vivid, edgy graphical elements used for the show’s branding materials, and the show’s bold tone, inspired us to play with fun animations for this webpage. However, after researching accessibility principles for videos, we learned that sometimes lots of motion can be harmful to some users.
Jana de Klerk, who led the design on the project, believes the motion design for the landing page was the most challenging aspect of the project: “Aesthetics had to be balanced with functionality. We had to ensure that the visual designs were, foremost, helpful. For this reason, usability took precedence.”
While video is a powerful tool that can help fill in narrative gaps for some people with cognitive disabilities, it can cause adverse effects for others. The key is to consider motion from as many perspectives as possible.
While video is a powerful tool that can help fill in narrative gaps for some people with cognitive disabilities, it can cause adverse effects for others.
Our Senior Motion Designer, Ronald Rabideau, who created the animations for the landing page, says, “Some people with accessibility needs want a dynamic and engaging experience, so getting rid of all motion is not the right answer. The onus to find a balance is on the designer.”
Ultimately, we decided to leverage small, minimalistic, linear animations on the web page.
Here are some learnings that informed our motion design decisions:
- Parallax can cause nausea and disorientation, and that’s why our motion designer used minimalistic parallax for this page.
- Smaller animations are less likely to cause adverse reactions, so we decided to keep animations small (relative to the screen) and had them play on a slow loop.
Another critical video learning was the value of open captions . For the ‘Born for Business’ trailer, we used open captions optimized according to WCAG 2.0. While most people are familiar with closed captions, open captions are different from traditional ones because they are embedded into the video and cannot be turned off.
We chose open captions because they allow users with a broader range of abilities to watch videos. Sometimes speakers may have accents or speak quickly, so captions enhance comprehension and help users follow along. Given our audience for the show, we wanted to ensure that the default was to have captions embedded into the video. In general, open captions are best to use when you can’t control a closed caption feature.
Building content for everyone
We focused on writing content for people with a broad range of backgrounds and abilities. That meant writing strategically and clearly. Accessible writing leans on essential UX principles: keep it simple, easy-to-navigate, and helpful. We avoided using metaphors, idioms, and ableist language when writing the ‘Born for Business’ copy.
Accessible writing leans on essential UX principles: keep it simple, easy-to-navigate, and helpful.
Building products for everyone means creating inclusive content. Our design system Polaris’s new accessibility content guidelines define ableist language as ‘content that holds bias towards the non-disabled experience, or discriminates against the disabled community.’
This definition of ableist language covers a host of problematic phrases and terms. Still, we wanted to dig deeper, so when writing, we consulted with stakeholders from the disabled community internally with our Diversity and Belonging team and externally with the organization RespectAbility. Most importantly, we made sure that the profiles on the cast centered on their entrepreneurial stories and their businesses, not their disabilities.
The bottom line
This project amplified our mission of making commerce more accessible for everyone. The team walked away with key learnings that will allow us to make future marketing campaigns more accessible to all users.
Here are our dos and don’ts to help guide your next project:
Do:
- Center people’s unique experiences
- Ask people how they like to identify themselves and their disabilities
- Tell three-dimensional stories
Don’t:
- Generalize the experiences of people with disabilities
- Assume people want their disabilities called out
- Avoid using terms like inspired or inspiring to describe people with disabilities. (This narrative around people with disabilities can be othering.)
From adding closed caption menus and described video to the show’s trailer, to creating high-contrast dark and light-mode web pages (a first for our team), this project illuminated how making content more accessible opens up new possibilities: accessibility standards are benchmarks, not limits.
