Priffle Website Development

Ugi Stelmokaitis profile photo

Ugi Stelmokaitis

Sydney, Australia

When:

November, 2021

Role:

Front-End Dev, Maintenance

Technology:

Typescript

Prismic

Nextjs

Case Study - Priffle

Website development from the start to finish

Priffle is a Sydney-based Digital Design and Development agency, with the mission of harnessing the power of brands and making them stand out in the crowd.

Priffle needed a website that would allow them to showcase their stunning work, attract new clients and promote their business through the website by delivering exceptional user experience. In order to achieve the goals, I needed to create custom UI components and layouts, as well as complex pages including case studies, blogs, and contact pages.

Case Study - Priffle
Case Study - Priffle
Case Study - Priffle
Case Study - Priffle

Goals and opportunities

The primary goal of Priffle's website was to make it fully content manageable, reusable, secure, and quick while also handling a large quantity of information effectively and high-resolution pictures and videos.

I chose Prismic to develop content management website since it's superior than any other platform such as Wordpress in terms of building custom website development with beautiful design and modern technologies. This is ideal for running a big and complex website like Priffle as any adjustments are very simple to deploy or modify.

Setting up Prismic Slices

To begin, I created page sections, set their model, modified settings, deployed them, and provided a visual interface with Prismic SliceMachine. I wanted to make sure I could construct web pages dynamically from a collection of pre-defined components while adhering to Priffle's design system. This way I was able to get everything in place and cut the waste, which allowed me to ship the product ahead of schedule.

Case Study - Priffle

Developing fast, flexible and scalable website

I built Priffle's website with Next.js 12, ESLint conformance and Webpack 6 compatibility, writing in Typescript and using Vercel and Prismic to build great digital experience across the site with blogs, case studies, and other contents.

Priffle code

Building blog pages with Fuzzy Search

One of Priffle's primary business goals was to increase site traffic and, eventually, convert them into potential clients. For Priffle to succeed, it was a must to have blogs. I used Google Search Console in order to help them discover what sort of content would be required to attract the visitors.

Those features are necessary for Priffle's blogs:

  • Search bar to allow users to find relevant articles quickly and easily.
  • Category to allow users to browse certain topics easily.
  • Recommending 2 relevant articles by algorithm at the conclusion of an article to keep visitors engaged and stay longer on the site.

I used Fuse.js, which is a JavaScript library that provides fuzzy search capabilities for applications and websites to create those features in blogs. It's because It's simple to get started and requires minimal effort, but it also has configuration options that allow me to customize and create sophisticated solutions, which was perfect for building Priffle's blogs.

Case Study - Priffle

Custom animated cursor

To make the website more vibrant and engaging, I replaced the native cursor with a custom animated cursor, consisting of an inner and outer dot that change inversely as the mouse hovers or clicks.

I also implemented Post CSS to ensure that the text is highlighted with Priffle's brand color when users select it to improve the appearance and elevate the experience.

Lighthouse and SEO

It was critical to develop a quick and responsive website for Priffle, not only to provide a great experience to users, but also to improve its SEO ranks.

According to Google, the site speed is a key ranking factor, so I focused on ensuring the site was performant and the Lighthouse score was high. I utilized HTML Elements correctly in order to make sure it will increase the speed of server processing a request from users' browsers and rank well in Google search results.


© 2022 Ugi Stelmokaitis. All Rights Reserved.