~ Mathew Sanders – Professional Freelance Interaction Design & Strategy ~
Home | What people are saying | About Mathew Sanders | Prices | Availability & Contact
SERVICES   Webpage Refresh | Expert Review | Wireframe Design
BLOG   Nice Touchpoints Only

Posts Tagged ‘wireframe’

Woolworths Website Search Redesign

Saturday, November 21st, 2009
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’.
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’.

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 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

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 details 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?

Redesigning Wikipedia #1

Tuesday, September 1st, 2009

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)

Home | What people are saying | Wireframe Design | Webpage Refresh/Makeover | Website Fitness Plan | Prices | Contact | Blog

This work by Mathew Sanders is licensed under a Creative Commons Attribution-Share Alike 3.0 New Zealand License