top of page
rendering.jpg

SEAPORT CIRCLE

THE BRIEF

Seaport Circle is a new life science hub in Boston, Massachusetts. While working at Neoscape, I was tasked with designing a multi-page website for the development.

TIMELINE

6 Months

May–November 2022

TEAM

Cross-functional team

of brand, UX, film, 3D and development.

KEY GOAL

Design a responsive multi-page site to attract potential tenants.

BREAKING DOWN THE PROCESS 

The site needed to have a clean, modern feel, heavily inspired by the materials produced by our brand team, and include interactive elements such as a building stack, amenity diagram, and neighborhood map.

Information Architecture and Wireframing

 

The IA and wireframing stage of the process was carried out by our Interactive Art Director, and followed our standard multipage format. The planned pages were:

  • Home

  • Menu

  • About

  • Availability

  • Amenities

  • Neighborhood

  • Gallery

  • Leasing

A project-specific 'development' page was later requested by the client, which I laid out myself.

Initial Concepts

After IA and wireframing were complete, I took over the project for the design phase, working under the supervision of one of our senior designers. 

I started to explore how various aspects of the brand package could be activated for the web to create a unique and distinct experience.

Slant Inspiration

Slanted Inspiration

Circular Inspiration

Circle Inspiration

In addition to conducting secondary design research focusing on modern life science websites, I drew inspiration from the slanted and circular motifs from the brand team's leasing presentation and played around with how they could be used in motion as transitional elements.

Slanted Experimentation

Circular Experimentation

Desktop Design

I ultimately decided to use the slanted motif more heavily throughout the design, with the circular motif becoming a more subtle element used for highlights. The slanted motif on a large scale in motion creates less visual clutter and is less distracting, especially for users with conditions such as ADHD. I also flipped the color scheme from the leasing presentation and used blue on white to make the website easier to read, brighter, and generally more approachable. The white on blue colorway was limited mostly to callout areas.

 

I was also responsible for creating the interactive SVGs that were used in the final site for elements such as the development map and building stack.

seaport-circle-desktop_edited.png

A video walkthrough of the final website (desktop) can be found below.

Responsive/Mobile Design

 

I was also responsible for mocking up a mobile/responsive version of the site for the development team. I relied heavily on my knowledge of CSS Flexbox, which resulted in a lot of column creation based on grouped elements, and reversing columns where appropriate. I also recognized where certain visual elements, such as the neighborhood map, would become too small if they were scaled down, so employed panning capabilities, with a drag graphic providing clear instructions.

Seaport Circle - Mobile

KEY TAKEAWAYS

This was one of the first responsive multi-page sites that I led the design of at Neoscape and got to see launched. The process involved interfacing with multiple teams and external clients, participating in development handoff, and handling asset production.

Seaport Circle also recently won an International Architecture Award in the commercial building category, which was heavily supported by our marketing design efforts at Neoscape.

Like what you see?

Let's chat.

bottom of page