BBO — Accessibility Case Study.

Jack Thomas
4 min readNov 10, 2020

--

Since 2009, BBO have been helping their clients with what they do best in SEO management, so I thought I would have a go at helping them out with what I do best… User Centered Design.

I will use data I gather from the my initial reports to make design changes, this study will not incorporate massive UI changes.

Before simply looking at the website to see what could be wrong I need to learn about BBO and find out the kind of people who could be using their website and for this we have to create a persona.

Just by looking at the clients BBO have worked with you can tell they’re a fun loving group who like to work with young and exciting people so I’ll use that as a stepping point for this Accessibility study.

t

Because Clair is partially blind I will look at the visibility of certain elements and design a test in which both Speed and Usability are the focus points.

Speed Summary

The report shows a slight speed issue, despite the long load time of the initial test the subsequent tests were consistent, there are a few issues we could look at such as minifying the javascript and optimising the images/videos.

Average load time was 16.5 over 3 tests.

“The average load time for mobile sites is 19 seconds over 3G connections. Models predict that publishers whose mobile sites load in 5 seconds earn up to 2x more mobile ad revenue than those whose sites load in 19 seconds.”

“People would not return to websites that took longer than four seconds to load and formed a “negative perception” of a company with a badly put-together site or would tell their family and friends about their experiences.”

SOURCE: https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/

Usability Summary

The report again shows a few issues that can impede your users such as fonts being too small. there should be a minimum font level of 12 pts according to standard usability guidelines.

Minimum font level: 11

SOURCE: https://www.powermapper.com/products/sortsite/rules/usegov11.8/

CSS Value Errors

Question: why do they matter?

CSS Value error could disrupt form validation.

they do not necessarily show up in the IDE

Testing Tools:

Re-design

Now I have a good idea of the issues, let’s do some wireframing.

I start with the low-fi as I don’t want to change it so much that it doesn't look like BBOs landing page anymore, we want good affordance when users return.

As you can see, I’ve kept the basic structure and all I’ve done here is introduced some whitespace into the design, remember we’re looking at increasing usability and accessibility for Clair.

I also don’t have access to BBO’s logos or font family or their VD reel so I have improvised for the Hi-Fi.

The results are quite clear:

side by side comparison

So by changing relatively little I’ve made the home page more accessible to a wiser user base, as designers its our job to take into consideration that not all our customers are in full health but overall I think the BBO website does a great job information wise and usability wise.

But luckily for me UX iterations never stop and we can always improve.

Next steps:

After this fairly simple report I can already see multiple different solutions for different pages, so with that in mind.

  1. I would test my hypothesis on actual users, preferably 10-15 users
  2. I would rework the hypothesis according to those results
  3. I would create a final recommendation for the entire site and retest.

--

--