New Territory - Porter Packaging — Designs that Deliver.

Porter Packaging — Designs that Deliver. Porter Packaging has a new digital home. A bigger, better website - designed and delivered by New Territory. This new website acts not only as a gallery, showcasing the limitless potential of Porter, but also allows for project planning and implementation; featuring a range of resources and tools for fast and fuss-free conceptualisation, customisation and order management for designers, SMEs and businesses of all kinds.

Porter Packaging product overview and work completed pages on a black background

As a company that revolves around presenting things beautifully, we thought Porter Packaging would be a fitting project to showcase our design process. Below we break down how we went about reimagining the user flow and implementing a new e-commerce element for Porter Packaging’s website. Merging creativity and accessibility on a global scale.

Porter Packaging are industry leaders in packaging solutions. As pioneers in curated packaging, it provides full service solutions from customisation to implementation and order management. A one-stop shop for accessible, world-class, brand-minded packaging.

Held back by the limitations of its previous site, Porter Packaging required a more accessible, user-friendly digital platform that would make content clearer to read and improve the overall UX flow. Given the complexity of Porter Packaging’s range, the site needed to be as customisable as the products. The most significant difference between the two websites was the introduction of an e-commerce system.

Part of the design brief was to incorporate a clean and functional aesthetic, while utilising pops of colour and playful features. As a large site, Porter Packaging’s team knew the design needed to be simple enough to allow for straightforward and intuitive navigation, without losing a sense of individuality.

So, how do you maintain creativity whilst creating a fully functional and easy-to-navigate, large-scale site?

That’s where we came in.

We began by revising Porter Packaging’s design language to improve the overall usability of the site. The first step was to implement a robust design system. A site as expansive as this requires a solid foundation that provides flexibility in handling the different content and layers. The site also has a strong navigation structure, ensuring the barriers to conversions are limited.

Easy navigation is key for any large-scale website. To counteract the potentially overwhelming nature of the website we kept the design elements simple; using simple typography, treatment and scale. We also kept colour usage simple, allowing the products to stand out without getting lost in a sea of pages.

Similarly, we utilised basic design elements to represent different information. For example, the use of squares for products and circles for projects. What seems like a simple difference, has a huge impact on how customers intuitively sort through the information on the site. The basic visual contrast of circles and squares allows categorisation to occur subconsciously. Therefore helping users differentiate between the various sections of the site, locate desired information and improve navigation.

Within the simplicity of the design elements, it was important to us and Porter Packaging that we maintained a sense of the brand’s personality by incorporating an element of playfulness throughout the site.

Burberry by Studio Boum

It was imperative that Porter Packaging retained its personality amidst the stripped back design. We used animation and interactions throughout the site, allowing the playful side of Porter’s personality to emerge. These features include: hover states, bold colours and on-load animations.

Interactive elements help to enliven the site and increase user engagement. The project page is a prime example of these elements in action. Hover animations on project bubbles create the illusion that they are floating, and the movement as they fade in is both eye catching and playful.

The quote builder is another one of our favourite features. The extent to which you can customise items is part of Porter Packaging’s appeal. Having this front and centre on the product page, and making it an easy, enjoyable process, was a key focus throughout the design stage.

One of the main updates for this new website was the implementation of an e-commerce system. The shop section is now at the forefront of the website, rather than an add-on. The previous site’s focus was showcasing the projects. Now, the projects have a much more direct way of informing what you can build and purchase on the site.

All areas of the website relate back to the e-commerce system, giving the site a clear navigational direction and helping to drive sales. A smooth transition from browsing to buying is essential for any successful e-commerce site. Ensuring there is a clear and easy option to purchase and reducing conversion barriers within the design and development of the site, helps to prevent the customer from getting confused or lost (both literally and figuratively).

The site was built using Sanity, with a GatsbyJS React Framework frontend. Given the potential growth of Porter Packaging and its range of products, we put a lot of effort into making sure the e-commerce system is scalable. Having the ability to host a wide range of products by utilising a simple filter system, ensures a streamlined and more efficient process for managing, updating and creating products. This also results in an easier and more effective experience for customers.

Mobile view of the Porter Packaging Product page and duck island icecream packaging.

There’s a lot to be considered when designing a large, multi-functional site. The importance of hero-ing the e-commerce element is crucial, as well as establishing a simple, easy to understand design language that simplifies the content of the site. The last thing you want is for users to become overwhelmed. Using considered design practices allows the site to impress without creating confusion - letting the products and the business speak for themselves.