Atlantic Brand Partners: Forces of Influence

mockups of a laptop, tablet and mobile phone showing various parts of the designed Forces of Influence website

The brief

Challenge

Create a landing page for Atlantic Brand Partners’ 2021 Forces of Influence 2.0 report. It needed to draw the reader in and drive them to download the full report.

Insight

Have fun with motion and interaction to create an engaging experience for the user.

Solution

A visually interactive landing page for the Forces of Influence 2.0 report that allows readers to get a taste for the content of the report, while continually driving them to visit the full report page. See the site here.

role

CLIENT

Lead UX/UI designer

Atlantic Brand Partners

Introduction

A force to be reckoned with

For the past two years, Atlantic Brand Partners has released a report called Forces of Influence. The research uncovered “the five Forces that are continuously shaping our world, our industry, and our customers’ lives. The report reveals the five Forces for 2022 and offers marketing leaders ideas and suggestions for successfully adapting to them.” While Atlantic Brand Partners had a brand designer on staff who was responsible for creating the branding and designing the full online report, they enlisted our help to design the landing page.

A GIF showing the animation of circles falling down on the forces of influence landing page.

Design: Wireframes

Playing with geometry and motion

This project had a quick, three-week turnaround before the end of the year (2021) so I had to work quickly to iterate on wireframes and design directions. Our team consisted of a PM, a developer and me. Because the project had such a quick design and dev timeline and the developer had a great eye for design, we worked very closely together on all the designs so that I could make sure they were feasible as well as get some design feedback.

A set of eight wireframes of the landing page. They show different iterations of the design.

Design: UI

In motion

The Atlantic Brand Partners brand designer had set the brand direction, including colors, typography, visual style and some ideas for motion on the site. I mocked up our wireframes in the colors she had laid out and continued to tinker a bit based on my accessibility review and what was possible to be developed in the time we had.

A sharp eye on accessible color contrast

Even though the Atlantic Brand Partners brand designer had set the color palette, a lot of the color pairings she had chosen did not meet WCAG AA accessibility standards for color contrast. I did a full audit of her color pairings and provided updated recommendations so that the site would be accessible from a color contrast standpoint.

‍

An image of lots of color combinations and screenshots of color contrast checks to show which colors have high enough color contrast to be accessible.

The final designs needed to be pared down slightly due to time so we couldn’t quite do all we wanted to do. The mobile designs especially had to be streamlined in order to be completed in our timeframe. The developer on our team did a heroic job of pulling off all that we did in the short amount of time.

A GIF of the mobile version of the site. The GIF scrolls through the forces of influence.

Conclusion

Short and sweet

Working for an agency is always an exercise in balance. For this project we really had to balance the amount of hours allotted (a little) with our ideas and hopes for all that we could do with the site (a lot). We came up with a fun and engaging landing page in the brand direction set out for us in the short amount of time we had.

Visit the site here.