Alastair Simpson

Soundcloud is an online service allowing musicians, artists, DJs to upload music they have created and share with friends on poplar social networks.  It also allows music lovers to listen to, discover and share new music, again with their friends via social networks.

Landing Page Optimised for Conversion

Soundcloud uses a popular landing page design pattern that gives good detail about the service in a structured way, designed to help convert the different visitor types who will land on this page; 1. I know I want to sign up. 2. I want to make sure this is for me.  3. I’m sceptical.  More detail can be found on this landing page design pattern here, via Joshua Porter and an example of a landing page AB test following this design pattern I ran on Hotfrog a few years ago here.

Step 1 – Give us your Email

The first step requires users to hand over their email address or to signup via facebook.  Some users find handing over personal details prior to using the service a major privacy issue, so including it as the first step may put off some potential customers, especially as their is no message reassuring the user that they will not share this information with third parties.  Soundcloud could have asked for this information once the user has filled out their profile information in step 2, or after they have started using the service  and is further down the path of commitment to using soundcloud, this could help improve conversions.

Step 2 – Create a Profile

Soundcloud uses nice, conversational language to ask for information about the user.  The headline of the page is “Welcome, make yourself comfortable”.  Instead of just asking for a “Profile Picture”, the form label is “We’re sure you have a nice picture, why not upload it”.  This conversational tone, although making the form labels harder to scan as the user has to process more words, helps personalise the service and and should encourage users to fill out their information in more detail.  The last question is important, “What keeps you busy” as this is an important data capture question that will help soundcloud to further personalise the service, content and marketing messages once the user has completed the sign up process.

The Primary action of “Done” is distinguished nicely by size, although research shows that for ease and speed of form completion these should left aligned, with the primary action on the far left of the page.

Step 3 –  People to Follow

Soundcloud uses a visual data capture technique, much like Pinterest, to try and help them personalise the service and display relevant content once the user has completed the sign up process.  They display images and names of popular artists, which a user just needs to click on.  However, Soundcloud display so many, and then continue to reveal more artists as you scroll down that it is quite overwhelming for a user to try to see and pick the musicians that are relevant to them.  I actually only selected one as I found it hard to see musicians I liked.  Unless they have found this data capture method to be successful, they would likely be better served by chunking these questions into sections.  For example, an initial step which asks users to select the types of genres, or a list of 20 popular artists from a broad spectrum of musicians that they like.  In a second step providing a refined list of artists and recommendations based on the answers in step 1.  This would allow them to collect more data and display more relevant content within the dashboard to enable discovery and use of the service.

Conclusion

The Soundcloud sign up is relatively simple, although requesting an email address as the first step and providing an overwhelming number of artists to choose from may affect the sign up form abandonment rate and the amount of data they collect.  The conversational tone used in the form labels is nice and well implemented.

You should follow me on twitter here.

Pinterest, the online pin board where users can share things they like from around the web has enjoyed rapid growth since its launch in 2010.  Right now it is growing faster than Facebook and twitter were at the same time of their lifespan.  The sign up process of any website is crucial to its success or failure and the Pinterest sign up process is super easy, beta invite requirement aside.

Sign up is all about a users motivation to access the service that is behind the form.  If you can get your potential users highly motivated to use your service, then the form should become almost irrelevant.  However, that doesn’t mean designers of web forms should become lazy just because they have a killer service offering.

Third Party Login

Pinterest uses Facebook as a third-party login procedure to sign up.  Given its target market is predominantly in the 18 – 40 age bracket, this is not a barrier, but rather makes the whole sign up process even easier and allows users to easily share pins via the popular social network and increasing its brand awareness.

Visual Feedback

Where Pinterest does require information from the user, they give excellent feedback on each input field with simple, clear messages in green font next to each field.

Progress Tracker

Once the generic account has been created Pinterest now needs to know a little about you to get you started with the service.  The form is easily split into 3 steps,  1.  People, 2. Pinboards, 3. Button.  This gives the user an understanding of how many steps there are to complete rather than leave them guessing.

Data Capture

Rather than dump the user directly into an overwhelming array of pinboards, Pinterest needs to understand the types of things they might be interested in so they can display relevant content and people for them to follow.  Rather than just asking users to list things they like (Who likes filling in a long form?!), Pinterest give them easy to distinguish images and labels to simply select.  This process is visually appealing (like Pinterest itself), takes less time than a traditional form to fill out and crucially Pinterest is more likely to get quality information from this technique to help personalise the service to the user and get them hooked early on.  This data acquisition method mimics the ilike music service sign up process that was acquired by MySpace and used images of bands to easily acquire data from users.

The use of large green ticks as clear visual feedback makes it obvious to users that their selections have been recorded.

Inline Help

Step 2 asks users to create their first pinboards.  Rather than starting with a blank canvass Pinterest suggests standard pinboard topics, which fit with the types of products their target demographic is likely to be interested in.  Pinterest provides inline help, with  a brief description of what pinboards are; “Pinboards are visual collections of things you love”, and some inspiration for suggested pinboard ideas on the right hand side of the form.  These inline explanations and hints ensure that a new user is not left guessing about what they need to do at this step and keeps them moving through the form with ease.

This is progressive disclosure (“only providing enough detail as needed at the moment and providing more when the context necessitates it”  Joshua Porter) at work.   Users can at this point create new pinboards if they like, but they do not have to which is crucial in not overwhelming the user at this early stage of the sign up process and ensures new users do not have a blank profile after signing up to the service (Another key reason many social apps fail).  Once a user is confident using the service and is hooked, they are more likely to start creating and pinning to new pinboards.

Primary Actions

The primary action on this section of the form is “Create”, this is visually distinguished from the secondary action “Add” using colour and size.  This leaves the user in no doubt as to how to progress through the form quickly.

Appropriate Use of Video

At the last stage Pinterest requires users to add the Pinterest bookmarklet to your browser.  This is potentially tricky, but they include a short video explanation, tailored to the browser you are using with clearly numbered steps to help users complete the installation.

Conclusion

Pinterest successfully uses best practise sign up and web form design elements to make the process easy for new users.  Clever data capture techniques up front allow them to personalise content once users have completed the sign up process.

You should follow me on twitter

At the end of a particularly hard spin class, sweating like crazy I realised that the instructor had just “persuaded” or “sold” me and my ability to complete the class.  I was planning to just coast along and get a light sweat on.  Yet here I was gasping for air, feeling light headed, needing a lie down and having completed “The hardest class ever” as promised by our instructor.  So how did he do it and how have gym instructors become sales professionals perfecting the art of persuasion rather than army drill sergeants barking orders at participants?

This post will use a format of first describing the quote from the class instructor, and then comparing that to a sales technique or the art of persuasion.

Instructor

“We will be doing 8 tracks today.  The first will be 1 minute at 95% to 100% with 6 minutes recovery at 80%, then 2 minutes on with 5 minutes recovery and so on”.

Sales

Setting an agenda at the start of a sales meeting gives the client an expectation of what will be delivered during the pitch.  It serves as a map, so at anytime if the client gets lost or loses concentration they can quickly understand where they are up to in the pitch.

Instructor

“Who is here to get fitter? Stronger? Lose some weight?

Sales

Sales meetings usually start with questions unless you are in an agency pitch setting.  Why?  So you can understand the needs of your customer and then frame the features and  benefits of your product / service to those needs.  Information is power and can be used as ammunition to help close a sale.

Instructor

“This will be the hardest class you have ever done”

Sales

A confident sales rep should always take a strong position at the start of a meeting/pitch.  “By the end of today’s meeting you will be convinced that advertising on our website will become a critical part of marketing your business”.  Even if the client disagrees, this is a good thing as any objections here, or during the meeting are chances to counter scepticism and further convince them of your point.  Objections show that the client is interested and listening, both good signs.

Instructor

“This class took 5 years to develop by the Australian Institute of Sport  to help train Olympians”. 

Sales

Stating how long your company has been in business or any industry associations helps add credibility to your pitch and helps gain trust with your customer.

Instructor

“This class is scientifically proven to be the best aerobic workout you can get in 40minutes”.

Sales

A feature of the class is that it takes 45 minutes to complete (40 minutes working plus 5 minutes warm up and down), therefore allowing office workers to fit it into a standard lunch break.  However, by telling the class it is scientifically proven to be the best aerobic workout you can get in 40 minutes is turning that feature into a tangible benefit for the class.  Customers buy the benefits of a product, not the features.

Instructor

Instructor: “2 legs down, 3 to go.  Are you with me?”

Class: “Yes”

Sales

Gaining positive reinforcement by asking questions during a pitch is essential.  Asking questions like, “Can you see how this would benefit your company?” and getting a positive answer of “Yes” psychologically helps the client sell themself into the solution.  This helps make closing the sale that much easier.

Instructor

“Other classes full of people just like you wanted to give up at this point, but they didn’t, so don’t you give up on me”

Sales

Using testimonials helps leverage social influence and creates a comforting feeling with the client that other people just like them are already using your product or have gone through the same feelings during the buying process.

Instructor

“Those in the front that wanted to get fitter, those in the back who wanted to lose weight, those in the middle who wanted to get stronger, I am with you!”

Sales

When pitching to a group of people, a good sales person will always try to appeal to as many people in the room as possible.  Some clients may be visual and need diagrams or images to help convince them of your message.  Some may be lingual and need to be convinced with technical language.  Some may be kinaesthetic and need to touch a product or see a practical demonstration.

Instructor

“Someone is on your wheel, if you don’t push harder they will pass you”

Sales

An implication question (Part of the popular SPIN sales technique), indicating the negative impacts of not purchasing the product, can put doubt in the customers and helps convince them to buy.

Instructor

“I’m with you, we are in the closing straight, give it everything you have got”

Sales

By reassuring the client that you are in this together, that it’s a partnership and you will be with them at every step is another excellent way to close a sale.

Conclusion

I am not sure where along the line gym instructors went from barking orders to work harder, to actually selling and mastering the art of persuasion.  But I am convinced that effectively selling the benefits of a workout is a far more effective way of getting people to work harder than just barking orders at them.  An excellent book for those interested in finding out more about the art of persuasion isInfluence by Robert Cialdini.

You should follow me on twitter here

Loads has been written about how to use twitter for marketing and generating new customers using social media, principally Twitter and Facebook.  Apparently its all about “customer engagement” and fancy business words like that.   Some companies use it to field customer service enquiries, like NEC Australia.  But what about customer acquisition?  And how can your average small business owner make use of it?  How do they use twitter effectively whilst trying to run their own business day-to-day?

VamoSpanish – Case Study

Having recently taken some time out to travel overseas, I tweeted asking which suburb was best to stay in Buenos Aires, “Palermo or San Telmo”.  I got a couple of responses and a twitter user called VamoSpanish started to follow me.  They were based in Buenos Aires and were a Spanish school.

As I intended to learn Spanish, I sent them a message about classes, a dialogue followed and I ended up becoming a customer of theirs.  Having now spoken to them, they confirmed that they have a standard set of location-based searches set up for “Buenos Aires” and surrounding suburbs, along with “Spanish classes” and variations.  They check this once a day or as and when they can, as they are busy and do not have a dedicated marketing person, let alone social media person, it’s just a pet project from interested staff members.

Yet, in this instance it was a very effective strategy and resulted in a new client, who spent AU$400, at a very low-cost to them.

Setting up location-based searches or keyword searches is extremely easy when using a twitter client like tweetdeck and is extremely easy to scan and see if there are any relevant results in just a few minutes each day.

Improvements

Although this interaction resulted in a new customer for VamoSpanish, they could have actually improved this interaction by sending me a short response to my original question of where to stay in Buenos Aires; “Palermo or San Telmo”.  This would have removed the need for me to act and make the first contact with them and would have gained my trust by answering my question impartially with no shameless promotion, making me more likely to become a customer when I arrived in Buenos Aires.

For many marketing professionals this post may seem “obvious”, but for many small business owners who do not have much online experience and who are trying to work out how they can make use of the social media world, it may not be.

Conclusion

Social media platforms are not for everyone and it may not be worthwhile investing too much energy into them and losing focus on ensuring you actually provide a quality service to your customers.  However, it can be used in very simple, time efficient ways by small and large businesses alike in very different ways to effectively communicate with customers.

You should follow me on twitter here

I am currently away taking some time out traveling, which has given me some great time to read.  A great book, The Myths of Innovation which I read some time ago, is now out in paperback with 4 new chapters – It’s gotten fantastic reviews for being fun, inspiring and a great read.  You have to check it out if you work with ideas or hope to someday.

You can get 2 free chapters here

Or just go and buy the whole thing here, you won´t regret it!

You can follow me on twitter.

Web forms have come a long way over the last few years, from bland and lifeless labels with input fields barely better than paper forms, to interactive and beautifully designed experiences like huffduffer.  New technologies like inline validation have really helped web forms become far more intuitive and easier to use, providing timely and helpful feedback to users as they move through a form.

Inline validation, when used correctly provides immediate feedback next to the input field showing that the field has been filled out correctly or incorrectly, without the need to press submit and waiting for the error message.  The example below is from audible, having finished typing in the username field and tabbing to the password field, I was informed that my username had already been taken allowing me to immediately select an alternative.  This saves me time and prevents me getting to the end of the form, pressing submit and only then finding out the username was already taken.

I am about to go overseas and signed up for a new credit card that provided zero fees when using it abroad, the Wizard Clear Advantage card.  The sign up form used inline validation to verify my password.  However, as soon as I tabbed into the field I was informed that my password “was too short”.  Not surprising seeing as I hadn’t started typing yet!

Using new technologies to help improve the user experience on web forms is essential.  However, you have to be very careful to ensure that the implementation is spot on and does not annoy and confuse users with bad and untimely error messages.

You can follow me on twitter

I have been busily packing up my life into boxes in preparation for placing them into storage before I head overseas for a few months sabbatical.  Inevitably, I packed something I now needed, the manual to the washing machine so I could check how to drain it properly.  I had no clue which of the 20 or so sealed boxes it was in and certainly didn’t want to open them all to find it.

I turned to Google to try to find the manual, with no success.  I then checked the website for NEC, the brand of washing machine I own and discovered that they no longer made washing machines.  The signs were not looking good.  In the footer of the site, I noticed they had prominent links to their twitter, youtube and flickr pages.  So, I decided to turn to twitter, but did not hold out much hope.

So, I tweeted them the below message at 10:27am yesterday.

They then replied within 2 minutes with the following message.

So, I sent them the model number, as per the below.

And amazingly they came back to me within 10 minutes and had even posted the manual in pdf format to their website.

So, I thanked them with a shout out on twitter giving them a little bit of free PR and was a very happy customer indeed.

The experience was almost instant, approximately 10 minutes from first to last tweet, and was completely seamless.  Email, a contact form on a website or phone could not have bettered this excellent customer experience.

NEC do not even manufacture washing machines anymore.  So why give such good customer service for a discontinued product?  They obviously understand how important exceptional customer service can be in engaging consumers and reinforcing their brand image within the marketplace.  Whoever is leading the marketing/customer service (Social media seems to fall into different departments at various companies) team at NEC certainly seems to be doing a great job of utilising all possible channels to engage and manage customer experience.  This is essential in todays changing digital world, where customers are turning to more and more channels of communication to engage with companies. NEC are certainly embracing this change and using it to their advantage, rather than ignoring it like many brands.

In the future, if I am faced between two equivalent products, NEC and another brand, I know where I will be spending my money based solely on this exceptional experience.

You should follow me on twitter here

The BBC have been gradually upgrading the design and visual interaction of their pages over the last 12 months.  The latest upgrade is very subtle but is a great improvement to the design and usability of the pages.

Within a deep page of the BBC site if you want to get to the homepage or a high level category, you can access these using the horizontal navigation bar pictured at the top of the page in black below.

However, when you hover over the categories the tab is highlighted in grey to visually indicate you can click it.  This is very subtle but a really nice improvement to the design and interaction on the site.

Likewise, on the homepage you have been able to personalise the news modules that appear to suit your preferences for some time.  However, unless you hovered over the header of a particular module (Sport for example) and noticed the 4 way arrow cursor, you would never really know about this great feature.

To help draw attention to this, the BBC have added a highlighted box around the area on hover.  This helps draw your attention to it as you scroll around the page and will give you a better visual cue that it can be dragged and dropped to a different position.  Again subtle, but a really big improvement to help aid the interaction and draw attention to the feature.

Conclusion

Subtle design cues combined with an excellent implementation of the interaction design can really help deliver an exceptional user experience.

You should follow me on twitter here

Summary

When designing a web form or landing page, there are usually different paths a user can take through the form or from the landing page.  Usually the typical path a user wants to achieve through a form is completion, so primary actions on these pages are things like “next”, “save” or “continue”.  Secondary actions are things like “Back”.  From a landing page the user probably wants to “Add to cart” or “Buy Now” as the primary action.  Visually distinguishing primary actions to make them obvious should now be common practise thanks to excellent work by Luke Wrobleski in web form design and commonly used design patterns, but why do so many websites continue to get it wrong?

Primary actions on ecommerce sites

I recently saw Paul Robinson, the Marketing and Communications Manager at the ABC present at webtrends.  He talked about some of the AB and multi-variant testing they had undertaken to optimise their landing / product pages on the ABC ecommerce shopping site.  One of the best increases in CTR came from changing the design of the page so that “Buy Now” was the only button on the page.  Other secondary actions, “Add to wishlist” and “Tell a friend”, were turned into links, screenshot below.  This yielded a 10% increase in the click through rate (CTR) on the Buy Now button.  Pretty impressive for such a small change and shows the importance of AB Testing, as well as visually distinguishing the primary action.

As I started to think about my experiences on the web I realised that many sites break this design pattern and make users unnecessarily think about the primary actions on a page.

Don’t make me think!

Compare the above example to my online bank.  When I am submitting a payment this is the screen I am presented with on my iphone and on the standard desktop version.

Both buttons are identical and I need to read and parse the information before I can confirm which one to click.  I am sure many users have accidentally clicked “Back” or “Cancel” and either been frustrated with their experience, or worse missed payments and been charged a late payment fee if they didn’t realise they had made a mistake.

Gmail is the same, the only indication of the primary action is the bolder text on the button, which I do not think is enough.

It certainly is not hard to visually distinguish between primary and secondary actions using either colour, or by using buttons and text links as the online business directory hotfrog have done below (Note; Author works for Catch who publish HotFrog) .

I suspect the only reason sites are designed with two identical looking buttons is so they are symmetrical and look visually attractive on the page.  However, it just creates potential problems for users by putting doubt in their mind over which button to click.

Conclusion

Make it obvious and easy for users to know where to go next and don’t make them process unnecessary information.  Remove any ambiguity from your web pages for users by visually distinguishing primary and secondary actions.  It may not only lead to increased CTR on landing pages, but also higher completion rates in web forms and shopping cart processes, as well as happier users.

You should follow me on twitter here

Summary

Giving easy and obvious feedback to users to tell them if a task they have been completing on your site has been completed, is extremely easy by following simple design patterns.  Yet so many websites continue to fail and keep users asking, “am I done yet?”

Design Pattern 1: Use colour

Colours convey strong and obvious meanings without the need to read or even scan copy.  Green conveys go, success, or completed.  Yellow conveys a warning that you may need to check something.  Red, means that something is seriously wrong!

Even though this is quite an obvious convention, some sites insist on breaking it, making users process and parse unnecessary information and question whether or not they have actually completed a task.  Check out the screenshot below from Australia’s most popular ticketing website, ticketek. Having just updated my personal details using a standard web form and hitting save, the page reloaded with a stark red message.  Instinctively I scrolled and scanned the page to see what I had done wrong, as I associated red with an error so didn’t bother reading the copy, I just wanted to find out which part of the form I had done wrong.  It wasn’t until I actually read the message I realised that this was their somehwat deceiving confirmation message.

Design Pattern 2: Use an icon

If a picture can say a 1000 words, then so can a well used icon.  If a user has successfully completed a task, a simple tick icon will make it immediately obvious to them.  Similarly, if they have done something wrong, a red cross or yellow triangle warning icon will help draw their attention to any copy around this that they may need to read.

Linkedin does this really well, without even reading the copy I am given excellent visual feedback using icons and colour, about my actions and immediately understand whether or not I need to check the information I have entered.

Design Pattern 3: Send means send

Don’t add in unnecessary and unexpected steps to work flows, which break obvious conventions.  Once a user has filled out a form and hits send, then unless they have unwittingly not filled out part of the form, the message should send.  This may seem very obvious, but sites still add in confusing and unexpected actions.

This example from the largest home loan lender in the UK, Nationwide is extremely poor and will definitely be causing them problems in their customer service department due to unsent messages and subsequent angry customers.  Within the secure account area of their website, I filled out a contact form and hit send.  A completely new page loaded and I logged out.  I didn’t receive any response to my message for 2 weeks, so followed up with another (very disgruntled) message.  This time when I hit send I read the confirmation page and rather than actually sending my message, the page offered “useful articles which may help answer my query”.  But if they didn’t help then hit “confirm” (Again!!) to actually send the message.

Offering FAQs and resources to help customers and reduce the volume of emails into customer service is fine.  But this implementation is extremely poor and will only increase the number of annoyed customers whose original message was not actually sent.

Conclusion

Follow simple design patterns and don’t break with obvious conventions when designing your site.  Provide clear and obvious visual  feedback to users on their actions and do not leave them questioning if they are done.

You should follow me on twitter