The Challenge

My Role

Creative Director
+ internal and competitor research
+ brand and content strategy
+ site architecture
+ identity refinement
+ voice and tone guidelines
+ art direction
+ creative partner selection/hiring
+ motion graphics and video editing

Context

Unifying 7 offices with 1 voice

In 2012 Page Southerland Page rebranded as Page (a project that I was the lead designer on). The revamped identity had needed to be simple enough to use so that the it could be easily managed and implementd—a goal to help a then firm of the 7 offices appear as one unified firm.

Page logo redesign

Various office interiors

An effective, but stale identity

The update had a profound effect on the representation of the firm’s brand presence both internally and externally. However, the 100+ page standards manual that we produced was followed to a T. After 8 years, the identity, while still effective, became repetitive and rigid.

2012 branded collateral and guidelines

Research and Discovery

A holistic set of issues to resolve—from copy writing and content strategy to user experience and culture

In addition to the brand identity issues, the Page website had become less of a marketing tool and more of an internal catalog of decades worth of architecture projects.

For the first part of the project, I led an audit that articulated and summarized  the challenges the firm was facing as a 125-year-old brand.

1. The former home page of the Page website (a stack of recent news stories) was an ineffective front door; 60% of site visitors left the site from the home page. The graph to the right shows how many visitors made it to the bottom of the page.

2. The site’s copywriting was corporate and full of jargon.

3. The careers page was effectively an endlessly-scrolling job board. Compared to competitor sites that illustrated perks of the job or highlighted the culture, Page didn’t appear to be an inviting workplace.

5. The UI was claustrophobic in its use of space and wall-to-wall text. The type system needed refinement, and the use of red needed a more clear function.

6. The site’s navigation was needlessly complicated: people were structured hierarchically, the work was split between categories, ’news,’ was located in 4 different places, and the site’s second-most popular page, Careers, was hard to find.

7. The design of project detail pages showed off buildings but did little to highlight Page’s other services, the people behind the work, the intangible insights, or the multi-disciplinary collaboration that went into the work.

Strategy and Design

Turning the page: from architecture to Design firm

I synthesized the range of issues to be addressed into a creative brief that outlined 3 broad brand objectives. Each objective served as a prompt to guide the website redesign—an effort which I led the selection and hiring of a partnering design agency, Handsome, to collaborate with.

Objective 1

Demonstrate Page’s brand values and live up to its north star: design that makes lives better.

The old site focused on showcasing what Page did. With the new site, we aimed to also reveal the why and how.

To do this, we expressed all content related to people, expertise and process to Page’s values: creativity, collaboration, and committment; all of which lived under the north star umbrella.  

Objective 2

Position Page as an integrated design firm.

Page has over 16 core markets and service offerings that create a robust and holistic design practice. The new site emphasizes the integration of its practice by simplifying the flows from “core markets” and “services” to simply,  “work.” 

Additionally, a novel case study format was developed that highlights subject expertise; allowing for multiple projects of various markets and services to be shown together.

Objective 3

Refresh the brand identity

We used the website redesign as an opportunity to refine the brand identity by:

1. Lightening up the design—reducing the font weight and improving the use of negative space

2. Giving the brand color, red, more distinctive roles for landmarks and navigation

3. Incorporating more playfulness with illustrated icons and animation.

In order for Page to better demonstrate its brand values, I developed a matrix that paired its values with content categories. This tool helped market sector leaders uncover richer stories than “recent news” or awards won.

I also developed content guidelines to help the internal brand team have a consistent brand voice.

Above are stories generated from the content matrix and guidelines. We called the shift from “here’s what we did” to “here’s some information that you might find useful,” “generous content.”

Developing content that gives more insight into Page

I created motion graphics and edited a reel to go at the very beginning of the new site to highlight Page’s multi-disciplinary practice. B-roll footage by Nick Simonite and motion graphics by me. 

A simple, but effective way to simplify the navigation: combine “services” and “core markets” (internal, coded language), to “work” (language that a typical site visitor would understand).

Designing a case study that shows off the thinking as much as the visuals.

In addition to the standard single project entry, we developed “case stories.” This content type uses multiple projects within a single article to demonstrate subject-matter expertise. This allows Page to demonstrate its multi-disciplinary services and various markets served under a common theme.

Rather than the wall-of-text model of the previous site, a robust set of interchangeable building blocks was design to construct these pages. The design is decidedly spacious with asymetrical compositions, ample negative space, immersive image sizes, and a type system with greater scale contrast.

All website design and website mockup animations by Handsome

Ongoing Work and Iteration

I was hired by a new development firm after Handsome to audit the existing site and to propose new site architecture and design strategies, optimize the site’s functionality, streamline interaction and navigation patterns, and refine/design new page templates.