Nice Touchpoints Only. Thank you

After helping her with the first barrier to browsing the website (which is having to select your suburb so that accurate prices can be displayed) she was confused about where to go to find products.

There are three main pathways to display products, browsing aisles, searching for items, and using the ‘quick list’.

I found the search process particularly frustrating because before seeing a list of matching products, you have to choose a single ’shelf’ that products are categorised by, which seems to me a completely unnecessary step. Why not just show a unique list of all products that match the search term?

So I sat down and spent some time sketching out a few rough ideas then made the created the following concept for a search results page.

This concept hints at a few significant changes from the current design.

Search focused

Search is promoted as the main method of finding products. Instead of navigating down a hierarchy of departments, aisles, and shelf as the current website requires (or any other categorisation), this concept requires people to use keywords to search for matching products.

Dynamic filtering

This may lead to a wider range of items in the search results and so aisle categorisations can then be used as a way to filter search results.

Current order not displayed

The current design shows a side bar with the current order. As the size of the order increases only a portion of the current order is shown at any single time. Instead of trying to fit this onto the current page I’ve opted to having a dedicated page for viewing and modifying the contents of the current order.

Cross sell

An experience that the current website fails to capture from shopping in-store is the ability to be exposed to store specials are you’re browsing the aisles. The current website does include some banner advertising to promote specific products but they are limited. Instead this concept suggests cross-sell by dynamically displaying featured products from nearby product families of the current search result. In the sample concept someone has searched for hummus, but a special for aioli is also shown.

Overall this is only a quick concept, but likely misses some key business or technological challenges or objectives that come with supermarket e-commerce, but it was something that I had some fun with this afternoon, I think that a supermarket website would be a fun project to be involved with!

What are your frustrations with supermarket websites? What ideas would you like to see supermarkets implement online?

Yesterday I watched my friend’s mum who wanted to check some prices for products on the Woolworths/Countdown website.

After helping her with the first barrier to browsing the website (which is having to select your suburb so that accurate prices can be displayed) she was confused about where to go to find products.

There are three main pathways to display products, browsing aisles, searching for items, and using the ‘quick list’.

So I sat down and spent some time sketching out a few rough ideas then made the created a concept for a search results page which hints at a few significant changes from the current design…

Download the concept (1 page, PDF, 578 KB) or see some highlights below.

Search focused

Dynamic filtering

This may lead to a wider range of items in the search results and so aisle categorisations can then be used as a way to filter search results.

Current order details not displayed

Cross sell

What are your frustrations with supermarket websites? What ideas would you like to see supermarkets implement online?

Redesigning Wikipedia #1

Mathew Sanders — Tue, 01 Sep 2009 03:09:04 +0000

A common theme in Wikimania 2009 was concern that participation in Wikipedia is plateaued, or perhaps even decreasing. Andrew Lih gave a great talk that Wikipedia’s early phenomenal growth was probably a ‘catching up’ phase, and now growth will continue at a slower, but steady rate.

Phew!

But even so, it’s recognised that with only a small percentage of people contributing changes, that there could be improvements made to encourage people to edit. Many people are not even aware that Wikipedia *can* be edited. I don’t think that these problems with participation are only interface problems, I think it lies deeper in the culture of how newbie editors are integrated into the Wikipedia community, and the policy and procedure that people encounter when they start to become involved with Wikipedia.

In anycase, I couldn’t help but quickly mock up some wireframes that demonstrate some alternative ideas to the Wikimania article page.

Here is a quick screenshot of a current Wikipedia article page, followed by my wireframe, you can also download a more detailed PDF of the wireframes.

Wikipedia article page design, now & proposed changes…

The banner

One of the first things that Philippe asked me was: are you familiar with our [Wikimedia's] sites? And I replied — sure I use Wikipedia everyday. What completely slipped my mind was that there is actually a family of Wikimedia project websites, with Wikipedia being just one (albeit a very important one).

With this in mind I’ve added a Wikimedia family navigation at the banner of the page that joins the family of sites together and helps promote the range of Wikimedia projects. At this same level is a search field which ideally would be a entry point into a federated search of all Wikimedia project content with filters to help people narrow down results to exactly what they are looking for. (I would loooove to get my teeth into designing those pages!)

Quite a lot of navigation is condensed, opting for mega-menus to show pathways to different special pages on Wikipedia under headings Find Content, Contribute, and Tools.

Those famous tabs

The most contentious change is a move away from the all-familiar, even emblematic read/edit tabs that appear along the top of each page. Instead these have been moved to action boxes on the left side of the page where they are presented with additional context (because what does discuss really mean?) and where a local navigation for sections within the article would also be displayed.

Quick edits

Instead of navigating away to a brand new page (which for many people I image can be quite a shock) a lightbox allows for a quick edit of a section of content. Hopefully this lowers the barrier to editing by making it seem like they are essentially still on a familiar page – and eases people into the process of learning the wiki markup.

Download PDF (2 pages, 604 KB)

Wikimania 2009 and where have all the intellectuals gone?

Wikimania 2009 and where have all the intellectuals gone?

Mathew Sanders — Mon, 31 Aug 2009 19:00:06 +0000

Wikimania 2009

Serendipity at it’s best, I went to Wikimania last week. I had no idea it was being held in Buenos Aires this year, but as fortune has it, we’re both in the same city at the same time. Wikipedia is also at a stage of plateaued growth and entering stages of redesign to improve usability & participation, and also strategy development.

As an editor, I’m a Wikipedia novice, I’ve made only a handful of edits in the past few years, and to be honest, I felt like an outsider in an already well established community. However, serendipity working again, I got the chance to meet and talk over lunch and drinks with Philippe Beaudette, newly appointed facilitator of strategic planning at Wikimedia, and I’ve become interested in being more involved in this community, perhaps in areas of strategy, or design, or both.

Something that fascinates me is what appears to be collaboration happening at every level of the organisation. For instance, even in the development of a strategy, participation is open to anyone — anyone that is who can understand the bureaucracy required to be involved. It will be fascinating, hopefully to participate but even as an observer, to see how collaboration works at this level.

The quality of the talks at Wikimania was mixed. There were some great speakers and topics, and some not so great. This is the first international conference I’ve attended, and in New Zealand I’ve only been exposed to a limited number of speakers at local UPA events (which are generally very high quality) and some bigger name speakers like danah boyd and Lou Carbone (both who left lasting impressions) and perhaps I had unrealistic expectations.

Where have all the intellectuals gone?

I’ve been reading Jorge Luis Borges recently, and in a very difficult conversation with Philippe (difficult only because it was the first serious conversation I’d attempted in weeks) I mentioned I was impressed with his brevity, and how he can compress many ideas into a single page of text. Modern culture has us to believe that more is better, and it’s distressing to see our modern thinkers subscribing to this idea.

Some of the talks that I attended felt more like I was having an abstract dictated to me, with the talk ending just when it felt like it should be just starting. Others were great storytellers, and were entertaining, but I didn’t leave feeling like I’d learnt

This isn’t a criticism of Wikimania, but more about how it feels our general intellectual society is moving from seeking enlightenment, to at worst filling up time, to best providing entertainment. I long for a return to the style of Stephen J Gould, Douglas R. Hofstadter, and Borges who may not always be so easy to immediately comprehend, but with some time leave the reader better off.

Redesigning Wikipedia #1

World Nomads extend the customer experience for travel insurance

Mathew Sanders — Thu, 06 Aug 2009 04:51:23 +0000

I’ve just booked my travel insurance (talk about last minute – I’m leaving 3 days!) and after checking 8 different policies, I’ve ended up choosing World Nomads, who are recommended by Lonely Planet, but also had the cheapest policy of the 8 companies that I got quotes from.

Excluding their insurance product (which is quite interesting in itself because they allow you to extend your policy while you are away) World Nomads are interesting because although their core business is selling Travel Insurance, they are actively extending their how they can support their customers at different stages of their travel adventures.

¡Hola! Free language guides

First off, they produce a range of free iPhone/iPod Touch Language Guides. I’ve downloaded the Spanish Language guide, and a quick look though shows me that I’m definitely expect to be referring to this a number of times throughout my trip – and each time I do, I’ll be reminded of the great service that I’m getting from World Nomad.

Keep in touch with an adventure journal

Secondly, after purchasing the travel insurance, I was encouraged to sign up for a free online adventure journal – allowing me to join and focused network of travel bloggers.

Extending your customer customer experience

Most companies focus on a specific and stage of a customer journey – generally the purchase stage, World Nomad has gone the extra mile and are supporting people through the preperation (by learning a language) and also the actual experience of being on holiday (by both the language guide and also the adventure jounrals).

If you’re working with an organisation — pause for a moment — and think about what stage of your customer’s experience you and your competitors focus on the most, and then think about relevent ways that you can extend the ways you support people in their customer expereince.

Link Love
Twitter: Chris Nobel @WorldNomads
Main website: http://www.worldnomads.com
Language Guides: http://journals.worldnomads.com/language-guides/

p.s. Tower Travel Insurance #Fail
World Nomads wasn’t my first choice – I was going to go with Tower Travel Insurance – except I had a question about the policy and calling their 0800 number I spoke with a friendly representative who passed me onto a colleague to answer my question who — by the way they spoke to me — obviously wasn’t interested in talking to me. If that is how I’m treated as a prospective customer, I’d hate to think how I might be treated if I ever had to make a claim.

Webpage Makeover for Les Mills Homepage

Mathew Sanders — Sun, 21 Jun 2009 01:10:31 +0000

A Webpage Makeover is one of the services that I offer as a freelance interaction designer that delivers three concept designs of a single chosen webpage.

Makeover one focuses on quick wins that can be made by applying best practice conventions while keeping development effort to a minimum.
Makeover two looks at what is possible when content and functionality can be added or removed to the page.
Makeover three is a blue sky ideation concept which may take extra effort to develop, but is likely to have the strongest positive impact on the webpage’s performance.

As a case study, I’ve just done a mini Webpage Makeover for the Les Mills homepage. It’s a ‘mini makeover’ because instead of doing the three total concepts only the first – quick wins with best practice conventions has been included.

You can download the full case study for the Les Mills Homepage Makeover here (PDF 1.7 MB) or click through for a quick summary and screenshots…

Current Homepage

Here is the current Les Mills New Zealand homepage, as captured 14th June 2009:

Structurally, it’s a very simple design. There is a header and footer navigation, a main hero promotional area, and areas for 5 smaller promotions. But there are some immediate areas that I see for improvement:

Too much noise

There are 6 promotions in total all calling for attention. Just like if there were six people all asking for your attention at once, it’s difficult to focus on a single message with so much happening at once.

All attention

$1 a day is certainly an attention grabbing message, but there is no follow up. To increase the chance of conversion, as well as gaining attention, interest must also be maintained long enough for desire to form, and people to eventually make an action.

No interest or desire

When people join a gym it’s not because they are actively wanting to spend money. It’s because they have a goal in mind. Some valid fitness related goals might be to build strength, loose weight, and to increase energy, but these goals, or other goals are not hinted at anywhere on this webpage.

No affordance in call to action

Any of the six promotions can be clicked to load another page, but there are no obvious affordances to show that these elements are in fact links.

Opportunities with makeover

There are opportunities here to decrease the bounce rate on this page, and in increasing organic referrals from search engines.

Makeover 1 – Quick Wins and Best Practices

Keep in mind the constraints of the first makeover – focusing on quick wins that can be made by applying best practice conventions while keeping development effort to a minimum. To help keep development effort at a minimum the following constraints are applied:

no new functionality is added to this page, and content is only added if it’s omission is considered a breach of best practice and will not be difficult to source;
changes that would globally affect the rest of the site (for example changes to the website navigation structure or the viewport width) are not changed.

Here is a screen shot of the redesign:

Changes to the Banner/Navigation area

The ‘Paint splatter’ device moved from the banner to be the page background. In the banner it makes the navigation labels too difficult to read.
More descriptive tag lines are used – “Unleash yourself” is expanded to Unleash yourself at Les Mills centers New Zealand wide, and “Experience Les Mills gyms online” switches to feature 4 key benefits of fitness – Build strength, Loose weight, etc.
Club info and Contact info have a small label change and are moved to the top right of the banner – a convention of were contact details are often located on a webpage.

Changes to the Hero promotion

Give the hero promotion prominence by visually separating it from the other promotions and placing at the top of the page.
Give a more assertive call to action by starting the promotion with the action phrase “Join Les Mills today” and giving the call to action by displaying as a button that has more obvious affordances that it can be clicked.

Changes to body content

Increase interest and desire by describing the benefits of joining Les Mills – explain the unique approach that Les Mills takes as well as how Les Mills can help with some common goals (Build strength, Loose weight etc).
Structure and give context to the remaining promotions by explaining in more detail what they are. In this example headings are entered and content is provided introducing promotions for team training, personal training and careers.
Promotions are given a common treatment of always including a call to action that has obvious affordances that show the button can be clicked.

You can download the case study for printing (PDF 1.7 MB) and you can find out more about the Webpage Makever service that I offer.

But most of all – I’d love to hear your feedback – please add a comment and share your thoughts!