UXing Argos.ie Mobile: Wireframes and Prototypes

Once the list of the first rush of improvements is defined (you can find mine in the previous post) it is time to get the hands dirty, proposing visual solutions and skim those to choose the one which fits best.

Starting from the top issues:

  1. Show “out of stock info” in the thumbnail of products.
  2. Show “pick up in-store only” or “home delivery only” info in thumbnail and detail page of products.
  3. Add interactive stock availability check typing name of a store, city or address).
  4. Change the names of the categories in more self-explicative ones.

I tried to visualize those, analyzing the position of all the elements on the website, the existing structure (it is necessary to consider this too in order to create something consistent with the surrounding) and the overall info communication style.

Wireframing

Then I spent the rest of the time sketching different solutions which could eventually be useful for my user personas.
Following, find the quick studies of the functionality.

#1 Products’ list view

I added two icons (one for “pick up in-store” and the other for “home delivery“) that are meant to show immediately to the users what type of service they can get from the specific article (Annette would be delighted to know this info, so she could filter the articles she might buy without move from her home).
The rest of the info structure is maintained as the original.

#2 Detail page view

As well as for the thumbnails, you find the same info about the type of the service also in the detail page.
Then, instead of force the users on pressing the “Reserve this item” button before they understand the stock availability of a specific store, I create an interactive form which allow them to check the stock of their favorite store and the others next to it to decide where to collect the product (of course this option is available only for “pick up in-store” products).

#3 Interactive availability check

Once the user types down the name of the store, the address or the City name, the system shows a list of stores where it is possible to collect the item.

Honestly, I wasn’t so happy about this last design: I find the list widget a little bit confusing and repetitive (as you can see from the image the reserve button would be repeated for each row).
So I kept studying for better a solution:

Solution #1

As first I decide to add the locator button (the same one you can find on Google Maps) to make easy for users to discover stores close to them at that specific moment.

Solution #2

Then, I decide to convert the list in something more interactive, so I choose the map system.
There are two advantage on using this type of widget:

  • It is a standard, so almost everybody knows how to use it and also if it is not true for somebody, it is still very intuitive.
  • It makes easy to discover new stores that customers might not know.

The two solutions together

Then I quickly visualized how I wanted it to appear, putting everything together.

The wireframe completed

The final result is pretty convincing: moving from the general list of products to the detail page there is a common thread which informs the users about the type of service they can expect when buying the specific product.

Lastly to be done: organize and change the names of the categories, in order to create a system easy to navigate reducing useless extra clicks and where every section is explicative by its own. 
Here the list: (Some categories are untouched because pretty much well organized already)

  • Computer & digital tech
    • Computers and Monitors
    • Laptops
    • Tablets, iPad, eReaders
    • Memory hardware
  • Office
    • Printers
    • Projectors
    • Modems and Networking
    • Shredders
    • Stationery and Office Supplies
  • Phones
    • Mobile phones
    • Smart watches
    • Telephone
  • Photography
    • Digital cameras
    • Camcorders
    • Drones
    • Digital photo printers
    • Memory Cards
    • Binocular
    • Telescopes
  • TV & Home Cinema
    • Televisions
    • TV Aerials and boosters
    • Home Cinema System
    • Digital Boxes
    • DVD, Blu-Ray, Video Players
    • Batteries and Chargers
  • Audio & Hi-Fi
    • Headphones
    • iPods and mp3
    • Hi-Fi
    • Karaoke and Entertainment
    • Radio
    • CD and Cassette Players
    • Docking Stations and Speakers
    • Turntables
  • Gaming
    • Consoles
    • Video Games
    • Headsets
    • Gaming Chairs
    • Virtual Reality Headsets
  • Home Furniture
    • Bed & Mattresses
    • Closets & Dressers
    • Sofa beds & Futons
    • Sofas & Armchairs
    • Shelves & Storage
    • Tables & Chairs
    • Fireplaces
    • Desks
    • Full Kitchen
  • Home Appliances
    • Kitchen
      • Dishwashers
      • Fridges and Freezers
      • Cookers
      • Microwaves
      • Coffee Machines
      • Toasters
      • Kettles
      • Blenders and Food processors
      • Breadmakers
      • Water Purifier Jug
      • Bins
      • Accessories
    • Laundry
      • Washing Machines and Dryers
      • Irons
      • Vacuum Cleaners
      • Sewing Machines
  • Home Decor
    • Lighting
    • Rugs and Mats
    • Bedding Accessories
    • Pictures and Photo Frames
    • Mirrors
    • Curtains and Poles
    • Clocks
    • Candles and Ornaments
    • Ornaments
    • Christmas
  • Toys
    • Indoor
    • Outdoor
  • Baby
  • Hobbies, Games & Gifts
    • Board Games
    • Modeling
    • Art and Crafts
    • Radio Controlled
    • Collectables
    • Costumes
  • Car
    • Sat Nav
    • In-car CD and DVD Players
    • Equipment and Accessories
  • Sports & Leisure
  • Health & Personal Care
  • Jewelry & Watches

As you can see, apart from a few categories (home appliances and toys), the sections are less split in depth, so that it is possible to find products with fewer clicks.

Prototyping

Then, it was time to prototype; online there are plenty of instruments that can help on prototyping a solution for your digital product, but for this project, I decided to use Invision.

This is an online platform which allows loading raster images and makes these interactive thanks to a series of very handy tools that can simulate web animation and detects the movement of the mouse (for laptops) or the finger (for mobile).  

So, with several screenshots I took from my mobile, I create a new series of images using Photoshop and adding the graphic element previously designed in the wireframes.

You find here my project: https://invis.io/QWOXMXD35D9


The finale advantages for my user personas would be:

  • Annette can finally skim the products she can buy knowing before what of those are available to be delivered at home.
  • Barbara can build her trust with the firm because she knows everything she needs to complete her purchase (no ambiguous info).
  • Philip can navigate without fail and quickly to the product he is interested in and can understand immediately about the stock availability of his area.

Next in queue is the final step of this process: User Testing Sessions.
I will go through the actual website of Argos.ie mobile and then I will ask my users to complete the same tasks with my prototype, and we will see if the redesign is so great as I think it is!

Find everything in my next article: “UXing Argos.ie mobile: Users Testing”.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.