End-to-End Design of CommonValue Web Experience

CommonValue enables communities to generate flexible reward mechanisms. based on both on-chain and off-chain data. Anyone can open a Campaign and choose a Strategy, for which the reward distribution will be based.

I led the end-to-end design direction of the web experience for creating, managing and funding campaigns and played a pivotal role in scoping and defining the claiming processes.

This wasn’t a typical fundraising product, it came with a pile of constraints- The campaigns were required to engage with both on-chain and off-chain data, signifying a combined use of the blockchain’s secure and transparent framework along with the agility and efficiency of external data systems. which, in general, is a hard pill to swallow.

We started off by trying to understand Who would potentially use this technology and in what contexts. It became clear to us that these user groups would include

The next question to answer is What kind of on-chain & off-chain processes can this product incentivize?

Platforms like Gofund me, Juicebox, Layer 3 were the ones that stood out to us the most. Since they each leveraged some form of incentivised interactions;funds being raised and rewards being given out. By testing each of these platforms and others, we were able to gather specific features that resonated with what we were building as well as ones we felt were impediments to a seamless user experience

In addition to the existing platform audit, we also felt it imperative to gain insights from users of our target demographic. We asked them each about their experiences with bonuses, giveaways, and bounties, their motivations, and their frustrations trying to achieve these goals that they find themselves coming across more often than none. This provided us with the puzzle pieces that we found were missing from our audit.

1) Social Integrations

This opens us to a larger user market share

2) Keeping it Familiar

Nothing should feel foreign for user types

3) Inclusivity.

In following Jakob’s law, we aimed to preserve and present as much familiarity with existing platforms as possible to users. This led us to categorize CommonValue user flow into three overarching phases:

Creating a campaign

managing a campaign &

Claiming rewards

In creating a campaign, we needed to pay attention to what makes a campaign functional and relatable. which means the functions and customizable nature of the campaign had to be made to fit every platform we supported. The process was consolidated into 3 easy steps:

Contains the title, description and image of the campaign we also included the option to add an admin’s wallet address. By doing this, we extended the accessibility of a campaign to be controllable by Decentralized Autonomous Organizations (DAOs) as well as individuals

This is where all the fun happens. This is where the user chooses the platform and configures the campaign. In order to maximize our efforts, We started off with twitter and GitHub campaigns.

Giving the creator a choice to fund individual or open it up for crowd-funding

Verification was quite tricky; we wanted users to be able to verify their accounts without using a direct integration, so we had to think of creative ways to achieve that. We slowly realized the same way we have to create the customizable components for each use-case, we also had to do the same for claiming rewards. For the Github campaign, a simple flow prompting them to create a public gist is shown. The flow maps that github account to the user’s wallet address. So we can remember them in the future.

After the campaign is created the creator can take a couple of actions

The campaign would be suspended, users who try to claim thier funds would need to reach out to the creator to unlock.

This cancels the campaign and returns the remaining funds back to the funders.

To increase safety and transparency with the campaign creators, we send them a list of verified contributors weekly in the form of a merkleroot, so they can manually confirm it’s authenticity before releasing the funds to them. The creator would have the ability to pause being sent this list

We also wanted these functions to be accessible to DAOs. To do this, we added a button to access advanced options, where the DAO coordinator can easily copy and paste the call-data for Cross-contract interaction. And in the use-case when the advanced option is opened by the account of an individual creator, they simply see clickable buttons to initiate these actions.

Cards — Responsive & Versatile

The card component was highly critical from a content-organization perspective. It was designed to prioritize readability while accounting for responsiveness, flexibility, and i18n.

I put a lot of emphasis on redlining every property (structure, internal padding, colour tokens, etc.) to ensure a smooth design-to-engineering handoff.

It was also an opportunity to leverage Figma’s component properties functionalities to greatly speed up collaboration.

Stepper — a visual method for passive orientation

Though small, it functioned to accurately represent the update flow and offer users with visual indication for progress and passive wayfinding.

The product was launched at ETH-Lisbon in October 2022 and got amazing response from the industry, in a short period of 3 months we recorded over 80+ DAOs signing up for our Beta Application.

It excited many stakeholders — it fulfilled our PM’s vision, garnered engineering support, and set a critical stepping stone for Common’s future.

It came as surprise to everyone. January 2023, was a rough day. Due to financial constraints. The entire CommonValue team would be disbanded.

Whiteboards are awesome: Being in the space and seeing collective ideas visually unfold led to some of the most highly fruitful conversations I’ve ever had.

Finding opportunities within constraints: Viewing constraints from different perspectives helped brew new approaches to tackle other constraints.

Cross-functional partners should be involved from the start: It ensured that the project was progressing holistically — effectively accounting for content strategy and technical feasibility early.

Simplicity was about reducing complexity, not quantity: If an added extra step led to a more intuitive and error-free experience, it was worth the additional manual effort.