F.I.D.O Cyber Security
Enhance your privacy.
Introduction
Browsing's best friend
Fido is a Google extension that provides a safety barrier between the user and privacy policies. It gives the power of protection back to the user by highlighting common privacy violations, lets users set preferences of violations, breaks down definitions, and provides a history of what sites are tracking you. We followed a 7-week process doing user research, human-centered design, agile design thinking, wireframing, prototyping, and accessing the safety issue.
Team
Justin Catalano
Aaron Tran
Luke Witty
My role
UX Designer
UI Designer
Prototyper
Problem
A public issue
• What dangers might be unique to this day and age?
• How might a digital product protect us or keep us safe?
• How can we create digital products that offer forms of safety from modern-day dangers?
We said,
Cyber security! But what can we actually make?
Research
So we researched
Who needs help?
We interviewed 6 students (20-26) to find what pain points they were facing when it comes to staying safe online. The top pain points were:
• Feeling that it is a waste of time to be safe online.
• Being confused and misguided when if comes to dangers of online security.
• Lacking trust due to the complexity of the topic.
Current issues that the general public is facing with cyber security.
After researching secondary resources, we found that people were having issues with:
• False sense of security.
• Businesses' responsibility for user data.
• Lack of education & digital literacy
How would they feel?
Conceptualizing
Based on that,
How might we make policies that are more friendly, transparent, and individualized?
How might we reframe technical language to be more comprehensible and user-friendly?
How might we develop a system that promotes transparency and proactive communication?
What is the user journey?
We created a future state journey maps for F.I.D.O.'s learning terms and terms and conditions scanner features.
What is the experience?
Building a model of how the user and F.I.D.O. will interact with each other.
Design Process
Design Sprint 1
We used an iterative design process powered by user feedback after each of the 5 sprints.
We used our research and conceptualization phases to start drawing and wireframing, here are the highlights:
Our users thought this would be a good idea, it just needed:
• Simplified information and interactions.
• Use familiar examples and expressions.
• Make the experience a teachable moment.
Design Sprint 2
We took the feedback and made F.I.D.O to reduce ambiguity, include symbolism, and have digestible information.
This wasn't very a popular choice, which means that our user's didn't like it. They said:
• The interface was not good and needs to be redone.
• Develop the scanning phase to be more appealing.
• It is too much and doesn't seem very intuitive, can it be simpler?
Design Sprint 3
We were lacking in many areas, and our users were not enjoying the product. While hitting a deadline for a draft prototype, we stepped back and looked at how we could make this better.
Tested, and failed.
• The narrative in the video was confusing.
• Only green is exhausting, washed out.
• Not clear what's a button, whats an alert, what's important, what action to complete.
• If you are competing for our time you need to make it worth while.
Design Sprint 4
Our project was not working. We were unable to figure out a solution down the path we were heading. However, we did not want to give up. Smaller icons, clear interactions, and breaking up the UI was our new plan .
We had a turn around! They said:
• "I like the different levels of viewing, incase I am busy but still want to learn."
• The visual design is better, I still think you can make the scanning more functional.
• The navigation is still confusing and doesn't fit the standard "extension"
• I am still wondering how understandable the given information is.
Final product
Using our final feedback and weeks of work, the final solution was made.
The Defense Highlight
The Defense Highlight is a lightweight notification that emphasizes how many violations were scanned while not being directly in the way of the screen.
The Chihuahua
Small, yet packs a punch. This screen allows the user to easily view definitions based on what was scanned. Here the user can quickly view, add, and check their preference for the term. Clicking the F.I.D.O. icon will bring them to the Dog House.
The Dog House
Where the guard icons live. Please hover over icons to see functionality.
Scanned information, based on definitions found in the privacy policy.
Library, saved definitions from scanned information to later view and familiarize with.
History, view which sites you have visited and the violations that occured.
Preferences, set common terms that you want to be notified of when found in the scan.
Exit FIDO, accessible throughout the interface.
Concept Prototype
Here is the prototype created using Figma.
Conclusion
Our next steps would be:
• Test the final prototype with user to gain opinion.
• Validate having a 3-step drill down.
• See if user are entice to learn more about staying safe online.