Let the project be-gin!
We’ve had a great ongoing relationship with the Bombay Sapphire Distillery team for around seven years now, having worked on many different projects and campaigns with them during this time. They have always had the challenge of wanting to be a unique attraction, whilst needing to align with the core brand. Last year, the Bombay Sapphire brand was refreshed so the Distillery team came to us with a proposal for us to redesign their site to align with the new creative guidelines.
For us, this was an opportunity to not only refresh the look and feel, but to also do a full site review and proactively suggest and drive significant UX improvements. With the Distillery site redesign forming part of a wider brand alignment requirement, there was also an opportunity for us to work collaboratively with Bacardi’s development agency and other third party booking agents throughout the process to ensure a streamlined handover.
As with all of our projects, we started with a Discovery workshop to gather a full understanding of the current website and to start to unpicking what ‘success’ might look like. We asked the Distillery team a load of questions such as what their overall objectives were, what their feelings were towards the existing site (any likes or dislikes), what their competition was doing (and which of these in particular was doing well and why), what their key audience types are and if there had there been any recent key trends or behaviours. We also discussed the current site, covering areas such as needing to have a view of their analytics (if tracking and performance are being measured), whether the sitemap structure was working for them (more specifically, what needs to change), if they had any general UX and UI goals to share with us, and what the plan was for their new website content – could anything be reused or would fresh content be required.
Armed with all the above, we then did our own full UX review of the current website. We learned that the overall sitemap and structure needed adjusting and simplifying in order to drive users to relevant content. We also suggested that the new structure should allow for the introduction of dedicated landing pages, so that the Distillery could track ongoing campaigns and gain useful data to inform their future marketing decisions. Believe it or not, our planning was all achieved within a (seriously multi-tabbed) Google Sheet; we listed out all of the current URLs to identify which pages needed to stay and which ones could be replaced and redirected. This helped inform our new sitemap design and we presented the sitemap and content plan hand in hand.
As there were multiple agency teams involved in this project, we set up weekly calls to ensure that everyone was kept up-to-date and manage approvals at every stage of the process. We shared a timeline at the start of the project so that everyone was aware of the key milestones required in order to meet the project deadlines that were set and agreed. All feedback was captured in a shared Google Doc during our calls – these were then ticked off as we worked through the tasks.
Once the sitemap was signed off, we moved into wireframing and subsequently design. We knew from the technical briefing call that the new website was going to be built in a Wordpress CMS, and we therefore had to work very closely with the development agency during the design phase to align with their expectations for the build. Instead of designing specific page templates, we took a block approach and created individual components for both desktop and mobile. This meant that the Distillery team would have the flexibility of building out future pages using any component block type of their choosing.
Due to there being multiple parties involved and us all using different software programmes, we were faced with the challenge of finding a way of presenting the designs so that everyone could share their input. We enjoy using an app called Invision, which enables us to upload the designs, present them to the client team and capture feedback all in the same place. It’s a really useful tool which contributed to a smooth review and approvals process during the design phase of this project.
Once everyone was happy with the designs, we handed over a full UI kit to the development agency, including a desktop and mobile version for all of the component block designs and button styles. This went over with detailed annotations for aspects such as image and video sizing, colour codes and interactive states. The site was built in a staging environment and we were on hand during the development phase to review and suggest any design tweaks prior to the site going live.
I think it’s safe to say that this was a thoroughly enjoyable project for all teams involved. We caught up with the Bombay team shortly afterwards and John and I were handed a matching set of personalised presents – GIN! In my opinion, the best way to end a great project!