Designing Your Online Store to Fit Your Brand

We have all experienced it, the “je ne sais quoi” that a well branded eCommerce site has.  When it’s done well it’s hard to put your finger on exactly what “it” is, but a number of tiny details come together to present a beautiful cohesive and clever online experience that mirrors the physical one.

A lot of retailers who struggle with how to approach the online world are pros at brick and mortar, and could open up a second or 10th store location no problem.  You pick the location, detailed plans are drawn up- decor, paint, lighting, sales associates, merchandising plans- all to perfectly portray the image of the brand.  But online?  How could you portray your physical brand without the people and temperature control and music?

What’s the Winning Formula?

There’s really good news – this expertise can be applied online!  While there is no perfect formula and no two brands are exactly alike, there are ways to approach your design planning and some great examples of a job well done to inspire and guide your own creativity.

Let’s break down the details of two really great, very different sites that make designing for your brand look easy!

Related: Developing your Brand Identity

 

West Elm

Overall vibe: Friendly, easy, approachable, warm, rustic, stylish

West-Elm-Home

The “je ne sais quoi”:

1. Use of Colour – West Elm uses grey for their copy rather than black, and don’t think it’s not on purpose!  Grey is the equally cool, softer side of black.  It’s gives off less contrast and is more relaxed and subtle.  The whole palette on the site has a vintage-y feel to it which spills over into the style and colour of the actual product.

They’ve also opted for an off white background on the site over stark white.  The light colour warms up the site and portrays the comfortable-cool that defines the brand. (palette)

2. Textures & Shapes & Accents – The buttons have a slight but unique texture on them that looks like they could be made of fabric from one of their sofa’s or blankets.  Soft “torn” or painted edges are mixed in with the classic smooth lines keeping in tune with the quirky meets chic aesthetic.

On the homepage, they have added a little home decor-DIY accent, using a splash of paint behind copy to make it pop.  They also chose cheerful circles for call outs and badges, instead of the typical square.

3. Use of Fonts & Icons – West Elm uses a slightly oversized serif font for their headings and product titles, giving the content and products a lively and playful feel.  A sans serif is used for call to actions and body copy, which keeps the details clean and easy to read.  They don’t use a ton of icons on the site, except for the expected, cart, search & help, but did spice up the neutral footer with vibrant pops of colour for the social icons.

4. Photography – It is not hard to figure out what West Elm does at a glance.  The site is filled to the brim with excellent photography.  They generally use fully-styled-by-west-elm,  in action photos, over flat product on white shots, and it works for them.  Of course this kind of photography can be very expensive and hard to coordinate and keep fresh, but a little effort goes a long way in this department.  Even if you can get seasonal branding shoots on the calendar and make use of your Instagram or customer photos in the in between, how you choose to style and shoot your product and branding images is incredibly effective in communicating your brand.

5. Use of copy – The actual words you chose to use on for your call to actions and marketing copy speak volumes.  Especially online where your words and gestures are all you’ve got!  West Elm’s tone is light and approachable, they make use of exclamation points and title the customer service section “We’re here to help.”

Related: The Ultimate Guide to Product Detail Page Design

 

Club Monaco

Overall vibe: Chic, modern, luxury, exclusive

Club-Monaco-Home

The “je ne sais quoi”:

1. Use of colour – Club Monaco uses a stark, cool, white background behind a neutral palette.  So neutral, that the contrast of black acts as the “pop” on the site for important features like the main nav, cart and search.  The blank canvas forces the eye to the product itself, known for design, shape and minimalist details that would potentially get lost in a busier space.

Grey is used to anchor the site in the footer and subtly separate it from the rest of the site and and a strong solid black line frames the top of the page.

2. Textures & Shapes & Accents – The Club Monaco texture is smooth, anything more than that would interrupt the simplicity.  The buttons are classic plain black rectangles with strong white font.  The black button has become a staple of fashion sites.  A green button might be a more obvious call to action and convert better, (and running shoes are more comfortable and quicker to get around in in heels) but the clientele shopping at Club Monaco is shopping on 10 other fashion sites with the same black button and know the subtle call to action quite well.

3. Use of Fonts & Icons – The font style and layout is inspired by a high fashion magazine, small boxey sans serif for body and large serif fonts used for headings.  The small copy lends to the overall aesthetic, keeping the product the focus, and everything else including the product name secondary.  Extra large fonts and icons can be perceived as playful which doesn’t fit with the vibe for Club Monaco.  Where icons are used they are sharp, bold and grey.

4. Photography – The feeling of modern elegance is instantly translated by the high quality photography used on Club Monaco’s site.  From the model selection, to the lighting, art direction and styling, everything is setting the mood, and the mood is cool, no fuss, contemporary.  Full screen editorials are inspired by double page magazine spreads and billboards.

The product shots are full length, perfectly under-styled (light on the accessories and hair and make up) and make you feel like you are flipping through a designer look book rather than scrolling an e-commerce site.

5.  Use of copy – Simple, clean, concise.  No fluff, no flowers, elegantly to the point and perfectly fitted to the brand.

All of these details on their own seem tiny, but when you define the small details and then look at them as a whole, you can start to see where the tone and feeling is coming from.  A good way to figure out what is lending to the experience is to imagine it the opposite of what it is.  Image if the Club Monaco models were bubbly blonds with red lipstick, or if the West Elm product was shown in a boxy white future-esque space – non-sense!  It makes it really obvious to see what is working for them.

Bring “it” All Together Online

There is no cookie-cutter way to replicate your brand when it comes to starting out online. The last thing you want is for your website to look like everyone else’s. Think about the aesthetic elements that make-up your brand, and how you can translate that online. If you have bricks-and mortar-locations, reproducing that exact feel online may be a challenge without being able to control physical elements like music or temperature, but it can be done! Pull together all the tiny details to create a cohesive and beautiful online experience for your customers! Use these two great examples I outlined, see how they breakdown their branding to design for online.

Related: Increase Revenue with On-Site Search