Ragnour

Time to talk about one of the best projects I’ve made — Ragnour! The major factor that sets Ragnour apart from my other projects is that this was a community contribution project. I didn’t have any client for it. It was essentially a website rescue carried out as an open contribution for the pet shop brand Ragnour, featured on the YouTube channel Sid Frequency.

As a person who loves dogs, this project holds a very special place in my heart.

Ragnour Cover Image

Planning

I’ve always enjoyed watching videos from the YouTube channel Sid Frequency, which focuses on exposing corrupt businesses and similar issues. In one of the videos, I came across Ragnour — a non-profit organization that sold dog food and used the profits generated to rescue and provide homes for abandoned and stray puppies. It was genuinely a beautiful act of kindness.

However, there was a dilemma. Their website was failing to retain customers, which significantly affected their outreach and impact. I felt compelled to analyze the issue more closely.

My first reaction was shock — followed by confusion. As someone equipped with adequate knowledge in UI/UX, I could clearly see that the website lacked professionalism and structural design clarity. The major issues included:

• Absence of a brand logo (crucial for brand recognition)
• Poor user experience and formatting inconsistencies
• Lack of product visibility on the home page
• Missing navigation links

Keeping these problems in mind, I decided to restore Ragnour to its former glory.

Original Ragnour Website

Getting Started

This project was primarily a front-end application with a strong emphasis on design and interactivity. The technical stack included:

• React.js
• Next.js
• Motion
• Tailwind CSS

After setting up the required tools and dependencies, I focused on the home page (landing page) of the original website. One of the most noticeable issues was the lack of dynamic responsiveness. The website felt overly static and resembled a basic HTML and CSS implementation.

To address this, I implemented React.js state management, making the website more dynamic, interactive, and scalable. I also enhanced the home page by adding clearer and more detailed information about their mission, vision, and achievements.

Ragnour Tech Stack

Workflow

The main objective of this project was to significantly improve the User Experience (UX) and overall usability. A website with intuitive navigation and appealing visual design plays a crucial role in customer retention.

The key focus areas included:

• Creating easy and seamless navigation
• Clearly presenting information about their mission and products
• Developing a more professional and cohesive visual identity

This project provided valuable hands-on experience in front-end development and UI/UX design. Most importantly, it allowed me to work on something aligned with a meaningful social cause. To get a more detailed view into the development of this website, check out the video I’ve posted in my youtube channel.

Ragnour Redesigned Website

Conclusion

I completed this project within two days. The major improvements included:

• Adding a fully functional navigation bar
• Enhancing the UI design system
• Resolving critical UX issues
• Improving overall structure and responsiveness

In the end, I was able to address most of the critical shortcomings of the original website. I was highly satisfied with the final outcome and proud to contribute — even in a small way — toward supporting their mission of rescuing and rehoming stray puppies.

Ragnour Final Collage