COLAB4 - CHROME EXTENSION

Ebb

A Chrome extension that reduces moving site components, like GIFs and CSS animations, to make web browsing more inclusive and accessible for neurodivergent users.

Introduction

Do you believe that everyone deserves a comfortable and pain-free experience online? So do we. That’s why we created Ebb, a Chrome extension that helps make browsing more accessible by minimizing moving site components, such as images and animations.

Despite these components being a common trigger for neurodivergent users (causing eyestrain, migraines, distress, distractions, seizures, and more) there hadn’t been a product to address them… until now.

Inspired by the 2020 Ravelry.com incident (whose UI changes sent unsuspecting users to the emergency room,) Ebb empowers users, helping them feel safer and more confident when browsing by removing GIFs and CSS animations. 

~For more details, check out Fawkes’ spec, which was highlighted as one of Co.Lab’s most exemplary.~

Research and Validation

To validate the existence and extent of this accessibility issue, four potential users (who identified as neurodiverse) were interviewed. The main takeaway: all of them had experienced physical pain and/or emotional distress from inaccessible websites’ UX/UI. They noted experiences such as, “It feels like my eyeballs are being seared,” and “It’s super frustrating to not be able to read the information that I need for my health.” 

However, the scope of the problem space could easily be too wide, potentially encompassing everything from emotional triggers (such as PTSD-inducing pop-up ads) to physical responses (like photophobic reactions to bright web page transitions.) So, Fawkes decided to dig deeper with a survey, receiving 31 responses.

Survey analysis showed that the factor with both the largest span and depth of impact, across users with a range of conditions, was abruptly moving web components, with users needing a corresponding solution.

Forms response chart. Question title: (Choose one.) Which of these potential solutions would've most effectively mitigated your negative browsing experiences?. Number of responses: 28 responses.


From our research, Fawkes and Tram defined several types of users. From there, we narrowed it down, exploring two scenarios, each with a corresponding user story. However, we avoided jumping to potential solutions until the full team arrived. When Ebb’s two developers, Franco and Francis, joined several weeks later, they immediately provided valuable perspectives, which led to several important team decisions.

Can a group of four strangers -- several time zones and a continent apart -- virtually meet, align on a vision, and collaborate closely to ship in just five weeks? For Team Ebb, the answer was, “Yes!”

Execution

Our first pivot:

64% of survey respondents listed the iPhone as their most-used OS, especially when feeling unwell. Given that, we’d initially proposed building an iPhone app, but later decided against it due to Apple’s stringent and lengthy approval process. Instead, we pivoted to making a Chrome extension, which would be compatible with the most widely used desktop browsers. Although no one on the team had worked on an extension before, rather than feeling daunted, we embraced the challenge.

Our second pivot:

The next major decision was to pick which type of movements we would target. After exploring stopping videos or ads, we decided to target GIFs first; they’re common on webpages, didn’t have an existing solution, and we’d found a way to target them.

It was a little bit of a gamble, as none of the potential users had specifically mentioned GIFs in the interview or survey. However, as we quickly found out with our usability form and testing, it was the right call. Serendipitously, as we got closer to demo day, Franco and Francis realized they could leverage the same technology to target CSS animations, so we added that as well.

From there, our process to determine and build the MVP included competitive analysis, user journey mapping, functionality ideation, feasibility and value scoping, feature prioritization, and an iterative roadmap.

Design and UX

We created Ebb using inclusive design principles, which aim to create a feeling of trust, allowing the user to feel empowered and safe while using the product. 

We knew that instilling the feelings would be crucial to Ebb’s adoption rates, so, the product needed to have a calming and soothing environment -- its design had to be in a “dark mode” while having highly contrasting, but not bright, colors. We had many iterations of the design, including half a dozen mock-ups, continually tweaking it based on user feedback.

At the same time, we developed a plan to test the product concept and usability, and determine how we could iterate on and improve the overall experience. As with everything in Ebb’s creation, we tried to make the user testing experience accessible and inclusive, giving the testers a choice to try out Ebb remotely (via Maze) or “in person” (via Figma and a videochat.) Interestingly, 100% of respondents chose to try it remotely at their own pace.

Tram designed the two options, creating the usability test, then breaking down the tasks, questions, and our corresponding learning goals. In both versions, the 7 respondents were asked: 

  1. To compare their experience on a webpage containing animations, with and without the extension
  2. If the product was useful to them
  3. How likely they’d be to recommend it (Net Promoter Score, or “NPS”)

We chose usefulness and NPS as our key metrics, as Ebb’s success is contingent upon its ability to effectively serve and help its users. Trust is a key factor for those in the Disability community, with members often choosing products, experiences, or care providers based on recommendations from fellow community members. 

(To see our resulting metrics, check out the “Achievements” section below!)

Launch

As a team, we worked together in one-week iterative cycles, utilizing Scrum methodologies. During our sprint planning sessions, Franco and Francis provided sizing estimates for each user story and set of acceptance criteria, giving Fawkes the technical context needed to prioritize and manage each feature. 

Ebb works by injecting code into each webpage that the user visits, overriding it. So while we won’t give away all the fun details, we can certainly say that it raised a number of technical complexities that the devs communicated to the team and worked through together.

Due to our frequent touch-points, we didn’t need to greatly reduce our scope as we approached the launch date. However, as shipping a Chrome extension was brand new territory for everyone on the team, there were some tradeoffs, especially given the tight timelines of the Co.Lab experience.

The following features were included in the first version, which was launched in mid-June, 2021:

  • GIFs seemingly vanish without distorting the site layout
  • CSS animations stop and/or disappear
  • OS-specific keyboard shortcuts open Ebb
  • Keyboard navigation compatibility allows for cursor-free usage
  • Highlighted “focus” when user selects different elements of the extension 
  • Simple in-product directions on how to view GIFs and animations after switching Ebb off
  • Embedded a feedback form, making providing feedback accessible while helping monitor metrics
  • Persistence across sessions and site refreshes
  • On/off state is applied to all open browser tabs

Achievements

Our mission was to create a shareable product that would, “help make the web a safer, more accessible place, allowing more people to connect, consume important information, and relax online.” If our first round of metrics are any indication, then we well on the way to achieving that.

When asked, “On a scale of 1-5, how useful did you find Ebb?” users gave our product a rating of 4.8/5. And when we measured NPS, or Net Promoter Score, our users gave Ebb a phenomenal score of 71! (For comparison, a score of 41 is considered the average software benchmark.) Granted, our sample size was small, but we will at least take this as a sign that we’re targeting the right solution for the right problem. 

Our goal for Co.Lab was to have a useful product that was publicly available. So not only are users finding it useful, but Ebb is live on the Chrome web store! Get it now for Microsoft Edge or Google Chrome, and share your feedback with us.


Additionally, the Ebb team was proud and honored to be one of the two (out of 15) teams to be awarded the opportunity, by industry experts, to present on Co.Lab’s Product Showcase. Check out our live presentation here: - Co.Lab Product Showcase -.

What's Next?

While Co.Lab has officially ended, our product journey hasn’t. Given the positive reception of Ebb so far, the whole team has decided to stay together and keep working on Ebb! Our ultimate vision is to Ebb a one-stop solution for accessibility controls. One of our testers articulated this need perfectly:

“I really like how simple and easy it is to use! So many accessibility apps have waaaayyy too many options and information, but Ebb is done just PERFECTLY! I'm not sure if it's something that may be possible as a feature down the road, but having an option to mute all media sound  and/or dim the screen would be very handy as well. There are extensions that do those things, but to have all of that accessibility in an extension as simplified and user-friendly as yours? Game-changer!"

And that’s exactly what we’d like to be for our incredible, but often underserved, target audience: a game-changer.

Contact Us

When browsing, do you experience migraines, eyestrain, or frustration? If so, Ebb might be useful for you, too! Give it a try and let us know what you think by downloading Ebb from the Chrome store. We support open-source development, so you can also check out our GitHub repository

If you like our work or want to learn more about our journey with Ebb, please drop us a line!

Thanks for reading our story and we look forward to hearing from you.

Learnings

Product Manager Learnings:

Fawkes

  • Developed an E2E vision and followed it through the software development life cycle
  • Strengthened leadership skills by being the “CEO of the product”
  • Learned how to apply theory I’d previously learned to managing sprints, creating user stories and acceptance criteria, utilizing the Gherkin framework, and testing usability

Designer Learnings:

Tram

  • Performed user research and testing to figure out users’ pain points to build a user-centric solution
  • Designed following inclusive design principles and deeper knowledge of accessibility 
  • Prioritized, pivoted, and adjusted constantly to release an MVP within a short deadline

Developer Learnings:

Franco

  • Experienced working with a product manager and designer, and their tools
  • Gained more familiarity with the agile methodology
  • Learned how to build a browser extension
  • Increased understanding of the many ways that movement is generated on websites

Developers Learnings:

Francis Ihekwaba

&

  • Built a working product alongside another developer, and a multidisciplinary team in an agile work environment
  • Embraced the unknown, growth comes from stepping out of one’s comfort zone
  • Deepened web-based development competencies

Full Team Learning

As a dispersed team, we faced a number of logistical challenges, necessitating that we strengthened our communication skills. Through collaboration, determination, and a lot of late nights, we managed to achieve more together than we could have imagined. We grew a lot along the way, with each of us taking away valuable learnings.