Gate Three Landing
UI / UX
Designed to serve as the landing page for EllisDon's construction management platform, Gate Three.
EllisDon is one of Canada's largest construction companies. Embracing a Cradle-to-Grave philosophy EllisDon aims to merge the digital and the physical through the entire construction process. As a Senior UX Designer my role at EllisDon has been to work on a redesign of Gate Three, their construction management software.
This was one of the first projects I worked on as UX Designer when I started at the company and is currently the only publicly accessible aspect of Gate Three. It has two functions, it's primary function is to serve as a landing page for users who have access to the platform to sign in. It's secondary function is to allow people who stumble upon the site to subscribe for news and updates on the product.
Demo Video
This video demonstrates how the user interaction with the site works. There were some differences between the finally developed version and the final design due to certain technical restrictions. The interaction demonstrated in this video is how the design was intended to be implemented.
The interaction was designed as a journey for the user that would deliver key points and finally lead to a Call-to-Action section at the end. On load the user is presented with an abstract macro shot, which quickly pulls back to reveal a tech-cube structure that opens up revealing a stream of light. That stream of light is a guiding element in the design that acts as a way to guide and prompt the user to scroll down the page.
Main Sections
The design was created in three basic section types. The first was the hero section which would be where the user lands when they load the page. The second section type has two key elements, a glowing nodal point and a key point about the platform. The third and final section type is the Call-to-Action section for users who are just discovering the product.
Moodboards
The brief for the project was very general and the content itself was high level. This in combination with the fact that I was just starting at the company and didn't know the product made creating moodboards to get everyone involved in the process on the same page essential. Above are two key moodboards created from sourced images that helped to drive the creative direction of the project. We continuously referenced these moodboards as we were working to ensure that we were conveying the look and feel that we were trying to achieve.
Research + Development
Over the course of this project there were many iterations and I had to learn a lot in a quick time. Above are some frames from different iterations and experiments in the design process.
For this project I used Cinema 4D to generate some basic shapes that would represent building blocks. Through texturing and the use of displacement maps these basic forms were transformed to feel more like technical components, similar to a processor or circuit board. The concept for this project was that Gate Three serves as a building block for the physical operations component of EllisDon. As the block opened it reveals a very digital tron-like beam of light that powers the building the block and anything those blocks combine to make.