Developing a Rich Single-page Application
Overview
Our client is a leading Pet Products and Services provider in North America.
The client's existing website was too complex for users to navigate, hard to manage for its administrators, lacked scalability, and was difficult to make updates. They were looking to develop a rich, single-page web application, that would optimize the cost of hosting, scaling, and maintaining the website while maximizing page load speed. The application had to be practicable and controllable; ease of publishing was paramount while both employee experience (EX) and customer experience (CX) needed to be best in class.
Project Outcome Metrics
A new, lightning-fast web presence with content pages loading in 100 milliseconds
Entire project delivered within four months
12,000 users signed up seamlessly within the first four weeks of launch
Services: Customer Experience - CX • Employee Experience - EX • Jamstack • Cloud-hosting
Sectors: Pet Products & Services
Technologies: JavaScript • Gatsby • AWS • Node.js • Contentful CMS
Challenge
To launch a new web product whose success is measured in volume of visitors - but each new visitor slows down the site
Our client was acutely aware that they faced a tough challenge. They understood that their existing platform already featured a cumbersome UX/UI, and SEO was not optimized. The publishing process was manual and on-premise, resulting in suboptimal EX and CX. All of this was impacting revenue growth and increasing time to market.
However, how could they launch a new product whose success would be measured by the volume of visitors when each new visitor would slow down the site? Additionally, a slow loading website would not only curtail their success in the short term, but also prevent their model from scaling with new visitors and as new content was uploaded.
Finally, from the outset, the client made it clear that they wanted to optimize the costs of hosting, scaling, and maintaining the website.
Solution
Define needs - and pick the right tech
We began by analyzing the client's requirements for their website and collaborating with them to discuss a scalable architecture for a single-page application. Our developers brainstormed with their CTO to identify the top-grade technologies that could be leveraged to develop this single-page app, while keeping the future roadmap of the product in mind. Essentially, the CTO wanted to use technologies that scaled, were future-proof, and had a relatively large developer base working with them.
Next, scrum boards were set up and teams of our engineers were deployed across a number of tasks. We decided to work with JavaScript technologies like ES6, Express.js, and Node.js, on the back-end, along with AWS technologies like ECS, SQS, Cognito, and S3 - all of which were configured to pave the way for an ultra-optimized and scalable back-end. Following this, Swagger tools (Swagger UI, Validation, and Router) were leveraged to build APIs that could facilitate communication between the front-end and the back-end in a simple, fast, and secure manner.
Actionable reporting and future-proofing are critical
Finally, Newsrelic was used for instrumentation and reporting, while we also set up an integration with Dependabot to ensure that our technology stack stays up to date along the product roadmap - in other words, we implemented for the present while developing for the future.
On the front-end, we deployed Jamstack technologies like Gatsby.js to render a welcoming interface to a website loaded with bespoke functionalities for pet owners. A storefront was implemented that recommends the right products to pet owners by making use of the data that they provide about their pets, while nudging them to sign up for classes and training programs for their pets. Finally, we paved the way for the first version of the website within a matter of four months - getting most all of the pieces right the first time.
Outcomes
With minimal iterations involved, we fast-tracked the development of a rich web application for our client while ensuring minimal back-and-forth for our developers and our clients.
At the end of the first phase of this engagement, we rolled out the website. The client signed up 12,000 users within the first four weeks and the site delivers content to users at super-fast speed: the content pages load within 100 milliseconds, and sign-up and login processes have been configured to onboard users with minimal friction. We hope to add further value for our client as our developers continue to add features to the site and monitor and optimize it for key metrics.
27%
back-end work improved hosting costs
100ms
content page load time