Product design / Redesign

Metaset

Rebranding and Redesigning the Crypto Investment Experience

Saas platform

Website

B2C

The challenge

Crypto investing can feel intimidating and confusing, especially for those new to the space.
Metaset’s MVP was functional, but it lacked the design needed to build trust or guide users through the process.
My mission was clear. I set out to redesign the platform into a friendly, easy-to-understand experience that would help beginners invest with confidence, without being overwhelmed by complex technology.

It all began with a phone call

It all began with a phone call

“Ali, we’re building a platform for beginners who want to invest in crypto. We already have a basic MVP, but... the design just isn’t working.”
“We want something fresh. Something smart. Maybe even a touch of AI and 3D to make it feel next-gen.”

That was the beginning of Metaset, and for me, one of the most immersive solo design journeys I’ve ever taken on.
I wasn’t just designing a UI. I was shaping the product experience from the ground up. This included strategy, user flows, visual design, sound, motion, and bridging the gap between design and development.

The problem — crypto feels overwhelming

The problem — crypto feels overwhelming

Despite the hype, crypto remains intimidating for most people.
Platforms are packed with complex charts, financial jargon, and decision overload.
Trading bots are even scarier. They are invisible algorithms making decisions on your behalf.

Metaset had the potential to change that. The MVP was functional. The bots worked. But users didn’t understand what was happening or why they should trust it.

My challenge

My challenge

design a platform that feels intelligent and confident, but also calm and human.

What I Saw First

What I Saw First

The original MVP was functional. Bots could run and actions were in place, but the interface felt cold and confusing.

There was no clear hierarchy, no guidance, and no sense of trust.

It worked on a technical level, but it didn’t invite users in or encourage engagement.

Understanding the user mindset

Understanding the user mindset

We weren’t building for traders.
We were building for people who had maybe bought crypto once or twice, and left it sitting there, unsure of the next step.

I spoke with early users, reviewed competitor platforms, and used AI tools to cluster insights.
Here’s what I kept hearing:

  • Aisan

    I just want to turn something on and feel like something smart is working for me.

  • Michelle

    Bots sound cool, but I don’t understand what they’re doing.

  • Matthew

    I want to invest, but I don’t want to learn charts.

Matthew

I want to invest, but I don’t want to learn charts.

Michelle

Bots sound cool, but I don’t understand what they’re doing.

Aisan

I just want to turn something on and feel like something smart is working for me.

  • Aisan

    I just want to turn something on and feel like something smart is working for me.

  • Michelle

    Bots sound cool, but I don’t understand what they’re doing.

  • Matthew

    I want to invest, but I don’t want to learn charts.

That told me everything:
this wasn’t just about trading, it was about

building trust.

That told me everything:
this wasn’t just about trading,

it was about building trust.

Inside the Beginner’s Mind

Sofia

32 Y/O

Digital marketer

Amsterdam

Background

Tech Comfort

Crypto Knowledge

Risk Tolerance

Desire for Simplicity

Motivations

  • Grow savings passively without deep trading knowledge

  • Feel in control while letting smart automation help

Pain Points

  • Gets anxious seeing charts, candles, and technical terms

  • Uncertain which bot to pick or trust

  • Fear of losing money without clarity

Needs from Metaset

  • Simple onboarding and clear language

  • Human-like explanations and trust signals

  • UI that feels alive and supportive, not robotic

Inside the Beginner’s Mind

Sofia

32 Y/O

Digital marketer

Amsterdam

Background

Tech Comfort

Crypto Knowledge

Risk Tolerance

Desire for Simplicity

Motivations

  • Grow savings passively without deep trading knowledge

  • Feel in control while letting smart automation help

Pain Points

  • Gets anxious seeing charts, candles, and technical terms

  • Uncertain which bot to pick or trust

  • Fear of losing money without clarity

Needs from Metaset

  • Simple onboarding and clear language

  • Human-like explanations and trust signals

  • UI that feels alive and supportive, not robotic

Inside the Beginner’s Mind

Sofia

32 Y/O

Digital marketer

Amsterdam

Background

Tech Comfort

Crypto Knowledge

Risk Tolerance

Desire for Simplicity

Motivations

  • Grow savings passively without deep trading knowledge

  • Feel in control while letting smart automation help

Pain Points

  • Gets anxious seeing charts, candles, and technical terms

  • Uncertain which bot to pick or trust

  • Fear of losing money without clarity

Needs from Metaset

  • Simple onboarding and clear language

  • Human-like explanations and trust signals

  • UI that feels alive and supportive, not robotic

Rebranding Clarity

the New Face of Metaset

Rebranding Clarity

the New Face of Metaset

Alongside the product redesign, I also reimagined Metaset’s brand identity — creating a logo and visual system that reflect its core values: clarity, trust, and smart simplicity.

The new logo combines three ideas: the letter “M”, a modular package, and a dart (goal/success) — all wrapped in a clean hexagonal shape.

The typography and color palette were also refreshed to feel modern and approachable, supporting

 Design goals

 Design goals

At the start, I outlined a few key goals for the product

Simplify the Experience

Focus on a few essential, intuitive actions making crypto investing easy for beginners.

Human-Centered Guidance

Explain bots clearly and transparently, so users feel confident and informed.

Clear & Futuristic UX

Build a modern design language that feels advanced but welcoming, never intimidating.

Bring It Alive with Motion & Sound

Use subtle motion, voice, and sound feedback to create an engaging, companion-like experience.

Scalable Design System

Create a flexible, modular system that supports growth and multiple themes.

Developer-Friendly Design

Support smooth implementation with clear structure, logic, and thorough documentation.

The process — wearing every hat

The process — wearing every hat

With no other designer on the team, I wore every hat:

strategist, UX architect, UI designer, motion explorer, AI researcher, and even lightweight dev prototyper.

With no other designer on the team, I wore every hat:

strategist, UX architect, UI designer, motion explorer, AI researcher, and even lightweight dev prototyper.

UX Flows & Strategy

UX Flows & Strategy

I mapped the full journey, from onboarding to bot activation to tracking and withdrawal, making sure users always knew:

What’s happening

What’s happening

Why it’s happening

Why it’s happening

What they can do next

What they can do next

User journey map

User journey map

Sofia

32-year-old

digital marketer

Amsterdam

She values simplicity and wants to grow her savings passively without getting overwhelmed by technical details. Although somewhat comfortable with technology, she feels anxious about complex charts and unfamiliar terms. She looks for a trustworthy, easy-to-use platform that guides her clearly and helps her feel in control throughout her investment journey.

Scenario

Sofia is a digital marketer living in Amsterdam. She has heard about crypto but never dared to try it because it always seemed too complicated and risky. One day she comes across Metaset through a social media post. The message is different this time: “Invest in crypto without needing to understand it.”
She clicks the link and lands on a page that feels calm and clear. There are no heavy charts or scary terms. Just a promise that smart bots will work for you based on how much risk you are comfortable with. Sofia is curious and a bit nervous but this feels doable.

User Expectation

Sofia expects that Metaset will:

Welcome her with simple, clear steps

Avoid using confusing charts or terminology

Let her pick a strategy without pressure

Give her confidence through trust signals and a warm UI

Help her track her investments easily, with no math or stress

From Thinking to Framing

From Thinking to Framing

Design System

Design System

I built a scalable, modern design system, made to feel calm, clear, and alive:


  • Two UI themes (light & dark)

  • Modular components: buttons, cards, modals, tooltips, tags, Tabs, Inputs

  • Contrast-tested for accessibility using visual check tools

  • Modern “glassmorphic” style with soft blur, depth, and light accents

  • Integrated micro motion to bring feedback and rhythm into the UI

  • Built for fast iterations and clean developer handoff

WCAG Contrast Passed - AAA - A11y plugin-
WCAG Contrast Passed - AAA - A11y plugin-
WCAG Contrast Passed - AAA - A11y plugin-

AI Collaboration

AI Collaboration

To deliver motion, voice, and content without a full production team, I used a range of AI tools, from visuals to code:

Wireframes & Lo-fi Prototypes

ChatGPT (HTML code generation)

For quickly visualizing layout logic and testing interaction flows

Prompt:

You are a product designer and front-end expert who helps build fast, clean wireframes using raw HTML and minimal inline CSS — just enough to visualize layout and structure. I will give you a screen title and a rough idea of the content or components. Your job is to create a wireframe-like HTML snippet (no frameworks, no scripts) that I can preview directly inside this chat. Keep it simple, readable, and structured. Use only neutral placeholder text and blocks (e.g., buttons, boxes, labels).

UX Writing & Prompts

ChatGPT


To shape clear interface copy, onboarding steps, and tone-of-voice

Prompt:

Act as a top-tier product designer and UX writer who is collaborating on a crypto investment platform. The project includes a dashboard with multiple automated trading bots. Your role is to support the lead designer (me) by providing UX writing suggestions, copy improvements, tone recommendations, and content strategies that enhance clarity, trust, and user engagement. Every response should be tailored to the context and goal of the design I describe.

Video & Image

Freepik AI (powered by: Google Veo3, Veo2, Kling 2, Kling 2.1, and more)

For onboarding animations, microinteractions, and dynamic bot scenes

Prompt:

A three-quarter view of a futuristic robot resembling Tesla robots, focusing on simplicity. The robot's face is a smooth black glass panel with a sleek, reflective surface, surrounded by a glowing neon blue outline. The robot's shoulders and upper torso are minimalist in design, with smooth metallic surfaces. The background is pure white, creating a clean and modern aesthetic.

Sound & Voice

I created all visuals using Freepik resources and designed custom sounds using AI, from onboarding voice guides to ambient background music.

It was my first time generating audio from prompts, turning sound into a real part of the experience.

  • AI-generated music for background ambiance

  • Voice prompts guiding users through onboarding

  • Action sounds for bot activation, deposit/withdrawal, and system feedback



Website music

Bot activation

onboarding voice guides

In this section, you can view and manage all of your digital assets. Your wallet acts as a secure storage for your cryptocurrencies. This is where you can check your balances and make new transactions

3D & Motion Experiments

3D & Motion Experiments

To bring the interface to life, I combined AI-generated assets with subtle 3D and motion effects, striking a balance between energy and clarity.


  • I used Freepik AI tools to create 3D elements and motion-ready assets.


  • I collaborated with a motion designer to refine interactions and transitions.


  • Together, we designed animated bot cards, soft-glow states, and smart visual cues that enhanced the sense of automation without overwhelming the user.

Dev Handoff & Support

Dev Handoff & Support

Bringing a high-fidelity, motion-rich UI to life required close collaboration with the development team and smart prototyping.


  • I held multiple sessions with developers to define object structures, asset formats, and responsive behaviors.

  • My background in frontend development helped clarify logic and bridge the gap between design and code.

  • Given the complexity of the visual design, I teamed up with a motion designer to prototype key flows and animations.


  • Together, we created a shared visual language that enabled developers to fully understand the intended interactions, reducing ambiguity during implementation.

This hands-on approach ensured that even the most futuristic elements were implemented smoothly and remained true to the original vision.

final outcome

final outcome

Metaset now feels like a system that thinks with you. It’s calm, clear, and alive.

  • No charts. No stress. Just smart, guided flows.

  • Bots are explained as real strategies, not intimidating algorithms.

  • Micro-motions and subtle sounds give the interface a responsive, lifelike quality.

  • Every decision is transparent. Users understand what’s happening and why.

  • The UI is designed to grow. It’s flexible, modular, and ready for what comes next.

simple, smart, safe

simple, smart, safe

It’s not just crypto investing. It’s confidence, wrapped in clarity

what I learned

what I learned

Working solo on Metaset was one of the most complete design experiences I’ve had.

Here’s what it taught me:

  • Trust is earned through tone, timing, and restraint

  • Design should reduce fear in high-risk environments

  • AI is a powerful co-creator when used intentionally

  • Working solo sharpens decision-making and your design voice

  • Good UX guides without overwhelming

  • Small teams can build things that feel big

  • Design systems help move faster when working alone

  • Clear prompting turns AI into a creative superpower

  • Prompting is a skill that improves both speed and quality

  • The right tools and workflows amplify momentum

Let's Connect

Feel free to reach out for collaborations or just a friendly hello😀

Let's Connect

Feel free to reach out for collaborations or just a friendly hello😀

Let's Connect

Feel free to reach out for collaborations or just a friendly hello😀

Enter Password

Create a free website with Framer, the website builder loved by startups, designers and agencies.