We and AI
Increasing public awareness of the benefits and impacts of AI
Introduction
As a UX designer, I worked with two UX colleagues, Carlos and Yamil, on an exciting 3-week group project to meet our client’s brief.
The client, We and AI, is a new not-for-profit organisation set up and run by volunteers with the primary mission of increasing public awareness and understanding of artificial intelligence (AI) in the UK.
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
To satisfy the brief, we decided to follow the popular and successful Double Diamond approach, breaking the project into the four distinct phases; in the first week, we focused on Discover and Define, culminating in a ‘Design Studio’ on Friday, and then Develop and Deliver during the second week, culminating in our final presentation on Wednesday of the third week.
Tools Used: Pen & Paper, Figma, Trello, Miro, QuickTime, CloudConvert
DISCOVER: Understanding the user, competitive market and problem space
Kicking off the research process
Having read and reread the brief and background material, we had several questions for our client, which they answered at the project kick-off meeting. With my team’s agreement and to provide them with consistent contact, I led on communicating with the client.
What do the competitors offer?
After quickly understanding the uniqueness of the client's proposition in the UK, we struggled to find direct competitors. Still, there are plenty of organisations promoting their work and the benefits of AI. The key exception was including GOV.UK; the limited AI information they provide is impartial and identifies both the benefits and importantly, ethical considerations when developing AI.
Mindful of the brief, we considered:
- 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.
What was clear was that they all presented clear sites with powerful searches, with filters and sorts to help the user find resources. The sites were clean, using lots of space and had clear information hierarchy through their use of text sizes.
Except for the social media, We and AI had identified a potential gap in the market, which we wanted to research further by considering indirect competitors. The key factor for these was that they all allow users to share content on Social Media easily.
In hindsight, I would now have replaced Twitter, which is a social platform, with a site, such as newspaper, which both presents information in digestible formats, but also supports social sharing.
Do people care about AI issues?
While We and AI are passionate about their subject, it was time to find out whether other people would share their concerns and support their cause. To reach as many people as possible, we created a screener survey in Google Forms that we shared via our social media and friend networks. In just a few days, we had 90 responses covering a wide age range, a balance of genders, as well as ethnicities.
With that insight and wishing to know more, we created a script that we used to interview 15 people by phone who had either taken part in the survey or provided as volunteer contacts from We and AI.
I loved this experience so much that I ended up doing over half of the interviews. While I felt slightly anxious before each call, I was fuelled by the respondent’s generosity in answering and their enthusiasm and inquisitiveness on the subject. Having captured their replies during the call, we collated all the responses in a single spreadsheet. To gather the collected insights, we identified the key themes for each question, which allowed us to create several personas, but due to the time available for the project, we focused on one…
DEFINE: Identifying a persona, their problem and possible solutions
Hello Paul, tell me a bit about yourself!
We quickly realised that the majority of our respondents were white, used social media for sharing information with family and friends, and indicated a desire to make a difference when they saw or experienced injustice. With this in mind, we created Paul. He is a strong believer in social justice and doing what he feels is right, but only when he has access to clear and balanced information.
We now considered why Paul would want to know more about racial bias in AI. As a white man, research had suggested that he is in the group least likely to be affected by bias in AI, but from a number of the non-white respondents, we know they’d been affected by AI biases. So, Paul was concerned and wanted to raise awareness of the issue he and a black colleague had when using the automatic passport gates at immigration on returning to the UK. He had no problems, but they got rejected and had to be manually checked. As this had happened before, he wanted to research if this was a wider issue, which we captured in an experience map, identifying his pain-points.
To provide a bit more on Paul and his motivations, we created his empathy map to help us get into his mindset we considered the problem.
Paul has a problem…
With insight from the research distilled into Paul, we identified a problem statement:
Paul needs a way to easily find enough, clear and unbiased resources on AI
because he wants to make a difference by raising awareness of these issues though sharing information through social media, as existing sites don’t provide this.
Then to further visualise this, we captured the following outcome with a storyboard.
This, in turn, led to the creation of Paul’s user flow. We now had the base foundations to start the creative process of considering how we could solve the problem.
So, how could the flow work on the existing site?
The existing site was created to help launch We and AI, and while it serves its purpose, we considered how the new ‘toolkit’ and ‘resources’ features could be added and where it should sit in the new site.
So, we proposed the following restructure:
- 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.
So, How Might We solve this problem?
To ensure the client was engaged and to validate our work, we ran a 2-hour design studio session over Zoom with them. This provided the opportunity to update them on our initial findings at the end of the first week, and to get them to start helping us to identify possible solutions using the ‘How Might We’ technique.
The facilitated design studio started with a fun warm-up exercise where everyone shared their work on the Miro platform — who knew we could all draw random animals?! This got us into the creative frame of mind for tackling two questions:
- How Might We present resources in a tool?
- How Might We make We and AI’s online presence more engaging?
I quickly discovered the importance of giving unambiguous instructions (a lesson for next time) as in both rounds we had a mixture of images and Post It note lists! Fortunately, the situation was recovered as we got each person to explain their thoughts and common themes and ideas began to be distilled. This was further helped when each person was given some virtual sticky dots to put on their favourite ideas. The key concepts were:
What should we focus on? Let’s prioritise!
With these concepts and with the brief firmly in mind, and mindful of focusing on essential features and keeping the costs to develop low, we identified the core features to include in the design phase.
DEVELOP: Ideating from potential solutions
The first ideas: Sketching with pen and paper
Building on the design studio ideas, as a project team, we run a mini-design studio, focusing on 2 questions:
- How Might We create a resource hub?
- How Might We create ‘Get Involved’ pages?
With further voting and constantly checking back to the brief, we iterated these ideas to create the first low-fidelity wireframes:
The first step to the digital prototype: Low Fidelity Wireframes
Using the collaborative features of the digital tool, Figma, we created the key screens needed to satisfy Paul’s user flow, keeping the detail low enough that it was easy to change, but sufficient to allow several iterations of usability testing. I took the lead on this testing and then worked with my colleagues to identify common issues and incorporate changes in our next iteration.
The usability test was conducted using several tasks and seeing how the tester performed these and asking them to describe their thoughts and actions as they went. This provided a great wealth of constructive insight and feedback.
This allowed us to identify and remedy issues such as:
- 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
Now, while staying in black and white, content and details were added, along with ensuring that spacing was consistent. Through several iterations, each with usability testing from both course colleagues and external sources, we identified several issues.
Keeping things simple was a major theme at this stage:
- “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?”
From the Design Studio and this feedback, we ideated ways for handling the long article. We created three tiers of information, allowing users to decide how much they wanted to know:
- The headline.
- A topic summary.
- The full-article.
As the concept of a toolkit, as a collection of related resources, was so important to the client, we iterated the idea, resulting in the pages being renamed ‘Resources & Toolkits’ and separate headings before the Toolkit list and the Resouce list.
Moving ever closer to the prototype: The High-Fidelity Wireframes
Now using the client’s provided colour palette and typefaces, we iterated the wireframes to high-fidelity. This allowed a further round of usability testing and iterations to create the basis for the final prototype.
The changes at this level were minimal as most of the issues had been resolved in the lower fidelity iterations, but even so, a few more issues were resolved:
- “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.”
So near to the final prototype, and thinking all was well, we wanted to check the site’s accessibility.
We have a problem. It’s not very accessible…
Mindful of We and AI wanting to reach as much of the population as possible, we carried out basic accessibility testing. While the existing site has dark text which passes the Web Content Accessibility Guidelines, the orange coloured text on the red background, along with the blue button, both failed.
With these issues in mind, we urgently reviewed our prototype and discovered some problems. Fortunately, with a couple of days before the final presentation, we were able to take action!
While there is still room for further improvement, switching from white to dark text on the orange buttons, and making the text bigger on the red buttons, we significantly improved the accessibility.
Drawing all the work together we were able to move into the next phase…
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?
The prototype is available in Figma: https://bit.ly/3o0E6w5
Responsive Design: Looking good across different devices
Having focused on delivering a mobile-first prototype, we knew users would want to access the site across different devices and screen sizes. So we produced three high-fidelity viewports to show how items, such as the menu, would be presented when there was more space.
Next Steps
With more time, I would want to:
- 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?
I have loved working with my team and the client; the project has allowed me the opportunity to develop my UX research and design skills further, as well as refining my ability to coordinate the various elements critical for the successful delivery of this project.
I’ve learnt a lot about artificial intelligence! We and AI have helped raise my personal awareness of the benefits and challenges we face with systems increasingly using forms of AI.
Thank you for reading!
I’d love to know what you think and welcome your feedback; all feedback will help me develop and hone my UX skills.
If you want to know how I can help you, please drop me a line!
