Responses by MakeReign.
Background: The site is a showcase for Parsons Branding, a brand strategy and design studio in the heart of Cape Town, South Africa. The key objectives were to garner international attention for this niche, high-end branding agency; showcase its work in a forward thinking way; and, in doing so, attract new clients and talent of a high caliber.
Design core: We developed a component library for the case studies that enables Parsons to create custom layouts: Some are just images, some just text, some a combination of both. Some are sliders. Some are sliders with video. The varied components give the Parsons team a huge amount of flexibility in putting together case studies and telling their stories, with no two being the same. We kept the design modern, minimal and flat, and enhanced it with interactions and transitions.
Challenges: This site is all about sharing Parsons’s amazing work, so we really focused on building out beautiful case studies. But building a modular case study with WebGL is really challenging. Creating this in the back end of WordPress was also one of our most complex tasks to date. We really pushed what is possible on the platform. (Massive shout out to our development partners!) Then there’s the issue surrounding image quality—image-heavy sites provide a number of challenges, notably around keeping the quality and having the site still perform with load times as quick as possible. All in all, a number of challenging layers—but we’re really happy with the end result.
Navigation structure: We wanted to do something different and fun with this. There is a carousel view and a full project-grid view that can be filtered by service and packs away on mobile once scrolled past. The side navigation lets you click directly into the relevant service offered by Parsons in each of its showcased projects, meaning you can find the services and related work that you’re interested in quickly.
If a user filters and selects a service on the navigation, the header can anchor them directly into the relevant service they filtered by. When you’re viewing all projects, the site has an infinite canvas navigation—this means the scroll space is limitless. Also, when users hit the bottom of a case study, another project loads. That way, you can really explore the work and move between projects seamlessly.
Favorite details: The infinite project grid view, which lets users explore the case studies in a visual way, while filtering them via service offered. The image trail on the 404 page, which randomizes images on the website and follows your cursor—this was featured in Awwwards curated collection of 404 Pages! The seamless project-to-project navigation. The subtle WebGL animations on scroll. Finally, the hidden Easter egg on the grid view, which only appears when users scroll quickly.