Thicket Decentralized Web Application
Thicket is a decentralized web application that allows users to create and share GIFs with friends on a secure, peer-to-peer network. This project was an internal research project with a small team to explore and experiment with offline-first and decentralized web technologies.
After three months of learning, designing and building, we successfully created the first version of Thicket. This proof of concept helped us define internal standards for decentralized products and helped us uncover other opportunities in the emerging offline world.
Primary: To define internal standards for development of offline-first technologies through development of a decentralized web application.
Secondary: While decentralized web apps do exist, there are far fewer than on the traditional web. Many of these apps are in their early stages and the user experience is often lacking. We wanted the design of our solution to provide an intuitive and fun experience for decentralized web users.
We were diving into a new world of development tools, protocols, and potential issues when working with offline-first technologies.
Because of this ambiguity, we did not know what challenges to plan for, but knew they would arise. We were prepared to cut scope on initial requirements as necessary to deliver a functional MVP.
For the project to be considered a success, in three months, we would deliver a functional web application built for the decentralized web. It would be responsive across web and mobile and work entirely in the browser.
The app would be a social media platform allowing users to easily create and share gifs on a secure, peer-to-peer network and store all of its data within users' browsers, requiring no centralized servers for storage.
Decentralization is a significant change in how information is stored and shared online. A decentralized internet does not use centralized servers. Instead, it relies on a peer-to-peer network of many computers and widely distributed data. Each computer acts as a “node,” contributing power and memory to a distributed storage network. The data is not stored in any one privately-owned silo. Thus, there is no central point to compromise and no way for an oligarchy of entities to take control.
We began with intensive research into existing technologies, prior art, and design patterns for decentralized application development. We engaged in controlled technical spikes to assess candidate technologies and test hypothesis around critical path functionality that would make or break our vision for Thicket.
Could this be implemented for any other type of media? Absolutely. We chose GIFs because they’re fun. But also because this simple form of media was perfect for our proof of concept.
Next, we mapped out potential user flows and collaborated to get the experience right. We call the output of this step wireflows.
Then we turned the initial wireflows into medium-fidelity wireframes to continue working out the user experience and information architecture of the application.
Why Thicket? A thicket is a wild space while a vineyard is tended. Though a thicket isn't only vines, every branch and every vine in a thicket grows as and where it wants, without any central orchestration.
Color, Shape & UI Iteration
We started with color, shape and primary UI elements to test out different aesthetics. This helped narrow down the right vibe for the user interface and brand.
Then we began to experiment with visual treatments of the brand expressed through conceptual logos, word marks, and typefaces.
Context & Background Tests
We tested branding iterations in the app bar and in the context of a screen. We also tried out different background patterns.
Final Identity System
As wireframes gained fidelity, we established a design system for Thicket including visual styles and user interface components. This increased efficiency during high fidelity design iteration.
In three months, we researched extensively, iterated rapidly, overcame various challenges and successfully implemented a responsive application for the decentralized web which allows users to create and share GIFs with friends while maintaining full control over their data.
Thicket leverages the power of
InterPlanetary File System (IPFS) to securely transfer data directly between you and your peers. IPFS eliminates the need for central origin website servers, so no company sits between you and your friends' data.
All the GIFs you create are stored right on your device and the devices of your friends. When you are part of a Thicket Community, you are helping back up and preserve that Community's GIFs. You always own your data; it's never stored on any centralized server.
You are not the product
No ads or tracking. Ever. You don’t even have to trust us on it—since Thicket is open source and peer to peer, there is no one who can add this stuff in later.
The landing page provides new users with information about Thicket and a prominent call to action to get started.
Because Thicket is a unique web application, the information on the landing page provides users with important context. Details above the fold explain the overall concept and the slider below the fold explains the user experience and functionality.
When a user creates a new Community, three GIFs of our team provide additional user onboarding. A Community name is auto-generated and can be easily edited.
Creating a GIF is simple and works seamlessly across web and mobile. We even enabled front camera GIF capturing on the mobile experience.
To shoot a GIF, users simply press the button and have fun for four seconds! After a brief load, the GIF is produced.
Users can save their GIF with a caption or retake it if they aren't happy with the outcome.
After a user creates and saves their first GIF, it is added to a new Community with an auto-generated title. On this screen, users can update their Community title and/or share the Community link so that peers can join and create GIFs with them.
A Community in Thicket is a group of peers that share resources and responsibility for the Community’s content. Each member downloads all the content and stores it locally (sharing disk space resources) and redistributes the content to another peer fetching it (sharing bandwidth resources). Each member of the Community is responsible for the content that is posted or deleted and should be mindful of new members they want to join.
Users can view all of their Communities, then dive into one Community to view its GIFs. Within a Community, users can see other devices (peers) that are online and view new GIFs that they have added.
After selecting a GIF from a Community, users can preview, update the caption, view share options or delete the GIF.
Users can download their GIF, copy a shareable link, or share their GIF on Facebook or Twitter. Sharing GIFs guides new users to Thicket which continues to expand the peer-to-peer network.
Screens for syncing states, leaving a Community, deleting a GIF, error states and a screen to report malicious content to keep Thicket safe.
Over the last 12 years, we have grown from an engineering-only organization, to a global innovation firm that solves complex challenges for the world’s biggest companies.
As we’ve grown, strengthening our core areas of expertise and developing new specializations, we needed a brand that accurately reflected our purpose, our beliefs, and our capabilities.
Citrusbyte has become Theorem.