Notebook 👾

I designed a website as part of a 4 person team at Stanford's Treehacks in February of 2022. Our team had 36 hours to build a product and web interface from scratch.

Notebook is an anonymous KYC and credit scoring platform for crypto. It uses zero-knowledge proofs so users can prove their eligibility for a service, without revealing any personal information. In simpler terms, Notebook acts like a Notebook - recording a user's financial actions on the Metaverse -- allowing for more specific accountability between, for example, a bank and a loaner.
‍

I designed the homepage as well as the team page. The documentation page was linked to an external explanation. Because time was a constraint and I was getting a very entry level understanding of cryptography at the time, my goal was to condense this idea into the most digestible visual output I could - through an easy to navigate interface as well as compelling graphics.
‍

The Opportunity

The key for the website as well as for the graphics was to not only communicate WHAT but WHY. The user interface to a crypto site is critical as it serves essentially as a translator between a complex, technical idea on WEB3 into something that can be understood by someone with very little technical knowledge of the space. Additionally, because our pitch presentation time was limited to around 3-5 minutes per judge, a visual aid was key for the judges to easily comprehend the information given.

Inspiration for Design

A majority of the design decisions I made was largely influenced by the branding of current Web3/crypto protocols and websites. For example, sites like Aave, Sleepy Sloth Finance, and The Graph, with images attached below are examples of sleek, dark, clean, and simple layouts. They highlighted very minimalist graphics and animations, with illustrations highlighting certain features across the website.

‍

‍

Logistics and Design of Website Graphics

The main purpose of the graphics on the site were to be able to represent a complex idea surrounding crypto into a bite-sized, digestible visual aid. This was especially crucial as many of the judges that determined general prize winners of the hackathon had little technical knowledge about the WEB3 space.

Again, to make sure that someone without experience in the WEB3 space could understand the macro idea of Notebook, I created visuals that served as a visual analogy for the "notebook" (example 2 below). I also created site graphics (example 1 below) that laid out the verification process step-by-step.

‍

🪞Reflection

If I could make a change in the development of the website, I'd choose to make an interactive video with the site. I would create a demo showing how a user's habits on the Metaverse would should up on their "notebook". Because this was a hackathon, I didn't have enough time to completely flush out the frameworks or wireframes going into the project. Thus, I would have created stronger user flows, made a layout by hand, and built low and high fidelity mock-ups on Figma. I would also like to have taken a better look into what sites on WEB3 were gaining the most traction and why.
‍

🏆 Awards and Honors

• Y-Combinator Summer 2022 batch
• Winner of Terraform Labs (UST Adoption/DeFi Protocol Track) + Winner of Web3 Grand Prize