Freshly Baked Web Experience for Leading Bakery and Caterer

With a legacy of over 120 years (since 1902), Perera and Sons is one of the largest chains of bakeries/restaurant services in Sri Lanka. 

Perera and Sons is widely known among the locals as a bakery/restaurant service with over 180 outlets. 

However, they are also a provider of catering services of various delicacies for events on a small- large scale. 

The website that was in use lacked awareness of the useful information on catering, functionality to place orders online and find their outlets. 

Hence, the clients were in need of a total revamp of the website. 

Thus, the key challenges were,
 

• Developing a user-friendly, responsive website that was visually captivating to optimize user sessions and engagement

• To raise awareness of the catering services and provide information such as menus, prices 

• To facilitate online order options and locate nearby outlets

After an in-depth research on user requirements and local/international F&B industry analysis, we identified the site architecture and the effective technological implementations. 

Our strategy included developing an automated catering quotation generator, integrating Google Maps to find nearby stores, and directing users to the respective sites for online orders.

 Our Design Process (UI/UX)

To design a user-centered design, the user flow architecture was decided to determine the content. 

On a Mobile-first approach, wireframe mock-ups were designed. 

Next, well-structured & web-optimized content that aligns with the brand guidelines enhanced the overall visual element and unveiled the brand story. 

High-quality WEBP images, mouse-over animations, clear CTAs, easy navigation, and white space created a clean, modern, and smooth web experience.

Technology Implementation

With HTML, CSS, and Javascript as front-end development languages, NodeJS, and Strapi Headless CMS were implemented as the back end technologies. 

An automated quotation generator replaced the usual quotation to address the key issue of catering pricing. 

In effect, a quote is generated when the user adds the number of guests and the menu of their preference.  

And each quotation will be stored in the back end for sales purposes. 

With Google Maps integration, users were enabled to discover the nearest P&S store based on their location with visual demographics. 

Also, order online functionality allowed users to place their orders via third-party apps to find nearby stores or purchase from the main outlet. 

Moreover, menus were categorized based on key dish basis, occasional basis, and timely basis to allow users to find the relevant menus quickly and easily. 

Appealing images of the menus and products allowed customers to make informed choices and be confident about the brand. 

Thinking out of the box, we developed a unique careers page that listed job openings according to the department, and location. 

Application submissions also generated automatic email feedback to the applicants.  And these applications would be stored in the back end for future purposes. 

SEO optimized blogs and technical SEO as per the Google Web Vitals were implemented to rank higher on SERP. 

Mobile optimization, cross-browser compatibility, and hosting the website on a cloud-based server with multi-region cached ensured more accessibility to a global audience. 

Moreover, HTTP 2.0 was enabled with an SSL certificate and TLS 1.3 for secure, safe browsing and encrypted data transactions.

The final website was mobile-friendly, informative, and facilitated easy functionality for both the users and the clients. 

After the launch of the website, web performance increased by more than 90% and average visitor sessions increased by 50%. 

Usual inquiries regarding catering information were also reduced which was time-efficient for customers and clients.

Visit Website