A personal at-home server and a Wi-Fi router designed to protect user's privacy.

Mattie Lee • 8 min read

Bridge cover

#UI/UX#Product Design#Design Systems

In a nutshell

Bridge is a system that provides a secure way for individuals to store and control access to their personal data. It includes a physical server/router device, a desktop web app and a mobile application.

The system allows individuals to control who can access their data by granting read-only access through a permission-based system, which can be revoked at any time. Additionally, it protects, anonymizes and enhances the web browsing experience by blocking privacy-invasive elements such as ads and trackers. And Securely store files in full-featured network storage hosted by the file owners themselves.


We don't feel safe

The majority of Americans feel as if they have little control over data collected about them by companies and the government

Pew Research Center

Currently, there is a lack of solutions that provide individuals with the ability to feel secure about sharing their personal data. The transmitted data is often out of sight and out of their control, leaving them with little choice but to trust the servers owned by companies in order to use their services.

Personal data holders, such as companies, collect and use users' data in order to provide services to them. However, since this data collection takes place on servers that are not owned or accessible by the users, it remains hidden from them. As a result, individuals are left uncertain about how their data is being handled.

For example, they may not know if their data is being adequately encrypted and securely stored, if it can be accessed by others without their permission, or if it is being used without their consent or acknowledgement. This lack of transparency and control can leave individuals feeling vulnerable and exposed.

Decentralization by self-hosting

Decentralization by self-hosting

The idea of decentralization through self-hosting is that individuals can store their personal data on a server that they own, rather than relying on centralized servers owned by external organizations. By taking control of their own data storage, individuals can gain a sense of security and ownership over their personal information.

Bridge aims to alleviate privacy concerns by giving individuals the ability to share their data while feeling secure, having full ownership, a clear understanding of how their data is being used, and staying anonymous and not being tracked.



... I've never been hacked and had personal information leaked before; I [store my sensitive data in a physical form] as a preventative measure to keep my data private.

Permits, in the real world, are granted as authorization for an individual or organization to perform an action under a specific agreement. Personal data is often shared in order to access services, but it is important to have a system in place that prevents unauthorized access to that data indefinitely.

What if we try to integrate the same process virtually?

The handshake

The idea behind the "handshake" is that individuals want to protect and have control over their sensitive information. Most people are hesitant to share their information because of the potential for it to be stolen or misused.

Permits provide a solution by giving users the ability to share their data while fully understanding how it will be processed and used. They also ensure that authorized parties have only the specific access that has been granted to them through the permit and no more.

Furthermore, permits provide read-only access through API's, which prevents the data from being modified by unauthorized parties. This ensures that the data is not tampered with or used in an unauthorized manner.

Grants of permits happen after a request → review → approval process.

To make an informed decision about sharing their personal information, individuals should review a company's privacy policy and data sharing agreements. This will help them understand how their personal data will be collected, used, stored, protected, and shared.

Additionally, reviewing a company's data retention policies, data protection measures, data sharing revocation process, data transparency, data rights, and data security measures can help individuals feel more secure about the level of control and protection they have over their data.

Permit request iterations Multiple prototypes were tested and iterated for clarity and simplicity of the handshake process.

The wireframes have undergone changes to simplify the review process while also making sure that important information is clearly displayed. The evolution has been from minimalistic approach to one that is simple and easy to understand while keeping the important information visible.

Permit management

After granting permits to individuals or organizations, the permits clearly indicate the specific data that is being shared and how it is being used by the requester. If at any point, the user decides they no longer want to share their data, they have the ability to revoke the permit easily.

Permit management Hierarchically organized depth of permits showing clarity of shared data.


I feel invaded. I'm constantly being tracked on the web. I don't want anyone to access my private data and also have it monetized.

Blockers are implemented at a router level and do not require any additional setup for users on the Wi-Fi network. They provide protection against unwanted tracking, malicious websites, and privacy-invasive elements while browsing the internet or using applications, ensuring users a safe and private experience.

Website block

Blocking a website before loading on the end user's devices is a way to protect themselves from getting attacked by malicious websites.

Blockers blocked example An example of a malicious page being blocked by redirecting web page request to Bridge's sentinel page.

Removing unwanted elements

Ads and trackers make people feel insecure while browsing on the web because they are everywhere — blocking them .

Blockers ads removed example Removal of unwanted contents such as ads and trackers reduces cognitive load and helps users stay anonymous while browsing the web

Custom blockers

People who want to use their custom blockers can create patterns to block specific elements.

Blockers Customizable blockers with patterns make Wi-Fi level blocking even more powerful.

Privacy report

It was essential to ensure that people feel secure about their privacy through interviews and research. Privacy reports show how Bridge is working behind the scenes to protect them.


Complex information is made into cards to organize and reduce the cognitive load by adding depth to each feature or element.

Desktop Main Widget-based desktop experience organizes features and displays essential information on a single page.


Files are stored as it would like any other cloud storage service. In addition, users are encouraged to organize and optimize storage spaces as physical storage such as hard drives needs to be maintained by the owners.

Desktop Files Self-hosted Network Attached Storage(NAS) allows users to own their files without storing in third-party servers

Optimize Files User-centric file management prevents overload of unnecessary data for the longevity of the mounted storage (HDDs, SSDs, M2s)

Design system

Crafting a tiny design system helped keep designs scalable, manageable, and consistent across the project.

Design System Hero


Inspired by how REM units work in CSS, the spatial system focuses on consistency and pixel-perfect driven components divisible by two evenly. It prevents half-pixel values, breaking designs on specific browsers and devices.

Spatial System

Accessible colors and dark mode

The designs embrace color mode preferences and are WCAG 2.1 Compliant for accessibility as contrast ratios are essential for clear communication of data permits and preventing user errors.

Color System

Layouts, typography, and glyphs

Column-based layouts and typographic rules were created using the spatial system to work harmoniously with the other components.

Layout System

Typography System

Glyph System


These components are the outcome of following the systems and guidelines above. Components Light Components Dark

Lessons learned

This project aims to address the privacy concerns that people face when using services or browsing the internet by focusing on the concept of decentralization through self-hosting.

However, it is important to note that this solution requires a stable home internet connection for server uptime and some server management and storage management. Building a comprehensive product ecosystem and systems that alleviate privacy concerns is a complex task, permits offered the opportunity to learn and explore how private data must be exchanged.

Users want a clear and easy process for exchanging data while maintaining their privacy, they always prefer simplicity in agreements and expect them to be secure or else the solutions will not be effective. Web 3 Hero

Web 3

The use of blockchain technology in Web3 has the potential to further decentralize servers and enable transparent exchange of data. This could change the product ecosystem of Bridge, as it might not be necessary for users to have their own private servers at home. Instead, they could store and manage their data on a decentralized blockchain network where they have full control over their data and who has access to it.

However, it is worth noting that blockchain technology is still relatively new and its full potential and impact on various industries are yet to be seen.