Putting Data Privacy and Security into the Hands of Google Users
24 HOUR HACKATHON WINNER

Rookie is an education tool designed to engage in real-time interactions through Google Chrome to improve user privacy through data education.

It informs users in how their data is collected, stored, and monitors any security risks as well as educating users on security best practices.

mockup.png

PROJECT OVERVIEW
The Kick-Off

Project type:

Timeline:

Role:


Tools:

Academic 

24 hours

UX Researcher, UX/UI Designer, Development handoff, Accessibility Testing, Website Design

Figma, Pen and Paper

During my time at BrainStation, I participated in a 24-hour hackathon experience hosted by Google x BrainStation. Tasked with creating a digital solution to "create meaningful solutions to improve user privacy through data education."

I worked collaboratively with a team of UX designers, web developers, and data scientists to design Rookie. My main contributions were conducting UX research, wireframing, prototyping using Figma, and ensuring we aligned with the Google brand.


My Team

3
UX Designers

2
Web developers

2
Data scientists

Modifying My Design Proess

One of the biggest challenges I faced undergoing this 24-hour hackathon, was adapting the UX process to a much shorter timeframe. Below are the steps of a modified design thinking process that we used to develop our digital solution over 24 hours, with a focus on being agile and keeping users at the center of our process.

Group 1736.png

6:00 - 8:00 PM
EMPATHIZE

PROJECT BRIEF
The Challenge

With the increase of digital interactions, concerns for digital security and privacy are growing exponentially, so Google asked us: " How might we (HMW) create meaningful solutions to improve user privacy through data education?", placing an emphasis on keeping accessibility top of mind when designing our solution.

DESIGN CHALLENGE

How might we increase user privacy through data education?

FINDING A FOCUS
Narrowing Down the Problem Space

Users do not understand how their data is collected, stored, or used by online companies, and this leads to distrust and uncertainty from them. Opportunities exist to empower users through information, education, or digital tools.

In order to narrow our focus in the problem space, we kicked off our brainstorming session by drawing from our own experiences and pain points. There was an overwhelming commonality amongst our team when it comes to storing credit card information when online shopping.

DIVING DEEPER
Understanding the Problem Space

10% 

of consumers feel that they have control over their personal information.

58% 

of Americans are willing to allow third parties to collect at least some of their personal data, including biometrics and medical data.

70% 

of users are willing to share even more personal data with the organizations they interact with online, so long as they believe that the exchange will benefit them.

Screen Shot 2021-09-10 at 7.18 1.png
Screen Shot 2021-09-10 at 7.18 2.png
Screen Shot 2021-09-10 at 7.18 2.png

8:00 - 9:00 PM
DEFINE

PERSONA & EXPERIENCE MAPPING
Aligning the Design Team

Using insights derived from our secondary data and research findings, we then distilled these into our user persona, Mark, to help us identify our target user’s needs and align the design team in developing the best possible security solution for Google users.

1

Build empathy for the user by exploring their goals, frustrations, and behaviours.

2

Identify opportunities to intervene with my digital solution.

3

Create an optimal user experience that achieves the user’s goals.

I’d like you to meet Mark.

 

Mark is an account specialist from Spokane WA. He hears about online privacy & security but admits he isn’t fully informed on the issues. He wants to learn more about the importance of this so he can feel more confident in knowing what’s exactly happening with his information. Some of his barriers include the fact that there is a lack of resources to help him improve his privacy, and the topic of digital privacy in and of itself is quite daunting.

User persona (revised).png

To help identify where there are areas of opportunity in this problem space, we mapped out Mark’s experience of navigating through the internet and searching for a furniture retail store

 

We uncovered that accepting cookies on the site, creating an account at checkout, and inputting payment information had the most friction points in this experience - which are the key areas of opportunity we chose to solve.

Screen Shot 2021-09-10 at 7.26 1.png

9:00 - 12:00 PM
IDEATE

DESIGN PROCESS
Rookie

We began by brainstorming symbols of security and safety for user data and what our caricature could look like

 

        ...A sword

 

        ...A shield

 

        ...A fortress

 

        A ROOK!  

 

We felt that we could utilize the Rook chess piece as a starting point. Next, we throw in ideas of “playfulness” and cartoonish fun to give our character some personality and to match Google’s brand identity. We then created the Rookie plugin that will live within Google Chrome for users to access.

Group 8.png

DESIGN PROCESS
Accessibility

Google believes that everyone should be able to access and enjoy the web, and they’re committed to making that a reality. So accessibility was a major factor we took into consideration when creating rookie.

 

Visually impaired users are able to adjust the colors, contrast, and saturation. We also included a text-to-speech option that supports multiple languages as well as image descriptions to better enhance their experience.

 

Our persona Mark struggles with understanding the issues of privacy and security, so we implemented a dictionary that will define terms and decode jargon for him so he feels confident in sharing his information.

 

Finally, we included content adjustment for Chrome users all over the world who want to use rookie in multiple languages.

Screen Shot 2021-09-10 at 8.20 1.png

12:00 - 3:00 AM
PROTOTYPE

SOLUTION & FUNCTIONALITY
Rookie

Rookie is a digital solution that informs users of how their data is collected, stored, and used by online companies. Rookie monitors any security risks that may present themselves data as well as educating users on security best practices.

 

It is designed to engage in real-time interactions through Google Chrome at critical moments. It gives users a flexible and personalized interface where users can control how their data is stored and shared. Rookie also offers clarification on jargon by giving definitions and simplifying security language.

noun_dictionary_2684619.png

Informative

Educate and empower users on data security best practices.

noun_Information_140541.png

Clarification

View definitions & simplifies security and data jargon.

noun_google home mini_3605430.png
noun_Save_4256909.png

Securely saves the user’s data

 

Users can adjust their privacy and data settings anytime, anywhere.

Syncs with Google Home

 

Users can stay up to date with necessary data and security needs.

ROOKIE
Prototype

On the main google page, the user can activate the Rookie plugin from the dropdown menu. Rookie will not only start providing information about possible data usage and storage but also monitor security risks that may present themselves.

 

When the user hits a suspicious website, Rookie will notify them and provide information on what some of the security risks may arise.

 

Rookie will continue to monitor the website while the user enters their credit card information. Here, Rookie detected a potential security vulnerability and immediately provide them with some information to educate them about the potential risks

Group 11.png

POST HACKATHON
REFLECTION

KPI & MEASURES OF SUCCESS
Next Steps

Screen Shot 2021-09-10 at 8.46 1.png

GOOGLE x BRAINSTATION
Winner Announcement

Our digital solution Rookie was the winner of the Google hackathon. The decision was based on the completeness of the project, solution presented, quality of the pitch & collaboration, and technical competency shown across all disciplines.

Key Learnings

It was an amazing opportunity to work with data scientists and web developers on this project. I learned really valuable cross-discipline collaboration skills and by using collaboration tools like Figma and Discord we were able to meet the 24-hour deadline. I'd love to join more hackathons or designathons in the future to participate in more teamwork in a time crunch.

google mockup.png

PEAKED YOUR INTEREST?
Explore Other Projects

mei mockupppp.png
coppafeel thumbnail.png

AR-focused mobile app for an educational charity to improve their mobile experience and optimize their global reach.

The Self-Checkout tool allows users to learn more about breast awareness in hopes of reducing late state cancer diagnosis.

anida mockup.png

Website redesign to increase non-profit donations by simplifying the donation process & checkout.

ANIDA is an international organization that runs community-based programs in Ontario, Ghana and Jamaica.