Klone customer website

A product brand needed more than good-looking screens.

Klone needed a clearer brand and product direction. The product had useful screens and strong ideas, but it needed a more recognizable identity and a system that could scale across product and marketing.

I shaped the brand direction, interface style, reusable assets, and product presentation so Klone could feel like one connected product rather than a collection of separate outputs.

4 connected surfacesPublic web, customer product, vendor operations, and campaign assets.

The pieces worked. The system behind them did not.

Product screens, marketing visuals, dashboard views, and mobile experiences did not always feel like they belonged to the same product. Every new asset risked becoming another isolated design decision.

The problem was not a lack of visuals. It was the absence of a strong system connecting them.

Klone brand introduction

Define a clearer identity without losing product usability.

I needed a direction bold enough to be recognizable and disciplined enough to support real product work. That meant aligning color, typography, layout rhythm, interaction patterns, and marketing expression before polishing individual screens.

Stronger identity

A visual point of view that could be recognized without relying on the logo.

Product alignment

Shared rhythm across cards, navigation, states, and content hierarchy.

Reusable patterns

Assets and layouts designed to move between product and marketing.

Controlled expression

Personality in high-impact moments, restraint in utility-heavy flows.

Klone business website

I worked across identity, interface, and product presentation.

I set the visual direction, explored how it behaved in product, created reusable assets, and designed the screens that connected customer discovery with vendor operations. The work required brand judgment and product judgment at the same time.

Four decisions held the work together.

Direction before decoration

I defined tone, type, color, and layout principles first so later screens had something concrete to answer to.

The interface carried the brand

Buttons, cards, navigation, empty states, and mobile screens shared one visual rhythm without sacrificing clarity.

Reusable by default

Patterns were built for landing pages, onboarding, dashboards, announcements, and campaigns instead of one-off use.

Personality with restraint

Expressive moments were concentrated in discovery and promotion. Operational screens stayed quieter and easier to scan.

The public experience established the promise.

The web direction introduced Klone with a confident editorial voice, then adapted that same system for business audiences and content without becoming a different brand each time.

Klone journal website

Search became a product capability, not just an input.

Customers could browse categories, search directly, or use an image to find a service. I treated those as three routes into the same discovery model so results remained comparable.

3 discovery routesCategory browsing, text search, and image-led search.

Klone customer home
Service categories
Service search results
Image search camera
Image search results
Select services

The same system had to support work, not only discovery.

Vendor screens prioritize status, money, and next actions. The visual language stays recognizably Klone, but hierarchy becomes denser and more operational because the job is different.

5 booking statesRequested, accepted, awaiting verification, payment confirmed, and payment not received.

Vendor dashboard
Booking status list
Payment verification flow

Growth moments used more expression, not less structure.

The referral experience connects progress, eligibility, earnings, and campaign communication. It is more playful than the booking flow, but still uses the same hierarchy and product language.

Klone referral system
Referral progress dashboard
Klone referral campaign

From scattered visuals to a connected product brand.

Before

Screens and assets worked independently. Product and marketing had no reliable shared rhythm.

After

One direction connected web, mobile, vendor operations, and promotional communication.

Brand became useful when it behaved like a product system.

Klone reinforced that identity is not a visual layer added after the product is designed. The strongest work came from connecting brand, interface, and reusable assets so different touchpoints could feel related while still doing different jobs.

CopyLint preview
Figma plugin · AI-assisted copy QACopyLint

An AI-assisted copy review tool for Figma.