Case Study


graphem projects FFCB hero 1440




L’Annuaire des services en français en Colombie-Britannique (The Directory for French Services in British Columbia) is a part of La Fédération des francophones de la Colombie-Britannique, FFCB, (The Francophone Federation of British Columbia). Their mission is to promote, represent and defend the rights and interests of Francophones in British Columbia and to preserve linguistic and cultural heritage.


Graphem’s collaboration with FFCB began with analyzing the core of what L’Annuaire is: a space where businesses and users can share products, services, events, and job offers all in one Francophone-specific website.

It was therefore a question of making the website attractive for advertisers and users, as well as integrating communication and interaction between the two user groups.


  • Create a more evolved user experience while maintaining the look and feel of their current website.
  • Allow advertisers to create listings for their business based on their subscription type to L’Annuaire.
  • Move all of the existing advertisements, businesses, and users to the new website.
graphem projects FFCB development



Project Kick-Off

The team at Graphem began with a kickoff meeting to look over and discuss the features and design specifications. We then broke down the features and designs into weekly sprints and goals to follow throughout the project timeline.



Graphem held weekly project meetings with FFCB to analyze the progress made for each sprint in the development stage.

We then adjusted and fine-tuned things to accommodate any changes needed throughout the development process.


Code & Design Review

While in development, we also had our QA analyst review completed sections of the website to ensure that each stage is completed to both FFCB’s and Graphem’s standards.



Part of the deployment process included migrating all of the existing users and advertisements to the new database and server. Graphem also created video tutorials and guides on the new backend management processes in french for the team at FFCB.

With all our projects, Graphem also makes sure the website passes the following tests in a controlled environment before the launch:




While maintaining the initial look and feel of the original website, Graphem elevated the design by harmonizing each section and enhancing the capabilities of the Explore, search, home and single advertisement pages.

graphem projects FFCB solution design


The Advertiser Dashboard

Graphem wanted to make it easier for businesses to manage their listings by creating a user dashboard. Here, each advertiser is able to manage their account, subscriptions and listing.

The dashboard also allows the advertisers to view how well their ads are performing by displaying statistics such as how many views a listing has gotten or what type of device the ad was viewed on.

graphem projects FFCB solution ads


The Advertisement

Graphem created 3 different types of listings: Job Postings, Events, and Advertisements. Based on the type of listing selected, the user can RSVP to an event, apply for a job or find local Francophone businesses.

The advertisement also has an embedded contact form, this form sends all notifications straight to the businesses; putting the customer directly in touch with businesses.

graphem projects FFCB solution ads 04


Advertisement Creation

Graphem also improved the process of creating advertisements for businesses by putting together an easy to follow step by step form.

Here, the advertiser is able to select what type of listing they’re creating, select the subscription plan they’re using, fill out all of their ad’s details and preview the completed listing. After filling out the form, the listing is then sent to FFCB for review.

graphem projects FFCB solution ads 02


User Experience

FFCB wanted an easy way to approve and manage their listings. We enhanced FFCB’s admin panel by having quick actions to easily preview, edit, delete, or approve each listing.

Graphem also made it easier to find local listings by adding the ability to search by region, listing category, and by the users own location.

graphem projects FFCB solution ads 03