amberley dot blog

The Ravelry Redesign: An A11y Case Study

July 04, 2020

What is Ravelry?

Since it launched in May 2007, Ravelry has been the dominant online community for knitters and crocheters. It has a dedicated user base — 9 million registered users, and 1 million monthly active users (MAUs) as of March 2020.

Ravelry is and has always been free to users. It has a pretty extensive feature set:

  • Notebook: Users can track of their projects, yarn stash, and maintain their personal pattern library.
  • Patterns + Yarns: An extensive database of patterns, yarns, and yarn shops, and the ability for designers to upload and sell patterns, or release them for free.
  • Community: Forums and groups for “Ravelers” to connect — like its own Reddit for knitting and crocheting.

Ravelry covers their operations and turns a profit mostly through a combination of advertising, merchandise sales, fees from pattern sales and Amazon commissions.

What happened?

A few important facts to contextualize:

  • Since launching in 2007, Ravelry’s design had not changed much, and was looking increasingly outdated.
  • Despite Ravelry’s enormous user base, the full-time staff was comprised of only five folks total until last January 2019, when they hired a Product Designer.
  • Again, despite the enormous user base, only two folks work on building and maintaining the site (one of them a Ravelry co-founder).

On June 15th, the Ravelry team teased a coming surprise. On June 16th, they launched a re-skin of Ravelry — a rebrand (new logo, color palette, font) and an overall updated UI, icons and illustrations.

The launch was quickly met with vocal criticism across a spectrum of concerns, ranging from actively harmful user experience issues to general annoyance and dislike — change is never universally enjoyed or embraced, but at a time of increased general disquiet (2020, you dumpster fire), a table flip in something trusted and known seems to be particularly uwelcome for some folks. (See: Why Everyone Always Hates Redesigns, Even When They’re Good).

What’s the problem?

The redesign (or “NuRav”) was not designed with accessibility as a core concern. It’s also important to note that the original (or “Classic Ravelry”) was also not designed or built with accessibility in mind. Only 25% to 35% of web accessibility issues can be automatically detected. If you run an automated or assisted accessibility audit tool on either Classic Rav, or NuRav, you’ll see a host of violations and warnings. According to the Ravelry team, “the goal of this phase was to retain our existing HTML while visually aligning the look of Ravelry with a new design system and new components”. That means that the underlying semantic structure of the site has neither improved nor worsened, while at the same time introducing additional problems. So, what caused the new concerns?

I have seen reports of around eight users experiencing seizures, as well as widespread feedback about the overall design update causing eye strain, migraines and headaches. It seems to be a combination of animation (especially on the homepage / login screen, which is now still), the overall effect of the application of the new brand palette, the thinner font, and usage of pure black text on a pure white background. (The classic design also had pure black text on a pure white background, but the updated palette seems to be exaggerating this effect enormously — users report that the site appears significantly brighter, and I would agree).

Clearly there’s a lot to unpack here.

Inclusion

A lot of the frustration in the community around the whole situation is compounded by the fact that Ravelry’s brand is expressly designed with inclusion at the center. The first sentence of the Ravelry Twitter bio reads:

Inclusive, friendly website for 🧶 people around the 🌏.

It was disappointing to see that the culmination of a year-plus long process of redesign, from a brand and team that so vocally champions inclusion, missed the mark in such a fashion. But I am empathetic to the limited resources of a small team. Slight tangent, but at the same time I’m sort of mystified by the numbers — With 9 million registered users and 1 million MAUs, why is the team so small? Ravelry has written previously about how they make money — “We’ve tried very hard to find ways of supporting the site that we can feel good about.” — including writing their own ad serving system and manually vetting every ad. They certainly don’t seem to prioritize monetization, but I wonder how that affects both their sustainability (1-2 devs single-handedly managing a site with that level of traffic? Burnout city.) and their ability to serve their users. (Edit to add: Here’s a great blog post on “Volunteerism and Community as a Business Model” as it relates to Ravelry and their small core team).

I do believe that the team has the best of intentions — which is partially what makes their response so baffling at this point. Level of resources aside, I would have expected a team that champions inclusion to react to feedback — especially feedback that their actions have done harm — quickly and empathetically.

Communication

The official outlets have been mostly quiet. As @1EyedConquerer noted, in the 15 days prior to the NuRav launch, @ravelry tweeted 11 times (excluding replies). In the (now) 19 days since, the account has tweeted twice.

At first, I believed that the lack of communication was due to being completely surprised and overwhelmed by the issues users were reporting with the redesign, and therefore it was just taking more time to get a response and game plan together. But users have reported that forum posts opened up for users to voice their concerns had replies turned off, moderators did not respond, and comments were heavily moderated, deleted and locked. (I don’t use the forums, so this part is not that visible to me.)

The reported handling of feedback in the forums, as well as their post-launch blog post — ”Ravelry’s New Look: a Check-in”, published on June 26th, ten days after they launched the redesign — indicate that it’s not just a matter of a small team being overwhelmed. At first skim of the blog post, it was good to see them acknowledge some of the issues the community had raised. On a deeper read, it did not paint a promising picture. These Twitter threads from @Velociraptoria_ and @wipinsanity do a good job breaking down why.

The redesign process

Ravelry did gather some pre-launch beta feedback from friends and family, the Ravelry mods, and then with larger pools of designers, business owners and other fiber industry folks, and some randomly selected Ravelers who had opted in to beta test. It’s clear that the in-house team didn’t have the experience to know what needed to be done to consider accessibility in the redesign, and their pre-launch feedback loop either didn’t catch it, or it wasn’t prioritized before the launch.

According to their post-launch check-in update on the blog, they’ve been tracking their Google Lighthouse Accessibility score since early May. I would say Lighthouse is one of the most basic starting points for testing web accessibility (it’s the first tool I recommend to folks when they know nothing about web accessibility), and it’s certainly an insufficient metric for a large, mature platform with a large user base.

Action

The homepage animation

When not logged in, the Ravelry homepage is a login screen. After the initial launch of the redesign, the full page background featured an animated illustration — by default. By June 25th, the animation was changed to be still by default, with a play/pause button added to optionally play it. On login, an animated transition still plays.

A classic mode toggle

The team added an option for users to toggle back to the classic design three days after the redesign launched, but users must log in through the NuRav sign-in page and homepage to access the toggle — and the new design is still the default. Users that are experiencing issues with the new design have no choice but to go through it in order to opt-in to the classic mode. Once a user toggles to classic mode, a cookie saves their preference, so that it persists (but the logout screen is always the new design). Unfortunately though, there have been lots of reports of NuRav styles leaking in to the classic mode.

“New look” survey

They also opened up a survey about the redesign, soliciting feedback — there are concerns with it. (See this thread from Twitter user @sdeutsh).

Misc small tweaks

Check out this blog post, which catalogues the changes that have been made since the launch.

What should have happened after the launch?

When you’ve done unintended harm, the best response is to acknowledge it, and do what’s in your power to fix it. As soon as users began voicing significant usability issues with the new design, Ravelry should have:

  1. Issued an unequivocal apology, and
  2. Reverted back to using the original design by default, with an opt-in for the new design while the team took steps to address problems.

What does fixing it look like now?

This is my advice to Ravelry, as a sofware engineer, web accessibility professional, disability rights advocate, knitter, and member of the Ravelry community, who wants to see it succeed:

1. Roll back to classic, by default, now.

I understand you put a lot of time, energy, and love into this re-skin. And I completely agree that the site design was in need of a refresh. But any time harm is done, intentional or not, you should take the most immediate action possible to rectify. Reverting immediately would have given you time to research and address the problems with the new design, while not causing harm to users. You still have the option to do that now. Make classic the default again, and make the new design opt-in while you do your homework.

This is number one, because it’s the most immediate, low-effort way to make an impact right now.

2. Bring in an accessibility professional.

This job is clearly too large of a task for the current bandwidth of the web team, and requires skills you don’t currently have on board. You must bring in someone with expertise and experience working with companies on building a strategy for web accessibility, and executing on that strategy.

I don’t know what your bandwidth looks like in terms of being able to hire on more headcount. If you cannot, perhaps you need to revisit your monetization strategy.

3. Engage with a professional group that can connect you with users with disabilities to do actual user testing and provide audit services.

This is just as important as bringing in a web accessibility professional, but it’s number three because judging by the response so far, you really need someone on the team who will know how to take and prioritize the feedback that emerges from this process, as part of an overall strategy, and execute on it.

Work with a company like Level Access or Knowbility whose entire organizational mission is to help companies build sustainable accessibility strategies and achieve compliance.


twitter github