The online ramblings of Dylan Bland

This week I’ve been doing some work with the team over at Mighty Ape to improve some of the site’s key conversion points.

The exercise really highlighted to me how similar building a web site is to building an America’s Cup yacht.

I’m serious.

A web site is like a yacht. It gets designed, built and launched. All things going to plan it does what you designed it to do.

And then the tweaking begins. The optimization.

Teams in the America’s Cup spend hundreds (or more?) of hours testing different sails, different rigs, different bulps and different combinations of all of those things until they settle on a combination that might go a couple of seconds faster round the course than the boat you originally launched.

And so it is with web design.

If you change the copy on this page how many people click through to this page? If you change the colour of this text how many people click this button? If you change the size of this button how many more people click it? And so it goes on.

Just as it is on a yacht you may only milk an extra 2 or 3% but over the course of a year that may add up to a significant increase in people joining, people buying, people making an email enquiry or whatever it is you want people to be doing on your site.

Tweak the boat. Tweak the boat…

A little earlier this year Shane, Simon and I set aside some time to design and build a mobile version of Mighty Ape which launched yesterday.

If you have a web-enabled mobile phone you can check it out at m.mightyape.co.nz.

Building a mobile site was no different from building a regular web site except that you must consider that a) people spend less time on mobile sites, b) people load fewer pages on mobile sites, and c) you have a much smaller canvas to work with.

These constraints forced us to be crystal clear about how we wanted customers to use the site (not a bad thing!). Building every possible feature and page just “because we can” wasn’t an option. We settled on two key objectives: 1) the ability to place orders, and 2) news and releases lists to keep customers informed and to encourage daily visits. We snuck in a few extra things such as checking the delivery status of past orders, but these were secondary objectives that didn’t make it out of the footer.

To achieve the objective of daily visits you’ll find “latest news” “recent releases” and “coming soon” on the home page. This content will change several times per day and is driven directly from the main MA site. To achieve the objective of accepting online orders we obviously added the shopping trolley/cart and the ability to search the database of over 1 million products. We deliberately left off browsing the category tree as it doesn’t work with the whole idea of respecting people’s time and data constraints as described above.

Anyway I’m pleased with how it’s turned out and I’ve already placed my first order from my mobile. If you’re like me and have a short attention span you may even prefer the mobile site to the main site! Visit m.mightyape.co.nz and try it for yourself…all feedback (good or bad) is welcome!

PS: the above may seem all terribly obvious but you’d be surprised how many people I meet that approach building a web site by jumping straight into Photoshop or whatever without giving any thought to what they’re actually trying to achieve. Good web design is so much more than writing clean code or making stuff look pretty!

Last month while making a handful of improvements to nzflatmates I thought I’d play around with the prices we charge for GOLD Membership in an attempt to increase our revenues. I learned a valuable (literally) lesson which I thought I’d share.

nzflatmates makes over 90% of its revenue from our members upgrading to GOLD Membership, a highly effective upgrade that dramatically increases the usefulness of the site for flat hunters. Three subscription periods are available: one week, one month and one year.

For as long as I care to remember the prices to upgrade have been $9.95 for a week, $19.95 for a month and $49.95 for a year. There was no real science behind it and I just ran with what felt about right at the time.

Anyway, it occurred to me that our $9.95/week option was eating up our $19.95/month option because it was priced too cheap. If a member upgraded for a week at $9.95 and was unsuccessful finding a flat, he or she could simply upgrade for another week at $9.95 and be no worse off. Given that most people (I should really do some proper analysis) can find a flat within a week or two, at $9.95 it’s worth the risk.

The solution? Bump the price up from $9.95/week to $14.95/week…leave the $19.95/month option unchanged. All of a sudden the $14.95/week option makes the $19.95/month option appear like great value (which it is) and serves the primary purpose of pushing members up to a one month subscription period.

The result? Before we made this change 65% of members opted for the one week upgrade and 30% opted for the one month upgrade. Since we’ve made the change, members opting for the one week upgrade has dropped to just 25% and members opting for the one month upgrade has risen to 70%. Despite the small increase in price of our cheapest subscription period (one week) there hasn’t been significant drop in the total number of people upgrading (I’m not smart enough to work this out properly…taking into consideration natural growth, seasonal effects etc), but most importantly revenue has increased by ~45%. It’s also worth noting that this is another one of those changes where the effort/reward ratio is massive. It took seconds (OK, maybe minutes) to change the prices and it would take days/weeks/months to redesign the site, increase listings or make one of any other possible changes that stood a change of achieving a similar result.

Sadly, maths was never my strong point and I’ve learned this valuable lesson the hard way, leaving quite a lot of money on the table in the process – ouch. If you’re in a similar line of business to me, maybe it’s time to take a look at your own prices and avoid making the same mistake!

Last month I felt motivated to A/B test a key conversion point on nzflatmates in an attempt to introduce some science into how we go about designing pages. This was our first attempt at an A/B test so I thought I’d share what we learned…

For those who don’t know, an A/B test (on the web at least) is when you serve two different versions of the same page to find out which one performs better at achieving the goal of the page. i.e. 50% of your users get page A and the other 50% get page B.

In the case of nzflatmates the key conversion page on the site is the “upgrade to GOLD Membership” page where members are invited to upgrade their free membership to a GOLD Membership for a small fee. This is how nzflatmates generates over 90% of its revenue. How well this page performs can be measured by how many people upgrade to GOLD.

Page A

Page B

We served the two different versions of the page by serving page A to members with an even number Member Number and page B to members with an odd number Member Number. The result? Page B is generating 11% more upgrades than page A. Switching every member over to page B will add a few extra dollars to the site’s bottom line each year, for really not a lot of effort.

So if you’re in the business of building or running web sites I strongly recommend giving A/B testing a go! It can be used to test all sorts of pages…sign up pages, upgrade pages, product pages with “add to cart”, checkouts etc etc. Basically any page where you have a clear action that you want the user to perform.

Earlier this year I reported that Zillion members who use Slingshot as their ISP were able to read and access other people’s private information on Zillion, including private messages. Slingshot accepted responsibility for the problem, claiming “browsing and authentication issues” (probably due to the misconfiguration of a proxy appliance) and the issue was eventually resolved.

So I was therefore shocked today to read this story on the nzherald…

“Slingshot customers trying to use their own accounts were directed into random email, Trade Me, Facebook and Bebo pages.”

“User Michelle Smith also saw another person’s emails through Facebook.”

“On the Cre8d Design blog, Rachel wrote: “This afternoon I tried logging into Gmail as I usually do to check my email and discovered that I was logged into someone else’s account.”

“Mr Andrew’s account became public and someone who was signed in under his name downloaded pornography to his page.”

“Another user, Roxanne, found her profile showing National party leader John Key as a “friend”.

Sound familiar? Imagine what it would feel like to know someone else was reading your email, your Facebook messages etc. If you’re a Slingshot customer…that’s exactly what’s happening.

How do Slingshot get away with this? It’s the third time (that I’m aware of…probably more) this very serious problem has occurred. What’s to stop it happening again?

If I were a Slingshot customer I’d be switching ISPs immediately. No question.

Related posts

• Slingshot/CallPlus serve up random cached pages

Having reactivated my Facebook membership last month I’m sorry to say that Facebook is back on my list of daily distractions. It’s fun, although the actual benefits to my life (let alone my productivity) are marginal at best. Anyway, today I’ve spent a few minutes playing around with the new design and here are my thoughts…

What I like:

• When you’re viewing other people’s Profile, the new Profile page is great. Wall content (the stuff that changes) is now up the top of the page. Inputing content to other people’s Wall is now a lot easier too as form is at the very top.
• Adding filters to the Wall is useful (I think the Facebook team use Digg!)
• Wider page width works better on bigger monitors and I’m glad the design remains fixed width.
• Search box is now in the header where you expect it.
• Bigger photos make sense.
• When viewing your own Profile, you can finally edit your Profile information from this page. Previously you had to navigate your way to “Account” to do this which was clumsy.

What I don’t like:

• Now that Wall content seems to include what was previously “Mini Feeds”, when the fancy new filter is set to “All posts” (as it is by default) the design feels difficult to read. Previously Wall items were separated by a small version of people’s Profile photos and a horizontal line which made scanning for new posts easy. Now that it includes a mix of photos, icons and different background colours…it’s hard for your eye to separate where one post ends and the next post begins.
• The little yellow help boxes everywhere are annoying and need a “close” option. Hopefully this will come sooner rather than later.
• The huge “what are you doing now” form at the top of your own Profile feels OTT to me. Perhaps it’s a shot at Twitter?
• On the same note…I notice a lot of the forms are now expanded by default where as previously you had to click to view them. I like the old way better.
• I miss the drop down box on the “Friends” button where you could jump straight to “status updated” “recently updated” “recently added”

Overall though, I think it’s pretty good and it’s clear to me that Facebook has put a lot of thought into giving more weighting to the elements of the page people are using most often. I also like the fact that Facebook hasn’t done a MySpace and has so far resisted the temptation to let people use HTML and other methods of visual customisation on their Profiles.

When working on my own sites I’ve found that it’s often not until after the design has left Photoshop and I’ve *used* the site extensively that I get a feel for what works and what doesn’t. We seldom get it right first time (or the second or third or fourth for that matter!) and evolution is key. It’s fun to see much bigger sites like Facebook follow a similar process.

If you use Facebook I’d love to hear your thoughts. So leave a comment!

There was a great post earlier this week on Signal vs. Noise about how not to apply for a job.

It’s got me thinking about the importance of attention to detail and using terminology correctly and consistently throughout your web site.

To use some examples from Zillion, an “auction” is how you sell an “item” and an “item” is what you actually sell. You can therefore “win an auction” but you eventually “pay for an item”.

Sellers are not “listers” and pictures are not “photos”. A Member Name (not “member name” or “username”) is how you’re identified on the site and what you use to sign in (not “login”).

Zillion is not “zillion” and happysheep is not “Happysheep”. nzflatmates is certainly not “NZ Flatmates”.

In my opinion, getting this wrong is right up there with misspelling someone’s name, so as a team we try our very best to remember to get it right.

My Dad used to always say to me “good manners costs you nothing” and this is no different. Attention to detail costs you nothing either. Microsoft would never refer to themselves as “Micro soft” just as eBay wouldn’t refer to themselves as “Ebay”.

Just because you’re small, why treat yourself and your brand with any less respect?

And before you ask, yes I’m a bit weird and at times I can be very difficult to work with…but I’m lucky that I’m by no means the only person in the team who shares these values!

Today I’m going to offer up yet more evidence that when it comes to web design, keeping things simple is smart, especially when you’re small.

For the purpose of improving our communication with our members, we made the decision to add a blog to both Zillion and happysheep. The happysheep blog is live. The Zillion blog isn’t.

Why?

While the fact that happysheep is built using newer technologies (e.g. Zend Framework) the difference in output can largely be put down to the fact Zillion is an over designed site that requires a graphic designer to get stuck into Adobe Photoshop every time we want to roll out a new feature. When your designer is tied up on more pressing projects (as ours is at the moment) this is really annoying.

We’ve learned this the hard way. If you’re working in a small team I highly recommend that you take the happysheep “less is more” approach to web design and ask your designer to “design” your site in such a way that a reasonably careful and creative developer can take the design and adapt and apply it to future page designs. This means saying “no” to lots of icons, images for headings, flexi width designs, gradients and the overuse of images in general.

The happysheep blog actually took less than one day to put together. When you’re a small team with a limited budget, I think this design approach makes a lot of sense.

We have a growing number of projects on the go, so we’re looking for a talented Auckland-based designer to join our team and spread his or her talents across our network of sites.

We’re looking for someone who:

• Lives and breaths the Internet
• Has an eye for high-quality design
• Is great at picking colours and fonts
• Is a Photoshop wizard (no html or CSS experience needed)
• Who understands and appreciates web site usability

We can offer work across all our sites (happysheep, Zillion, nzflatmates, Gameplanet Store) in either a full time, part time or contract capacity. We’re prepared to be flexible for the right person!

While previous experience is ideal, we’re also happy to work with someone young and naturally talented who’s keen to learn.

If this sounds like you, please get in touch (my email address is on the right) and include some examples of your work, and a list of web sites you like, and why.

We’re starting to think New Zealand lacks talented web people, please prove us wrong…

Earlier this year Trade Me did an overhaul of Travelbug to incorporate a new “last minute deals” feature, and at the same time fixed some small usability glitches that appeared in version 1.0.

I’d really like to see Travelbug succeed, as chances are I will someday use the site to research and book a holiday, so in this review I’ll offer up my thoughts on how I think things could be made even better.

First up I’d like to see a better use of the reviews. To me, this is what will encourage me to choose Travelbug over competitors such as wotif.com and ratestogo.com both of which have a good range of discounted New Zealand accommodation despite being based offshore. Easy ways to elevate the status of the reviews would be to include “sort by most reviewed” and “sort by highest rated” in the sort drop downs. Currently the site only offers “sort by highest price” “sort by lowest price” “sort by name” and “sort by Bugrank” (appears to be a mystery value and not related to reviews).

I’d also like to see stronger invitations for casual browsers of the site to place reviews. Unfortunately I’ve not yet booked through the site, so I’m not sure if Travelbug emails to invite you to add a review once your stay is over. I hope it does. But they could still actively promote placing reviews, and even provide incentives for good quality write ups. This will add up over time to make the site a whole lot more useful as a research tool.

Now I’ll move onto the more intense and geeky part of this review and offer up an alternative to the current layout that should offer significant usability benefits.

When I go to the Internet to book accommodation, there are three key pieces of information that I need to tell the site so that it can offer up the right places for me to stay. When, where and how much? For example, April 3 – April 7, Wellington and $150-$200 per night. Providing this information should allow the site to generate a list of accommodation options, from which I should be able to sort the list by things such as “most reviewed” “highest price” etc as described above.

I believe the current design is confusing in the way that it goes about getting this information. If you look at the screenshot you’ll notice that the date selector and the region selector are both way off to the left, thus appearing to have no influence over the list of results. The fancy price selector is where it should be, in the middle of the page, along with some less-than-useful filters such as “hotels” “motels” “serviced apartments” etc.

Trade Me’s current design

Shane and I spent a bit of time at work today reorganising the page to try and fix some of the problems I’ve pointed out in this review. This is a quick hack and certainly no work of art, but I think that the changes are effective. First up, the filters (when, where and how much) are grouped together directly above the results. This makes it easier for the user to understand what they’re looking at, while at the same time making it easier to apply new filters. We’ve also added in “most reviewed” to the sort drop down so it’s nice and easy to find places with lots of reviews (handy if you have no idea where to stay). We’ve also included a “star rating” and a “review count” in a small font beside the listing title to highlight the listings with reviews.

Our redesign

Finally, we added counts to the “Last minute deals” tab above the filter box. On Travelbug, “Last minute deals” offers discounts on accommodation if you book a stay within the next 28 days. Without the counts, it becomes misleading if you’re searching for dates way into the future, as it’s impossible for there to be any last minute deals on dates further than 28 days away. Adding a count, even if it just sits at zero, sets the right expectation for the user and doesn’t provoke a click that’s just going to take them to an empty page.

As I said before, the purpose of this review was not to criticize Trade Me’s efforts, rather it was to offer up some possible alternatives they may not have considered. But hey, this is just one person’s opinion and Trade Me may well disagree with me!

If you’re in the difficult business of web design and laying out pages, I hope that some of the issues I’ve discussed prove useful to you. We’ve learned a lot about this stuff the hard way, and hopefully some day soon we’ll have the time to fix some of the glaring usability problems in our own sites!