Approved Food

Prototyping UX updates

The brief

Take the layout from any category page or search results page and highlight any usability enhancements that would change/add to improve conversion rates and engagement.


I chose the category page layout, as there are a number of opportunities for improvement here and I feel this type of page is critical for browsing and wayfinding on a site of this nature. Specifically, I chose the ‘baking’ category:

My solution

I created an HTML/CSS/JS prototype to test some of my ideas.

After initial brainstorming and sketching of potential improvements, I chose the shopping basket as a key area to focus on. During my time on site at the warehouse, we had conversations around groups of users who:

Based on this, I gave the basket increased prominence by bringing it out of the header. On larger screens it is immediately adjacent to the main focus area, and 'sticky' when scrolling to remain in view. On smaller screens it is a first class standalone element with it's important call-to-action always in view.

Building on a feature that exists elsewhere on the site, I developed a weight guide indicator that responds immediately to items being added to the basket. Through animation, colour, and text I introduced a simple element of gamification - encouraging users to make the most of their delivery allowance.

Other changes in this prototype include:

Things I specifically haven't done

This is a prototype after all!


Including research, configuring the page assets and specific gulp tasks, I estimate the task has taken in the region of 15 hours.

Note: This prototype has not been polyfilled or extensively browser tested, and is likely to fail in older browsers.

Currently tested on Chrome, Edge and IE11 on Windows 10 and Chrome and Safari on iOS 9.

Prototype demo page

Sample rendering