Responsive screens

Department47's responsive grid had to scale from 1600px down to 320px so one of the first jobs was to devise and define a grid that could scale the common e-commerce site elements and allow the site to function on a range of devices. So I sketched, wireframed and then prototyped a grid to work out how everything would fit together and to communicate to developers how the site should scale.

Homepage layout

There was a requirement that the homepage would be a space to showcase various types of content in a visual way so we designed a panel based layout with interchangeable content blocks which scales across devices.

Mobile buying flow screens

Examples of the layouts used during the purchase process. One of the toughest aspects of responsive e-commerce design is the number of different templates needed to cover a user's journey through the checkout so a lot of work went in to making sure that flows were optimised for mobile and that as much friction was reduced as possible.

Have a project? Just get in touch