Despark

Despark is a Web3 platform that uses analytics and a strong community to help businesses understand Web3 users better.

Problem

Many Web3 users find it challenging to navigate and understand platforms due to unclear or scattered information, including details about products, pricing, and the company's essence. This cluttered and convoluted experience can lead to confusion, making it harder for users to engage effectively and trust the platform. The need for a streamlined and transparent user interface is paramount to ensure confidence and ease of use.

Solution

Therefore, a solution is needed to make Web3 platforms clear, intuitive, and user-friendly, enhancing users' ability to find relevant information and engage confidently. By providing a structured and transparent interface, Despark aims to simplify the Web3 experience, promoting trust and efficient user interactions.

Tools

Figma
Figjam
Zoom

Role

UX/UI Designer in a team of 3

Process

Agile

Duration

6 weeks

Discovery

Ideation

Design

Handoff

Reflection

1. Discovery

1.1 Kick-Off Call

In the beginning, our Despark team had a meeting to understand our client's needs better. We closely looked at their guidelines, focusing on:

Presenting Despark effectively on the homepage for users to get a clear overview.
Highlighting the products that Despark provides.
Detailing Despark's pricing structures.

With these insights, we strategized a clear roadmap to enhance the platform in line with the client's aspirations and user needs.

1.02 Competitive Analysis

In my exploration of the user research landscape, I closely examined Despark in comparison with other prominent platforms in the field, such as UserTesting.com, User Interviews, Web3UX, and Dscout. The analysis considered aspects like mission statements, target market, strengths, weaknesses, and essential features.

Despark stands out with its focus on Web3 users, offering precision in targeting based on blockchain usage and NFT ownership. However, the requirement for wallet verification might limit its user base, and more clarity on pricing could be beneficial.
UserTesting.com presents a comprehensive solution with a wide range of research methods and a diverse user panel. But its subscription-based model and information overload might be deterrents for some users.
User Interviews boasts a user-centric design, ensuring the needs of both researchers and participants are met. The website's clarity could be further enhanced by addressing its minor weaknesses.
Web3UX holds a niche position, catering exclusively to Web3 users. It provides substantial clarity and support, but there's room for improvement in visual engagement and detailed pricing information.
Dscout offers unique mobile-centric ethnographic studies, delivering rich and detailed data. However, the quality of data is dependent on participants' devices and connectivity, posing potential challenges.

In essence, while each platform has its distinctive strengths, understanding their individual weaknesses and features can guide users in selecting the best fit for their research needs.

2. Ideation

2.01 User Stories

Upon receiving the client's input, our team analyzed the primary objectives that the client wanted their users to accomplish. We evaluated each objective and created 3 different User Flows.

As a user, I want to...

As a user, I want to learn about Despark from the homepage.
As a user, I want to learn about the products Despark offers.
As a user, I want to learn about the pricing options.

2.02 User Flows

Creating User Flows enabled us to arrange the order of screens and establish a seamless navigation experience for completing important tasks. By presenting the user experience in an orderly and explicit manner, we ensured that the end product was user-friendly and easy to use.

2.03 Med-Fi Wireframes

Following an in-depth analysis and extensive research, I dove into creating Mid-Fidelity Wireframes tailored for Despark's homepage.

Our dedicated team took on the responsibility of designing Wireframes for diverse sections of the website. Specifically, I zeroed in on sculpting the "Audiences" and "Research Formats" sections. This phase was instrumental in shaping the user's journey and interaction with vital information about Despark's state-of-the-art user research services for Web3.

Subsequent to this, we convened for an interactive design brainstorming session. This provided a platform for every team member to put forth their ideas, present their initial designs, and gather feedback, ensuring we aligned our visions.

After refining our designs multiple times, we finalized the Mid-Fidelity Wireframes. They met user expectations and reflected Despark's core values.

Home Page Med-Fi Wireframe
Version 1

Home Page Med-Fi WireframeVersion 2

Home Page Med-Fi WireframeVersion 3

3. Design

3.01 Hi-Fi Wireframes

Post finalizing the Mid-Fi Wireframes, our team was poised to develop the HiFi Wireframes for Despark. To guarantee a seamless progression, we all worked intimately on the screens we had shaped during the MidFi phase. My primary focus was on the "Audiences" section and a segment of the "Research Formats".

Subsequently, we collectively reviewed each rendition, pooling our insights on refining every design component.

To streamline the transition, our component library was augmented, ensuring a hassle-free migration of components from MidFi to HiFi for Despark's platform.

Home Page Hi-Fi Wireframe

3.02 Style Guide

Upon integration of the new functionalities, the team proceeded to revise and enhance the client's pre-existing style guide.

4. Developer Handoff

4.01 Developer Handoff

After my team and I completed the Hi-Fi Wireframes for the Despark website, we transitioned to creating a comprehensive handoff document for both clients and developers, facilitating the next stages of website development. I tackled this challenge by placing myself in the shoes of a developer interpreting my notes, ensuring no details were overlooked. I added annotations for commonly used elements like fonts, buttons, and icons, emphasizing that their standards remained consistent throughout the website.

5. Reflexion

Working on the Despark Web3 UX platform was a profound experience. Many Web3 users struggle with cluttered and confusing platforms. With my team, we pinpointed the core issues: scattered information and a lack of clarity. Our mission? Make Despark user-friendly and trustworthy.

We transformed the platform, making it intuitive and transparent. Users can now easily find what they need and trust their interactions. I see a bright future for Despark, with the potential for even more user-centered features.

In short, this project was more than a redesign. It was about understanding Web3's challenges and crafting solutions. It taught me the importance of clear design in the digital world.