UI.UX Design
A gate into the Ai solution
to online hate
Client
Bodyguard.ai
Industry
b2b
Timeline
Sept 2022- DEC 2022
Project
responsive Website
Software
Figma
My Role
Ui.UX Designer
Getting Started
a social cause
Before we start, to comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information is my own and does not necessarily reflect the views of the company.
The company was established in 2018 by a web developer and a business manager to protect all individuals online against hate speech on social media.
Bodyguard.ai has two main projects, a free mobile app for individuals (B2C) and a subscription-based web app for businesses (B2B). The main purpose of both projects remains the same, the only difference is the target audience. The project below was dedicated entirely to support the web app.
Context
a b2B focused website
Our current lifestyle is tightly intertwined with our online navigation, whether it's for work, for personal matters or simply for fun. That's why, it's essential for businesses that customers have positive interactions while scrolling through their online platforms.
The initial Bodyguard.ai website included a presentation of both projects, which was a bit confusing for businesses that were mainly interested in the web app. And with the growing demand for the B2B solution, it was crucial for the company to upgrade the website and switch their strategy to fit the customer's needs.
The Challenge
A CLEAR PATH TO ADOPT THE SOLUTION
The main purpose of upgrading the website is to help businesses understand not only the mission of the company, but also the need to implement a similar solution to their online platforms. We want to keep the user scrolling until they reach the decision;
That’s why, when we talked about redesigning the website, the challenge was mainly to repurpose the entire website into a step-by-step guide to discovering the problem and learning about the company's solution.
The app is not only intended to be a guide, it is a mentor that shapes the learning curve according to each student.
You can spot our two-high level goals below.
1.
Help the customer understand the brand
Give the user access to the right information by structuring the website to create a problem to solution path for the user to scroll through.
2.
Create urgency to encourage action
Explain how online hate is not only a temporary problem, it can affect many brand aspects and showcase how the Bodyguard.ai solution is essential.
The Competitors
Market research
We tend to underestimate the importance of giving the user an incentive to slide down when they visit a website for the first time.
However, creating an experience that motivates the user to scroll through the website can encourage them to engage with the content. By using standard gestures and structuring content in a clear way for the users to navigate through, we give them a sense of control and understanding.
And the best way to give the users this impression is by having a look at multiple SaaS solutions websites to understand the strategy they used to solicitate the client's curiosity and engagement with the brand.
We benchmarked big companies such as Adobe, Airbnb, and Stripe along side similar companies to Bodyguard.ai such as Hive Moderation and Spectrum Labs to capture how they layer out information and structure their website.
Insight #1
The user's main purpose when visiting the website is to discover what Bodyguard.ai is about.
We evaluated how other competitors listed content to guide the user's experience and created a path that an efficient user understanding :
Defining the problem
Highlighting the solution
Showcasing the benefits
Explaining how it works
Insight #2
The study also shed the light on important sections that were common among competitors :
Client Listing
Case Studies
Customer Reviews
Live Demo
This content is essential for brand notoriety : by showcasing current client metrics and feedback, users are more likely to engage with the brand.
The Brand
bodyguard.AI, Protect your communities from online hate
Bodyguard provides an expert text moderation solution to prevent hateful content online. It accompanies individuals and organisations to protect them from hateful content across a variety of platforms.
The brand's purpose is to promote a safer, more respectful digital environment where everyone is able to express yourself freely.
The Solution
restructuring
Based on the insights gathered in the competitor analysis and former research, three core opportunities emerged.
1.
Create a seamless scrolling experience
Improve user interaction by making sure that they can navigate through the website fluidly without interruptions or delays.
2.
Highlight the problem
3.
Prove the value of the solution
Mobile Preview
2.
Highlight the problem
Using different angles to emphasize the impact of the problem. As it is not only about online hate, but also has a direct impact on how people perceive a brand.
1.
Create a seamless scrolling exp.
3.
Prove the value of the solution
Stating the main problem
Defining the pain points
Providing context
3.
Prove the value of the solution
Highlighting the benefits of implementing the Bodyguard.ai solution into the user's online platforms.
1.
Create a seamless scrolling exp.
2.
Highlight the problem
Why ?
The benefits of using Bodyguard.ai are not only to prevent bad buzz or hateful content, it also has a long term impact on the brand's reputation and revenues.
How ?
Transparency is crucial when implementing a SaaS solution, the user needs to know how the software works to be able to trust the process.
What ?
The user also needs to have access to a platform to reviews what is happening, and this is where the web app and it's multiple features plays an essential role in selling the solution.
Lessons
What I learned
Learning how to structure a website was crucial in order to achieve this project. Redesigning the website was mainly about creating an appealing experience in order for the user to take action. The priority was to refine how we want to market the solution and create a structure that pitches the strategy in a sexy, tell-me more kind of way. The second main goal was to uplift the brand's visual identity to create a more corporate feel without dissociating completely from the original identity.
