One of the needs of the client was to showcase their existing projects and research. In our competitive research, we found that most other firms were using a simple template with some imagery, but no ability to discuss in depth their knowledge. Because SOM had expressed a need to share their thought leadership based on their years as experts at building, especially, super tall buildings, this was an important deliverable for this project.

Overall page concept

The idea was the create a chaptered page that is very immersive, and yet focuses on a TL;DR (Too Long; Didn’t Read) concept so the page visitor can skim or dive really deep, depending on their purpose and level of interest.

The Hero: The page has a large image area that animates as the user scrolls down with a mild scroll-jack.

Chaptering and Project Fact Menu Bar: After the visitor has scrolled past the hero, the chapter menu and project facts bar stick to the top of the page. The visitor can drop the chapter menu down to choose another chapter to jump to, or to jump directly to a chapter’s Deep Dive. The Deep Dive link is automatically populated in the drop down menu only when there is a related Deep Dive for the given chapter.

Project Facts: The Project Facts rail scrolls independently from the main chaptered page. The project facts and the main page can be different lengths, so the logic is that the shorter of the two will simply stop scrolling while the other continues. Scroll bars are required on both for accessibility. Within the Project Facts list, in order to keep the list readable and relatively short on first read, there are accordions for lists that are longer than 2 lines.

Chapters: Each chapter is a functional TL;DR summary for a longer “Deep Dive” of discovery or research.

Deep Dive CTA: Within in the main part of the page are CTAs to take the user to a page to explore the chapter in a deep dive. The Deep Dive page is created as a separate page and linked to in the CMS.

Modularity: By using a template with an immersive hero and a left rail, it already has a pretty distinct visual impact. We created Rich Text editors in the CMS, as well as WYSIWYG that allows the editor to create bulleted lists, H1, H2, H3, and add in media library images in variable aspect ratios. The Deep Dive CTA will appear in the appropriate section based on a limited and governed vocabulary, and whether a Deep Dive exists. At the end of the chapters on the page, the template returns to a centered alignment where content packages can circulate the site visitor to related work.

See an animation of how the Project Page works here >

Modal with social share

When the user clicks into a Deep Dive, they will see a modal slide over the screen covering the main scrolling page - with a different background color to differentiate it and make the transition more obvious and dramatic. While it will function as a modal, it will also hide the hero so that the user can only interact with the controls within the modal to go “Back to Overview” or to skip to the “Next Deep Dive”.

Since this was such an important piece of the new site, it was important that this deep dive could be shared over social media. The link needed to take the new site visitor to the Deep Dive, rather than the Project page, however the modal poses a problem there, as you can’t really link into a modal in a clean way using good UX practices.

To solve this we have two functional solutions to appear seamless - while they are nearly identical, one is the modal, and the other is a separate page that has its own URL that is actually a different location (see left). Because this is a full page and not a modal, it has the full immersive hero and the Back to Overview link in the chapter bar. The side by side of all three is below.

See how the Deep Dive Modal opens on the Project Page here >

Project Page (user navigated)

Deep Dive Modal (CTA from Project Page)

Deep Dive from Shared Link