Project Summary
An ambitious one-of-a-kind project, Believe Trees is a web application whose purpose is to allow people to log their actions and see the positive impact their actions have made on others over time—Visually. Built on top of Bubble, a cutting-edge no-code technology enabling dramatic cost and time savings compared to traditional development methodologies.
Service
Web App Development
Contract Type
Design-Build
Client
Believe Ventures
Year
2022
Platform Stage
First Version
Display
Desktop Only
People Involved
5
Website
believetrees.org
How Believe Trees Works
The goal of Believe Trees is to show people who their positive actions have helped. This is done through users sending thanks and adding projects, goals, and token “branches” to their tree. As a result of this, their tree grows and so do the connections to other peoples’ trees. Overtime, one small action you did for someone might have a butterfly effect, and in turn may positively impact someone you’ve never met. The goal of Believe Trees is to show this visually.
Building the Project in a Technology That Has Never Seen a Project of This Complexity Before
The technology we selected to build this project in is Bubble, a cutting-edge no/low-code development framework. The reason behind this choice was for its dramatic cost and time savings, which allow for rapid development, with no downside compared to traditional development for this project’s particular goals and situation. Due to this project being in its early stage, by using Bubble we are able to refine the product more quickly based on user-input, allowing Believe Trees to reach product maturity faster and for a lot less. Building Believe Tree’s in Bubble posed a significant challenge though as a project of this complexity has never been done in this technology before.
Designing and Building the Core Tree Visualization from Scratch
With no pre-built interactive visualization meeting our requirements, we needed to custom build the tree visualization essentially from scratch, designing every aspect of it from the ground up, as well as building the necessary integration solution, a plugin in our case, to integrate it into Bubble. A difficult task due to the unique design of our database, the proprietary algorithm, and the many aspects of the visualization that needed to be intricately hooked up, each involving their own engineering challenges and coordination among multiple highly-specialized subcontractors. The tree visualization also needed to update in real-time (without needing to refresh the page), and the overall development of the tree visualization had to be done with zero compromise of the high-fidelity designs (a design-first approach).
Turning the Complex Concept of Believe Trees into a Usable User Experience (UX)
Believe Tree’s complexity posed a significant user experience (UX) challenge as it was difficult to understand in the initial client proposal. We worked closely with the client to turn the complex proposal into a simple, and user-friendly user experience (UX). An extensive process requiring a lot of thought to ensure every aspect of the Believe Trees concept was incorporated into the design in a simple and user-friendly way.
Incorporating a Proprietary Algorithm into All Aspects of the Application
Due to the Believe Tree’s concept being centered around a core proprietary algorithm, we had to ensure that every aspect of the platform was able to accommodate the algorithm, from how the database structure was designed to the user experience (UX) and tree visualization design.
Navigating Significant Communication and Information Challenges
This project presented a substantial challenge from an informational perspective, with a high level of complexity due to all of the interconnected features mixed in with the proprietary algorithm rules. We worked with the client to ensure we had every small detail perfectly understood, and ensured every subcontractor had this same level of understanding. We also built 100% coverage high-fidelity mockups showing exactly how each page and feature would look and work before development began, allowing the client to check over every detail and make any necessary revision requests before development started. These mockups also aided in the development process by showing all of the people involved a crystal-clear photo of how each part of the platform should look and work.
Solving Engineering Challenges Related to Implementing the “Token” Feature
A key feature in Believe Trees are the “token” branches. These branches allow people to track who a wristband they’ve passed on has been passed to (creating a chain of ownership). An engineering challenge due to the potentially limitless nature of the number of passes, and the need to show the entire “passing chain” at once in the tree visualization while also retaining the data to allow each part of the chain to be clickable (clicking on a node in the chain brings the user to that person’s tree), without compromising performance, and while making the visualization update in real-time. To prevent performance issues, we utilized an asynchronous loading solution in the Bubble plugin layer. This required extensive collaboration between three of the key subcontractors to build this feature out.
Sourcing Key Highly-Specialized Talent from a Very Limited Talent Pool
For the tree visualization, we needed to bring on two key highly-specialized subcontractors, one to build out the visualization based on our high-fidelity designs with zero compromise (ensuring the end result matched the high-fidelity mockups exactly) and one to integrate the visualization into Bubble as a plugin. The talent pool was already limited, and on top of this, we needed people who were willing to take on such a complex project. Utilizing our industry experience and network we were able to bring on the best people in these areas. Both of these developers were based in England, an 8 hour time zone difference from Seattle.
Solving Bubble Database Design Challenges to Meet Application Needs
Due to Believe Tree’s unique connection-based features, we needed to design a Bubble database capable of linking a large number of objects together without compromising its performance (such as linking a project tree to a project tree 1,000 connections ahead). The design of the database structure in Bubble also needed to account for the unique features of Believe Trees and be able to work with those, such as being able to integrate with the unique “token” feature and other algorithm rules. The Bubble database design required extensive collaboration between key subcontractors to think-through every aspect of the platform, and ensure the database was designed perfectly to meet these needs before moving forward.
Working Around Aggressive Budget and Deadline Constraints
Another challenging aspect was us needing to work around an aggressive budget and timeline on top of everything else.
It’s Purpose
The tree visualization is a core aspect of the Believe Trees platform. It enables people to track how their actions affect others positively over time.
Building the Tree Visualization from Scratch
Due to there being no pre-built plugin that met our exact requirements for the tree visualization, we had to develop it essentially from scratch. We worked closely with the client to design a tree visualization that accomplished every goal of Believe Trees, designing every aspect of the tree from the overall interaction/visualization concept, all the way down to the stroke widths and spacing between branches, and various interactions (hovering, clicking). Utilizing our network to source a key subcontractor specialized in the d3 JavaScript library capable of reproducing our exact design requirements with zero compromise from the high-fidelity mockups we produced (a very small talent pool).
The Branch & Node System
The tree visualization was designed around a branch and node system. Each color of node represents a different type of branch. For instance, when you thank another user, a “root” type branch is added to your tree, and a “thank you” type branch is added to the other user’s tree.
Fixing the Original Tree Visualization UX
The client initially came to us with potential versions of the tree visualization. The original version looked more like an ancestral tree. During the tree visualization design process, we went through an exhaustive long list of possible user scenarios to see how the visualization would respond. We realized that the original ancestral tree idea wouldn’t work as it wouldn’t be usable in certain scenarios – opting us to design it from scratch with the objective of making it work under those conditions and making it simpler despite its ability to become very complex, very quickly. We simplified the design working with the client over the course of many intense revision processes into a user-friendly version that accomplishes the goal of allowing positive impact to be seen.
A “Forest of Trees”
One key aspect of the tree visualization is how it grows as you create more impact, to create a “forest” of trees – visually allowing the user to see their impact. Clicking on one of the trees allows you to view it.
The Thanking Feature
One key action for the Believe Trees platform is the ability to send thanks to other people, projects, and goals that have helped you. This creates a “thank you” branch on their tree, and a “root” branch on your tree. The user receiving the “thank you” is then able to click on that branch and visit the thanking user’s tree to see what they have accomplished since receiving their help. This allows people to see who they have helped and what those people receiving the help have accomplished, and for people to track who/what has helped them.
Exploring Trees
Apart from “root” branches, each branch on a tree can be clicked into by clicking on its node to visit its own tree. This allows users to “climb” a tree and visit connected trees. The concept is that as you impact others positively through projects and goals, those people will impact others positively and you’ll be able to see how your actions result in greater and greater impact on others over time, potentially even those you’ve never met before (a butterfly effect). You can view this impact by “climbing” the connected trees to see each tree's impact in terms of its size (its size being the number of trees in its “forest”, and how many thank yous, projects, goals, and token branches it has), the idea being the larger the size the more positive impact that person has created in the world.
The Token Feature
The client wanted to incorporate a unique concept, the use of wristbands that have unique tokens located on them, that when someone enters the wristband token on Believe Trees, they are added to a “chain of ownership”. The idea being that you pass that same wristband to others and when they log the wristband token on their account, the passer of the wristband will see a new node stemming from their tree that when clicked brings them to that user that just entered the token’s tree. The number of wristband/token passes can be potentially limitless and so overtime as the wristband is passed from person to person, everyone involved in the passing can see the long chain of future passes of that particular wristband (each passer only able to see the passes that come after them; they are not able to see passes that come before them).
Engineering wise this was difficult to develop due to the real time nature of the application (not requiring you to refresh the page), and needing to design this to load asynchronously to not cause performance issues, as someone may have multiple token chains each with a long list of passes.
Believe IDs
Another feature that was added are “Believe IDs”. These are unique links that enable goals, projects, and people on the platform to be easily shared. When these links are clicked and the person is logged in to Believe Trees, it prompts the user to express thanks to that thing. If the user is a new user to Believe Trees and creates an account after clicking one of these links, that link/Believe ID’s tree will be credited with referring the user, and a “thank you” branch will automatically be given to that referrer's tree, which is connected to the user that was referred.
.png)
Overview
We also built out a goal section into the Believe Trees platform. Here users can set individual, partner, and challenge goals, log their progress, and see their streaks. For all types of goals, reminders can be customized to be sent via SMS and/or email (emails being sent as stylized HTML emails).
Individual Goals
Users can set individual goals, these goals don’t involve partners and can be public or private. Upon goal creation, the user receives a “goal” branch for this goal added to their tree.
Partner Goals
Users can also create partner goals. This is done by inviting a partner to an individual goal, which turns it into a partner goal (if the partner accepts the invitation). Partner goals allow both users to track each other's progress and ensure both users stick to their goals. Partners can message each other with notes of encouragement or other notes inside the private messaging group created for their partner goal. When the partner accepts the invitation, both users receive a “goal” branch attached to their tree that links to the same goal they are both working on.
Challenge Goals
Users can also create public or private “challenge” type goals. The purpose of challenge goals is for all members to work towards completing the same challenge. These goals allow you to include as many members as you want, and allow the public to search for them and join them if they are set to public (via the challenge goal search feature that lets you search for challenges based on location, keywords, and/or the challenge category). For each member that joins the challenge goal, a “goal” branch is added to their tree, these branches all link to the same “goal” tree representing this challenge. Members can message each other in the private challenge message group as well as log their own progress towards completing the challenge.
An Alternative to the Tree Visualization
We also built in a “story” visualization as another view option on top of the tree visualization. This story visualization is simply another way to explore/”climb” a tree instead of using the tree visualization.
Designing the UX
After understanding the client’s vision exactly, we began designing the UX (user experience). A challenging part due to the complexity of the Believe Trees concept. In order to achieve their objective of attracting and retaining new users, we needed to work to simplify the concept into a user-friendly interface. We designed the UX completely from scratch specifically to achieve their objectives. We also worked with the client to design the branding for Believe Trees, including picking out the iconography, typography, and color palette to achieve their specific objectives for Believe Trees.
Designing 100% Coverage High-Fidelity Mockups
While designing the UX, we built high-fidelity mockups of every single page and interaction inside the web application before we began development. This allowed the client to see how the final product looked before development started, allowing them to make changes before they became costly to do. These high-fidelity mockups were also key in helping clearly explain the complex concept of Believe Trees to everyone else involved, helping prevent communication issues. As part of our design-build process, for every project we do, we build 100% coverage high-fidelity mockups before we start development – this allows rapid changes to be made before development starts, reducing costs and speeding up turnaround time by reducing the number of post-development revision requests.
View the Mockups We Created for Believe Trees »
