Keycall – voice AI site + design system

Keycall is a Ukrainian voice-marketing service for automated calls, conversational bots, IVR and self-serve campaigns. The product happens over the phone, leaving no interface to show on the site. I designed 5 responsive page types on a shared bento system.

Role: Product Designer — responsive site, design system, component library and accessibility QA

Pages: home, voice bot, IVR, self-serve platform and outsourced service, at desktop, tablet and mobile

The client supplied the structure, copy and proof. There was no discovery research, so this case focuses on responsive layout, visual craft and the design system.

A real recording is better proof than a claim about a phone call. Each capability card includes a player, waveform and runtime.

Each capability serves a distinct buying intent, so each received its own page rather than a tab.

3 buying routes share the first screen: self-serve platform, managed service and consulting. Each buyer can find the right route without scrolling.

The client dashboard is the only real interface in the product, so it earns a full-width screenshot rather than a feature list.

The logo is a K cut out of a circle. The 3D renders take that circle out of the wordmark and give it a body: the black spheres running through every page are the mark itself, repeated at different sizes and depths. The green ribbons around them are the line — the signal a call travels on.

The brand green is a display colour. At 37px it is confident. At 14px on porcelain it measures 3.12:1, under the 4.5:1 small text needs; on the pale-green chip it falls to 2.63. The file gained a second green instead of a full repaint: a darker value clears AA on white, porcelain and the chip; the bright green stays on large headlines.

4 collections hold 52 tokens. Primitives store the raw values; semantic aliases name their roles — background, text, icon, action and surface. That let the colour fix move through all 5 pages with a single alias change. Montserrat Alternates handles display, Rubik reading and Raleway labels.

A bento field of cards sits on a shared 1376px inner section. The same spacing rules keep 5 pages recognisably part of one site.

The site shipped at k-call.com. A later review found 2 gaps between the file and build: Raleway and the accessible green were not implemented. The next handoff would pair screens with written implementation rules.

There was no participant testing. I checked text contrast, each tap target against 44px and every asset for placeholders.