Bringing public awareness of Racial Bias in Artificial Intelligence (AI)
Implementing new features for We and AI’s Website
Project Overview
For our last project at General Assembly UX Design Immersive, we worked in groups of 3 with clients. Our group was assigned the client We and AI, an organisation dedicated to increase public awareness and understanding of AI issues in the UK, with an ambassador system made of volunteers.
Because they are a new organisation, with no funding at the moment, they want to engage with the public with the topic of Racial Bias in AI, as is becoming increasingly important.
My role in this team
- Lead team and assign tasks.
- Create scripts for Survey and User Interviews.
- Manage and present Competitive and User Research.
- Design and iterate Wireframes and Prototype.
- Create summaries and the presentation of our work.
The software we used
- Figma, for UX and UI design.
- Trello, for tasks/time management.
- Miro and Zoom, to collectively interact with client and team.
- Google Forms and Sheets, to research and manage information.
- Keynote, to present our work.
Understanding what they need
After receiving the brief, we identify that they needed a clickable prototype, responsive design mobile-first approach, where we had to implement the following new features:
- The architecture and flow of a sharable Toolkit focused on racial bias.
- A Resource Hub.
- To streamline the onboarding process for all users.
The design process
To start this project, my team and I applied the Double Diamond structure, which is a framework that segments the design process into 4 stages: discover, define, develop and deliver.
Checking the landscape: what’s working for people and what isn’t
We and AI doesn’t have any real competitors
To begin the design process, we started with Competitive Research to understand what they were doing right that we could implement, and soon identified that We and AI really doesn’t have direct competitors. Still, there are similar organisations that:
- Offer minimum information rewarding Racial Bias in AI.
- Lack of actual toolkits of information.
- Have a limited onboarding (not enough explanation) for new users.
- And an easy to navigate website.
We realized the importance of these features, as they were rarely, or not at all implemented in their websites. If we could successfully design them, we could better inform the UK’s population.
People know what racial bias means, but don’t know where to get the information
We wrote down and distributed a Survey across different demographics as we wanted to have a general understanding of people’s knowledge on the topic. We got 91 responses, where we contacted 15 users to interview, to gather qualitative data to understand the public further, and we found:
- They don’t know where to get resources and how to help.
- For them to volunteer, they need to have clear knowledge.
- People want enough information to share.
- They preferred to share information is through social media.
- People with black features and strong accents tend to get racially profiled.
We concluded that if We and AI wanted to raise the profile of the issues, they needed to have plenty of shareable (thought social media) information.
Defining the user’s problem
Meet Paul, he represents some of our users
Considering our user research, we were able to distil three different Personas. We selected Paul within the prevalence of interviewees and felt more comfortable working with him for his racial awareness and because he was determined to speak up for his racially profiled colleagues.
Paul’s journey
In this experience map, we represented his emotional state when he tries to find information online to bring public awareness. And when he’s not able to find enough information to do so as there aren’t websites dedicated to this.
By this technique, we identified Paul’s problem, and we framed as a Problem Statement, a concise description of an issue to be addressed later on.
Paul’s problem statement
Paul needs a way to easily find enough, clear and unbiased resources on racial bias in AI because he wants to make a difference by raising awareness of these issues through sharing this information on his social media, as existing sites don’t provide this.
Brainstorming possible solutions with our client
After we identified the problem, we addressed it with a technique called How Might We (HMW), where we turn the challenge of the problem statement into design possibilities. From the 10 HMW that we created, we focused on:
- How might we make We and AI online presence more engaging?
- How might we present resources within a Toolkit?
We decided to go forward with these two because they represented the most important points for us to consider: how people can actually know even We and AI exists, and how would they get and go about the resources.
Later on, we got together with our client and ran a Design Studio session, which is a technique where each one of us tried to come up with possible solutions for our HMWs. We illustrated and wrote down our ideas to compared and explain them, to vote the best features to implement in the website.
Something that we kept in mind during this session was that We and AI are trying to reach the UK population as a whole, so we had to consider them in our decisions (for example, in terms of accessibility.) The key developed concepts were:
- The structure of the Toolkit Page: title, image, summary, how to use it, resources, etc.
- Information breakdown and presented in different ways: level of knowledge, needs and interests of users, etc.
- Use of interactive posts on social media, sharing news and content generated by users and experts, to engage.
The features that we agreed were important, were prioritised in a quadrant format, based on if they were essential or just ideal to have, and the level of effort they would impose for us to design (high vs low.)
Paul’s flow through the new We and AI website
Having integrated some of the ideas of Paul’s journey and how we could solve his problem, we mapped out the screens he would see on the website to complete his goal so that we could have a better understanding of the needed screens. And later on, we restructured the architecture of the website itself to match with what the users would expect and want:
Designing the solution
Ideation on paper, sketching our design studio concepts
On paper, we started to put our initial ideas as to how we represented all the ideas and featured created in the design studio. Our group pointed out what we liked about each other’s design and agreed upon common liking. Then, we transfer these ideas into a digital format.
We created digital wireframes, which is a visual guide that represents the skeletal framework of, in this case, We and AI’s website. After creating the first ones, low-fidelity, we soon started to test them with users to see which areas and features we had to improve.
I specifically choose to design them to fit in a 320px wide phone, as by standards, is the smallest screen size for a smartphone, as We and AI is trying to reach to the UK as a whole, we knew if we could make the website work on such small phone, the less amount of people would be affected by not being able to see it properly.
Usability Testings on digital Wireframes
To test our screens, I took the lead to build clickable prototypes (with an increasing amount of detail, the fidelity) to conduct usability testings, as we wanted to know what’s was working and what wasn’t. Here are some of the findings:
After the first round of usability testings, we applied the user’s feedback. We moved to mid-fidelity, where we applied the same process and ended up with high-fidelity screens, that were tested as well. While going up fidelity, details, and information were added to resemble the possible/actual screens so that we could test more in-depth the features.
Making the website accessible for the UK’s population
Checking We and AI’s current website we identified some issues regarding accessibility, some of their text on specifics background colours didn’t meet the Web Content Accessibility Guidelines (WCAG), as well as some of their buttons in certain backgrounds. This means that people with visual impairment could struggle to use the website as they would not see properly some aspects of it.
I addressed those issues, by adapting the provided colour palette and colour combinations for text, buttons and backgrounds. As this website is meant to be seen and used by anyone interested, and nobody should be left out.
Delivering the new website
How We and AI’s Website would look like
Here I’m showing a few of the screens we designed so you all can get a glimpse of the experience:
The final prototype
Just before you give it a go on the prototype, let’s remind ourselves of Paul’s scenario: Paul just found out about the issue of racial bias in AI, and he wants to do something, find enough information online to share across social media to raise public awareness of the issue.
Finally, here’s the link:
Conclusion
Working on this project, in such a short amount of time, we manage to completely design and create all the deliverables provided by the team at We and AI, resulting in the implementation of new features targeted to increase the public awareness of racial bias in AI.
What’s next for this project?
- To conduct more usability testings to improve the overall user experience.
- Run further checks on accessibility and evolve the colour palette.
- And to further develop the website, specifically the paths that our other personas would follow.
The awesome feedback provided
- The feedback was overall really good, as they were impressed by the amount of work done and how we manage to present almost all of the concepts developed in the design studio, that is, they felt they had real input.
- In retrospect, we might have chosen another indirect competitor, for example, Twitter, as the We and AI team pointed out “Twitter is not a platform where you create content” (opposite as the rest of them.)
I hope you learned something because I certainly did! Not just on the topic of racial bias, but how to better work as a team with a client and how to present your ideas, to really understand the depth of the issues people go through and the importance of raising your voice so people can know about them. Thank you for going on this journey with me!
