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.
of brand, UX, film, 3D and development.
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:
A project-specific 'development' page was later requested by the client, which I laid out myself.
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.
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.
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.
A video walkthrough of the final website (desktop) can be found below.
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.
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.