ARGOS
I was asked by Argos to design a new type of page that would allow users to view a full range of related products and be able to buy them. For example – customers may want to see a specific toy range (or collection), from a specific brand and purchase multiple items.
I independently designed the UX and UI for this page.
Getting started
Having only a limited experience with E-commerce the first thing I did was competitor research. I looked at retail giants like John Lewis, House of Fraser, Toys R Us and Smyths Toys to see what they were doing well and find opportunities for improvement. This research gave me insights into navigation and feature prioritisation that I applied to my designs.
the design phase
I quickly sketched out the page taking a mobile first approach. Using client insight and my own research I created a clear content structure and prioritised key features.
The ‘refine’ filter presented the biggest challenge. The ask was to create a responsive page so I wanted to find a single solution that would work across all breakpoints. I knew I wanted the filters to sit on page but this would be a real challenge on mobile.
I drew out different options and did Guerrilla testing to quickly find the most effective one. The output was a more adaptive solution where the filter options (visible on desktop and tablet) collapsed into a lightbox/takeover on mobile. Although this wasn't strictly a responsive pattern I think it felt like the best option.
Confident in my sketches I then moved onto wireframes using Omnigraffle. Digitising my designs allowed me to create a more realistic content structure. I applied best practice font sizing to ensure the designs were accessible.
Due to the time constraints I designed only the mobile and desktop breakpoints. Tablet landscape would behavior similarly to desktop. All breakpoints use a 12 column grid.
In visual design, the layout made better use of the available space and adding imagery really helped to define the content hierarchy. Accessibility was a key consideration when choosing colors and style options. For the most part the designs are WCAG 2 AA compliant.