Digital Picnic

The original Digital Picnic website wasn't terrible but, from the clients perspective, it lacked a striking aesthetic, something that modern agency websites tend to have. The interactions were slightly flat and there were navigational issues that we needed to tackle to improve the users' general experience.

Before we got started on any of the aesthetic changes, we had to first map out the website to give us a clear understanding of the structure. As it wasn't a complex website with multiple, varying pages, it was straightforward to understand the flow. The only major change was to introduce a landing page to stimulate the users' intrigue before the content reveal on the home page.

One of the main aesthetic issues that needed to be addressed in the redesign was the lack of differentiation between pages. The pages on the original website felt all too similar, resulting in a confusing, lacklustre user experience. We had to find a way to add visual personality to each page, paying enough respect to the quality of content available and allowing optimisation across smaller screen sizes.

We experimented with the design and functionality of image grids in our initial wireframes. We added unconventional placements of type for a touch of personality, whilst leaving enough navigational prompts to guide users from page to page. We also discussed interactions, to give more visual feedback when users hovered or selected specific areas of the website.

Due to the quality of content we had available, the value of our design changes stood out significantly. The client had wanted his new website to feel like an "experience" or a "showcase" so we added blurred masking interaction to the landing page as a gateway to capture curiosity before entry to the website.

The theory behind the content blur's usage across the website was to help users "focus" when they were ready to make navigational/interactive choices as the quality of options could lead to indecision. The effect was triggered by mouse hover for desktop, and upon selection for mobile and tablet, allowing us to retain a website theme across different devices.

During the final feedback rounds before delivery, we discussed ways in which we could use additional micro-interactions to add to the overall experience of the website.

We designed a custom mouse pointer that changed to signify varying content interactions, changing from a circle to a plus for an interactive link for example. A scroll indicator was also added to our columned content, to indicate how much content users had to scroll through.

Overall the project was a success and the distinction between the old website and the re-design shows a clear aesthetic and navigational upgrade.