Challenge
Stages of work
User persona
Wireframes
Style guide
Final design

Kasiopeja

E-commerce concept for a fictional laptop brand - desktop website design.

Self-initiated concept

date

June 2026

Role

UX/UI Designer

platform

Desktop

tools

Figma

Challenge

Design a modern e-commerce website for a laptop brand that allows users to explore products, compare models, and easily choose and purchase the right laptop.

Challenge

Design a modern e-commerce website for a laptop brand that allows users to explore products, compare models, and easily choose and purchase the right laptop.

Stages of work

Stages of work

01

Discover

Analyze

Build a clear foundation before making design decisions.

User personas

Competitor audit

02

sctructure

UX stage

Turn insights into an intuitive product experience.

User flows

Lo-fi wireframes

03

create

UI stage

Shape the final visual language and polished interface.

Design system

UI Kit

Final design

User persona

A snapshot of the needs, behaviors, and expectations guiding the product experience.

Brayden

Team manager

Age

27

Location

Warsaw, Poland

Education

University degree

Status

Single

“

“

I want a laptop that performs brilliantly and feels like it was made for me.

I want a laptop that performs brilliantly and feels like it was made for me.

01

Goals

Find the latest Kasiopeja models quickly.

Balance premium design with strong performance.

02

Frustrations

Dense, overcomplicated product pages.

Unclear explanation of what makes a product special.

03

Motivations

Technology that looks as good as it works.

Premium brands that express individuality.

User persona

A snapshot of the needs, behaviors, and expectations guiding the product experience.

Brayden

Team manager

Age

27

Location

Warsaw, Poland

Education

University degree

Status

Single

“

I want a laptop that performs brilliantly and feels like it was made for me.

01

Goals

Find the latest Kasiopeja models quickly.

Balance premium design with strong performance.

02

Frustrations

Dense, overcomplicated product pages.

Unclear explanation of what makes a product special.

03

Motivations

Technology that looks as good as it works.

Premium brands that express individuality.

Wireframes

From product discovery to checkout, key screens were mapped across desktop and mobile before visual design began.

HERO · DESKTOP

CHECKOUT · mobile

features · mobile

CHECKOUT · DESKTOP

FEATURES · DESKTOP

Profucts · mobile

HERO · mobile

Products · DESKTOP

HERO · DESKTOP

Profucts · mobile

HERO · mobile

FEATURES · DESKTOP

CHECKOUT · DESKTOP

CHECKOUT

features

Products · DESKTOP

Wireframes

From product discovery to checkout, key screens were mapped across desktop and mobile before visual design began.

HERO · DESKTOP

CHECKOUT · mobile

features · mobile

CHECKOUT · DESKTOP

FEATURES · DESKTOP

Profucts · mobile

HERO · mobile

Products · DESKTOP

Style guide

Style guide

Colours

Colours

PRIMARY / ACTION

Electric indigo

#4368EF

ACCENT / SIGNAL

Kinetic lime

#F0FA61

ACCENT / WARMTH

Soft peach

#EC926F

GRAY 50

#F7F7F8

GRAY 100

#E9EAEC

GRAY 300

#ABAFBA

GRAY 600

#57617A

GRAY 950

#182035

Typography

Typography

DISPLAY FAMILY

Montserrat · Regular / Medium

Aa

Aa

TEXT FAMILY

Albert Sans · Regular / Semibold

Aa

Aa

UI Kit

UI Kit

Fields

Default

*

Placeholder

Hovered

*

Placeholder

Focused

*

Placeholder

Disabled

*

Placeholder

Error Default

*

Placeholder

Error Hovered

*

Placeholder

Error Focused

*

Placeholder

Disabled

*

Placeholder

Actions

Default

Hovered

focused

disabled

Default

Hovered

focused

disabled

Selection

default

hovered

focused

disabled

Visible states preserve focus, validation and contrast across the full flow.

Iconography

A concise Material Symbols set covers the actions customers repeat most - browsing, account, payment and delivery.

A concise Material Symbols set covers the actions customers repeat most - browsing, account, payment and delivery.

Home

Account

Cart

Payment

Delivery

Package

Edit

Contact

Final design

Final design