We and AI

Increasing public awareness of the benefits and impacts of AI

Introduction

Pepper: The friendly face of artificial intelligence (Photo by Alex Knight on Unsplash)

The Brief

  • Create a Resource Hub where all the AI-themed resources they want to be able to share are made available.
  • Define architecture and user flow for a ‘Toolkit’ which is a collection of resources related to a specific theme.
  • Improve the onboarding for all users and, specifically, for their volunteer ambassadors.
  • Create the prototype mobile-first website.

Our Approach

DISCOVER: Understanding the user, competitive market and problem space

Kicking off the research process

What do the competitors offer?

  • Their use of ‘toolkits’, information on the potential bias in AI.
  • What options are available for volunteering on the subject.
  • How they were represented on Social Media.
Direct Competitors Feature Analysis
Indirect Competitors Feature Analysis

Do people care about AI issues?

DEFINE: Identifying a persona, their problem and possible solutions

Hello Paul, tell me a bit about yourself!

Paul’s Experience Map
Paul’s Empathy Map

Paul has a problem…

Paul’s Outcome Statement and Storyboard
Paul’s User Flow

So, how could the flow work on the existing site?

  • As the toolkit and resources are going to be the core offering, it should be upfront.
  • The ‘News’ menu item was seen as dynamic and a further draw, so it was promoted from being a blog at the end of the top-level menu.
  • The information from resources and the dynamic news, it followed that ‘Get Involved’ would be the next step for potential volunteers.
Proposed Application Map with the two new menu entries

So, How Might We solve this problem?

  • How Might We present resources in a tool?
  • How Might We make We and AI’s online presence more engaging?
The Design Studio ideas, sketching and dot votes
Design Studio: Key Insights and Concepts

What should we focus on? Let’s prioritise!

Feature Prioritisation Quadrant: The features considered for this phase are in bold

DEVELOP: Ideating from potential solutions

The first ideas: Sketching with pen and paper

  • How Might We create a resource hub?
  • How Might We create ‘Get Involved’ pages?
Initial team sketches following Design Studio for the ‘resource hub’ and ‘get involved’ pages

The first step to the digital prototype: Low Fidelity Wireframes

  • missing a search function
  • identify challenges with the user flow, such as too many steps
  • the breadcrumb trail wasn’t seen as useful

Increasing the detail: Moving to Mid-Fidelity Wireframes

  • “There are too many options on the sharing menu.”
  • “That's a lot of screens to scroll through to read that article.”
  • What’s a toolkit? It doesn't stand out. Is this important?”
  • The headline.
  • A topic summary.
  • The full-article.

Moving ever closer to the prototype: The High-Fidelity Wireframes

  • “It’s called Resources & Toolkits, but why are toolkits listed first?”
  • “How do I copy the link if I want to share this?”
  • “It’s confusing to have the ‘how to use this toolkit’ before the summary.”

We have a problem. It’s not very accessible…

Accessibility tests for the current site
Testing of the high-fidelity. Top: Original Design. Bottom: Updated design

DELIVER: Creating and presenting the solution

The Prototype

Flow 1: Paul wants to share an article from the Racial Bias toolkit

Flow 2: Paul wants to get involved and become an Advocate

Flow 3: Paul finished training & wants to update his knowledge level

Want to give the clickable version a go?

Responsive Design: Looking good across different devices

The new We and AI Toolkit page across three viewports

Next Steps

  • Improve Accessibility by working with a UI designer on updating the site design style guide.
  • Wider Usability Testing: Carry out further usability testing and design iterations for the prototype across a wider cross-section of the UK population.
  • Information Architecture: Consider the information architecture and metadata used to categorise the resource to ensure users can successfully find content.

What have I learnt?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store