Case Study Banner

Project Summary

Designed a tokenized knowledge sharing platform for Web 3 Developers. The platform started as a question forum, but evolved into an education sharing platform with gamyfied modules and specific company challenges.

This was the first project I had gotten the opportunity to work in the Web 3 space. At the time, I knew very little about what Web3 was, let alone how to design with it so there was a lot to learn. The project consisted of logo creation and branding, UI illustrations, user flows, and responsive website design.

How Might We seamlessly integrate the principles of Web 3.0 into modern design aesthetics, ensuring a user-centric approach that harmoniously blends decentralized technologies with intuitive and visually engaging user experiences?

UX Design
UI Design
Responsive Website
Design Thinking
Branding & Logo

Project Details

My Role :

I was the sole UX & UI Designer from concept to launch. I was responsible for crafting user flows, creating wireframes & prototypes, and designing and maintaining brand guidelines.

Timeline :

May 2022- Present

Tools :

Figma, Illustrator, Photoshop

Team :

For this project, I collaborated with an incredible team of software developers with a deep knowledge in the Web3.

Website :

Visit website

Problem

Problem Icon
No Web3 focused platform exists
There is currently no dedicated learning community platform that focuses specifically on Web3 technologies. This absence hinders individuals seeking an immersive learning experience in the rapidly evolving landscape of decentralized and blockchain-based technologies. Filling this gap would also help foster collaboration in the Web3 space.
More developer tools needed to grow Web3
With only 5,000 Web3 developers contributing code weekly, there's a shortage of essential tools hindering the growth of Web3 technology. The ecosystem needs more developers, and addressing this scarcity is crucial for the widespread adoption and success of Web3.

Solution

Our solution was to create a knowledge community focused exclusively on Web3. The product would consist of the following features:

1. Developer Onboarding: Education built in-house and by community
2. Enterprise Onboarding: Project/bug bounties as well as company-sponsored challenges
3. Knowledge sharing marketplace: Access to knowledge and experts with incentives to ask good questions and provide quality answers

The evolution of the GravvyGrid editor from 2021 (left and middle) to 2023 (right).
Designed a gamified education course with the ability to enter and cross-check code. Users get rewarded with badges that they can show off on their profile.
The evolution of the GravvyGrid editor from 2021 (left and middle) to 2023 (right).
Designed an education course with the ability to enter and cross-check code. Intended to be used for company sponsored education or interview question services.
The evolution of the GravvyGrid editor from 2021 (left and middle) to 2023 (right).
The education forum provides incentives for developers to ask questions and provide good quality answers.

Challenges & Constraints

With any project, these factors significantly impact design choices, influencing the features, functionality, and overall development process. As a designer, I must creatively navigate these challenges to ensure the product aligns with business goals and deliver optimal user experiences within given constraints.

Research Image

Limited Domain Understanding

Addressing this challenge involved conducting thorough domain research, engaging with Web3 experts, and leveraging user feedback to iteratively refine the user experience. It also involved continuous learning and collaboration with stakeholders who possess expertise in the field.

Research Image

Time

Strict project timelines limited the time available for in-depth research. It required prioritizing tasks, focusing on core user needs, and rapid prototyping to streamline the design process within the given timeframe.

Design System and Style

Created a design system that would not only build the consistency but also save time for the client as they build new features. This will improve the overall process and experience for the website.

Design Image
Design Image

Iteration 1

When this project began, our sole focus was building a community-based education platform for Web3 developers. Version 1 simply consisted of Question and Answers with tokenization that incentivized the community to participate and provide high quality answers.

The initial design showcased the title for each question and displayed the number of answers, votes, and tokens spent. We found that there needed to be more separation between questions and less focus on the question data.
There would be an incentive to answering questions, but also to viewing answers. This ensures a more involved community of developers and gives the business a way to make money.

Change in Product Direction

The stakeholders engaged in meetings with investors, and a significant feature request emerged: the development of an educational course featuring code-based modules.

Designs were created with this feature in mind to fulfill the new business objectives.

The evolution of the GravvyGrid editor from 2021 (left and middle) to 2023 (right).
The education platform started with a course created by Triality's developers (CairoMummies), and soon after we started receiving requests to host courses for other companies!
The evolution of the GravvyGrid editor from 2021 (left and middle) to 2023 (right).
Inside look into a code-based question within a module. Users can test their code against the answer and receive hints when they feel stuck, all with incentives to complete each module.

Fidelity Concepts

Design begins with low fidelity to rapidly ideate. medium fidelity designs were used to prototype the design solution to test, and finally the high fidelity designs were handed off to developers and are the basis for the product you see today.

Concept Image

1. Lоw Fidelity

02. Medium Fidelity

Concept Image
Concept Image

03. High Fidelity

Final Designs (Mobile)

Though our main user base will be using large screens, we wanted to make sure our website was responsive on mobile for the edge cases.

Style Image
Style Image
Style Image
Style Image

Reflection

Embarking on the this project, I embraced the challenge of learning in an unfamiliar space. Collaborating with knowledgeable team members and stakeholders taught me the power of teamwork and the impact of research on design decisions. Working on something new and innovative was thrilling, and it has ignited my enthusiasm for more design projects in the evolving world of web3. I'm excited to continue shaping user experiences in this dynamic field.