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.
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:
- To compare their experience on a webpage containing animations, with and without the extension
- If the product was useful to them
- 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!
- PM: Fawkes S. | LinkedIn, Portfolio, Co.Lab Spotlight
- Designer: Tram Nguyen | LinkedIn, Portfolio
- Developer: Franco Ortega | LinkedIn, GitHub, Portfolio, Twitter
- Developer: Francis Ihekwaba | LinkedIn
- Mentor: Ankur Biswas | LinkedIn
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
Designer Learnings:
Jo Sturdivant
- Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
- Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
- Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.
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
Developer Learnings:
Vanady Beard
&
As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.
Developer Learnings:
Stephen Asiedu
&
As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.
Developer 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
Developer Learnings:
Maurquise Williams
&
- Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
- Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
- Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.
Developer Learnings:
Jeremiah Williams
&
All in all this experience was very awesome I learned that in coding with others being transparent is key
Developers Learnings:
Justin Farley
&
I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.
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.