There are a lot of types of design out there. The more common design is that of identity, keyart, advertising etc. Web design is obviously one of the most prevalent out there, but what a lot of people don't realize is the importance of strategy and acquisition within web design. There are thousands of people in the fashion/retail industry whose only job is to analyze performance of web design for gaining sales and conversions.
There is a strategy behind what brands put on the home page, what they put in the top, what links they have, what products they want to feature, etc. It's not just "let's put something cool looking on there"; though that is a large part of the equation.
For the past two years, I've been freelancing with menswear brand hook + Albert as their sole creative. I also happen to double as their head of marketing. Because I have a skill set in both marketing & creative, I have been slowly piecing together establishing their brand identity as well as optimizing their home page.
This is where the brand was when I started. The former designer, overall did a great job but I will detail several things wrong here from a strategy point of view:
1. CALL TO ACTIONS
Believe it or not, a majority of customers will click on something if it has a CLICK HERE or LEARN MORE button on an image. By telling a consumer what to do if they see something they like, you're immediately telling them, "Hey you like this. Click here to see more of it." By just leaving it blank, you don't actually challenge their thought process or ask them to do anything further.
2. DESCRIPTOR TEXT
The four bottom buttons have this covered (to a minimal extent) but the top banner lacks any sort of understanding of what you're looking at. You're basically presenting a visitor with a nice picture but no actual messaging which leaves the user to try and figure out what they're looking at.
There is no "voice" to this brand which forces a viewer to decide for themselves what sort of brand this is. A good rule of thumb for any brand on their web site is to use headers to describe what they're looking at and subheaders to build the voice. For example:
- HEADER: PIMA COTTON DRESS SOCKS
- SUBHEADER: The Most Comfortable Sock You'll Own
Therein you're making a claim and stake about your product but also making a viewer consider and analyze the product more closely. You WANT users to click around your site. Not just stare at pretty pictures and decide for themselves.
4. WEIGHT & DISTRIBUTION
Another issue with this design is that the weight of the copy is far too small for the images. These images are very busy and colorful and the designer should have used either a gradient overlay or a thicker font to allow the text to be more visible.
5. WEB FRIENDLY IMAGES
A common mistake that a lot of brands make is that when they photograph, they don't photograph for marketing usage. Sure that portrait shot of your sexy model rocking your product is great, but what happens when you need to include a paragraph of text in an email or when you have to try and fit a portrait image into a header image on your site that's 1000x450?
Your best bet is to shoot a majority of things in landscape mode and try and have the product/model only take up 50% of the photo. If you can muster it, have the subject be to the left or right of center. Also try and shoot without a busy and colorful background as text can often get lost.
6. BRAND IDENTITY
There is no common color scheme or font usage that identifies this brand as unique or different from the rest of the market. The only consistency on this home page is photos from the same photographer and the same font being used in the buttons below.
HERE IS WHERE WE ARE NOW
I'm obviously opening myself up to critique from the design community on the actual design aspects of this, but, from a strategic standpoint, this redesign has resulted in 100% more page views, 120% more conversions and 80% more time spent on the site.
Here's some of the key features:
1. BREAK UP IMAGES WITH TEXT
Too many images can often be confusing to look at. Break up your home page by adding small bars that spread the width of your site that link to "competitive differentiators". For example, h+A offers 15% OFF to first time buyers as well as free shipping. These bars break up the image heavy home page and give the site space to breathe. The bars are also key ways to attract first time customers. You can also use it (ie: the free shipping bar) as an opportunity to break up the block vertical alignment and therein creating visual interest.
2. ESTABLISHED IDENTITY
I have used BEBAS NEAU as the primary font usage for headers. This is a very thick font that is also quite thin and allows for a lot of text to be used without taking up too much of the area.
I have used BRANDON GROTESQUE as a sub-message font AND as a button call to action font. The font is also a sans serif but is ONLY used for these areas and is always smaller.
I have used MINION PRO ITALICS as an important messaging font as well as a call to action for some of the smaller featured boxes. Important messaging would be classified as something that is date sensitive ie: Today - Sunday, Limited Time Only, etc. I didn't want to use the buttons in the smaller items as it detracted away from the text.
In all of these I used three key colors, an orange, yellow and blue. These are the colors h+A found to be consistent in their products. As Summer approaches, I will change this up and use a new set of colors that are more in line with the season.
3. KEEP THINGS FRESH
This site is updated almost once every 10 days with new content. Remember that after your brand is a few years old, more than 50% of your visitors are repeat customers. Keep your site fresh for the loyalists but engaging for the first time visitors. That's a hard challenge but it will ensure the long-term success of your brand.
4. LEGITIMIZE YOUR BRAND IN UNIQUE WAYS
Most brands will simply put a "PRESS" section on their site as a way to legitimize it. There's no real proven data on if this works or not but my guess is that most consumers don't care if the brand was featured in GQ or Lucky Magazine. One way that you CAN legitimize your brand, however, is to put real life customers in front of them. It's no secret that brands want to turn consumers into walking advertisements (see Abercrombie & Hollister). But with the emergence of Instagram, customers are flocking to the app and posting photos of their brands to their own follower base. It's one of the fastest growing and most effective UGC (user-generated content) in a brand's arsenal. Not only that, it allows a potential customer to envision themselves just like these other "regular people". That lead me to a strategic & creative solution:
The four photos on the bottom are instagram photos uploaded from actual hook + Albert customers.
I reached out to each of these customers to ask them if they were okay with me using their photos on the website. All of them were actually THRILLED that we were going to do this and agreed to it. By including their name and their instagram handle it actually says to a customer: "real, live, good-looking, men actually shop this brand" and it plants a small, but highly important, seed in their head. We no longer need a press page and these buttons account for more than 18% of clicks on the home page despite the fact they are way below the fold.
If you were to ask me what are five things that you can apply immediately to your brand from this, here's what I'd say.
1. Shoot landscape and keep in mind that you'll be adding in text somewhere on the image.
2. Establish your brand identity for every season. (This could mean changing and updating fonts but that is okay and keeps it fresh).
3. Figure out how to incorporate current trends (like instagram) into your site.
4. Use Call-To-Actions generously.
5. Make sure your marketing strategist and designer are seeing eye-to-eye and communicating frequently (because chances are that it's not one person).
Love this Post? Hate it? Disagree? Leave me some comments below.