Q42

On their projects and work (life).

Week eleven | May 22nd, 2024 | sell Design sell CSS sell Technology sell Life

Q42 is a digital product studio in Amsterdam and The Hague. They have built products for some big names, such as the HEMA app, the website for the Rijksmuseum, Philips Hue, the Wie is de Mol app and the PostNL app, to just name a few. But they're not merely builders. I'd categorize them more as digital product engineers or imagineers like the ones that Disney employs in their parks. Our visit to their Amsterdam office turned our regular wednesday afternoon into one of many ooh's and aah's as we were presented with some of their amazing works.

*Sidenote: I didn't take many notes as I was very captivated by the talks, so this blog is a nerd's recollection. You've been warned.

Mathmetical graphs for blind students

The first project we were shown was an app that described mathmetical graphs to blind students. It wasn't something I had considered before, but a lot of math are visual elements that we soak up in seconds when we steal a glance. Now think about how you would explain such a graph to someone who can't see it. How long would it take you? How often would you stumble over your words, and how long would it take the person you're explaining it to to understand what you're trying to portray?

For this same reason, Q42 ventured to find a different solution and tackle this problem as efficiently as possible. The result? Not words - sounds. They started by playing some graphs to us without a visual, and then draw with our fingers what we thought its shape looked like. Then, they explained that there are subtle changes in the sound like a change in pitch as the line rises or falls on the Y-axis, a subtle background noise when the line is underneath 0 on the X-axis, and elements like the tempo changing to portray the steepness.

In addition to this system, Q42 built an app that works seamlessly with screenreaders (a given, of course). They explained that they took inspiration from Apple's system settings, with a clear heading level, a search system and easy controls. They've integrated almost all of the Dutch mathmetics textbooks, so that students can easily find their exact book and each and every graph in it. I was very impressed and inspired by this venture, as it transcends the 'usual' of building an interface and calling it a day. This app is a perfect example of Exclusive Design done right.

A private map collection, made public

Another of Q42's projects was one that was commissioned by a woman overseas. Her family had been collecting maps and art pieces for a long time, and she wished to have a website to display them to the world in a creative and interesting manner. To do so, a 3D-site was built, showcasing regular navigation items as planets floating in their own expansive universe - and each art piece placed in such a 3D environment.

What I loved about this project is its attention to detail. While the focus is unmistakingly on the visuals and beautiful, immersive effects, the site has been built with the end-user and their intentions in mind, which means that motion can be switched off, the 3D-effects can be replaced by clear, flat layouts, details can be shown when on a 'researcher'-tab and more. As if this wasn't impressive enough, the entire site was made with just HTML and CSS. Jaw? Dropped.

A resource website for digital accessibility

Q42 is known for its dedication to accessibility in its projects (at least, they are in my world). That's why it didn't exactly surprise me to learn that they co-initiated Appt, a guide for making apps accessible. They explained that Appt was basically built as a CMS, allowing administrators to easily add new blogs and guides.

But what would a guide on accessibility be if it wasn't accessible?

Apart from being completely screenreader-friendly, Appt is the perfect showcase of designing for accessibility visually. From the second you land on the homepage, you're met with the sight of

• Large text
• Clear buttons
• A comprehensible use of language
• Visual cues to shortcuts and interactions;

For example, their buttons are large and pink and get a drop-shadow when they're being hovered over, clarifying the possibility of interaction. Additionally, the search bar at the top-right of the page has recognizable keyboard keys displayed alongside its Search placeholder, immediately clarifying the user's ability to use a shortcut to search. When you consider the design, it could be obvious that all its content is meant to be easily comprehensible, but these little extras add to the user experience of any user that ends up on the website.

My impression

It makes perfect sense that once you graduate, you'll end up in a world that provides you with a larger number of interesting projects, but Q42 transcends all of the ideas I had of this phenomenon. As a developer, there's way more to think about and do than simply accept a design and make it into a real thing. Your users are important, as are all of the little cues and easter eggs you put in their interactions and experiences. Your client may have the wildest ideas, but you know the behind-the-scenes, and that's incredibly valuable.