Roff was one of the projects that I worked on as a User Experience Intern at Interaction One Solutions Pvt. Ltd.

Roff focuses on delivering a comprehensive range of tile and stone Fixing and Care products. They also offer a wide array of products in Building Repair, Grouting Solutions, and Waterproofing and Sanitary Solutions.


Pidilite Industries Ltd.


May 2020 to July 2020


To redesign their current website to reflect the needs and connect with their target audience, which is also responsive and works on a wide variety of devices.

skip to solution



image alt
1. Brief and Research

Study of the brand and understanding the needs of the client.

image alt
2. Analysis and Ideation

Identifying the user base and their needs, along with competitor analysis.

image alt
3. Design

High fidelity designs, close to the final product.

image alt
4. Reiterate

Feedback and rebuilding the design to perfect it.



Understanding the brief

The first week of the internship went into understanding the space which I will be working on. Interaction One provides a Creative Brief to the customers, and it has all of the important questions which would help us as a designer.

Target Audience
image alt


image alt


image alt


image alt


What we will be conveying

Pidilite acquired Roff in 2004. Since then, they have been catering to a wide variety of people.
One overarching question everyone always has is why they should use Roff over regular cement while tile fixing?
Even if they were to pick an adhesive over cement, why should they choose Roff over other competitors out there?

I intended to answer all of these questions through my designs.

The competition

According to Pidilite and the Roff team, their competition included Saint-Gobain Weber and MYK Laticrete.
Websites of other companies such as Mapei and Kerakoll were also taken a look at.

image alt
image alt

• The website looks clean and aesthetic.

• Usage of keywords to identify the products is an excellent way to highlight its features and sell them to the user.

• Inclusion of disadvantages tells the user that they care about all the aspects of the product and helps them make an informed decision.

• Weber's UI tries to connect emotionally with the user by using people in most pictures.

image alt
image alt

• The Information Architecture of the website makes it very easy for users to navigate it.

• The catalogue of products is divided into sections and cater to specific problems, which helps with the cognitive load for the user.

• Every product is approached via a particular issue and solution. Hence the user has a clear idea of the product and its usage.

• The UI follows their brand guidelines, with proper use of colours.

Usability testing

Before I went deep into the userbase, I went through the current website to find out its existing problems by conducting a usability evaluation. This gave me more clarity on what I should focus on in my designs.

- Low ease of use - Moderate ease of use - High ease of use

↓ Usability Criterias Homepage Why use Roff Products page Problems page About Us
Visual Consistency
Layouts and Real estate
Legibility and readability
Visual Branding
Information Architecture
Heuristics Evaluation

(Hover to see the key points)

Why use Roff



User base analysis

Understanding the users and whom Roff is catering to is one of the critical aspects of every design. I sat down with the Pidilite team for an hour's session, where I extensively asked about their customers and what they value the most.

Roff over others

Even though the sales figures of Roff products have been rising in recent years, they expect it to grow further. The primary question every Indian consumer ask is why should they use an adhesive instead of cement, as they feel the latter is more robust.

Approach through problems

Roff offers many solutions, but a typical consumer may not understand what each name might stand for. So it's best to approach every product through a problem that the consumer might face.

Influencers and trends

An emerging set of people can promote their products through designs for new homeowners and renovators. The best way to target this audience is through blog posts and top-ten lists. Aesthetics matters a lot in this case.

Technicals for contractors

Contractors and dealers prefer technical details of products and may take advantage of specific tools like usage and coverage calculators. These tools can also apply to other brands that can bring over people through Search Engine Optimisation.

User flow

Once I figured out the user base, and what I was focussing on, I did a user flow with the existing pages as Pidilite did not want any additional pages or tools.



User Personae

Deriving from the target audience, I created two personae. Let's take a look at them.

image alt

Priyal Kapoor, 34

Bangalore | Software Engineer

“I am currently building a new home and torn between the number of decisions. The opinions I get from people are varied and adds more to my confusion.”

User Goals

• Get informed about various products and what they do
• See the competition and compare them
• Futureproof her new home

Why should Priyal take a look at Roff?

She is building a new house, and she wants the best of materials to keep it long-lasting for generations to come. She is confused about new trends and doesn't know where to start. Her elders advise her to stick with cement and marbles because they have used them, but she is sceptical and wants to do her research.

image alt

Roshan Khan, 41

Bangalore | Constructions Dealer

“I own a hardware store and am also a Pidilite authorised seller. When new customers come in, it's hard to sell them products which they don't have any idea about.”

User Goals

• Help customers sell pick what they exactly need, not necessarily what they want
• Showcase the latest products, to make his sales easier
• Latest trends and designs to showcase in his store

Why should Roshan refer to the Roff website?

Along with the multitude of useful tools for the suite of products he is selling, Roff also showcases curated trends and blog posts which he can use to aid his sales. On top of this, he can also use it to drive sales through their website, as he is an authorised Pidilite dealer.

Design Language

As I converged on to my final design, I had to set a design language to be followed throughout the entire website.

Colour Pallete
UI Elements
Information Architecture



Over 40 wireframes were made and reiterated based on the feedback from the client.

The accent colour was based on the primary colour of the Roff logo, referred to as Roff Green. Red was used to highlight the most important keyword in a section.

This colour scheme was chosen to showcase the brand identity throughout the website.

image alt

Navigation Bar concise and clear. The 'Find a Dealer' CTA is in bold to draw attention.

The primary target audience is the home-owners, so we categorised Roff's products to be approached through typical problems.

The header video grabs the user's attention, which is also the primary message to be conveyed.

image alt

The preview for the Tile Grout Matcher gives the user a sneak peek of the colour selector. It showcases the variety of grout solutions Roff has to provide.

image alt

Blogs and Current Trends show the latest trends in tiles, categorised by Living Spaces. Designed such that influencers can offer the latest trends to consumers with ease. The blog showcases posts from curators at Roff.

image alt

Testimonials show the completed projects using Roff products, along with what the customer says.

image alt

The footer contains the sitemap of the website along with Social Links for quick access.

Discover Solutions

The five essential solutions for consumers are tabbed for the ease of switching between the problems.

All product recommendations are up-front, so the user doesn't have to scroll down to find them.

The application video informs the user on how to apply the given product.

image alt

image alt
Explore Products

This page is intended for professionals who knows what they are looking for.

The Filter By option of products is based on the user journey provided to us. It quickly helps the user break down the product selection to what they need.

An adequate description is provided to better understand the product before viewing the page.

Product Page

The features and application areas of the product are shown upfront. The tabs describe the use-cases, benefits, and tech specifications of the product.

The Coverage Calculator provides an idea of how much quantity a user should buy.

image alt

Mobile screens

Pidilite wanted a responsive design, so I also took it up to create the mobile designs.

The whole design is created so that no critical information was truncated for the user, keeping the original message intact.

The screen is interactive; you may scroll to see the rest of the page.

No information has been truncated on this screen.

The Filter has been made into a button; try clicking on it.

The product page has a slightly different layout, but the content is intact.



Roff was the first project I did for a client, and it taught me a multitude of things, including how to collaborate with a team, deal with clients, and gave me a small insight into how the corporate world works.

The internship was during the first wave of COVID, and working from home was a different experience altogether, but the team at IO made it seamless.