Despark
UX/UI
Product Design
Branding
Interaction Design

A desktop B2C web3 platform that connects companies to users for feedback through interviews, usability studies, and surveys.

Overview
Despark is a desktop B2C user research platform for web3 that connects companies to their target audience of users for feedback in the form of interviews, usability studies, and surveys. Despark facilitates user feedback between companies using web3 by rewarding users with payment in the form of cryptocurrency. The goal is for the user to earn money through completing missions. Missions are the interviews, usability studies, and surveys companies provide. The goal for this design phase was to design the core functionalities of missions in a human-centric way while adhering to its existing framework and style.

01 Discovery 02 Ideation 03 Design 04 Final Designs

Insight
The client required comprehensive design for the missions page, encompassing both user experience and user interface aspects. The existing website included a login screen, onboarding, a home page, and a style guide, and the client sought to introduce new mission-related features while also updating existing ones to adapt to site changes. Specifically, the client looked for improvements in the missions page, design and experience for interviews, explorations, and surveys, profile page (both viewing and editing), adherence to brand style/guide consistency, and enhancements to existing features.
Solution
I helped design the missions page and the respective features for it. I also added new features and updated existing ones while maximizing the use of an established design system to make designing efficient and simple. By doing so, we further developed the product being visually intuitive and simple-to-use.

01 Discovery

Client Questions + Answers
From the initial meeting, I came up with a few questions for the client to help best understand the project scope and the requirements for a successful phase 2.2.

02 Ideation

User Flows
User flows dictated the required screens for each essential user story provided by the client. The main focus from the flows was to complete missions including explorations, missions, and survey as well as any previously unfinished flows from the previous design phase.

03 Design

Branding
Despark aims for modernity, ambition, and a strong web3 design focus, balancing dark blacks and greys with vibrant blues, reds, and greens to enliven the pages.
UI Kit
Despark's existing brand guide was a valuable framework for designing new features, covering various aspects like buttons, inputs, icons, dropdowns, notifications, typefaces, and cards. Throughout the project, the brand guide was regularly updated to accommodate new features and remove outdated ones.

04 Final Designs

Dashboard
The dashboard, serving as the homepage, provides access to recent transactions, statistics, earnings, and missions. The emphasis was on updating Active Missions, using grey and purple elements to enhance importance and priority.
Profile
The profile section displays essential user profile fields, which users filled out during profile creation. The client emphasized the ability to edit any field with a single click.
Boosters
Boosters enhance users' chances of mission selection by elevating their profile in the mission queue.
Explorations
Explorations, a mission type (user study), involves various tasks, such as offsite product testing, in addition to surveys or interviews. Users start with a screener survey, get accepted, join a Zoom call, return to the mission, complete a survey, and receive cryptocurrency. The goal was to simplify and clarify the steps for user ease.
Interviews
Interviews, the second mission type (user study), involve a screener survey followed by a remotely conducted interview about a product. Like explorations, the aim is to ensure users immediately grasp what to do next.
Surveys
Surveys, the final mission type, follow a straightforward process, involving a screener survey followed by the actual survey.