Benjamin Walsh

Manchester, UK

Prototypes

Party Delights Navigation

Briefed to change the navigation experience, increasing speed where possible and making the website feel more like a native app.

Party Delights Navigation Prototype

To meet the brief I opted for ajax page loading and CSS animation to convey the page transition better. I used Lazy Loading for images to speed up the initial page render and used AJAX and the history API to save time executing JS between pages.

Demo on CodePen

Be sure to checkout the various tabs for landing page examples and "Paw Patrol" for a product page example.

Party Delights Checkout

Briefed to improve the checkout user experience, providing better validation and simplifying the process.

Party Delights Checkout Prototype

To meet the brief I added fixed controls to the basket to allow users faster access to the "Checkout" button. Added in a new checkout funnel for Collections - with a view to integrating with Collect Plus. Added Apple Pay and Android Pay options on native devices. And I combined the Billing and Delivery Address form by default.

Click the basket button to begin the checkout experience. Demo on CodePen

Validation Indicators

Briefed to provide users with better feedback when completing forms. We wanted to help users feel confident that submitting their data will work the first time.

Validation Indicators

Demo on CodePen

Colour Changing Interface

Proof of concept to use CSS animation to enhance the look and feel of the interface. The demo features the ability to set custom colours for individual pages to complement the products.

Colour Changing Interface

Demo on CodePen

This concept idea didn't work because using animations is distracting. And when used as a background for copy accessibility standards weren't met. I argued that trying to focus the user on the interface would take away from the task the user came to our website to complete.

To see the custom colour feature in action, navigate to: Party Supplies > Children's Birthdays > Star Wars.