Yale Bi-Fold Project Overview


As part of a strategic entry into the bi-fold market, I led a two-week design sprint to create a 9-page micro-site from the ground up, focusing on delivering an engaging experience through key animation interactions, high-quality imagery and sound responsive behavior. The site was completed and put live, and marks my final project as Design Lead at Yale Door.
 

 
Final Caption


Early Planning & Wireframing

As we were creating the site with a new set of content, we gathered requirements from both supplier and internal stakeholders as to what we felt would be the core pages needed to serve our lead-gen strategy. It was decided early on that we'd build this as a micr0-site within the existing website, but with a new look and feel, so that we could could keep core elements of the AngluarJS framework in tact.

Once the information was set, we ran several whiteboard sessions to establish a mobile-first grid-based system (the dev team ended up using a modified Flexbox grid), and to throw around some layout and structural ideas for what would eventually be a modular design system. Animation was considered early -- we wanted to create something that would be engaging without being an afterthought.

I created a full set of wireframes following this, which formed the basis of the development sprint.
 

 
Caption here that shows some interesting shit going on, you know?


Building the Interface

Following the wireframes and whiteboard sessions, I moved quickly into high fidelity designs and prototypes, which allowed our front-end lead to move things into code as a series of modules (broken into text, image, card and form systems). Naturally it was created mobile-first, and assets for retina and non-retina were generated to ensure we weren't overloading devices with unnecessarily large images for no reason.

I developed a new set of colour and typography rules to serve as an extension to the existing Yale Door brand, ensuring that we had a cohesive -- but ultimately unique -- set of visuals for our micro-site. Interaction points were also designed at this stage, including the animation for hovers, actives and menus, which were used in feedback sessions with stakeholders and members of staff, all to make sure we had a usable end product.

 

 
Another caption that highlights just how much thought has gone in to this badboy.


Current Status

The site was delivered within 14 days start-t0-end, and was successfully put live. Since it has the foundations of scale, it's possible that it may become a separate entity in the future, with a store, product configurator and additional information pages. For now, it is generating leads daily and is being accompanied in the wild by a lifestyle product brochure.

The natural next step would be to conduct further user testing sessions with users, and to monitor early data for possible testing opportunities.