Frankford Arsenal

Promotional Website

  • UX/UI

  • Motion Design

  • Front End Development

featured image thumbnail for post Frankford Arsenal

View Site

Context

During my time at Cohere I was able to work on a promotional website for Frankford Arsenal, an upcoming workspace in Northeast Philly with a rich history.

The aesthetic for Frankford Arsenal revolved around promoting a modern approach to the workplace. The Frankford Arsenal was a large munitions factory in Philadelphia from 1816-1977. It was, during its early years, the largest ammunition plant in America. At one point, it employed 22,000 people. Not just factory workers, but scientists, engineers, and innovators.

Now, the Arsenal is becoming a new workplace. One for modern companies to inhabit with the same sense of innovation. It will become a new hub for the surrounding community, just as it was so many years ago.

View on large desktop

Experience Design

I was tasked to create a fully responsive and interactive site based on static desktop mockups given to me by the graphic design team.

I decided the navigation should stay at the top of the page to allow for more screen real estate to be occupied by the impressive photography. To make sure users could still navigate through the sections of the page, I added a fixed sidebar on the side of the screen that allowed users to jump around with ease as well as tell them where they are currently located.

Header Moment on iPad

The original design chose to make sliders with arrow buttons to scroll through the images. I chose to mostly remove those buttons and instead implement swiping functionality directly on the featured image. This saved space on the page as well as made for a more natural interaction with movement for the user at all screen sizes. To reinforce the availability of this functionality I added small dots under the sliders to indicate there is more content to view.

Mobile Sliders iPad with pencil view

Animation

As the interactive developer it was also my job to design and implement the animations for the page. It was important that users could interact with the beautiful imagery and historical information in unexpected and interesting ways. This is the kind of fine tuning that brings a promotional site to life and adds character to the brand.

Arsenal Header Animation

Development

I built this site with a new site builder tool called Webflow. Most of my experience for building sites has been with a more standard stack. I was skeptical about relying on a site builder, however I found Webflow to be quite comprehensive. It used a true development workflow. You feel as though you are building on one half of the screen and then seeing the live result right next to it. It is a strong visual interface that I had little trouble with. I would not say I prefer it to a typical web stack but it was an impressive tool. A lot of the sliders, due to their intricacy, required outside coding. I built those sliders using flickity, a js library.

Desktop sliders