This viewport is currently not available.
PLease view the website on a desktop device.

Read Full Case Study

scroll
down

Phantasia

Overview

Project:

client - phantasia

Date:

march 2022 - may 2022

My Role:

User interview

uX design

uI design

prototype

Presentation Video

Tools:

Figma

photoshop

Lottie

spline 3D

after effects

Team:

Xavier Chen

natasha driver

hermione ross

zsofi gschwendtner

It’s really impressive! It’s going to be a really important feature for us and you’ve nailed it. Thank you for the quality of the work, and the enthusiasm you showed for the project, I really appreciate it on a personal level. It's been a pleasure working with you.”

Adrien Ladan

CEO, Founder

the story

A social marketplace for creatives

Launched in May 2022, Phantasia is a social marketplace that provides fair chances and equal treatment to content creators and public customers with the goal of creating an ecosystem that merges social networks, financial support, and collaborative features.

Content creators can promote their artistry, find collaboration opportunities, and sell their work. Public customers can customise their content discovery algorithm and financially support artists by purchasing, commissioning and tipping.

the Task

Design a dashboard

The Phantasia team came to us with a task - they wanted to develop a specialised "Dashboard" exclusively for desktop. Their primary goal was to provide a centralised hub that would bring data to the forefront of artists' creative processes. This dashboard would aim to serve as a powerful tool to empower artists on their journey to learn, improve, and grow in their respective fields.

🔊 Don't miss out on the audio. Click to unmute to enhance your viewing experience.

🔊 Don't miss out on the audio. Click to unmute to enhance your viewing experience.

the Solution

A completely customisable dashboard with data widgets in three varying sizes

Our dashboard provides an easy solution for visualising actionable data to help Phantasia’s users expand their sales. Rather than a one-size-fits-all model, the customisable dashboard empowers the users to add, remove and reorder data widgets to their liking.

With a variety of data widgets in different sizes and interactive visual representations of different kinds of data in graphical or pictorial forms, Phantasia’s users can understand their respective data easily.

DEsign system

Typography

Phantasia

bold

36px

Phantasia

bold

20px

Phantasia

Regular

16px

DEsign system

Buttons

Edit Widgets

Press to customise widgets by removing, adding and re-arranging.

H

56px

W

220px

corner

100px

Font

24px, Akkurat

– Button Structure

– State: Default

– State: On click

Navigation Buttons

Navigation buttons are positioned on the left to the dashboard.

H

148px

W

148px

corner

Round

Icon

35px, 35px

– Button Structure

– State: Default

– State: Hover

– State: Click

- Interactive Prototype: Hover, click and 2nd click on the button above to view the demonstration

DEsign system

ICONS

Icon

Icon are used inside action buttons.

H

35px

W

35px

Home

Profile

Questions

Settings

Go back

DEsign system

COLOURS

#FA8A7A
#87e3cf
#D1E5A6
#FFDE94
#CCABD9

Reveal each colour hex code on mouse hover.

DEsign system

Widgets

Small Widget

Compact in size, occupying minimal screen space.

H

178px

W

178px

Circular

21px

– Small Widget Structure

Medium Widget

Moderately sized, providing a balance between visibility and space utilisation.

H

178px

W

406px

Circular

20px

– Medium Widget Structure

Large Widget

Expansive, occupying a significant portion of the screen.

H

406px

W

406px

Circular

20px

– Large Widget Structure

Content Display:

Small Widget: Limited content display due to its compact size.

Medium Widget: Offers a moderate amount of content, providing a balance between information and space efficiency.

Large Widget: Allows for a more extensive display of content, enabling detailed information or enhanced visuals.

Functionality:

Small Widget: Typically focused on essential information or quick actions.

Medium Widget: Strikes a balance between providing substantial information and offering interactive elements.

Large Widget: Often includes more extensive features, detailed information, or advanced interactive capabilities.

Customisation:

Small Widget: Limited space may restrict customisation options.

Medium Widget: Offers a moderate level of customisation to balance personalisation and screen real estate.

Large Widget: Typically allows for extensive customisation, accommodating diverse user preferences and needs.

DEsign system

Dashboard

Search Bar

A graphical control element used in dashboard to provide the dedicated function of accepting user input to be searched for in a database.

H

48px

W

500px

Corner

Round

Icon

35px, 35px

– Search Bar Structure

Grid Structure

A grid is made up of columns, gutters, and margins that provides a structure for the dashboard.