Responses by Stink Studios.
Background: As artificial intelligence becomes more commonly referenced, people are looking for answers as to what it means and the role it might play in their life. News headlines and pop culture references have made it difficult for most people to understand what AI is. Our target audience is skeptical of the benefits but remain curious to learn more.
Our task was to take the complex, technical field of artificial intelligence and make it easy to understand, enabling people from all walks of life to have engaging conversations about the technology changing the world around them.
Working closely with Google, with support from the Oxford Internet Institute, we determined what topics to cover, how we’d talk about them and how our audience would seamlessly move between topics.
Design core: The site has been designed to give people a view of how far reaching the field of AI is. We worked hard to make sure that the site moved away from the sterile, sci-fi inspired visual language people associate with technology and instead made it feel organic and relatable.
Favorite details: We’re really proud of the design aesthetic. We took a lot of inspiration from science school books of the ’60s and ’70s. These books strike a great balance, providing detailed information alongside hand-drawn illustrations. At the time, it was an emerging technique to be able to use color in mass-produced books, and you can tell by looking at them that the designers must have had a lot of fun experimenting with the visuals. We felt like there was a nice comparison to draw between the experimental period of color printing and where we are right now with artificial intelligence.
We ran with the theme of using bold primary colors, which also served as a more subtle nod to the Google brand and that of the Oxford Internet Institute. We loved that we applied a modern version of this direction to the website, and it still felt educational without feeling overly technical. The look and feel acts as a familiar visual reference for the portion of our audience that grew up with these books but also as a fresh way of presenting information to younger visitors, who are more used to high-resolution photos and videos.
Challenges: Working out how to showcase the information, combined with illustrations, in a uniquely visually appealing way was hard to balance. It’s very easy to steer towards a tone that feels patronizing or a visual identity that can feel too childlike. Working closely with Google and the Oxford Internet Institute, we made sure to keep this balance in check. We also made sure we were testing our assumptions with real people. It’s all too easy to develop tunnel vision and assume that because you’ve been talking about machine learning for months that our audience understood our explanations—this wasn’t always the case!
New lessons: We learned how quickly we could test different ideas with our audience. Using Maze, we were able to set up user tests remotely at the end of a working day; then, we could come back the following morning to find out how they performed. We were able to use this workflow to validate a number of key decisions from assuring that our audience could comprehend what the topics were about to ensuring the navigational structure was understood and easy to use.
Navigation structure: Since our project was the “A-Z of AI,” we knew that we’d have to work with the pros and cons of the framework. The great thing was that it set a crystal clear expectation of what the site was about. As soon as you see the name, you know you’ll be presented with 26 letters, covering a range of topics in a linear fashion.
Crucially, we knew that we'd also need to provide alternative ways of viewing the content. For example, some users would want to read each topic sequentially over longer sessions while others would want to pick out something of particular interest to them. We grouped and tested the 26 topics with our audience to finalize four easy to understand themes that provide an insight into what the content will cover:
- “AI Fundamentals” gives our audience quick access to the need to know basics.
- “Making AI” helps to understand how it works.
- “Society and AI” demonstrates the impact in the real world.
- “Using AI” showcases how AI is useful.
This helped to focus our audiences attention. Instead of intimidating them with the task of going through the entire alphabet, we gave them control over what they wanted to learn about.