'The UK’s leading PropTech solutions and services for estate agents, all in one place.'
The project brief was to design & develop a new website to showcase the services that the collaborative network of suppliers offer, and to generate new leads.
Using an existing UI Kit as a framework, I customised the design and developed additional modules and features which resulted in a unique and interactive website.
Working this way allowed us to jump straight into high fidelity prototypes and focus the energy of the team (myself, client partner, project manager, content marketing) on the user experience of the site, for example mocking up how case studies could work combining multiple ICG suppliers.
After trying out a few different options for the home hero area, we went with this design shown below. Displaying key information 'above the fold' on the homepage helps the user to understand what the site is about, before even scrolling or using the menu.
As there is many suppliers in ICG, using a slider for brand logos was a great way to showcase each of them, and it sends a visual message to the visitor that there is many different suppliers in the collective.
I picked imagery for the site early on, such as in the background below, which helped to tie together this idea of collaboration between teams.
This shows how a case study is visualised, with the collaborating suppliers, and the relating products tagged. Visually showing the user more about the content item including the image, title and short bio.
The user could click into the article, or go to any of the product pages linked, or go to one of the suppliers pages. Each of these pages will also then display other relating linked sections of the site.
Subtle details make all the difference with interaction & animation design.
On hover, these link blocks almost push out of the page. It's the colour change, the gradient, and the upward movement by a few pixels that creates this effect.
On some pages, important content or relevant actions appear to fix below the main nav and scroll with the user down the page.
When there is a lot of content to be shown, a page risks becoming cluttered and hard for the user to navigate. A good solution to help remedy this is to use accordions, which open or hide extra body copy at the user's control.
The simple hover, and open/close states, give an interactive feel and breathes a little life into the design. Adding to this is the use of the fixed-scrolling effect on the left side main content, so the user feels as if they are in that one section, and avoids having blank space on the page once scrolled.
Another important custom feature is the dropdown 'mega menu' which answered the requirement to help the user navigate the various sections and child pages of the website with ease, by accommodating a lot of content.
The simplicity and clarity was achieved by using big chunky link blocks, icons, headers, descriptions and simple hover states.
I built the menu with a variety of optional grid layouts which could change depending on the content needs of the section. They all however, use the same design language and fit as a family within the menu, keeping coherence and familiarity.
Below shows the events menu, with a list of the most recent events being pulled in. There is conditional logic to the feed, so if there is not upcoming events, then it will show the most recent.
Having an event calendar was a key requirement of the ICG Approved website. I made sure the UI of the calendar used similar interactions as other modules on the site, whilst adding in new layout elements to suit the section.
The calendar page also used conditional logic to show the user up coming events, and past events. Once an event has passed, if it was video recorded, the 'RSVP' action on the event detail page turns into 'Watch On-Demand'.
Also if there is no upcoming event, then it will show a form for the user to sign up for updates.
We created conversational forms using Typeform, which are kind of 'smart' in that they remember information that you've already filled out, and use it later in the form, among other features.
In the 'Estate Agent Membership' form, the user is guided through each step one-by-one, and there are questions that branch out into specialised questions based on the answers given. This acts more like a conversation, and gives the customer support more information to ensure greater understanding of the inquiring new member.
I picked and implemented looping video backgrounds into the headers of the main pages on the site. Adding life to the page and giving a techie & exiting feel to the visitor, fitting with ICG's brand tone.
While the site was still in development stages, I built a holding page which had the ICG logo and main hero image which could act as a jump off point to their social pages, and with a form for visitors to sign up to be notified when the site is live.
This meant that the content team working with ICG on their social presence, could continue with campaigns to promote the collective pre-launch.
Here is the intro animation which is triggered by the page load.