Bastion

An Internet safety solution that gives children the dignity of privacy and shows parents the information they need to ensure their kids' safety online.

Download The Process Book
↓ Or scroll down ↓

Meet the team

Chris Bartoldus

Roles

Project Manager
Visual Design

Major

Advertising, Graphic Design

Year

Senior

Caroline Ramsey

Roles

Process Manager
Visual Design

Major

Advertising

Year

Senior

Arjun Gupta

Roles

UX Research
UI Design

Major

UX Design

Year

Junior

Alejandro Marques

Roles

UX Research
Video Production

Major

UX Design

Year

Junior

Quint Bailey

Roles

UI Design
Storytelling

Major

UX Design

Year

Junior

Clark Delashmet

Role

Professor

Departments

User Experience
Interaction Design

Best Trait

Dry sense of humor

What's the problem?

Phones and personal electronics have become ubiquitous in our daily lives, giving children access to harmful information they may be unable to understand in context.

Parents have tools to combat these issues, but these tools are catered to parents' experiences alone, granting unfettered access to their child's private information, including location, call history, web history, and app usage.

A study by UCF found these authoritarian-style measures end up straining the child's relationship with their parents and prevents children from developing healthy attitudes towards Internet safety.

We decided to meet in the middle. We want to make a solution that protects children while giving them privacy... but how? Let's ask the users!

Research Methods

Survey

Our survey had over 160 responses from all over the world, including the US, India, and Puerto Rico. We gathered quantitative data on what devices our users have in their homes and their personal security habits with their passwords.

Survey and Results

Interview

We conducted a total of 13 interviews, two of which were expert interviews. Our goal was to understand what it means to be safe online. We also learned about what data people are concerned about losing and some new online security techniques from our expert interviews.

Interview Transcript

Probe

Working with 7 of the interviewees, we checked in with them twice a day and asked questions like "how secure do you feel?" and "How do you know your personal vehicle is not being stolen right now?".

View the Probe

Rainbow Chart

A Rainbow Chart is a way to track sentiment clusters over a large gathering of qualitative data. We used our Rainbow Chart to track common sentiments in our interviews, probes, and our survey.

View the Chart

Affinitization

We used a tree's worth of sticky notes to group all our sentiments into clusters. From there, we could look at all the big sentiments our research sample had on security, safety, and their digital lives.

Download PDF

Big Learns

  1. There's a lot of misunderstanding around the mechanics of digital security.
  2. Most people put the onus of security on the platform's storage of their private information, not on themselves to make stronger passwords.
  3. Biometrics are a divisive topic, with many enjoying its seamlessness but others feeling concerned or invaded.
  4. Many distrust the services that offer security (like Apple or OnePassword) in a paradox we refer to internally as "WWTW", or "Who Watches the Watchmen".
  5. Many equate their password to a key for a lock.
  6. Many use easily searchable personal information, like an initial, a date like a birthday or anniversary, or a phone number, as the basis for their passwords.
  7. People really don't like CAPCHA.

With our research underway, we started to understand what users want from a security system. Next, we started user testing on potential solutions.

Prototyping

Stages

The physical stage was designed to allow for rapid feedback and quick answers. We printed our rough layout and made cardboard cutout of a phone view the screen through. To simulate interaction, we gave the user a task and moved the screen behind the cutout.

We moved to the digital device and started blocking out basic functions, like a map and a location history. By linking these together with hotspots the user could tap, we were able to simulate on-device interaction.

We took the feedback from our on-device interactions and applied it to the final design. We also added elements of branding, imagery, and color. After several iterations, our final design is intuitive and user-informed.

Final Product

Child

In user testing, we found kids required an experience tailored to them and their usage patterns. While the two apps have different capabilities, they still keep the same great visual identity.

View Activity and see usage trends on the main dashboard

Stay secure with automagically generated and stored passwords

Set personal goals and get data to manage your time effectively

Parent

For the parent app, we focused more on notifications and status updates. The app comes preconfigured with a basic set of settings for you to tune, or you can go through each setting to make the most form-fit solution for your child.

Keep track of your kids, whether that means location or activities

Approve or deny requests from kids for exceptions or changes

Restrict apps based on time, location, usage, or category

What's Different?

Our goal was to make an Internet security app your kids won't hate, so we added two mechanics to set our solution apart.

Kids can bypass set parental rules. They are given a prompt, and the parent is immediately notified. If the child does decide to break a rule, they are able to give context for their reasoning. Kids know their parents best and whether or not they would be okay bypassing a rule.
‍‍
‍Kids cannot bypass security warnings or restrictions.

Kids are given a screen where they can see what their parents see about them. While they can't change any of the information, settings, or restrictions, we found the transparency alone was enough to boost compliance among the target audience. We found even though users don't go to this section often beyond initial exploration, its inclusion gave the user a sense of fairness.

Interactive Prototype

Deliverables

Vision Video

Filming the vision video was difficult because of Pandemic restrictions, but we made it work. Three total nights of shooting, two VFX shots, and around a hundred takes went into production.

Our main character, Abbie (played by team member Caroline), is a  teenager who has neglected yet another one of her dad's texts. She gets a message from a friend that takes her to a suspicious site that Bastion flags for review. Abbie is given the choice to either ignore this warning or ask her dad for permission... and comes to the conclusion it's just better to ask.

Bastion gives the dad (played by me, Quint) a report of the site, and it's not looking good. Dad uses Bastion to deny the request and gives Abbie his reasoning. Even though she's annoyed, Abbie is understanding. After seeing the thought that goes into her father's decisions, she approaches him to start a conversation about restrictions so she can understand them better.

Poster

The poster touches on the product mission and the top three features in the app for both parents and children.

Download Poster

Look Book

The look book is a quick, one-page sheet that can be used as a small ad or visual reference for the style.

Download Look Book

Visual System

Our visual system was designed in the very beginning of the project, giving our designs structure and cohesion.

Download System

Process Book

Our process book includes even more information than what is on my site and details all the iteration stages in-depth.

Download PDF

Miro Board

Miro was used for all of our collaboration, notes, affinitization, and other wonderful things that couldn't happen in-person because of Pandemic precautions.

Go to Miro Board

Figma Board

Figma was used for all graphic design, interaction design, prototyping, and visual ideation. We most likely would have used Figma even without the Pandemic.

Go to Figma Board