Brand on Shelf

Caution: happiness inside.

Brand on Shelf are packaging designers with offices based in Cheltenham and Leeds. They work with a variety of brands like Kenwood, Westons Cider or Asda.

They pride themselves in being specialists and fanatics about packaging, handling the whole process from conception to print. They encourage their clients to think about their products in context (aka on the shelf) and are a friendly bunch to work with!

As they redesign their identity, their website needs a refresh in order to be consistant with their new branding. They want a platform on which they can display their work, convey their personality, increase conversions by providing an easy way to contact them and increase their leads.



As with most projects at fffunction, it starts with a kickoff meeting with selected members of BOS who will be in charge of the website later on. They create an affinity diagram and an empathy mapping to get a understanding of the goals and the users. Very quickly, they start interviewing users to validate or discard the assumptions they've made so far.

As a UX designer for the project, my work starts with interpreting all the information I receive by that point. I begin with Information Architecture, by making sense of the affinity map, sorting and grouping content, features and concepts.

Meanwhile, I establish user types and create scenarios for their user journeys.

Sketching is a great tool we use a lot to give us and the client a common vocabulary to discuss ideas. They are more flexible than digital wireframes, as they do not try to translate an exact visual of the deliverable. The designer still have a lot of freedom to compose the layout and tune all the elements together.

Read my article about Designing the Homepage Last.

Case studies are an important part of the website. Rich in content, imagery, videos, it needs to adapt itself to the different projects BOS worked on. We decide to use a collection of modules which can be added, removed, duplicated. Some modules are compulsory (brief, product shot, outcomes, contact us), the rest is manageable in Wordpress by the client.

One of my ideas was to implement a product visualisation as sometimes used in ecommerce websites to display varied views of a packaging.

As BOS already owns a guideline they developed, our designers interpret and implement all the modules and elements in a pattern library. Instead of spending precious time in Photoshop, they can experiment and tweak text, imagery and layout while keeping in touch with the client.

Pattern libraries have become very popular these days because they allow teams to be more efficient, flexible, produce better quality products and smooth the transition between design and development.

By constraint of time and budget, we decide usertesting.com can help us confirm we're going in the right direction. It's a non-expensive and fast way to confirm or discard some concerns about a specific user journey by recording as little as 5 users to perform simple exercices. It may not represent the targeted audience though. The choice of question is important: it clearly offers better results if the users are asked to perform a task, rather than ask their opinion on the design.

It was a great project to work on, as it provided us with insights coming directly from the users as much as the client. They are now plenty of functionality BOS can experiment with. It offers them a platform where they showcase but also get their personality and opinions across.

As a retrospective, I would have loved to experience this project in a more Agile way, as opposed to a clear split between front-end and back-end. However, it was an enjoyable project to work on with many possibilities for creative input.