Yale Door Project Overview
 

I designed the user interface for Yale Door (www.yaledoor.co.uk) from the ground up over several years, iterating and improving the design based on analytics, testing, user feedback and shifts in both product and marketing strategy. It contains a fully functioning online configurator and is adaptive to offer tailored experiences based on the device of the user.

While the project was demanding (and is ever ongoing), there are a multitude of other aspects of the site which required ongoing attention, such as designing user flows for new lead generation tools and writing on-brand copy.

The new website has generated an increase in conversion rate and plenty of positive feedback from customers.
 

 


Building the Interface

The new Yale Door site was launched in several stages. The first brief was to completely replicate the old site's content within a new design, which was challenging as not only did that include some outdated pages (301 galore), but I wanted to introduce a light, open and simple UI to replace the claustrophobic dark design that came before. Naturally it was critical to to ensure existing low-content pages weren't drowned in negative space in the new world.

The second phase was done over a number of Agile scrum cycles, with the aim of tackling key landing pages to improve their performance and add interesting, interactive elements as and when we could. This involved complete overhauls of site navigation, sitemaps, product pages and evolving information pages.

Below are some of the recent UI elements that were created in this second phase, along with a wireframe. 

 

 
yale-progress-shoulder.jpg
Final Caption
Caption here that shows some interesting shit going on, you know?
Another caption that highlights just how much thought has gone in to this badboy.


New Customer Email Flow

Having spoken to customers and understood that post-order communication was a company weak-point, a new user flow and set of email UIs were created to increase user satisfaction, order retention and recommendation rates. The first step was to blow holes in the existing pipeline and understand where the gaps were, followed by documenting how we wanted the new journey to look and feel.

Once we had gotten feedback from internal teams, I created the emails in line with the websites visual language, and writing the copy to be warm, concise and informative. Each email is scheduled to trigger a text message at various steps along the way, which ties in with our back office system.

 

 


Current Status
 

Currently I'm wireframing out a completely new 'touch' configurator which aims to eliminate scrolling. It's complex because there's a real challenge in showing a lot of information whilst trying to make it intuitive, but I think through the use of animation, UI prompts and contrast it will serve as a great adaptive module.

Eight content pages have also been singled out for a visual revamp to bring in the new visual language that has been implemented in print materials.

 

 
quality-laptop.jpg