Signchain - Our design approach at hackathon.

Nov 02, 2020

ETHOnline is an Ethereum hackathon where we expect all the hacks to be built as use-cases of the Ethereum techstack. More than 800 participants from 77 counties were invited to test their creativity, network with like minds, and collaborate on real-world problems.

ETHOnline was on a mission of onboarding thousands of new Developers to Ethereum Platform. Throughout the busy weekend, hackers had opportunities to form teams, collaborate with mentors , attend speed networking sessions, demo their products and present to judges.

Now, let’s start hacking —

Koshik Raj : Lead Developer/Architect

Yathish and Shubam : Core Blockchain Developers.

Koushith Amin : UI/UX & Frontend.

1. What was the Problem?

Legal agreements are often signed and shared using physical documents that delays the process, verification issues, and are prone to errors. We need to come up with the way that users can share the document privately with other counterparties that need access and sign the document.

We know that there has been plenty of effort in the area of electronic signing. But the existing solutions don't seem to operate on standards that are interoperable. In Signchain, we want to address the age-old issues of document signing such as tampering, delayed process, verification troubles, with the help of decentralized storage and open verification. We also want to address the interoperability concerns by using standardized identity, storage, and signing protocols.

1.2 UX Design

The process of creating a project from scratch can be a daunting one. We could apply our efforts in so many different directions, and it’s often challenging to get everyone on the same page. Since it was a quick hack we haven’t spent much time in beautifying the User Interface. We do have a plan of taking one step ahead and improving the product. We started off with a brainstorming session and listed out the features that can be implemented within the given timeframe.

we would focus on creating the following features:

  • User registration. it can be either as Party or Notary
  • Dashboard to Select different options such as Share the Document, Sign and Share and Verify.
  • Select Different Storage such as Fleek, Aws and Filecoin.
  • Check if the document has to be Notarized.
  • TimeStamp each and every events.
  • List out all the Documents Shared or yet to be signed/Notarized
  • Profile page with basic information

Img- brainstorming

Later on we made a low fidelity wireframe based out of listed features in the brainstorming session. We used Figma to convert the low Fidelity wireframe to Visual Design. We have picked the colors from official TailwindCSS Documentation. TailwindCSS ships with its own color palette, it does most of the heavy lifting things.

Here is the Final output.

In short below are the key functionality of the app.

  • Upload -  User uploads the agreement document to the platform.
  • Add Parties - Attach the identities of all the parties, notaries that need to sign.
  • Timestamp and store - The document is signed and stored in a decentralized storage that ensures access control.
  • Anchor the proof to chain - An anchor is created to the document along with user identity.
  • Access, update, sign and verify - Any party with access to the document can sign, notarize and verify the document at any time.

Things we used :

How It's Made?

Signchain has three major modules:

  • End to end encryption for documents that are stored on decentralized storage.
  • signing operation where standard digital signing proofs are maintained for all the signers of the document.
  • Decentralized identity that is used to manage user credentials.

We built the end-to-end encryption with a custom-built flow with PKI and symmetric key standards. We integrated the flow with contracts and decentralized storage (IPFS) with the help of Fleek and Filecoin slate so that any document can be shared publicly but decrypted only by counterparties in the platform.

We added the digital signing module that follows signed data standards. We later integrated this part with the private document so that the signed proofs and documents are anchored and anyone with the document can verify the signatures.

We used Ceramic IDX to maintain user credentials in the decentralized network. We did face issues due to some limitations of the library but we were able to tie user credentials to the Ceramic documents.

We were able to accomplish most of the things that we planned for the hackathon. We are proud of being systematic throughout the hackathon. We set milestones for each week, created designs before the implementation, and automated the contract tests, and did peer reviews.

Post hackathon, we want to explore the capabilities of Ceramic IDX and move some of our onchain logic and proofs to ceramic documents as we found it really interesting and promising.

You can check the live hosted application here.

If you are interested in exploring the inner workings of the app or willing to contribute to our open source project, feel free to checkout the Github repo here.

Here is the quick demo and Final pitch deck we prepared for the presentation.

Signchain has bagged 2 sponsor prizes during the EthOnline hackathon 🎉 🎊.

What’s Next?

Ideas for new products don’t always come from product managers. EthOnline Hackathon was a great way to boost new ideas, from thought to implementation, in a few hectic days. We are working closely on the product and will ship more exciting features in the upcoming days. We have some exciting roadmap planned for Signchain 🚀. So, keep an eye on https://www.signchain.xyz 👀

Resources and Important Links:

Live demo: http://app.signchain.xyz (Rinkeby)

Source Code : https://github.com/consensolabs/signchain

Twitter : https://twitter.com/sign_chain

TailwindCSS : https://tailwindcss.com/

Arbitration platform built on Hyperledger Besu (Arbchain):https://arbchain.consensolabs.com/#/

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.