A Quarter-Million Pounds?!
In 2020, Atlas, a London-based commercial and residential property development company, approached me to work on their lettings website.
While their commercial work had proven prosperous, residential had fallen by the wayside, resulting in tenants primarily being referred through external agents, costing Atlas a quarter-million pounds in referral fees each year. Over a period of 2 months, I revamped their lettings site to boost organic discovery, in turn reducing their referral fees.
My Role
I led the design efforts from start to finish, collaborating with creative agency Graphicks to manage the delivery and YouDigital, a development agency to develop the site.
Scope
After being offered a full-time role at GoHenry, my involvement in the project had to be cut short towards the end, with Graphicks carrying the work forward. However, by this point, I had defined the UX and UI direction, agreeing to continue consulting on the project through to delivery.
So, what exactly’s wrong with it?
The project kicked off first with an Audit of the pre-existing site, focusing on the homepage and property detail page, resulting in a list breakdown of the UX and UI issues that needed improving.
UI issues
- Overall, the site looks gloomy
- 'Arrange a viewing' CTAs look more like a google ad
- Absolutely no clear heirarchy
- Icons missing and barely visible at small resolutions due to being outlined
- The colours used for typography fail legibility contrast guidelines
UX issues
- The limited number of properties render the search filter bar useless
- '+' icon for saving favourites isn't clear
- The CTAs on the bottom right are confusing; they have '+' symbols, which doesn't truly represent what they do.
Exactly My Type
At first, for consistency sake, it made sense to use Atlas' existing typeface, 'Glametrix', for the type system; the typeface was used across their offline materials, including their logo, business cards and brochure folders.
However, it quickly became apparent Glametrix wouldn't be legible for description paragraphs, let alone headers; instead, I opted to use Gilroy, a clean, versatile typeface that's perfectly geometric. Its versatility of weights made it suitable across the board for applications, including headers, paragraphs, CTAs and other offline material.
Icon See Clearly Now
Instead of just replacing the missing icons, I built a new icon library using a mixture of custom icons designed to communicate the number of bathrooms, bedrooms and living rooms; and general icons sourced from Google's Material Design System Icon Library.
The new set of icons were designed with a block composition, instead of the older stroke-outlines designs, ultimately to optimise how recognisable they were when displayed at smaller sizes.
Less Doom and Gloom
To counter the old site's gloomy, colour palette, I opted to make it lighter, mainly to help with contrast and accessibility, but more importantly, to create a feeling of optimism and excitement for that person searching for their new living space!
We also used Atlas' orange from its Cypriot roots as its primary accent colour to help with hierarchy and screen scannability.
CT-Ace
I created an entirely new set of Primary and Secondary buttons to accommodate text and text with icons in both default and hover states.
Bits n' Bobs
Aside from the usuals, I also built a library of additional components, including:
- Property cards found on the home & search results page
- A variety of filter modals for filtering results on the search results page
- A tab bar for viewing the different aspects of the property i.e. gallery, floorplan, map view etc.
- A set of input fields including all their states along with icons and colour styles to make them accessible
- A nav bar to work across desktop and mobile
Before & After - Homepage
Using the all-new set of components and foundation styles I built, the home page evolved into something a lot more current, usable and most importantly, accessible in the hope it excites prospective tenants in the search for their new home.
Before & After - Property Detail Page
The property detail screen additionally transformed into a much cleaner design with clearer icons, contrast and CTAs, allowing the user to grasp the critical information quickly without having to complete the pre-existing cognitive guesswork to figure out what to do to arrange a viewing or make an offer.
£50K reduction
By carrying out a total sitewide revamp, we began to see a lot more tenants coming organically via the website; as a result, Atlas reported a £50K reduction in referral fees.
Their goal now is to fully relaunch Atlas on Rightmove and ramp up social media efforts to increase organic tenancies, hopefully further reducing their referral fees by an additional £100K.
