SEAPORT CIRCLE
PROBLEM SPACE
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.
DESIGN
OVERVIEW AND INITIAL CONCEPTS
I led the design of this site, with support from my direct supervisor. 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.
I began by exploring 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.
Slanted Motif: Inspiration and Experimentation
Circular Motif: Inspiration and Experimentation
DESKTOP DESIGN
Below is a summary of the key components of my final desktop design.
Slanted Motif
I 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.
Color Scheme
I 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.
Interactive SVGs
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.
RESPONSIVE/MOBILE DESIGN
When 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.
FINAL DELIVERABLE
LIVE WEBSITE (DESKTOP)
Below is a walkthrough of the live website.
KEY TAKEAWAYS
REFLECTION
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.
IMPACT
Seaport Circle recently won an International Architecture Award in the commercial building category, which was heavily supported by our marketing design efforts at Neoscape.