Portent, Inc. Website Evolution

Adaptive Reuse is a strategy borrowed from traditional architecture (you know, buildings). With roots in sustainability, the strategy can reduce costs, minimize rework and waste, and repurposes what already exists, all while maintaining a high-level of customization and quality. Adaptive reuse projects in the digital realm work with – and within – the existing structure of the experience: interventions may be global or surgical in scope.

Crucially, adaptive reuse doesn’t exclude the concept of an addition. In the case of physical architecture, we often mean adding square footage: maybe building up, by adding a second story to your home; or building laterally, by bumping out the kitchen; or adding unenclosed space, like a great deck to soak in the sun. When it comes to digital experiences, the analogous and corollary additions to the context still apply: maybe we build up, by creating new, global functionality; or build laterally, by expanding existing features; or maybe we add something entirely fresh, like a brand new, top-level page that ties everything together.

For a richer experience, you need more than just a color palette. As with designing for physical spaces (think architecture and interior design), flat color isn’t enough to experience wholeness in a two-dimensional digital space: you need colors, shades, tints, and textures.

Respecting the nature of evolution (not just tossing all the old colors to the curb and starting over) we based the new brand colors on Portent’s original, chief brand color: a vibrant blue that defined the logo for years. From this original blue, the palette fills out with a lighter tint, two darker shades, and then two highlight colors to complete the spread: a lively green and an earthy orange. When needed, incremental tints and shades of the darker blue provide nuance to support the varied contexts where the brand may be represented.

As a last note, we introduced a tactile quality with a “linen” texture as an optional overlay to the classic blue. The resulting material scheme is friendly and approachable, while still projecting the mature and professional identity merited by a 20-year-old company.

Certainly, there is a time and a place for stock imagery. But, let’s all take note: that time and place is not right now, at the top of your home page.

Even if the overwhelming majority of visitors to your site never realize that the images they view hold cogent, personal or historical relevance — however nuanced — you will offer a richer digital experience to your clientele if you create your own media.

When the header remains pinned to the top of the page, even while the user scrolls, not only does the branded experience remain consistent, but accessibility and navigation are greatly improved. Beyond a simple pin, the header is animated to switch between minimized and expanded states, based on subtle browsing cues from the user.

On the blog, there is an additional component that comes into play: the article status bar. You’ve seen these before, right? They provide visual and time-specific cues for where you are in the article, updating as you scroll. This one is dynamically assembled from the information on the page, showing the title, author, and estimated read time — plus, it always keeps those trusty social share buttons handy.

We can (and did) get into way more details about the specifics of these components, so if you’re intrigued, hop over to the blog where Blake tells the whole story.

Beyond responding to scrolling cues from the user, we went further, and introduced Immersive Site Search, which responds to typed cues. This means, that no matter where you are on the site, without needing to find a search field, you can just start typing to find what you need.

With that first keystroke, an immersive overlay appears for search and navigation input. (If you didn’t mean to bring up the overlay, no big deal, just hit escape, or click the close icon.) Once you hit enter, one of two things happens. If you typed a word or phrase that we’ve included in the site’s “dictionary,” you are taken directly to the associated page: typing “small business” takes you to Portent’s Small Business Hub, for example. In the case of typing something without an associated page, you will instead arrive at the Site Search Results Page, where you can scroll through to find your answer.

If we look back to the concept of Adaptive Reuse, introducing this functionality to the site was an addition: we assessed the existing conditions, remodeled to make great improvements, then added on a new feature that not only ties it all together, but is just plain fun to use. Pop on over to Portent.com and see for yourself!

Fun Fact: We’ve integrated Immersive Site Search on Emerald Seven’s site, too. Go ahead, type something...