Redesigning a brand for the digital present

Responsibilities

  • Web Design
  • Visual Design
  • Prototyping
  • Wireframes
  • Icons

Tools Used

  • Webflow
  • Illustrator
  • Photoshop
  • Sketch

Client

Lets Move Properties

Year

2020

The Problem

The old website was very cluttered in terms of organization and design, with different unrelated slideshows with random images. The “About Us” section was at the very bottom, with the other sections being displaced across the main site, giving the impression that the website is a neverending work-in-progress.

This feeling was also more apparent at the “Current listings” section where all the properties were presented as columns with long paragraphs, with the price and address all included at the main title, being really difficult to found relevant info like the number of bedrooms, bathrooms, other amenities, etc.

Furthermore, the website was not responsive or adaptive in any way, showing the desktop version by default if a potential client tries to access from any other device different than a laptop.

 Logo Redesign & Icons

With the redesign of the website, a new logo was needed to reflect more on the idea of housing and rental. With only 3 different shapes, I manage to illustrate the concept of a comfy house and the huge options available at the disposal of potential clients. For the business name, the company wanted to keep the order of words they had, but in order to manage a more friendly approach, a combination of two round edge fonts (Comfortaa and Cocogoose) were used instead of their previously generic font, giving the overall a more digital and kind style.

The icons were designed as a way to illustrate the key components when looking at a property: the number of bathrooms and the number of bedrooms. The hand with the key icon was also created as a visual aid to quickly identify the “Landlord” and “Tenant” concepts.

Electric Blue

#2134fe

Irish Green

#0bc24b

Montserrat

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Color & Typography

At first, I wanted to keep the pale blue used for the banners on the old website, but then I noticed they were using a different and much stronger blue for their main offices in Dublin. In order to keep consistency and coherence across the physical business and digital platform, I choose to use the strong blue (“Electric Blue”) for the main icons and buttons, with some variations of lighter tones for the background polygons. The Irish green works for some of the accents links like, “See More” or “Read More”, as well as a way to reinforce the feeling and confidence that the brand is a 100% Irish company.

Monserrat was the chosen font for this project, as it is really easy for the eye to read, and is widely available everywhere since it is one of the most used Google fonts for web and digital.

Low-Fi Wireframe

The new website has to bring organization and current design trends to step up their digital brand. The top navigation was remade for a more clean and polish look, followed by a Call-to-action statement. I bring back to a more relevant position the “About Us” section, with a picture that reflects the tone and feels.

One of the main additions was the inclusion of the “New Rentals” section, where the top 6 properties are presented as cards, seeing at first glance their key aspects with wiser use of the space., and the possibility to check the full list of properties if needed.

The information section was aimed to contain the “Tenant” and “Landlord” sections, with has little information as possible, in order for potential clients to click in one of the two options to read more information.

As a client petition, I add the contact option at the end of the page, with separate boxes to not overburden potential clients with infinite form lists.

What I delivered

After a few iterations and with an established wireframe in place, I started to build and populate it with pictures that reflect a closer look at what we can find once the page is finished and live.

Keeping the different variations of blue tones across the whole page was also a mandatory feature, designing a geometric background with different shapes to perpetuate the feeling of “modern”.

Small shadows were added to add some depth, as well as applying the same radius in all boxes.

An accent color was added in some keywords to distinguish them from buttons, as well as serve as to point out words that we don’t want the client to missed out, like the property prices, title of the contact form and the “Read More” links.

Lastly, another key problem was answered almost automatically thanks to using Webflow, as it creates adaptative versions without too much hassle, being now the web easily accessible from any device.