Thicket Decentralized Web Application

An offline-first dApp allowing users to create and share GIFs with friends on a secure, peer-to-peer network.

Industries

  • Software & Platforms
  • Entertaintment & Media

Verticals

  • Blockchain
  • Cloud Scale
  • Microservices
  • Machine Learning
  • Media & Advertising

Capabilities

We embarked on a research project to explore emerging offline-first technologies and build standards for decentralized app development.

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.

Goals

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.

Challenges

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.

Success Criteria

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.

What is the Decentralized Web?

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.

Discovering the Possibilities of Peer-To-Peer Private Networks

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.

Why GIFs? Because They're Fun

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.

Mapping the Experience

Next, we mapped out potential user flows and collaborated to get the experience right. We call the output of this step wireflows.

Wireframing

Then we turned the initial wireflows into medium-fidelity wireframes to continue working out the user experience and information architecture of the application.

Developing the Identity

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.

Brand Exploration

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

Final Identity System for Thicket

Visual Styles & Components

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.

THE SOLUTION

After several rounds of design iteration and development experimentation, we created a functional version of Thicket!

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 responsive screenshots

Create and share GIFs with your friends in a peer-
to-peer, private network.

Decentralized

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.

Community-Hosted

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.

How Thicket works

Landing Page

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.

GIF Creation

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.

Communities

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.

Sharing

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.

Additional Screens

Screens for syncing states, leaving a Community, deleting a GIF, error states and a screen to report malicious content to keep Thicket safe.

You probably want to know:

  • How long did this project take?
  • How much did it cost?
  • How big was the team?
  • When can you start on my project?

Questions?
We Have Answers.

Setup a free consultation with a Theorem Product Strategist to find out.

SCHEDULE A CALL