Fahel & Co

UX Design, UI Design

Fahel & Co is a property management firm based in Ottawa, Canada. Currently, they have over 300 landlords in the city using their firm. Fahel & Co offers a variety of property management services to landlords which include: maintenance, property inspections, rent collection and tenant complaints. Fahel & Co also actively gives back to the Ottawa community, supporting local charities such as CHEO.

Don't have time to read the case study? Click here to see the live site.

Problem

Fahel & Co needed to have a stronger connection to their target audience. They felt that their site was not 'up-to-date' and lacked a professional feel. They needed their site to feel fresh, while still allowing users to easily access their services.

Objective

I had to redesign the user interface of their site. First, I would need to ensure the redesign is usable. Then, I would determine the site's visual design (typefaces/typescale, colour palette, etc). I also needed to create the site's graphics, buttons, icons and other UI components.

The Old Site

Fahel & Co's old site was visually inconsistent with their brand. This was due to the multiple styles of graphics, fonts and colours they used. It lacked the professional feel they wanted their clients to experience. Also, the content was not organized in a proper grid system, which made navigation and accessibility difficult for users.

Stage 1: Research

First, I conducted background research on Fahel & Co as a company. In order to accurately redesign their site in a way that could attract new customers, I needed to fully understand what the companies' vision, target audience and unique selling point(s) were. With this new imformantion, I could pin-point the problem with their old site, and then ideate a solution for the redesign.

Who are Fahel & Co?

Fahel & Co is one of, if not, the fastest growing property management firms in Ottawa. Their main goal is to help landloards maximaize their profits and to minimize their vacancies. Overall, Fahel & Co aims to reduce the stress of maintaining property for landlords.

Because of how fast they are growing, Fahel & Co have been rapidly expanding their brand. Their next step was to update their website, since a large number of their clients look for listings online.

They needed their site to feel new, innovative and professional.

Target Audience

Fahel & Co want to apeal to a younger, hip & forward target audience. They strive to be a company that is innovative & heavily integrated with technology. Their primary demographic would consist of young to middle aged adults; specifically landlords/property managers who are independent and technologically adept.

Through research, I discovered that:

  • About half of property managers are self-employed, and that almost all of them work out of an office.
  • As a landlord, you would have to deal with challenges such as repairs and collecting rent.
  • A lot of unexpected expenses may arise, which can be quite expensive while owning a prpoerty.

User Persona

I developed a user persona based on my background research. This persona was made to represent the typical user of Fahel & Co's website. It outlines the user’s personality, needs and frustrations.

What is the Problem?

Fahel & Co's old site was not only visually unappealing, but it was generally unorganzied. The site didn't relfect the profesionalism and convenience they offer to clients.

Young landlords need to easily access and navigate through Fahel & Co's site. In order to increase revenue, clients would need to easily identify their services.

Competitor Analysis

Before initiating the ideation and sketching phases, I did a competitor analysis on 3 existing property management sites based in Ottawa. The analysis helped me draw inspiration from successful website solutions, as well as to learn from and improve on their shortcomings.

Stage 2: Design

After completing my background research, it was finally time to start designing. Before I could start redesigning the site's user interface, I had to draw some wireframes first. These wireframes helped me and the client visualize the site's structure, and how users would navigate through it.

Sketching/Wireframing

I created a low-fidelity wireframe for each web page. It was important for me to organize the site's content using grids systems. I knew that keeping content organized would greatly improve the accessiblity of this site for all users. A cleaner layout would also make the site look more professional.

Home (Pt. 1)

Home (Pt. 2)

Home (Pt. 3)

Listings

Blog

Contact

Interactive Prototype

After creating the wireframes, I started to build an interactive prototype of the site. With Adobe XD, I created the layout of the site for both desktop and mobile screens. I determined and created the visual components of the site which includes typography, graphics, buttons and icons.

Home

Listings

Blog

Contact

Typography

The reason Muli was used is because of its accessiblity and professional look. Muli is a Google Font, which makes it easy for all users to access. Muli is also easy to ready, and scales well on smaller screen sizes. This font also looks professional but inviting, which fits with their brand strategy.

Colours

These particular shades of green represent Fahel & Co as a brand. However, the reason why green was chosen in the first place is because it represents money, trust, and 'freshness'. Fahel & Co want to appear innovative — they also want their clients to trust their services. The site also uses some light grays and lots of white space. This was done to make the site look clean, organized and professional.

Final Design

After testing the prototype with the client, final adjustmenst were determined and completed. Afterwards, all of the site's components and wireframes were sent to Fahel's web developer. Overall, the live site stayed very true to the prototype I designed. The site is still in its early stages as more pages will be developed in the future.

Click here to see the live site. Or scroll down to see the full site mockup.

Home

Listings

Blog

Contact