Is there a standard for single product websites?

Question

I'm looking to help a friend provide website design feedback to his sister's start-up company.
The site is http://myyogaloop.com

They are making some pretty basic mistakes. For example there are two primary areas of navigation, top and left sidebar. It also seems there is confusion on whether the company is something separate from the product, which, given the url doesn't seem to be the case in real life.

Is there a standard for effective single product sites?

Answer 1

I'm not sure about affective (did you mean "effective"?), but we can definitely identify a common, even standard, design pattern for one-product websites.

Here are a few examples: Square, Doxie, Feedly, Highlight, Dollar Shave Club.

As far as I understand, the main principles for one-product websites are:

1. Product in front - These websites use big images and large fonts to promote their product. The product (and its price!) is in the prospective buyers' face. They don't have to guess or dig it up.
2. Focus on the user - These websites don't write about features nobody cares about. They're also not filled with marketing blabber (e.g. "It's the best!"). Instead, these websites focus on the user and how the product they offer can help with their goals/problems/needs. For example, in square's website, the tagline is "Start accepting credit cards today".
3. Strong CTA (call-to-action) - These websites are clear about what they want the user to do - buy their product or sign up for their service. All paths lead to it. You can either do it straight away, or read more about it before you do. To achieve this, they use big buttons with strong colors and clear labels: "Sign up", "Buy [product]", "Do it", "Download for free". Of course they cater to other needs as well (customer service, company info etc.), but these are all diverted to the secondary navigation elements.
4. Clean, minimalistic aesthetic design - Visual appeal increases perceived credibility (6th guideline in the Stanford Guidelines for Web Credibility).

These are of course common characteristics I gathered from analyzing this type of websites. Each case is special, and you should design the website to suite the specific business requirements and target users' needs.

Good luck!

Answer 2

Really great answer by Yosef. I would agree with everything that he said. The main issues I would raise are:

There is not clear distinction between the product and the website. Are they one and the same? Is its main aim to promote Yoga or sell the Yoga loop product. Make this clear.

If the Main goal is to sell the product then you really need to make this prominent on the home page. This is very closely related to the CTA point Yosef made above.

Focussing more on the UI, as pointed out I see no reason to duplicate the navigation.

For an aesthetic point of view I personally believe it could do with a little more work. Aesthetics and trust are very important, particularly on sites that are selling products. For more information see: http://www.usability.gov/articles/062009news.html

Answer 3

Most modern product sites follow a structure like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

For example: http://www.zendesk.com

http://www.karmaplatform.com

Answer 4

Based on that site, I think there are two main problems I identified quickly:

1. the side nav is not needed, and confusion. Lose it.
2. The "our products" and "buy from amazon" pages are identical. Lose the second of them.

What you would then have, I think, is something much more like what I would expect from a single ( or small range ) product site:

1. A home page that tells you what the organisation is about. If it is PRIMARILY a sales/e-commerce site, this should include the product. If it is significantly an information site, or there should be a chat area, or the product is only a part of the sites purpose, then the product should be linked to as part of the home page, which should explain what the SITE is about.
2. Header tabs to the other relevant pages: product details, with purchase route; information pages; contact details. Maybe Press information, social area.

Keeping it very simple - a less is more approach - is important. Don't pretend to be a major retailer, if you are not. People will respect and like you for what you are, and you lose some of that if you are pretending.