Ahmed MKY - Creative Works

Overview

First Captial Reality is one of Canada’s largest owned, developers and operators of mixed-use real estate. FCR was going through a rebrand . The company wanted to publicly launch their new corporate brand identity – new logo, tagline and visual elements - with a new website that embodied their new visual identity and strategy. The elements of the visual identity were designed to work together to bring the company's vision to life through their signature tagline: creating thriving urban neighbourhoods

Platform

Wordpress x Gutenberg

Team & Role

Creative Director

Product Owner

Content Creator

Product Deigner (Yours truly)

2x Software Developer

Timeline

12 Weeks

Problem Space

FCR needed to launch a rebrand of their website in time for their annual board meeting. This gave us a 12 week timeline to design and develop a website for a publicly traded company. This was not an easy challenge. Due to the short timeline, we could not afford to make any mistakes. Communication and alignment were extremely important. We needed to establish a solid pattern language as quickly as possible.

FCR Website Prior to Redesign

Our team was not responsible for the redesign of the brand. Our research included a study of their current website and metrics, research of the existing ecosystem, and a walkthrough of the new brand guidelines provided by a company called OV.

Competitor Research

We collected inspiration from a vairety of competitor websites. During the reseach phase, we were looking for the most proimenet patterns across the real estate space. We also found inspiration from relavant product expeiriences such as Airbnb.

Establishing a Pattern Language

Establishing a pattern language, as early as possible, was necessary in order to ensure consistency and avoid any alignment issues during the project. We started by establishing the foundations of the language we were going to use; our grammer. That meant outlining our lowest level patterns: colors, spacing conventions, fonts, and icon library. Each pattern is connected to certain “higher patterns", which come above it in the language.

How the sausage is made 🌭

Atomic Patterns

Each pattern helps to complete those larger patterns which are “above” it, and is itself completed by those smaller patterns which are “below” it. For example, by combining ‘Font type’ and ‘Scale’, we get a pattern for Typography’. We could also combine ‘Icon’ with ‘Border’, to get a pattern for ‘Button’. These are the kind “mid level” patterns that are used in this system.

Higher Patterns

Higher patterns consisted of a collection of “mid level” patterns. Therefore, you will find that the pattern for ‘Highlight Slider’ is connected to the lower level patterns: ‘Cards’, ‘Button’, ‘Image Treatment’, and ‘Typography’.

Organismic patterns, or components, consisted of a collection of “high level” patterns. Any pattern at this level is translated into a jira ticket, to be discussed with other teams such as development or marketing.

Molecule

Organism / Component

Results

The project was completed in a total of 12 weeks. fcr.ca was launched in January 2020. Please feel free to reach out if you would like to discuss this project further.