Shopify Website Design

Making the design claim look like a design claim

Scope Art direction · Visual design
Role Sr. Brand Designer
Client Shopify
Year 2024
Sector Ecommerce · SaaS
Tools Figma · Claude · Code
Context

A new pitch that needed a new look.

Shopify was repositioning its design platform: moving from a defensive "website design is simple with Shopify" to an ambitious "design at the speed of thought." The repositioning was driven by the broader team; my role was specifically on the visual side, making sure the page didn't just claim creative ambition in copy. It looked the part on screen.

A page that calls itself "design at the speed of thought" has nowhere to hide visually. If the screenshots are flat, the templates feel generic, or the interface details look like documentation, the headline becomes a promise the page can't keep. The visual work had to carry as much of the argument as the narrative did.

The previous shopify.com/website/design page: flat, generic layout before the 'design at the speed of thought' repositioning.
BeforeThe old shopify.com/website/design, before the "design at the speed of thought" repositioning.
My role

Visual evidence for an ambitious claim.

I worked on the visual side of the page: creating and refining the imagery that demonstrates each capability the page is selling. That meant template mockups that actually look like things merchants would want to build, interface details that show the product in action rather than in screenshots of a help article, and the visual treatment that gives the dark hero its weight without dominating what sits on top of it.

The brief was clear: the page was making a creative argument, and every image had to be evidence for that argument. Not decoration, not filler, not generic e-commerce stock. Real interfaces, real templates, real moments of using the product: composed and lit so that the visual quality of the page matched the visual quality the page was promising.

01 Visual asset
creation
Template mockups, interface details and per-module feature visuals.
02 Art direction
support
Visual strategy for the page: what to show, how to show it.
03 Template
curation
Hero mockup selection: aspirational enough to feel like a claim, believable enough to feel real.
04 Feature
modules
One strong visual per module, treated carefully. Restraint as the discipline.
The approach

The interface steps back, so the store can shine.

The whole visual system is built on subtraction. Translucent glass panels for the editing UI, AI that does its work quietly in the background: every piece engineered to recede, so the merchant's store is the only thing that holds the eye.

It's the harder discipline: not adding a flourish, but knowing what to take away. The storefront, the product, the real photography stay crisp and loud. The tooling around them goes quiet.

Feature modules

Every image earning its place.

The page is structured as a series of feature modules, each one combining a short headline, a sentence of body copy, and a visual demonstration. The visual work for each module had to do something specific: communicate one capability clearly, look like real product, and hold up at the size it would appear.

The discipline was constant editing. The temptation on a page like this is to over-visualise: to add screenshots wherever there's space, to use multiple images per module, to over-illustrate every claim. The visual approach instead favoured restraint: one strong image per module, treated carefully, made to look like the most important screenshot on the page. The cumulative effect is a page that feels considered top to bottom, even though each individual moment is simple.

01Edit with ease
02Stand out with rich media
03Pairs well with
04Style product pages
Result

The page is live.

The page is live and the visual work holds the weight of the new positioning. Every module looks like product, the hero looks like a creative platform rather than a marketing page, and the page collectively delivers on the headline it sets at the top. The narrative side of the project was led by others; my contribution was making sure the visual side could keep that narrative's promise.

See it live
The live shopify.com/website/design page, end to end: the 'Design at the speed of thought' hero, theme gallery, feature highlights and FAQ.
LiveThe finished page, live at shopify.com/website/design.
Art direction & visual design · Olga Cacenabes, as part of the Shopify team
Screenshots & site assets © Shopify  ·  All other visuals designed and coded by Olga Cacenabes
Next
Basi Group
Brand identity + UX/UI