WAF App
Redesign

A case study in how not to come across as a product with multiple PMs and how we helped a leading WAF App tackle the same.

“𝘐𝘵’𝘴 𝘢 𝘱𝘳𝘰𝘣𝘭𝘦𝘮 𝘵𝘩𝘢𝘵 𝘦𝘷𝘦𝘳𝘺 𝘴𝘶𝘤𝘤𝘦𝘴𝘴𝘧𝘶𝘭 𝘱𝘳𝘰𝘥𝘶𝘤𝘵 𝘧𝘢𝘤𝘦𝘴”, said the Head of Product of this Cybersecurity SaaS company. Users keep asking for more features, each feature takes its own shape (often with its own PM), eventually leading to a patchy user experience.


We had the opportunity to redesign a successful web-application-firewall (WAF) app. Although successful, the application had become too difficult for new users to get used to.


When we talked with the stakeholders, we realized that the app had been built incrementally. This is how it typically goes:

How a 10-PM product is born

A CAPABILITY IS BUILT

Sakthi, Cybersecurity Expert

“𝘎𝘪𝘷𝘦 𝘮𝘦 𝘢 𝘸𝘦𝘣𝘴𝘪𝘵𝘦, 𝘢𝘯𝘥 𝘮𝘺 𝘴𝘰𝘧𝘵𝘸𝘢𝘳𝘦 𝘸𝘪𝘭𝘭 𝘴𝘩𝘰𝘸 𝘺𝘰𝘶 𝘢 𝘭𝘪𝘴𝘵 𝘰𝘧 𝘷𝘶𝘭𝘯𝘦𝘳𝘢𝘣𝘪𝘭𝘪𝘵𝘪𝘦𝘴.”

A CAPABILITY IS BUILT

Sakthi, Cybersecurity Expert

“𝘎𝘪𝘷𝘦 𝘮𝘦 𝘢 𝘸𝘦𝘣𝘴𝘪𝘵𝘦, 𝘢𝘯𝘥 𝘮𝘺 𝘴𝘰𝘧𝘵𝘸𝘢𝘳𝘦 𝘸𝘪𝘭𝘭 𝘴𝘩𝘰𝘸 𝘺𝘰𝘶 𝘢 𝘭𝘪𝘴𝘵 𝘰𝘧 𝘷𝘶𝘭𝘯𝘦𝘳𝘢𝘣𝘪𝘭𝘪𝘵𝘪𝘦𝘴.”

A CAPABILITY IS BUILT

Sakthi, Cybersecurity Expert

“𝘎𝘪𝘷𝘦 𝘮𝘦 𝘢 𝘸𝘦𝘣𝘴𝘪𝘵𝘦, 𝘢𝘯𝘥 𝘮𝘺 𝘴𝘰𝘧𝘵𝘸𝘢𝘳𝘦 𝘸𝘪𝘭𝘭 𝘴𝘩𝘰𝘸 𝘺𝘰𝘶 𝘢 𝘭𝘪𝘴𝘵 𝘰𝘧 𝘷𝘶𝘭𝘯𝘦𝘳𝘢𝘣𝘪𝘭𝘪𝘵𝘪𝘦𝘴.”

A FEATURE IS ADDED

Meena, Product Manager

“𝘓𝘦𝘵’𝘴 𝘳𝘶𝘯 𝘵𝘩𝘪𝘴 𝘥𝘢𝘪𝘭𝘺 𝘧𝘰𝘳 𝘢𝘭𝘭 𝘰𝘶𝘳 𝘶𝘴𝘦𝘳𝘴’ 𝘸𝘦𝘣𝘴𝘪𝘵𝘦𝘴 𝘢𝘯𝘥 𝘴𝘩𝘰𝘸 𝘵𝘩𝘦𝘮 𝘢𝘯 𝘶𝘱𝘥𝘢𝘵𝘦𝘥 𝘭𝘪𝘴𝘵 𝘦𝘷𝘦𝘳𝘺 𝘥𝘢𝘺.”

A FEATURE IS ADDED

Meena, Product Manager

“𝘓𝘦𝘵’𝘴 𝘳𝘶𝘯 𝘵𝘩𝘪𝘴 𝘥𝘢𝘪𝘭𝘺 𝘧𝘰𝘳 𝘢𝘭𝘭 𝘰𝘶𝘳 𝘶𝘴𝘦𝘳𝘴’ 𝘸𝘦𝘣𝘴𝘪𝘵𝘦𝘴 𝘢𝘯𝘥 𝘴𝘩𝘰𝘸 𝘵𝘩𝘦𝘮 𝘢𝘯 𝘶𝘱𝘥𝘢𝘵𝘦𝘥 𝘭𝘪𝘴𝘵 𝘦𝘷𝘦𝘳𝘺 𝘥𝘢𝘺.”

A FEATURE IS ADDED

Meena, Product Manager

“𝘓𝘦𝘵’𝘴 𝘳𝘶𝘯 𝘵𝘩𝘪𝘴 𝘥𝘢𝘪𝘭𝘺 𝘧𝘰𝘳 𝘢𝘭𝘭 𝘰𝘶𝘳 𝘶𝘴𝘦𝘳𝘴’ 𝘸𝘦𝘣𝘴𝘪𝘵𝘦𝘴 𝘢𝘯𝘥 𝘴𝘩𝘰𝘸 𝘵𝘩𝘦𝘮 𝘢𝘯 𝘶𝘱𝘥𝘢𝘵𝘦𝘥 𝘭𝘪𝘴𝘵 𝘦𝘷𝘦𝘳𝘺 𝘥𝘢𝘺.”

USERS VALIDATE THE PRODUCT

Rohan, An early customer

“𝘛𝘩𝘪𝘴 𝘥𝘰𝘦𝘴 𝘮𝘺 𝘫𝘰𝘣 𝘢𝘯𝘥 𝘪𝘴 𝘸𝘰𝘳𝘵𝘩 𝘱𝘢𝘺𝘪𝘯𝘨 𝘧𝘰𝘳”

USERS VALIDATE THE PRODUCT

Rohan, An early customer

“𝘛𝘩𝘪𝘴 𝘥𝘰𝘦𝘴 𝘮𝘺 𝘫𝘰𝘣 𝘢𝘯𝘥 𝘪𝘴 𝘸𝘰𝘳𝘵𝘩 𝘱𝘢𝘺𝘪𝘯𝘨 𝘧𝘰𝘳”

USERS VALIDATE THE PRODUCT

Rohan, An early customer

“𝘛𝘩𝘪𝘴 𝘥𝘰𝘦𝘴 𝘮𝘺 𝘫𝘰𝘣 𝘢𝘯𝘥 𝘪𝘴 𝘸𝘰𝘳𝘵𝘩 𝘱𝘢𝘺𝘪𝘯𝘨 𝘧𝘰𝘳”

This seems totally normal. The customers used it and paid for it. It solved a real problem. However, when this was done many times, the product ended up with many ‘scanners’ and ‘reports’ and as a result, the overall experience was not thought through.

FEATURES START PILING UP

FEATURES START PILING UP

FEATURES START PILING UP

END RESULT = BAD UX

Sam, A new user

𝘐 ’𝘮 𝘢 𝘯𝘦𝘸 𝘶𝘴𝘦𝘳, 𝘢𝘯𝘥 𝘵𝘩𝘪𝘴 𝘪𝘯𝘵𝘦𝘳𝘧𝘢𝘤𝘦 𝘮𝘢𝘬𝘦𝘴 𝘭𝘪𝘵𝘵𝘭𝘦 𝘴𝘦𝘯𝘴𝘦 𝘵𝘰 𝘮𝘦.

END RESULT = BAD UX

Sam, A new user

𝘐 ’𝘮 𝘢 𝘯𝘦𝘸 𝘶𝘴𝘦𝘳, 𝘢𝘯𝘥 𝘵𝘩𝘪𝘴 𝘪𝘯𝘵𝘦𝘳𝘧𝘢𝘤𝘦 𝘮𝘢𝘬𝘦𝘴 𝘭𝘪𝘵𝘵𝘭𝘦 𝘴𝘦𝘯𝘴𝘦 𝘵𝘰 𝘮𝘦.

END RESULT = BAD UX

Sam, A new user

𝘐 ’𝘮 𝘢 𝘯𝘦𝘸 𝘶𝘴𝘦𝘳, 𝘢𝘯𝘥 𝘵𝘩𝘪𝘴 𝘪𝘯𝘵𝘦𝘳𝘧𝘢𝘤𝘦 𝘮𝘢𝘬𝘦𝘴 𝘭𝘪𝘵𝘵𝘭𝘦 𝘴𝘦𝘯𝘴𝘦 𝘵𝘰 𝘮𝘦.

How the users think about their tasks

We talked to users from each persona, studied their tasks, and learnt what would be a good IA. Let’s take an example:

Sam, A bank employee
𝙄 ’𝙢 𝙧𝙚𝙨𝙥𝙤𝙣𝙨𝙞𝙗𝙡𝙚 𝙛𝙤𝙧 𝙩𝙝𝙚 𝙨𝙖𝙛𝙚𝙩𝙮 𝙤𝙛 𝙨𝙤𝙢𝙚 200 𝙤𝙛 𝙤𝙪𝙧 𝙗𝙖𝙣𝙠’𝙨 𝙬𝙚𝙗 𝙥𝙧𝙤𝙥𝙚𝙧𝙩𝙞𝙚𝙨.
Properties are any sites and applications - the public facing web app, micro-sites for sales campaigns, employee-only apps, etc
Sam, A bank employee
𝙄 ’𝙢 𝙧𝙚𝙨𝙥𝙤𝙣𝙨𝙞𝙗𝙡𝙚 𝙛𝙤𝙧 𝙩𝙝𝙚 𝙨𝙖𝙛𝙚𝙩𝙮 𝙤𝙛 𝙨𝙤𝙢𝙚 200 𝙤𝙛 𝙤𝙪𝙧 𝙗𝙖𝙣𝙠’𝙨 𝙬𝙚𝙗 𝙥𝙧𝙤𝙥𝙚𝙧𝙩𝙞𝙚𝙨.
Properties are any sites and applications - the public facing web app, micro-sites for sales campaigns, employee-only apps, etc
Sam, A bank employee
𝙄 ’𝙢 𝙧𝙚𝙨𝙥𝙤𝙣𝙨𝙞𝙗𝙡𝙚 𝙛𝙤𝙧 𝙩𝙝𝙚 𝙨𝙖𝙛𝙚𝙩𝙮 𝙤𝙛 𝙨𝙤𝙢𝙚 200 𝙤𝙛 𝙤𝙪𝙧 𝙗𝙖𝙣𝙠’𝙨 𝙬𝙚𝙗 𝙥𝙧𝙤𝙥𝙚𝙧𝙩𝙞𝙚𝙨.
Properties are any sites and applications - the public facing web app, micro-sites for sales campaigns, employee-only apps, etc
𝙄 𝙬𝙖𝙣𝙩 𝙩𝙤 𝙨𝙚𝙚 𝙬𝙝𝙞𝙘𝙝 𝙥𝙧𝙤𝙥𝙚𝙧𝙩𝙞𝙚𝙨 𝙖𝙧𝙚 𝙫𝙪𝙡𝙣𝙚𝙧𝙖𝙗𝙡𝙚 𝙩𝙤 𝙬𝙝𝙖𝙩 𝙠𝙞𝙣𝙙 𝙤𝙛 𝙖𝙩𝙩𝙖𝙘𝙠𝙨
A vulnerability is anything that could be exploited by a hacker, say a login page that allows unlimited number of attempts.
𝙄 𝙬𝙖𝙣𝙩 𝙩𝙤 𝙨𝙚𝙚 𝙬𝙝𝙞𝙘𝙝 𝙥𝙧𝙤𝙥𝙚𝙧𝙩𝙞𝙚𝙨 𝙖𝙧𝙚 𝙫𝙪𝙡𝙣𝙚𝙧𝙖𝙗𝙡𝙚 𝙩𝙤 𝙬𝙝𝙖𝙩 𝙠𝙞𝙣𝙙 𝙤𝙛 𝙖𝙩𝙩𝙖𝙘𝙠𝙨
A vulnerability is anything that could be exploited by a hacker, say a login page that allows unlimited number of attempts.
𝙄 𝙬𝙖𝙣𝙩 𝙩𝙤 𝙨𝙚𝙚 𝙬𝙝𝙞𝙘𝙝 𝙥𝙧𝙤𝙥𝙚𝙧𝙩𝙞𝙚𝙨 𝙖𝙧𝙚 𝙫𝙪𝙡𝙣𝙚𝙧𝙖𝙗𝙡𝙚 𝙩𝙤 𝙬𝙝𝙖𝙩 𝙠𝙞𝙣𝙙 𝙤𝙛 𝙖𝙩𝙩𝙖𝙘𝙠𝙨
A vulnerability is anything that could be exploited by a hacker, say a login page that allows unlimited number of attempts.

As we can see from this, the user is seeking an answer to a simple question, and would benefit the most if vulnerabilities or properties are the primary indices rather than ‘reports’.

3. A better user experience

While we cannot explain the process of IA design in this, it’s nothing different than the textbook version. We basically look at how different types of users think of their tasks and design something that is efficient and sensible for all of them.

The new IA was working at 3 levels.

Sam, A new user

200 𝘖𝘱𝘦𝘯 𝘷𝘶𝘭𝘯𝘦𝘳𝘢𝘣𝘪𝘭𝘪𝘵𝘪𝘦𝘴! 𝘛𝘩𝘪𝘴 𝘭𝘰𝘰𝘬𝘴 𝘭𝘪𝘬𝘦 𝘴𝘰𝘮𝘦𝘵𝘩𝘪𝘯𝘨 𝘐 𝘯𝘦𝘦𝘥 𝘵𝘰 𝘭𝘰𝘰𝘬 𝘢𝘵

The UX thinking behind the scenes

• The word ‘vulnerabilities’ twice on the screen

• Having information scent on the home page makes it much easier to navigate

• Having two pathways to the vulnerabilities is more forgiving, since it works even if their attention does not go on the widget

Sam, A new user

200 𝘖𝘱𝘦𝘯 𝘷𝘶𝘭𝘯𝘦𝘳𝘢𝘣𝘪𝘭𝘪𝘵𝘪𝘦𝘴! 𝘛𝘩𝘪𝘴 𝘭𝘰𝘰𝘬𝘴 𝘭𝘪𝘬𝘦 𝘴𝘰𝘮𝘦𝘵𝘩𝘪𝘯𝘨 𝘐 𝘯𝘦𝘦𝘥 𝘵𝘰 𝘭𝘰𝘰𝘬 𝘢𝘵

The UX thinking behind the scenes

• The word ‘vulnerabilities’ twice on the screen

• Having information scent on the home page makes it much easier to navigate

• Having two pathways to the vulnerabilities is more forgiving, since it works even if their attention does not go on the widget

Sam, A new user

200 𝘖𝘱𝘦𝘯 𝘷𝘶𝘭𝘯𝘦𝘳𝘢𝘣𝘪𝘭𝘪𝘵𝘪𝘦𝘴! 𝘛𝘩𝘪𝘴 𝘭𝘰𝘰𝘬𝘴 𝘭𝘪𝘬𝘦 𝘴𝘰𝘮𝘦𝘵𝘩𝘪𝘯𝘨 𝘐 𝘯𝘦𝘦𝘥 𝘵𝘰 𝘭𝘰𝘰𝘬 𝘢𝘵

The UX thinking behind the scenes

• The word ‘vulnerabilities’ twice on the screen

• Having information scent on the home page makes it much easier to navigate

• Having two pathways to the vulnerabilities is more forgiving, since it works even if their attention does not go on the widget

𝘖𝘩𝘩, 59 𝘰𝘧 𝘵𝘩𝘦𝘮 𝘢𝘳𝘦 𝘤𝘳𝘪𝘵𝘪𝘤𝘢𝘭. 𝘈𝘭𝘭 𝘵𝘩𝘦 𝘮𝘰𝘳𝘦 𝘪𝘮𝘱𝘰𝘳𝘵𝘢𝘯𝘵 𝘵𝘩𝘢𝘵 𝘐 𝘥𝘪𝘨 𝘪𝘯.

The UX thinking behind the scenes

• Having progressive reveal of these numbers help keep the initial interface cleaner

• Having an interface that responds to mouse movements feels more responsive

𝘖𝘩𝘩, 59 𝘰𝘧 𝘵𝘩𝘦𝘮 𝘢𝘳𝘦 𝘤𝘳𝘪𝘵𝘪𝘤𝘢𝘭. 𝘈𝘭𝘭 𝘵𝘩𝘦 𝘮𝘰𝘳𝘦 𝘪𝘮𝘱𝘰𝘳𝘵𝘢𝘯𝘵 𝘵𝘩𝘢𝘵 𝘐 𝘥𝘪𝘨 𝘪𝘯.

The UX thinking behind the scenes

• Having progressive reveal of these numbers help keep the initial interface cleaner

• Having an interface that responds to mouse movements feels more responsive

𝘖𝘩𝘩, 59 𝘰𝘧 𝘵𝘩𝘦𝘮 𝘢𝘳𝘦 𝘤𝘳𝘪𝘵𝘪𝘤𝘢𝘭. 𝘈𝘭𝘭 𝘵𝘩𝘦 𝘮𝘰𝘳𝘦 𝘪𝘮𝘱𝘰𝘳𝘵𝘢𝘯𝘵 𝘵𝘩𝘢𝘵 𝘐 𝘥𝘪𝘨 𝘪𝘯.

The UX thinking behind the scenes

• Having progressive reveal of these numbers help keep the initial interface cleaner

• Having an interface that responds to mouse movements feels more responsive

𝘐𝘵 𝘭𝘰𝘰𝘬𝘴 𝘭𝘪𝘬𝘦 𝘵𝘩𝘦 𝘤𝘳𝘪𝘵𝘪𝘤𝘢𝘭 𝘰𝘯𝘦𝘴 𝘢𝘳𝘦 𝘥𝘦𝘤𝘳𝘦𝘢𝘴𝘪𝘯𝘨 𝘰𝘷𝘦𝘳 𝘵𝘪𝘮𝘦, 𝘴𝘰 𝘪𝘵’𝘴 𝘢 𝘨𝘰𝘰𝘥 𝘴𝘪𝘨𝘯. 𝘓𝘦𝘵 𝘮𝘦 𝘨𝘰 𝘵𝘩𝘳𝘰𝘶𝘨𝘩 𝘵𝘩𝘦 𝘧𝘶𝘭𝘭 𝘭𝘪𝘴𝘵.

The UX thinking behind the scenes

• A juxtaposition of visual and tabular information allows the user to ease into consuming the page

• The list UI was working, so it has been retained with some micro-UI changes

𝘐𝘵 𝘭𝘰𝘰𝘬𝘴 𝘭𝘪𝘬𝘦 𝘵𝘩𝘦 𝘤𝘳𝘪𝘵𝘪𝘤𝘢𝘭 𝘰𝘯𝘦𝘴 𝘢𝘳𝘦 𝘥𝘦𝘤𝘳𝘦𝘢𝘴𝘪𝘯𝘨 𝘰𝘷𝘦𝘳 𝘵𝘪𝘮𝘦, 𝘴𝘰 𝘪𝘵’𝘴 𝘢 𝘨𝘰𝘰𝘥 𝘴𝘪𝘨𝘯. 𝘓𝘦𝘵 𝘮𝘦 𝘨𝘰 𝘵𝘩𝘳𝘰𝘶𝘨𝘩 𝘵𝘩𝘦 𝘧𝘶𝘭𝘭 𝘭𝘪𝘴𝘵.

The UX thinking behind the scenes

• A juxtaposition of visual and tabular information allows the user to ease into consuming the page

• The list UI was working, so it has been retained with some micro-UI changes

𝘐𝘵 𝘭𝘰𝘰𝘬𝘴 𝘭𝘪𝘬𝘦 𝘵𝘩𝘦 𝘤𝘳𝘪𝘵𝘪𝘤𝘢𝘭 𝘰𝘯𝘦𝘴 𝘢𝘳𝘦 𝘥𝘦𝘤𝘳𝘦𝘢𝘴𝘪𝘯𝘨 𝘰𝘷𝘦𝘳 𝘵𝘪𝘮𝘦, 𝘴𝘰 𝘪𝘵’𝘴 𝘢 𝘨𝘰𝘰𝘥 𝘴𝘪𝘨𝘯. 𝘓𝘦𝘵 𝘮𝘦 𝘨𝘰 𝘵𝘩𝘳𝘰𝘶𝘨𝘩 𝘵𝘩𝘦 𝘧𝘶𝘭𝘭 𝘭𝘪𝘴𝘵.

The UX thinking behind the scenes

• A juxtaposition of visual and tabular information allows the user to ease into consuming the page

• The list UI was working, so it has been retained with some micro-UI changes

𝘞𝘩𝘦𝘯 𝘐 𝘴𝘤𝘳𝘰𝘭𝘭 𝘳𝘪𝘨𝘩𝘵, 𝘵𝘩𝘦 𝘮𝘰𝘴𝘵 𝘪𝘮𝘱𝘰𝘳𝘵𝘢𝘯𝘵 𝘤𝘰𝘭𝘶𝘮𝘯 𝘴𝘵𝘢𝘺𝘴, 𝘸𝘩𝘪𝘤𝘩 𝘪𝘴 𝘱𝘳𝘦𝘵𝘵𝘺 𝘩𝘦𝘭𝘱𝘧𝘶𝘭

The UX thinking behind the scenes

• While ‘action needed’ is suitable as the rightmost column, it should be visible even if there isn’t space to view all columns.

𝘞𝘩𝘦𝘯 𝘐 𝘴𝘤𝘳𝘰𝘭𝘭 𝘳𝘪𝘨𝘩𝘵, 𝘵𝘩𝘦 𝘮𝘰𝘴𝘵 𝘪𝘮𝘱𝘰𝘳𝘵𝘢𝘯𝘵 𝘤𝘰𝘭𝘶𝘮𝘯 𝘴𝘵𝘢𝘺𝘴, 𝘸𝘩𝘪𝘤𝘩 𝘪𝘴 𝘱𝘳𝘦𝘵𝘵𝘺 𝘩𝘦𝘭𝘱𝘧𝘶𝘭

The UX thinking behind the scenes

• While ‘action needed’ is suitable as the rightmost column, it should be visible even if there isn’t space to view all columns.

𝘞𝘩𝘦𝘯 𝘐 𝘴𝘤𝘳𝘰𝘭𝘭 𝘳𝘪𝘨𝘩𝘵, 𝘵𝘩𝘦 𝘮𝘰𝘴𝘵 𝘪𝘮𝘱𝘰𝘳𝘵𝘢𝘯𝘵 𝘤𝘰𝘭𝘶𝘮𝘯 𝘴𝘵𝘢𝘺𝘴, 𝘸𝘩𝘪𝘤𝘩 𝘪𝘴 𝘱𝘳𝘦𝘵𝘵𝘺 𝘩𝘦𝘭𝘱𝘧𝘶𝘭

The UX thinking behind the scenes

• While ‘action needed’ is suitable as the rightmost column, it should be visible even if there isn’t space to view all columns.

Convincing the PMs

But such a major overhaul would mean facing PMs’ concerns about reducing the space given for individual features on home. We looked at every task the users were doing, and quantified it.

Every single task was measurably better (or at least the same).

This helped us have a more objective conversation with the PMs, and after a few tweaks, we moved ahead with the new IA.

Testing with users

We tested this with users and apart from being able to do tasks faster and with less friction at each step, they mentioned that they felt the newer experience being ‘better connected’ - in other words, more cohesive and non fragmented.

Summary

• The WAF App was built incrementally

• This led to a patchy experience

• An IA exercise was meticulously executed to solve this problem

• The problem and solution were quantified to convince the stakeholders

• The new design was tested and validated to check whether it solved the problem

Background shadow