Help Us Defend

Project Overview

Introduction of the island

DEFEND, a non-profit organization registered under the Canada Not-For-Profit Act is run entirely by volunteers who aim to protect children and other vulnerable individuals from online predators and other dangers on social media worldwide. The organization is currently focusing on three key areas: Advocacy, Technology, and Education.

My role

I joined the social media team, 65 square, as a UI/UX designer for 3 months. I collaborated closely with the vice chair, product manager, design team, and engineering team during the entire time.

Facing the problem

What are the methods for effectively onboarding first-time users to our app and helping them successfully engage with our products?

Wireframes

Create an account and verify the email

This phase allows the application to collect important user data such as name, email, and other demographic information. These data can then be used to personalize the user experience and provide targeted marketing messages in future development.

Subscriptions and payment

The reason for including the subscription at this phase is that it can help to retain users by providing ongoing value in the form of products, services, or content. This creates a loyal customer base that is more likely to continue using the product over time.
Implementing the payment here helps streamline the checkout process by saving the user's billing and shipping information. This reduces the amount of time and effort required by the user to complete a purchase in the future.

Facial and voice recognition

Facial and voice recognition enhance the security of users’ accounts, as they provide a more secure and reliable authentication method than passwords, which can be hacked or stolen.
They also improve the overall user experience of this social media, by providing a more seamless and user-friendly login process. For children, who need more attention and protection on the internet, face or voice is an easier way for them to log in, compared with complicated passwords. This aligns with our team's dedication to achieving our goal, which is to protect more children who are exposed to the risks of the internet.
Face and voice recognition also has accuracy, which largely reduces the chances of mistaken identity or unauthorized access to social media accounts. This is an essential and indispensable part of social media.

High-fidelity designs

Create an account and verify the email

This stage focuses on the input of user information. To avoid overwhelming the user with too much information, I have opted for a minimalist design with more empty space to create a clean and easily readable page for inputting information.
Upon completion of this stage, the user will be presented with a congratulatory message, which helps to make the tedious process more pleasant.

Subscriptions and payment

This phase includes the subscription to different plans and a payment example. The way listing the prices and unique features of each plan enables users to easily and clearly browse and compare the differences between plans.
Additionally, the congrats page features artwork that enhances the users' joyful experience.

Facial recognition

On the first page, with the remainder of the following steps, users would not be surprised by the unexpected process. Also, the color tells users the order of the processes.
The bold and middle-centered words below the user’s face are easier to read while they’re mainly focusing on their faces.

Voice recognition

In this section, training words before voice recognition begins is essential.
The volume bar responds to people’s voices and users would get better ideas about whether the process is working or not.
The highlighted number simplifies users’ process by directly guiding them to read the numbers one by one.

Final interaction

Logo design

Branding discovery

Mission statement: Lobby for measures to prevent accessing children and other vulnerable people through the use of social media.
‍
Vision Statement: A safe, online solution for children and vulnerable people.

9 key words describing our company after team discussion

Secure
Protective
Trustworthy
Reliable
Empowering
Inclusive
Supportive
Compassionate
Innovative

Research & inspirition

Sketches

I discovered that the word "defend" is already very powerful and representative of our brand, so I concentrated on the lettering itself to convey the core of Defend's mission.

Final present

Icon design

These icons and animations boost the user's efficiency and enjoyment during product usage, now incorporated into the overall product flow and the application's UI library.

Each icon is crafted following the mock-up designs developed by team members.

After completing specific icons, especially those with animations, I consult with the design leader to confirm visual accuracy and collaborate with the engineering team to guarantee proper implementation.

Design process higlights

This pair-up icon is inspired by the gesture of two people holding hands with each other.
To keep the icon simple, I emphasized the point where the two hands cross, making it the focal point of the icon and allowing the pairing function in this dating application to be easily understood.

This icon is designed for helping users find a compatible match. It works similarly to pairing up, but with the added mystery of not knowing who the match is initially. Users can discover their match by reading through their profile descriptions line by line, as explained in the next example.
To evoke a sense of excitement and mystery surrounding the search for a compatible match, I incorporated a question mark and a puzzle piece into the design, as a call-to-action for users to explore the next part.

When used in the application, this icon will be split into 9 puzzle pieces. As users explore their mystery match through a Q&A format, they gradually uncover the match's profile picture beneath the puzzle pieces.
This process is similar to working on a jigsaw puzzle game - it requires patience but also adds to the excitement of the experience.

These three icons are used on the live stream page, and each one is designed for a different function: starting a live stream, joining a random stream, and finding a live stream.
To maintain a consistent theme of live streaming, I utilized a similar design structure with minor differences for each icon.

At first, I designed the exit icon as a house to represent the idea that this application is a safe haven for vulnerable individuals. However, I later realized that this might cause confusion when it is placed next to the homepage button. Therefore, I decided to change the design to a door, which also conveys a sense of safety and protection.