Mason VardeA concept Shopify theme for a minimalist clothing label: a storefront that sells outfits, not single pieces, and gets the size right the first time.
Mason Varde is a fictional brand. We wrote this brief to show how we design a Shopify theme, from research to the buy button.
Mason Varde theme preview: the home page, starting with the image banner.
Mason Varde releases a few seasonal drops a year: considered pieces, in small runs, that are meant to be worn together. The old store sold them one at a time, with sizes in a dropdown and no way to see how a jacket worked with the trousers in the lookbook.
The brief was a theme that sells the outfit, and the size, the first time.
01 Discover: What a shopper needs to know about fit and pairing before they buy
02 Define: Three proto-personas and the journey from a first look to a full outfit
03 Design: Wireframes first, then the storefront, section by section
04 Optimise: The product page, shop the look and how we'd test them
01 · Discover
Launch seasonal drops that sell outfits, not single pieces, and get the size right the first time.
Buys a few good pieces a season and wants them to work together.
DoubtWill this go with what I already own?
Is between sizes in most brands.
DoubtWhich size do I take in this cut?
Wants the new collection the day it lands.
DoubtWill it sell out before I decide?
02 · Define
The wardrobe builder
Where shoppers hesitateIs this another basics brand?
What the design doesLead with a point of view: where form defines function.
The wardrobe builder
Where shoppers hesitateWhere do I start?
What the design doesThree ways in: by category, new arrivals or bestsellers.
The wardrobe builder
Where shoppers hesitateWhat goes with it?
What the design doesShop the look on the home page, and Pairs well with on every product page.
The size-unsure
Where shoppers hesitateWhich size?
What the design doesSizes in order on every card, and the size chart right next to the sizes.
The drop follower
Where shoppers hesitateWill it sell out?
What the design doesA real countdown for the drop and an honest pre-order label.
03 · Design
Eleven sections, from the drop countdown to the journal, each one the team can move, edit or switch off in the theme editor. Wireframes first, then the design.
Home page, Online Store 2.0 · 11 sections. Header: The wordmark on the left and four links on the right, laid over the photo. Image banner: One line of point of view, and two ways in: shop now, or view the collection. Collection list: Shop by category: jackets, shirts, hoodies. Featured collection: Staples, new arrivals and bestsellers as tabs, with sizes and colours on every card. Shop the look: A hotspot on every look in the photo, with the piece's card beside it. Countdown: The Black Friday drop, with a real countdown and a notify-me button. Featured collection: Top picks, with the review count right on the photo. Multicolumn: Three promises about how it's made, over one big photo. Testimonial: One customer's words, beside the shirt they're about. Blog posts: Stories from the studio, for shoppers who care how it's made. Collapsible content: Materials, care, shipping and sustainability, answered. Footer: About, help and shop links, and 15% off the first order for signing up.
Header
Template
Footer
One line of point of view, and two ways in: shop now, or view the collection.
04 · Optimise
Fit is the doubt that ended visits on the old store. Each number marks a decision on the product page and the reason for it.
The price and the pre-order status read as one line, so nobody finds out at checkout.
The chart is one tap from the size buttons, right where the doubt starts.
Each colour is a thumbnail of the real piece, with the name spelled out.
The quickest path first. Add to cart sits right under it for everyone else.
Share and Need help? close the buy box, so a question doesn't end the visit.
Sizes, the size chart and the buy button stay together, and the button follows the shopper down the page.
On a phone: Striped knit polo, $110.00, Pre order. Size chart: S, M, L, XL. Buy it now. Natural fibers, Sourced responsibly. Sizes, the size chart and the buy button stay together, and the button follows the shopper down the page.
Mason Varde product page, first screen, with 5 numbered decisions: 1. Pre-order, next to the price; 2. The size chart beside the sizes; 3. Colour as the garment; 4. Buy it now, for the decided; 5. Help, one tap away.
04 · Optimise
The theme's Shop the look, on one product photo: tap a piece, pick a size, and add the whole outfit at once.
Boxy cotton tee
Tailored skirt
Leather pouch
Cuffed wide trousers
Boxy cotton tee
$45.00
Tailored skirt
$120.00
Leather pouch
$85.00
Cuffed wide trousers
$130.00
Total4 of 4 pieces
$380.00
Black Friday Sale
Essentials that stand apart
Striped knit polo $110.00
Buy it now · Add to cart
04 · Optimise
A concept has no results yet. These are the first three experiments we'd run after launch, and what each one has to prove.
1
2
3
4
5
Aurelle