Just another MA Web Design & Content Planning site

Ecommerce Critique – Extended Blog

What is eCommence?

Electronic commerce, commonly known as e-commerce, ecommerce, eCommerce or e-comm, refers to the buying and selling of products or services over electronic systems such as the Internet and other computer networks.

However, the term may refer to more than just buying and selling products online. It also includes the entire online process of developing, marketing, selling, delivering, servicing and paying for products and services.

Source: http://en.wikipedia.org/wiki/Electronic_commerce

eCommerce is growing

More than 80% of the entire online population has used the Internet to purchase something

50% of the online population has shopped online more than once

Ecommerce sales are growing by more than 15% every year and will almost be $1.4 trillion by the year 2015

Source: http://nextwidgetsblog.com/2011/08/e-commerce-statistics-a-decade-of-growth

Who uses ecommerce?

34%, the highest user rate, of online purchasers are in the EU

India is the highest growth region

The highest percentage of shoppers (68%) are between age groups 55-65 and 31-44

In 2011 mobile users (e.g smart phone owners) spent 1.4 billion US dollars via shopping online

Source: http://nextwidgetsblog.com/2011/08/e-commerce-statistics-a-decade-of-growth

Where are we spending our money in the UK?

1.   Amazon UK – www.amazon.co.uk

2:   Argos – www.argos.co.uk

3:   Play.com – www.play.com

4:   Apple – www.apple.com

5:   Amazon.com – www.amazon.com

6:   Tesco – www.tesco.com

7:   Marks & Spencer – www.marksandspencer.com 

8:   John Lewis – www.johnlewis.com

9:   Next – www.next.co.uk

10: Easyjet – www.easyjet.co.uk

Source: http://www.blue-shark.co.uk/projects/2010/12/top-10-uk-e-commerce-websites/

What does this mean to the UK?

Broken down this figures show that the UK mostly like to spend their money online for purchases under the following headings:

• Entertainment
• Home-ware
• Clothes
• Travel

6 out of the top ten sites have shops everywhere. 4 of these sites generate their revenue purely online .

This means less overheads on property rental and staff. If you have a hosting domain and a Content Management system with goods marked up to sell you can start business.

Shoppers Habits

Unlike traditional shopping eCommerce relies on browsers being able to find exactly what they want with a speedy turnaround. Sometimes they might not even know what they want and therefore it is important, more so than in shops, to catch their attention fast and keep their attention by providing options they might not even have thought off. Most important is speed of transaction. I know I have been close to purchase goods but have been put off by having to fill form after form or have have a poor navigation process that even though I DID want to buy that product I simply didn’t have the patience to follow the transaction through

There is a reason why Amazon is the top of the list for the UK and for staying on top of the market is that you really can purchase a product in a couple of minutes

So what do Shoppers want?

Although shoppers want a variety of products and can now go online to hire a helicopter or sell a present from an ex-boyfriend (it really exists, http://www.exboyfriendjewelry.com/)  there is a commonality in how they want to shop:

Sites must support all four types of use:

• known-item purchases – when you go directly into a site and just know you aren’t going to leave without that on trend lamp.
• category research – where users identify and buy products that best match their needs – when you know you want a lamp but you’re just not sure what kind and you need category called “lighting”.
• bargain-hunting – when you’ll buy anything if it’s a good enough price.
• browsing for inspiration –  this could be when you need a gift or something for the house but want to presented with ideas.

“If the customer cannot find the product they cannot purchase the product”

Source: http://www.useit.com/alertbox/ecommerce.html

What should these sites provide?

• Accessible – the browser should be able to clearly read and use the website in a straightforward manner.
• Clean – features should not be cluttered or overpowering.
• User friendly – browsers should be able to use the site without a manual. It should be helpful for all users without a manual.
• Navigable – the User journey to the product should be clear, this should be done through a variety of navigation styles, such as the wide menu drop down with groups of headings, expandable categories, filters (www.ASOS.com do this well and they top of the fashion retail eCommerce field),  Search  and breadcrumb trails.
• Well designed – it is true that you can’t read a book by it’s cover but in web design if a home page or site is not designed well it can put users off spending money within the site due to any suspicions it may be unreliable.
• Simple steps for purchase – this process should not be drawn out , it should not tick boxes for extra money by default (hello Ryanair!). It should be a 1 or 2 step process which is Open and Transparent.
• Secure and Trusted – unlike walking into a store where they have a shop front and a til with actual people processing your details you are simply putting your hard earned cash into cyberspace. From this angle you really want some assurance that the site is secure and a trusted site. User Testimonials and official Visa signs, the Security Verification tick can help with this.

All of the top ten sites have these elements. Additionally Tesco, Next and Argos amongst others British High Street brands and therefore have a large element of trust before the user buys. If you are a start up company you must work harder to ensure you make your site meet these requirements.

What is extraordinary about Amazon is that is started online in the early days of eCommerce and has grown into a giant without that high street presence through good service , word of mouth and a trust in the brand.

Amazon.uk

What is extraordinary about Amazon is that is started online in the early days of eCommerce and has grown into a giant without that high street presence mostly through good service , word of mouth and a trust in the brand

There are multiple ways to find your product even if you don’t know what it is!

It provides linking to reviews, User Generated content – what other customers say and ideas for the buyer to pull them into more purchases by advising if they like this item they might like. It now offers market places where users can set up their own sales and wants area to generate their own revenue with Amazon, as the host, taking a slice.

Their member log In which remembers details of address and debit/credit card to make those steps even easier – no frustration and opportunity to stop the transaction and therefore spending money!

I think I am an ideal customer as I bought a CD whilst doing research,  it really is that easy (or perhaps I should impulse buying!).

I do think Amazon is great but I think they could do with a design refresh. I first used the site in 2003 and the interface and design hasn’t change much. I did raise this in my presentation and James raised a valid point, perhaps they are scared if they do they may lose customers? I think yes, this is possible but perhaps they could gain more if they freshened up also? Maybe they could do a beta of a new design, do a A/B test where certain Users are directed to the new design – a smaller percentage and the majority of the Users go to the original site. Bounce rates, visitors and most importantly purchases which follow through to the end could be monitored and they could find out in a relatively low risk way. Or perhaps they just think, if it aint broke!

My second criticism is that the Calls to Action buttons could be much bigger and clearer – small and often tucked at the far right – new Users could miss these.

Amazon is an example of a giant with their own eCommerce built into their site but there are other ways smaller companies can implement their own eCommerce websites relatively cheaply or free.

Content Management Systems + Plug Ins

There are CMS systems which you can purchase for your business which is recommended for business for high sales.

There are other systems such as Magento or Shopify which are subscription based dependent on sales which are relatively easy to set up and which can be pretty much used out of the box and which are quite a powerful tool. These systems can host all of your content rather than having seperate shop front with a back end ecommerce section. http://www.magentocommerce.com/ http://www.shopify.com/

Additionally there are free plugins you can use with free CMS’ such as WordPress.  One I was impressed with was shopplugin.net – https://shopplugin.net/

In a recent edition of .Net Magazine (January 2012) there was a new website in the CMS showcase section.  It is a small New York based fashion website, New Gotham Designs, http://newgothamnyc.com/. It uses Wordpress and shopplugin.net as the eCommerce element.

One of the things which puts me off some websites is that they look great and then when you click to purchase it turns ugly. Ok it will still be functional but as you are directed into the purchase section there is often little customisation and there are table like lists of URLs and categories which not only lose the branding of the site but also raise a bit of untrust as you think, hmm is this maybe some spyware or weird redirect, oh the URL is different too. With the shopplugin this doesn’t happen. It has been integrated, from what I can see, seamlessly into the site.

The screenshots below show the user journey:

That was nice! And you get the option to sign up for emails and bargains. This way the customer is kept up-to-date and they may also return.

Overall I think the site was:

• Clear, fresh and up-to-date design
• Clear navigation
• Free text search
• Clear call to action button
• 4 clicks and the purchase is complete
• Opportunity to sign-up to newsletter
• Meets 4 principles of eCommerce function
• Pleasant!

However, I really think they need to add some further information such as the secure mark and visa details to give the customer that bit more piece of mind.  Add to this some user testimonials and more merchandise and I think they are on track to ecommerce success.

The small print

A necessity for all successful ecommerce sites is to include the small print, make sure the site is clear about the returns policy, delivery dates, additional charges, registration of company.   These are not just for the customers benefit but they also protect the business owner too.

And now for the bad…

I leave this blog post with a gem of bad (or simply mad) eCommerce. Meet Ling, formerly a contestant on the Dragon’s Den and the host of this car hire site. What can I say!

http://www.lingscars.com/

I wasn’t that happy with my design for the new home page. I felt it was too “blocky” and although I liked some elements I decided I wanted to tear it up and start again. A redesign of a redesign! For my new home page I decided I wanted to keep a part of the original image on the home page as I really liked the image, the functionality was the issue. I cropped the image taking a section with the piano keys and I decided to work my new colour scheme around this, monochrome. Rather than black on white I reversed the logo to white on black and laid it on top of the image for instant recognition.

For this design I laid the navigation on the top of the page, above the branding, rather than below as this draws the eye straight to the merchanise and news. I used capital letters for a stronger impact. Before the site used a wheel in the centre of the page for g which although looks nice makes users think and I don’t want to do that!

I kept the original navigation features but added a new section called Blog to engage users and keep them on the site.

For the content of the page I created some thumbnails below the branding which act as a call to action for fans to listen to the music or watch the videos.

I added a blog on the right-hand side of the page so the band can highlight news of any forthcoming tours or just have a chat about anything.

Below the Blog I added a feature box which can be used to promote music, merchanise ad again turned over on a regular basis.

Before the video links were buried within the site and below the fold, I have now brought them to the forefront and as clickable liks on the home page. They will have a section within the site but if indexed in search will bring users here first instead of You Tube.

For the footer I put in the social media sites, Facebook, Twitter and another link to the Forum.

I created a second page which shows how the Shop page could look. Before it had random itunes icons ad the cover art in a single list with barely legible text and now it has been split into 2 columns with a summary and a call to action to Buy the merchanise.

I have to say with the old site I do like the eccentricity of the design but I think it  inaccessible for users, e.g. Apple Users, and a bit messy. I think my new design promotes the band more with a cleaner design but modern and hopefully not too slick!!

The grid lines showing through should not be, for some reason pulling them trhough from the 960 grid template - should be a solid black background.

New Home Page (again):

Content Page: Shop

Ok, so I have completely redesigned the home page. My main issues with the homepage were:

• Lack of obvious branding, the band’s name, although creatively integrated into the image was easy to miss.
• Unclear navigation
• As a splash page it didn’t give any real information about the band, links to social media or news.
• It was inaccessible
• On many browsers tested the image rendered poorly, often breaking up into pieces and in some cases not showing parts of the image essential for navigation to the next level.

With these thoughts in mind I decided to strip it down completely and redesign in a 960 grid using a 3 column layout. I retained the navigation names but laid them out clearly using a more traditional banner and navigation bar. One of the issues with the home page was that it was basically an entry page and the owners would like to update it and use it to instantly display links to band merchandise and an blog update. For this I have created a feature box for the blog and used their album cover art as imagery which will take users through to more information and links to listen to the tracks. Additionally I took a screengrab of one their videos and used it on the home page to take users through to You Tube where they can listen to the music.

I started with a wireframe made in Visio to work out how I could add everything together and from their created the mock-up in Photoshop. I have a used a colour palette of white, black and greys.

Again I have used Courier New as the font face but this may change!

Wireframe of the Homepage:

The Aliens Homepage Photoshop Mock-Up

For my project I have decided to take a site of my own choice and redesign it. In this case I have chosen www.thealiens.co.uk.  My sister owns this site and is always giving off about it and the trouble it has caused for updates so I thought I might take it apart and rebuild it from scratch as a present to her. Well, I hope it will be a present and not a complete disaster but hey worth a shot!

I do like the diy style ethic of the site, it looks a bit like someone’s scrapbook but on the other hand I think it is maybe too cluttered and I think accessibility in the design has gone out the window. Also in terms of ease of update for a non-web designer it is difficult as the coding seems very dense.

Again I like the home page and the way the sounds are made when a person clicks on one of the navigation settings, for example the piano key, but the whole page can be difficult to navigate around as it is not obvious where to click.

I don’t like the text on the web pages, it does not look clear and uses a mixture of tiny capitals, lower case, Times New Roman and Georgia amongest others.  The use of branded font is fine for the single releases but it gets lost amongest the rest of the site and white on a light grey background is not the clearest.

There are videos on the website which have been embedded into the site but they are not clear and appear just about the fold so the user might miss it. The forum is a great area for fans but again, this can get lost in the navigation which consists of quite a small coloured wheel.

I think a fresh and new update is required but without losing the spirit of the band . I can use the existing images and text but improve the layouts and navigation and make it clearer for the user. Rather than the page looking like a series of images with links added I will seperate the content out into a 3 coloumn layout.

Some screenshots:

Home Page

Photos

News

In terms of Search Engine optimisation the search term “The Aliens” brings this site up first which is great. A search for “Aliens” does not but I wouldn’t expect it to be first given that Aliens is the title of a pretty popular film and also there is a lot of interest in actual aliens but some work could be done on the rest of the pages to bring them to the top perhaps.

The site doesn’t currently have any analytics so this will definitely be a useful thing to incorporate.

So far I have written about my journey to where I am currently at with my designs and to write about each step has helped me understand where I am going but I still have alot of work to do!

The following images will show my pictorial and rambling journey (so far) for Smith’s Family Greengrocers…

Sketch 1

Sketch 2

File Structure

Home Page wireframe ASAP -my internet provider thinks I have to be 18 to download this file – long story but it was created in Visio.

Photoshop steps

Aft creation of the banner I started to create more deails around it and to the side to show the navigation and the first parts of the content.

I used Courier New as the navigation and also for the Help and Contact buttons and stuck with Felix Titler for the contact phone number.

Since I have created the right content, a blog title on a Blackboard image I found on the web and altered, I seen there is another Greens with a Blackboard in the same place so I think we are on similar thought processes for our ideas of Greengrocers …shopping lists was the root of my idea as I have one in my house in the kitchen!

Banner

I created the first iteration of the Logo with chilli peppers and a tagline advising:

Delivering Organic Goodness to Hove since 1950.

It was built to a 960 width with 100 height.

The Green in the Greengrocer section was added in green to add a bit of colour to the grey and empathise Green.

The tag line is written in green (R115 G136 B125).

In order to create the site it is required to think about the brand. Taking in the inspiration and family ethos I wanted something quite simple but classic. Although classic it should be striking and not too formal.

I didn’t want black text on the site or in the logo as I felt this can be too hard on a white background and generally too srong if used quite a lot on a page. I decided to try for my initial plans a darkish grey for a little bit of a softer look:

R51 G61 B71

The other sites I mentioned have greens, white, browns and red texts. This made me think of chilli peppers and I wanted to include chilli peppers on the logo somewhere and work the colour branding around these.

I found a picture of some chill peppers online and used the Photoshop colour dropper tool to map the colours for similar text and borders.

I used Photoshop to work out different styles for my headings and body text.

I decided to use Felix Titler for my Header text and Courier New for my body text. I think they work well together and provide both a laid but but clear impression.

Some online research on other grocers in the Hove area finds 6 other businesses, all of which have teleohone numbers but none of them have a website. In this respect the Smiths will be the first to do so in the area and in addition to a web service they will provide an online service.

If I think about home grown family businesses in the food and drinks area I think of Abel and Cole, Black and Greens (chocolate) and Leon (restaurant chain). They are all part of the organic but not luxury market and their websites reflect this by being friendly with a home made asectic but also fresh and modern with an empathsis on the produce and related information such as recipes.

In particular Abel and Cole (http://www.abelandcole.uk). It has a friendly look and feel and in no way cold and corporate. The navigation has the feel of a recipe book as it uses tabs which look like the tabs of a book marking a favorite. There are clear details of who to contact and how to order online as well as stamps of organic approval. It has also links to social media sites such as Facebook and Twitter which allows for interactivity with customers.

The Leon site, although a restaurant rather than a grocers, is inspirational for Smiths site because it asks browsers to “Join the Family” and “Join the Club”. It tells users who their “family members” are and supply photos of them on the site. It really promotes interaction and dispels any notion that it may be a corporate business. The site may not be the most dynamic or best designed but the overall scrap book effect empathises fresh food and healthy and loving living and I think it makes you want to shop there and that’s important.

I have decided to include the following key areas in the Smith’s site:

About: This section will contain information on the history of their grocery store and their staff. It will contain a background and offical stamp of their organic status. Also contained will be photos of the team and their families

Shop: This section will inlude product photographs and descriptions of their organic delivery boxes.

Recipes blog: This section will contain a blog by Lucy Smith, the owner.

Location: Information on where the shop is located and directions.

Stuff we like: Promotion of local business, music, food.

Contact: Contact emails, telephone numbers.

Order: a section where Customers can order.

Help: a help section

Brighton is an attractive holiday resort known for a laid back beach attitude. The Smiths are located in Hove which has a large number of organic shops, deli shops, cafes, trendy bars and even a cheese cave.

A check on the UK Neighbourhood Statistics for Hove shows that it has approx 240,000 residents, a large number of residents in the catchment area for both the online delivery and shop.

By far the highest number of the proportion is the 30-44 age group; 60,827 residents (http:www.neighbourhood.statistics.gov.uk/dissemination/LeadTableView.do…) The second highest age group is the 45-60 age group at approx 40,000 residents.

Although the Smiths will want to cater for all sections of the community these are their key customer. Organically aware customers in a trendy part of town within these age groups who will pay more for quality produce delivered to their door. The website should be fresh, up-to-date and modern to target the key audience.