Project Summary

FreshWorks Studio provided high quality nearshoring services and built a brand new Canadian website for A Place For Mom (APFM), an iconic Seattle-based senior living referral service. The new site integrates reusable components, SEO best practices, improved accessibility features, localization, and internationalization.  By creating English and French versions, APFM now has an adaptable site for all Canadians while the new technology stack we used is faster, better performing, modernized, and easier to maintain moving forwards.

Having launched the first version, we are working to further simplify the website designs and layout with the goal of continuously creating a more and more intuitive and seamless user experience. The new stack is intended to be used for a new version of their US site as well as other websites planned for future development that will help APFM firmly establish their international presence.  

 
 
 
 

The Challenge

For 15 years, A Place For Mom has been the leading senior referral service in the United States, operating in all 50 states and drawing over 1.5 million page views each month. A Place For Mom (APFM) recognized a growing need for their services in the Canadian market, acknowledging that their online platforms were becoming outdated in a rapidly evolving online environment. The site itself was functional, providing localized search results and a straightforward lead capture process. However the old legacy code, a retro colour scheme, and a cluttered dashboard just weren’t going to cut it.

APFM Project Team. From left to right: Jared Jewitt, Adam Dubicki, Vivian Zhang, Brendan Walker, JP DuBouchard, Rachit Khare, Kendall Olsen-Maier

APFM Project Team. From left to right: Jared Jewitt, Adam Dubicki, Vivian Zhang, Brendan Walker, JP DuBouchard, Rachit Khare, Kendall Olsen-Maier

The challenge: APFM’s online platform needed a facelift (both aesthetically and in the codebase) in order to stay competitive in the Canadian market. First and foremost, the APFM team needed a site that is extremely fast, SEO sensitive, and highly performant both on desktop and mobile.

Who better to build a Canadian site than a Canadian development team?




 

“In the beginning, we basically went down to Seattle and said ‘Hey, we’re from Canada, and we’re here to make an app for you!’”

Rachit Khare, APFM Project Manager

 
 

The Solution

A key requirement was to create a white label solution that can be extended to other APFM websites and applications launched in Canada, the US, and abroad. The end goal was to share the benefits of a modernized code base while allowing the sites to maintain their iconic APFM look and feel. Our solution was to create a UI Library of reusable components (such as call-to-action buttons, photo galleries, and input fields) that can be consistently shared among various web applications. The UI Library styles can be manipulated in order to change common style elements (i.e., the primary and secondary colour schemes) to give a particular website or page its own style while maintaining a consistent feel across the family of APFM websites.

 
FreshWorks_A_Place_For_Mom_Screens
 

Performance

Research shows that page speed is critical in attracting and retaining users on your website. The APFM website’s business model is geared towards getting users to provide their contact information so that the Senior Living Advisors can provide them with a service that is tailored to the user’s needs. In order to achieve accurate data handling without compromising speed, we used the ReactJS library and an internally designed Web Accelerator that caches API responses to ensure minimal latency. What does this mean? The site is fast. Really fast.

Furthermore, we consistently ran a set of tools to ensure we identify heavy and render blocking elements that impact page speed in order to enable us to optimize our JavaScript and CSS styles. The application is also built with support for localization of content. This allows the site to cater to both Canadian and American audiences and provides the ability to render content in English or French depending on the visitor’s location which will make the future French-Canadian audience very happy.

 

“The site itself is a fresher site, it’s a fresher design and it’s much more performant.”

Stuart Silberg, APFM CTO

 
 

Monitoring and Alerting

Capturing leads is at the heart of APFM’s business model.  By nature, web applications can experience spikes in traffic, issues with throttling and a number of other factors that can lead to users dropping off. With this in mind, it is imperative to always be on the lookout for certain events which may impede user experience or worse, take down the website completely.

Freshworks_New Relic.png

New Relic is a service which allows for the configuration of a number of key transactions and subsequent alerting mechanisms. FreshWorks set up a number of events based on certain thresholds being crossed (such as the number of current users on the site) to send out alerts via different channels (email, Slack, etc.). This will instantly notify key personnel of any potential risks on the website. Furthermore, key events are automatically logged in the ELK stack (ElasticSearch, Logstash and Kibana) and can be investigated in instances of lead submission failure. Investigating events allows for the development of more peculiar and comprehensive use cases to continuously improve the quality and performance of the website.



Improved SEO

SEO is perhaps the most critical aspect of the project, as APFM’s (wildly impressive) organic search ranking is to thank for the bulk of their online revenue. In order to reap the performance benefits of the ReactJS library and also allow the site to be discovered by web crawlers, the website had to be Server Side Rendered. FreshWorks employed NextJ to achieve this. Other SEO best practices such as using canonicals and hreflang attributes were implemented to provide the most relevant information for crawlers and yield higher rankings.

FreshWorks_A_Place_For_Mom_Screens

Maintaining a website which spans thousands of pages requires a lot of overhead to ensure content and cross-links are up to date. The presence of old or outdated links on a website can have a negative impact on organic search engine rankings. We used tools that would simulate crawlers in order for us to discover any broken links, redirects etc. and then fix these promptly as they were discovered.


Accessibility

Another key requirement was to meet Accessibility requirements for users with visual impairments that require the use of screen readers. We worked closely with APFM’s design team to offer recommendations to improve the accessibility scores while ensuring the best experience for visually impaired users. As a result we implemented the appropriate use of heading tags while structuring the page in HTML to ensure a consistent visual design.


Visit our blog to get all the details on the APFM launch celebration here in Victoria!

 
 

The Features

The app was built from scratch, combining the functionalities from the previous two apps and adding new capabilities. The user can now switch their language preference, purchase tickets and lift passes directly from their mobile device, and view locations of the attractions on the mountain in augmented reality.


Performance

Faster page speed, localized search results, internationalization features.


monitoring & alerting

Key events will now be logged and investigated using the ELK stack (ElasticSearch, Logstash and Kibana) to ensure better service and continuous improvement.

APFM_Screen_1.gif

mobile first

The new application is mobile first and responsive.

seo

Implementation of SEO best practices and a site that is Server Side Rendered will result in higher search result rankings.

accessibility

Additional backend features contribute to higher accessibility scores and therefore higher search rankings.

Tech Stack

Front end: ReactJS, Javascript (ES6+), HTML, Sass
Backend: Typescript, Node.js

 

What’s Next?

Research shows that page performance is critical in attracting and retaining users on your website.

As APFM continues to expand their operations and seek growth internationally, endless opportunities lie down the road ahead. With the successful launch of the APFM Canada website completed, the team down in Seattle already has big plans for their next steps in developing new websites for the US and international markets

 

“The site that FreshWorks built for us is going to be the template for everything else.”

Bernie Ziegler, Director of Quality Assurance, APFM

 
From left to right: Samarth Mod (FreshWorks CEO), Stuart Silberg (APFM CTO), Rohit Boulchandani (FreshWorks COO), Nitin Chandra (APFM Director of Apps), Bernie Ziegler (APFM Director of Quality Assurance)

From left to right: Samarth Mod (FreshWorks CEO), Stuart Silberg (APFM CTO), Rohit Boulchandani (FreshWorks COO), Nitin Chandra (APFM Director of Apps), Bernie Ziegler (APFM Director of Quality Assurance)

 

Check out our other projects