IMG
Licensing
Following an extensive rebrand of this world‑leading licensing company, this project was to translate it into their online presence. Produced was a bold, animated, and engaging website led by the client's content and a vast library of vibrant brand imagery.
In Detail
Having had the same website for several years, the client felt that their online presence no longer represented their brand. It had (in their own words) become slow and clunky, unfashionable and unwieldy to manage. Following a thorough rebrand, they had a clear idea of what they wanted: an extremely fast but feature‑rich website to manage themselves and see them through the next several years without becoming as stale as the predecessor had.
This was an ideal case for a static site, so following a formula that is now familiar within my portfolio, a tech stack was decided upon:
- Gatsby: a lightning‑fast, React‑based, open‑source, static site generator which I'm personally involved with;
- Contentful: a headless CMS which integrates beautifully with Gatsby via GraphQL, has an extremely generous free tier, and is straightforward to train new users on;
- FlexSearch: provides an incredibly fast, lean, and highly performant search engine to offer sitewide search to website visitors. With some additional extensions, I was also able to configure this to allow the client to curate results even when there was no exact term match.
With a relatively short development time followed by some video‑based one‑on‑one training with the client on managing their new website, the site went live at the start of June 2021.
Since then, the website has seen a substantial increase in traffic, whilst enquiries via the new contact form have more than doubled. We now have a roadmap of additional features we will be introducing in the coming months, including automated foreign language translation.
Animated and Engaging
It was important to move away from the client's previous (dated and static) website; with the new version offering visitors an engaging experience where animations play an important role in offering interactive movement to the page.
Homepage Slider
The homepage features a bold, prominent slider that the client uses to showcase any section of the site they choose, from news articles, press releases, or even single out specific clients. This works without any degradation across devices, using a smattering of considered animated interactions to complement the new branding.
Client Listing Page
Possibly the most critical page of the site, and required to showcase all of their nearly two hundred clients equally, the client listing page features categorised full‑width overflow panels that can be navigated through by keyboard, mouse, or swipe. It also features category and search‑based filtering to aid in traversing the client list.
Brand Pages
The brand‑specific pages are designed to fully use the vast catalogue of varied and impactful imagery IMG has for each client. The page accommodates virtually any volume of imagery or content the IMG team chooses to tell a story about the brand and offers an insight into historic collaborations they have been involved in.
Case Studies
The Case Studies section of the site came as an additional piece of work after the website had been launched. In addition to showcasing their existing brands on the website, the client also wanted a simple mechanism to feature previous work that they had been involved in.
Case Studies is a relatively simple page featuring a grid of previous work with interspersed promotional panels, all uploaded and managed by the client in Contentful. These can be filtered in a similar fashion to the client listing page, but ‑ unlike the Clients section of the site ‑ when a Case Study is opened, it displays a full‑bleed image, a title, and a short piece of text within a modal, rather than a whole new page.
News Pages
A combination of client news, press releases, and editorials, the News pages are more than just a nice‑looking blog. These allow IMG to lean once again on their rich collection of hypermedia to talk about their brands, services, and success stories.
Articles feature a proprietary 'More Like This' component, which scans article content and previous website visitor behaviour to suggest other articles and brands the reader might be interested in reading about ‑ a bona fide piece of machine learning written in React!
Sitewide Search
Implemented using FlexSearch, the search application indexes every piece of content on the site and offers immediate, categorised, and responsive results to the user. In addition to relatively traditional search functionality, I have expanded this to allow IMG to curate results using associative terms, which can be tied to specific categories, articles, or even clients without the need for manual tagging.
'Ready' Panel
A key need for the new website was to help drive website visitors to the new enquiry flow. This was done with a prominent 'Ready to...' banner within the footer of each page. As with the rest of the site, this is fully content‑managed should they later want to change the message. To date, interactions with this panel and subsequent enquiries have increased dramatically.
Contact Flow
Integrated with Wufoo to allow IMG to continue using their pre‑existing CRM tooling, the Contact page features three distinct flows depending on the nature of the enquiry, collecting data from the enquirer to ensure their enquiry is handled as swiftly and as accurately as possible.
