Web Design, UI/UX DesignConcept

KLoc Technologies — Two directions for an engineering partner's own website

KLoc Technologies, where I work, is a Shopify engineering agency founded in 2007, with three divisions: commerce engineering, custom software and tech talent. I explored a redesign of its own homepage: content from the live site, with motion that gives it life without getting in the way of reading. Two directions came out of it, one light and in KLoc's own colours, one dark and editorial.

Industry
Commerce engineering
Scope
Homepage, concept
Platforms
Desktop & mobile
Directions
2

The brief

A homepage that tells three businesses' story as one, and feels as considered as the work it describes.

Content firstOnly what KLoc already says on its site, rearranged so the strongest proof comes first.
Alive, not loudMotion that explains, like a statement revealed word by word, rather than effects for their own sake.
Repeatable, not boringSections that can repeat across pages without every page looking the same.
Two kinds of readerShoppers now arrive through AI assistants too, so a whole section is about being found by them, with a free check to try.

Direction one: light

KLoc's own mint, deep green and orange, rounded cards you can drag, and a curved edge under the hero that grows as you scroll. Scroll through the full desktop and mobile homepage.

Full desktop page
↕ Scroll inside the frame, or click to open it larger
Full mobile page

Light, section by section

From the hero to the three teams, the partner proof, the AI agent section, a featured build and what clients say.

Engineering partner for the AI era
Engineering partner for the AI era
Choose the right KLoc team
Choose the right KLoc team
Premier Shopify Partner
Premier Shopify Partner
Your next customer might be an AI agent
Your next customer might be an AI agent
Featured build: Sleepyhead
Featured build: Sleepyhead
What clients say
What clients say

Direction two: dark

Near-black with one sharp green, a single typeface, square corners and a strict type scale, closer to an engineering journal than an agency site. Scroll through the full desktop and mobile homepage.

Full desktop page
↕ Scroll inside the frame, or click to open it larger
Full mobile page

Dark, section by section

The same story in a quieter voice: three teams, work beyond the store, four steps, AI agents and the journal.

Engineering partner for the AI era
Engineering partner for the AI era
Three teams, one standard
Three teams, one standard
The same engineers, beyond the store
The same engineers, beyond the store
Four steps, delivered end to end
Four steps, delivered end to end
Your next customer might be an AI agent
Your next customer might be an AI agent
Useful thinking from the build room
Useful thinking from the build room

How I worked, with Claude

Each direction started from agency sites I studied and admired, then was shaped around KLoc's own content and brand. Claude helped me turn them into something stakeholders could scroll.

References to prototypesI gathered the references and set each direction, and Claude built them as working prototypes, so the motion could be judged in a browser rather than described.
Feedback, straight inEach round of stakeholder feedback went straight into the prototype, so the next review started from the real thing.
What stays mineThe two directions, the layout and type decisions, and what stayed out.

Credits and references

Both directions are concepts, made for KLoc's internal review and built on the work of studios I admire. Credit where it's due:

Direction oneAdapted from the structure and interactions of Ask Phill's website, and reworked with KLoc's own content, colours and brand.
Direction twoTakes its layout and type cues from the websites of Lama Lama and Made in Evolve, rebuilt around KLoc's content.

On mobile

Both directions on the phone.

Light: hero
Light: hero
Light: AI agents
Light: AI agents
Dark: hero
Dark: hero
Dark: four steps
Dark: four steps

More projects

I was a sari I was a sariE-commerce, UI/UX DesignView project → Interspace InterspaceE-commerce, UI/UX DesignView project →