An accessibility-focused design proposal for one of web’s oldest active blogs
Background
Scaruffi.com stands as one of the web's longest-running active blogs, serving as the digital repository for Piero Scaruffi – a renowned independent arts critic and lecturer on artificial intelligence at institutions like Stanford and Harvard. His site has earned a reputation for its uncompromising music criticism, with Scaruffi's notoriously stringent rating system awarding precious few albums scores above 9/10. His controversial takes, such as rating The Beatles' best work at merely 7.5/10, have made him a notable and polarizing figure in art criticism. The site’s design has remained unchanged since the 90’s which means a wide range of less than ideal design patterns from that era are still well represented, leaving many opportunities for increased usability and accessibility.
Music listeners, especially avid ones, have become increasingly overwhelmed by both the amount of new music being released and the ease of access to older music. In fact, more music was released on any given day in 2024 than in the whole of 1989 according to an NME study. For the serious music listener, wasting time listening to bad music is a primary pain point.
A significant portion of listeners rely upon critics in order to avoid wasting time on bad music and tapping right into the best releases quickly. The critic is effectively using their own time so others don’t need to. The website’s current design requires increased time spent due to poor readability and usability, detracting from Scaruffi.com’s value proposition.
Above is a screenshot of the upper fold of the homepage of Scaruffi.com. Aside from the typical accessibility issues I expected to find such as lack of alt-text and discernible links, what struck me most was how much difficulty this website could create for neurodivergent or cognitively disabled users- such as those with ADHD, Autism Spectrum Disorder, or Dyslexia. Designing for users with cognitive disabilities had become an area of significant interest for me and this website seemed like a great opportunity to for me to focus on that. I also liked the fact that fixing a lot of the visual accessibility issues I saw would have a clear impact on usability, given the feedback I got during user research which showed general dissatisfaction with the website’s design among abled users.
Given that I at this point had done very little UX work and had no portfolio, I recognized that It would likely not be fruitful to simply email him asking if I could redesign these pages for him
Instead what I did was just go ahead and redesign the pages, utilizing my knowledge of Scaruffi and his site. Where I would typically be asking the client questions, I utilized my understanding of Scaruffi’s preferences design-wise and otherwise, and went ahead and redesigned the pages on my own- planning to send Scaruffi what I came up with.
Readability
Cohesion
Responsiveness
Given that this website is effectively simply a collection of links leading to blog posts, it was clear that the first task I would need to tackle was making the site more readable. I’ll begin by showing you what was done incorrectly and later demonstrate how I either fixed these problems or preserved what was working...
Patterned background
Here is a great example of an artifact of the old internet which remains on Scaruffi.com to its detriment. Patterned backgrounds were popular in the late 90s and early 2000s, when web design was still in its infancy and developers were doing a lot of the designing. Since then, though, we have come to find that patterned backgrounds objectively decrease readability. Patterned backgrounds can reduce contrast between text and it’s background, create unwanted visual noise that distracts users, and they also increase cognitive load- forcing the user to work harder to filter out background distractions.
Text aligned right
As a rule it is generally bad practice to align text to the right, as right-aligned text goes against the natural left-to-right reading pattern of most western languages, making it more difficult for users to scan and comprehend content quickly. This means that it forces the user to read in an unnatural way- which leads to a slower and more frustrating reading experience.
Excessive underlining, use of blue for links
While underlining linked text can often be good practice, as it indicates which text is clickable, it also should be used judiciously. In this case, this website has many pages that are just collections of links- leading to a large amount of underlined text. Studies including one from University of Hamburg have shown that underlining has a detrimental impact on text readability as it interrupts the natural flow of text and makes it harder for users to comprehend the content. This can also add visual clutter to the overall design, creating a busy look that creates distraction.
Making the color of linked text blue is yet another artifact of the old internet found on Scaruffi.com. It used to be that nearly all hyperlinks on the internet were blue. Now, though we have other ways of indicating when text is linked. In this case, all of the blue text creates for a glaring visual experience.
In short, this website needs a new way of indicating when text is linked.
In his call to action, Scaruffi asked for someone to redesign the home, music, and bio pages, below is the “music page”.
As you can see, the music page, which is one of the most important pages on the site, almost doesn’t look as if belongs to the same website. Let’s see why that is...
Inconsistent layout
A number of the links inside this box summarizing the site are also presented on the home page and they on the left side of the page. This collection of links should also be on the left side on the music page- not only for the sake of consistency in navigation but also for the sake of good information architecture. The links in this box should be presented first, before things like important dates in the history of the website and testimonials because it’s intended to summarize the most important sections of the website. The yellow section with links to album reviews by year and by “best of” is important but can be highlighted properly without being on the left side of the page
Inconsistent use of color
The color used in the background of the “music page” is not only different than the home page background, but I’m not sure I’ve seen this color used on any other page on the site in a prominent way. When designing websites, it is important that we keep things consistent as much as possible, as significant changes from page to page can increased cognitive load and make navigating the website more difficult.
Here is the “Beatles” bio page of the website. One of the more challenging aspects of navigating Scaruffi.com is the fact that it is not responsive. Using Scaruffi.com on a phone can be incredibly difficult as result. The type on most pages is significantly smaller than the 16pt body copy recommended by WCAG guidelines, requiring the user to constantly zoom in and out. Another issue presented by this small of type on mobile phones is the touch target size for the many links across the website is often a fraction of the 44x44px touch target size recommended by WCAG guidelines.
As previously mentioned, my goal here was to preserve the heritage of this website while increasing usability and accessibility. Based on the design of the site as it currently stood, I could gather Scaruffi’s preferences and enjoyments in design. I pulled the background color for my redesign from the heading that reads “piero scaruffi” on the home page, as I figured he must like that color, and it worked quite nicely for readability with white text. I also created a new logo for him that was not in italics and a bit more modern, while still being playful. It was very important for me to keep some playfulness from the original design as I assumed Scaruffi would prefer it this way. I also changed most type on the home page to Open Sans for better readability. Although not visible above, I used Atkinson Hyperlegible for all body copy for even better readability.
In order to solve the problem of many links leading to lots of blue and underlined type, I decided to use text weight, type, and color to indicate linked text. Anything in white Open Sans with semi-bold or bold font will be a link. In the case of the home page, any piece of text that is yellow/gold is clickable as well- as in the case of all the most recent blog posts on the home page. I have also aligned all of the recent blog posts to the left for better readability and moved the “My Books” section to the end of the recent blog posts so as to remove the previous awkward placement in a middle column. Additionally, I consolidated the navigation section to only include Scaruffi’s most discussed topics, with an addition dropdown menu for “more”- reducing the user’s cognitive load. Next I had to apply this to the other pages he wanted redesigned...
For the music page I really wanted to make it more easily scannable. I achieved this by moving the “Summary of this site” section from the right to the left side of the page. For the section with links to the alphabetical artist list and reviews by year, I added a dark background to place further emphasis on the white text in that section. Text that is not clickable is either not in bold Open Sans or is changed to light grey. I have also added breadcrumbs for navigation at the top so the user can easily know where they are and how to navigate backwards categorically. As it stood originally, the website did not even have an easy means of returning to the home page on almost all pages I visited.
Above is the third and final type of page Scaruffi wanted redesigned- the bio pages. I’ve again retained a lot of the central elements of the website’s layout while giving it a more pleasing and usable style. Ive created higher text contrast across the board and I added color to the album ratings so they are more visible while scanning. I changed the layout of the body section significantly so that the user can toggle between Italian and English rather than always having two always visible body columns side by side. I have used Atkinson Hyperlegible for all body copy in order to increase legibility and used black over a white background for contrast, simplicity, and a more classic look.
Finally, I had to address the fact that this website was not responsive or mobile-friendly, so i designed mobile versions of the three pages he wanted redesigned or “restyled”. Above is the mobile design for the bio page. My two points of focus while doing this were increasing font size for readability, and leaving room for decent sized touch targets so as to make navigation easier. Below are screenshots from other mobile versions of pages on the site...
It actually proved fairly easy to adapt the desktop website for a mobile version due to Scaruffi already making it pretty clear to a regular user of the site which information is the most important. I simply took cues from him and was easily able to determine the order of items and layout on a mobile device.
Once i had all my screens ready i put together a collection of mockups and screenshots and sent Piero Scaruffi PDFs as well as this message....
“My name is Sam Donnelly and I’m a U.S.-based UI Designer as well as a daily user of your website. It came to my attention recently that you are looking for someone to help restyle and redesign parts of Scaruffi.com, and I would be tremendously excited to be involved. Given that I’m fairly inexperienced I thought the best way to demonstrate my ability would be to just go ahead and do a hypothetical redesign to give you an idea of what I currently have in mind. Of course, any and everything can be changed and this prototype is simply meant to show my ability and interest. That being said I do firmly believe your users would welcome these changes if you were to decide to implement a design similar to this which emphasizes accessibility.
I’ve attached two PDFs with screenshots of both a web and a mobile design, in case you are open to building a mobile/responsive version of scaruffi.com. Based on the description in the volunteer page on your website I got the sense that you are looking for more of a fresh coat of paint than a major overhaul, so I tried to keep that in mind while working on this. I would be happy to walk you through any design decisions and answer any questions you might have. I can also send over a clickable prototype if you would like.
Thanks for your time,
Sam”
Much to my delight- Scaruffi seemed to like my designs. He started his email by stating “It all looks extremely good”. And then went on to say, “but let me tell you why nobody ever succeeded in restyling my website...”
He explained how his current workflow suits him very well and is quite fast and that he did not want to rely on any piece of software to maintain his site- which is perfectly understandable. It became clear that his idea of a designer when he made that call to action was more of how we viewed web designers years ago- they were front end developers too. He wanted someone who could not only redesign those pages but code them too. Sadly, that meant that I was not the right person for the job. Despite the fact that this redesign was not fruitful, it was a very fun project to work on and it gave me a new perspective on the challenges of preserving the legacy web while considering accessibility.
