Matthew Lee Design & Development

About & Contact

Strada

Launch site: www.stradallc.com

Strada is a cross-disciplinary firm that blends architecture, interior design, landscape architecture, and exhibit design. They needed a new site that would reflect their recently redesigned identity and move them away from the text-heavy desktop site they had been using for years. Also, Strada had just acquired a second office in Philadelphia, which brought them new capabilities in exhibit design and graphic design. The new identity plus a major shift in the firm’s structure called for a website that reflected the bold changes taking place.

Strada

Working together with designer Jenn Piesetzkie, we led Strada through a discovery process asking critical questions about their audience, their competitors, and how they hoped to differentiate their firm. We found a core concept in Strada’s unique process of “PlaceMapping,” through which they strive to understand the client’s world and then create a place that people actually use and enjoy.

We wanted to fully explore the idea of the PlaceMapping process without getting in the way of visitors who mainly wanted to see work. We organized the site in a way that would address the needs of two kinds of users: the “browser” (those who want to immerse themselves in a deeper narrative about Strada’s culture and design philosophy) and the “seeker” (those who want to quickly get down to business and see the portfolio).

Strada Strada Strada

After a few rounds of preliminary design, I began to translate our layouts into front-end code. Rather than completely refining the static designs before starting to code, we intentionally decided to only take the comps far enough to approve a general design direction, then move them into the browser for further refinement.

Strada Strada

Similarly, we made very few comps for responsive behavior. We realized that extensive static mockups for responsive sites is an impractical approach, so I designed a good deal of the site’s responsive layouts and behavior directly in the browser while coding.

The merger of portfolios from the two offices was a challenge in itself. Much debate focused on whether the work should be organized by project type (residential, academic) or by design discipline (architecture, interior design). The answer—naturally—was both. A robust filtering system can sort the portfolio by either client type or the service provided, and the projects can be displayed either as a grid of photos or a list of names.

Strada

Each project template immersively captures the spirit of the places Strada makes. A responsive image carousel not only scales according to screen size, but also offers swipe-friendly scrolling for mobile users. (On small screens, the carousel transforms into a simple list of photos and captions, reducing page weight and providing an easier experience for smartphone users.) The page template provides a range of content options including project details, awards, links to press articles, and client testimonials.

Strada

Produced at Landesberg Design; art direction by Rick Landesberg

WordPress development by Blain Interactive

Information architecture and visual design with Jenn Piesetzkie

American Association for the Advancement of Science

HTML Styleguide

Center for Curatorial Leadership

Website

Local Initiatives Support Corporation

Online Annual Report

National Fish and Wildlife Foundation

Online Annual Report

NYC Office of Emergency Management

Intranet and HTML Styleguide

Roanoke College

Website

Spectra

Website

Strada

Website