Online supermarket (2011)


This project has not been released to the public. Details and text have been filtered and heavily edited to uphold confidentiality.

Tempos21, part of Atos Origin, had to build an online supermarket front-end around their eCommerce back-end. They contacted me to help shape the User Experience of the service and create its Information Architecture.


My first “big” freelance assignment was to assist Tempos21 (part of Atos Origin) to create an eCommerce front-end for one of their customers. Atos Origin had already developed an efficient eCommerce back-end infrastructure, but they would not usually provide the service’s front-end and appreciated some extra expertise on this field

blurred image of development prototype for the online supermarket project
The development version of the project looks promising, with a clean structure and well-defined calls to action

In this case, it was meant to be an online supermarket. Creating an Information Architecture that would accommodate so many different products while helping customers find the ones they really want was not an easy task, but the results look promising!

My work

One of the biggest challenges of this project was time, which was really limited. I would not be able to conduct a lot of research, and I could be easily delayed trying to prepare user interviews. I needed results as soon as possible. But to get good results, some research is mandatory.

In order to get a lot of information in the least amount of time I used what I call “task-oriented competitive research”, which is just a way of focusing competitive analysis. Instead of evaluating wide heuristics for potential competitors, I select some primary tasks and carry them out on competitor’s sites.

I proceed to record myself while going through these tasks (using Silverback) and talking out loud. I try to play a customer’s role as much as possible, while also taking notes on heuristics.

screen capture of El Corte Inglés online supermarket
Started with local retailers, but User Experience was quite bad. Some of them gave so little information on products that customers would have to buy products almost blindly, with just a small image and a one-liner to describe them
screen capture of Sainsbury's online supermarket
Things improved when testing british, american and french retailers, though every solution had its pros and cons

I look for great ideas and points of friction (those moments when “flow” is broken), and end up creating a list with ideas that might be worth considering and issues that have to be avoided.

At the same time I was reviewing documentation on the eCommerce back-end (my experience working as Functional Analyst pays off when dealing with that kind of documents), and also applied the task-oriented competitive research to other front-end implementations of that back-end, which were already in production.

Once I conducted all feasible research I started sketching main pages and flows, while meeting with Tempos21 team to get their feedback. Also, showing them some of my previous work while taking a look at theirs helped setting expectations and creating a mutual trust climate.

As ideas started to consolidate I started creating annotated Balsamiq wireframes for the different pages.

blurred annotated wireframe for online supermarket's home
eCommerce home pages tend to be an impersonal storefront. My point on that was to personalise the home page for regular customers, showing the products and categories that they usually purchase from (while keeping some space for new product discovery)
blurred annotated wireframe for online supermarket's mega-drop-down primary navigation
Primary navigation offered mega-drop-downs on hover. Each category showed the underlying number of products, and “top” categories (both site-wide and per customer) were highlighted
blurred annotated wireframe for online supermarket's lists of products
It all boils down to lists of products in the end. Filters, ordering and lists of top products look to add a little order in this chaos. Items can be viewed as lists (for text-oriented customers) or as a mosaic (for visually-oriented customers)
blurred annotated wireframe for online supermarket's product details
Big images (with detail view on hover) and detailed information on the product can help customers decide, while related products allow cross-selling
blurred annotated wireframe for online supermarket's order confirmation page for non-registered customers
Order confirmation page uses white space and icons to group and categorise the information. When an unregistered customer reaches this page she is offered the chance to register, allowing her to keep fidelity rewards based on this order.

A lot of online supermarkets need registration before ordering, and the requirements document for the project stated such. We have all heard Jared Spool’s $300M button story, so I felt my duty to convince our client that while having registered customers is great, you have to earn their trust first.

I expected the usual resistance, but to my surprise our client loved the idea (all in all I have to admit that I was lucky having a client that listened to our suggestions while offering us his thoughtful feedback on them), and registration-free ordering was included.

blurred annotated wireframe for online supermarket's sign up
Email, password and contact phone. This is all it takes to create a customer account here.
blurred annotated wireframe for online supermarket's customer dashboard
Registered customers can access their customer’s dashboard. Here they can see pending orders, and those that would need their input are highlighted

Some flows are best understood by creating step-by-step wireframes for them. Once the static wireframes had been created, working on them to create the step-by-step ones did not take that much time and enhanced communication with our client.

blurred annotated wireframe for online supermarket's product exploration flow
Going this extra mile and showing step-by-step wireframes can help understand subtle interactions, like this on-hover product magnifying
blurred annotated wireframe for online supermarket's purchase flow
Step-by-step wireframes also allows understanding system feedback more easily

Once every page was consolidated it was time to create a final sitemap. Provisional sketchy sitemaps had been created (and updated frequently) during the wireframing process, but any final sitemap has to be created bottom-up, from individual pages to the home page.

blurred sitemap for online supermarket, with numbered bubbles on each page
Final sitemap shows static pages and floating flows, while also referencing wireframes for each page

When everything was ready to meet the client and show them our work, I created a simple User Experience presentation to have them better understand the reasoning behind our Information Architecture proposal.

slide showing different people in line at a supermarket, with the caption 'there is not a single solution because there is not a single customer'
I went through some basic User Experience points, like the need to understand our customers and use their behaviours to personalise the site for them

My work was well-received, including a personal congratulation from our client, and the site is currently in development.

What I got

  • My first “big” freelance assignment: Managed my time to comply with tight deadlines, integrated with internal development and design teams, and communicated my work successfully.
  • eCommerce experience in a big inventory site.