Office Efficiencies India Private Limited
Office Efficiencies India Private Limited
Customer Portal now responsive + 80% more user friendly
Customer Portal now responsive + 80% more user friendly
Customer Portal now responsive + 80% more user friendly
Product Designer
Product Designer
8 months
8 months
Figma, Figjam
Figma, Figjam
Business Analysis, User Research, Wireframing & Prototyping, Iterating, Usability Testing
Business Analysis, User Research, Wireframing & Prototyping, Iterating, Usability Testing
He—————lo
1
1
Introduction
Introduction
In a world where user experience can make or break a product, Company's customer portal was in dire need of a transformation. As the lead designer, I took on the challenge to create a seamless, intuitive, and modern user experience.
In a world where user experience can make or break a product, Company's customer portal was in dire need of a transformation. As the lead designer, I took on the challenge to create a seamless, intuitive, and modern user experience.
Overview — SafeSquid is a provider of web filtering and security solutions, designed to protect enterprises from data leakage, phishing attacks, ransomware threats, and other cyber threats. The activation portal at www.key.safesquid.com is a critical tool for users to register and manage their SafeSquid products. However, the existing portal was plagued with usability issues, leading to frustrated users and missed opportunities.
Overview — SafeSquid is a provider of web filtering and security solutions, designed to protect enterprises from data leakage, phishing attacks, ransomware threats, and other cyber threats. The activation portal at www.key.safesquid.com is a critical tool for users to register and manage their SafeSquid products. However, the existing portal was plagued with usability issues, leading to frustrated users and missed opportunities.
2
2
The Challenge
The Challenge
The existing SafeSquid's activation portal faced several critical issues that needed to be addressed to improve user experience and functionality.
The existing SafeSquid's activation portal faced several critical issues that needed to be addressed to improve user experience and functionality.
The portal was not optimized for mobile devices, lacking a responsive design that would allow for a seamless user experience across various screen sizes
The portal was not optimized for mobile devices, lacking a responsive design that would allow for a seamless user experience across various screen sizes
The existing system did not provide efficient tools for creating SSL certificates and instance builders, hindering users from managing security certificates and configurations effectively
The existing system did not provide efficient tools for creating SSL certificates and instance builders, hindering users from managing security certificates and configurations effectively
There was a notable absence of performance plot graphs, which are essential for monitoring system resources such as memory usage, network connections, bandwidth consumption, and CPU load
There was a notable absence of performance plot graphs, which are essential for monitoring system resources such as memory usage, network connections, bandwidth consumption, and CPU load
The portal did not include a dedicated history section, which is crucial for tracking user actions and maintaining accountability for changes made within the system
The portal did not include a dedicated history section, which is crucial for tracking user actions and maintaining accountability for changes made within the system
Important actions within the portal were not secured by OTP (One-Time Password) requests, presenting a security risk by potentially allowing unauthorized access
Important actions within the portal were not secured by OTP (One-Time Password) requests, presenting a security risk by potentially allowing unauthorized access
The portal suffered from a lack of a clear home page, an intuitive navigation bar, and a key switch section, making it difficult for users to find their way around and manage key features
The portal suffered from a lack of a clear home page, an intuitive navigation bar, and a key switch section, making it difficult for users to find their way around and manage key features
3
3
Research
Research
Design Thinking process was dedicated to understanding the experiences and challenges faced by all users of the SafeSquid's customer portal. This phase involved conducting interviews and distributing an online survey to gather both qualitative and quantitative data.
Design Thinking process was dedicated to understanding the experiences and challenges faced by all users of the SafeSquid's customer portal. This phase involved conducting interviews and distributing an online survey to gather both qualitative and quantitative data.
To design for the user is to design with the user. Without their insights, we design in the dark, and our solutions may miss the mark.
To design for the user is to design with the user. Without their insights, we design in the dark, and our solutions may miss the mark.
a. Interview with the users
a. Interview with the users
Key insights from interviews with users
Key insights
The need for a history section to track actions and maintain accountability
The need for a history section to track actions and maintain accountability
The need for a history section to track actions and maintain accountability
Expressed the need for a clearer and more visible key section on the screen
Expressed the need for a clearer and more visible key section on the screen
Expressed the need for a clearer and more visible key section on the screen
Emphasized for performance plot graphs for real-time monitoring of system resources
Emphasized for performance plot graphs for real-time monitoring of system resources
Emphasized for performance plot graphs for real-time monitoring of system resources
Noted the portal's cluttered interface, making it difficult for newcomers to navigate
Noted the portal's cluttered interface, making it difficult for newcomers to navigate
Noted the portal's cluttered interface, making it difficult for newcomers to navigate
The lack of modals for actions, which could help in providing error messages and guidance
The lack of modals for actions, which could help in providing error messages and guidance
The lack of modals for actions, which could help in providing error messages and guidance
Desired the ability to perform certain actions, like creating certificates, on mobile devices
Desired the ability to perform certain actions, like creating certificates, on mobile devices
Desired the ability to perform certain actions, like creating certificates, on mobile devices
Requested the addition of features to create instances and SSL certificates directly within the portal
Requested the addition of features to create instances and SSL certificates directly within the portal
Requested the addition of features to create instances and SSL certificates directly within the portal
Pointed out the need for role-based actions and permissions to manage access to important features
Pointed out the need for role-based actions and permissions to manage access to important features
Pointed out the need for role-based actions and permissions to manage access to important features
Users have expressed the need for more intuitive management of website categories
Users have expressed the need for more intuitive management of website categories
Users have expressed the need for more intuitive management of website categories
b. Survey questions with Quantitative approach
b. Survey questions with Quantitative approach
Ease of navigation
Ease of navigation
65% of respondents rated the ease of navigation as below average
65% of respondents rated the ease of navigation as below average
78% reported struggling to find features or information
78% reported struggling to find features or information
Performance Monitoring
Performance Monitoring
82% of users rated performance plot graphs as very important or essential
82% of users rated performance plot graphs as very important or essential
75% of the users rated a section with proper options to destroy and deactivate instance
75% of the users rated a section with proper options to destroy and deactivate instance
Security & Accountability
Security & Accountability
70% of users were unsatisfied with the current security measures for important actions
70% of users were unsatisfied with the current security measures for important actions
90% agreed that a history section would improve accountability
90% agreed that a history section would improve accountability
Mobile Accessibility
Mobile Accessibility
75% of users would use a mobile version of the portal
75% of users would use a mobile version of the portal
The most desired features for a mobile version were certificate creation (60%) and performance monitoring (50%)
The most desired features for a mobile version were certificate creation (60%) and performance monitoring (50%)
c. Findings
c. Findings
4
4
Implementation
Implementation
With a clear understanding of the challenges faced by users of the SafeSquid's activation portal, we embarked on the ideation phase to conceptualize innovative solutions that would enhance both user experience and system functionality.
With a clear understanding of the challenges faced by users of the SafeSquid's activation portal, we embarked on the ideation phase to conceptualize innovative solutions that would enhance both user experience and system functionality.
a. Home page
a. Home page
After the research, the director said that we do not want a sidebar so having this into consideration i made a tabbed interface with minimum options so users wont feel overwhelmed
After the research, the director said that we do not want a sidebar so having this into consideration i made a tabbed interface with minimum options so users wont feel overwhelmed
Hi-Fi wireframe
Mobile Hi-Fi wireframe
Hi-Fi wireframe
Mobile Hi-Fi wireframe
Hi-Fi wireframe
Mobile Hi-Fi wireframe
Also created a case where when the dates below Certificate and Subscription have a orange shade when they are close to expiry.
Outcome
All available options are presented in a clear and concise manner, ensuring users are not overwhelmed by too much information at once
Users are now provided with the necessary key and C-Code details, which are crucial for various configurations and operations within the portal
A question mark icon now directs users to relevant documentation, facilitating self-service and reducing dependency on customer support
Case when they are close to expiry also helps admins to take actions accordingly
A search bar enables users to perform basic actions, such as creating a new category, simply by typing their query into the search box. This feature enhances efficiency and ease of use
Stakeholders feedback
The dashboard is clean, user-friendly, and beginner-friendly, offering clear access to key features, a personalized greeting, and a helpful search function
b. Instance
b. Instance
Multiple user requests that needed modernization and also performance plot graphs to view real time data
Multiple user requests that needed modernization and also performance plot graphs to view real time data
b.1 Previous interface
b.1 Previous interface
In Instance details we cannot interact with the Instances also we cannot destroy only deactivate them.
In Instance details we cannot interact with the Instances also we cannot destroy only deactivate them.
b.2 New interface
b.2 New interface
We can interact with a specific instance by clicking Manage as well as Active and Inactive status and addition of IP address and Uptime
We can interact with a specific instance by clicking Manage as well as Active and Inactive status and addition of IP address and Uptime
b.3 More details for instance
b.3 More details for instance
Performance plot for a specific instance is displayed with proper graphs and details
Performance plot for a specific instance is displayed with proper graphs and details
b.4 Modals for important actions
b.4 Modals for important actions
Users may mis click so they must have proper instruction "action is irreversible" and OTP for 2 step security
Users may mis click so they must have proper instruction "action is irreversible" and OTP for 2 step security
b.5 While customer portal is free to use there are some conditions for example - Only 3 Instances can be active at a given time
b.5 While customer portal is free to use there are some conditions for example - Only 3 Instances can be active at a given time
b.6 Highly Requested Feature #1 Instance Builder
b.6 Highly Requested Feature #1 Instance Builder
Setting up a instance via portal. This step is divided in 4 steps
Setting up a instance via portal. This step is divided in 4 steps
1 Deployment options
1 Deployment options
Users can select any of the three options whether they want to deploy it on the cloud or on their own device
Users can select any of the three options whether they want to deploy it on the cloud or on their own device
Setting up a instance via portal. This step is divided in 4 steps
Setting up a instance via portal. This step is divided in 4 steps
2 Hardware requirements
2 Hardware requirements
Having a proper diagram that shows non technical users how things would work
Having a proper diagram that shows non technical users how things would work
Setting up a instance via portal. This step is divided in 4 steps
Setting up a instance via portal. This step is divided in 4 steps
3 Installation
3 Installation
For users to have a more depth-in information on how things work and how to setup
For users to have a more depth-in information on how things work and how to setup
Setting up a instance via portal. This step is divided in 4 steps
Setting up a instance via portal. This step is divided in 4 steps
4 Activation key
4 Activation key
Final step for users to activate their Instance
Final step for users to activate their Instance
c. Certificate
c. Certificate
Multiple user requests that needed modernization and also performance plot graphs to view real time data
Multiple user requests that needed modernization and also performance plot graphs to view real time data
c.1 Previous interface
c.1 Previous interface
In the certificate section no clear display of information was available
In the certificate section no clear display of information was available
b.2 New interface
b.2 New interface
I displayed the whole certificate and displaying all the information to the users. While searching about how they appear the idea that came into my mind was making it display as the whole for the keeping the every thing transparent to the users.
I displayed the whole certificate and displaying all the information to the users. While searching about how they appear the idea that came into my mind was making it display as the whole for the keeping the every thing transparent to the users.
c.3 Different actions available for a certificate for the user
c.3 Different actions available for a certificate for the user
c.4 Highly Requested Feature #2 Certificate Builder
c.4 Highly Requested Feature #2 Certificate Builder
Creating a SSL Certificate via portal. This step is divided in 3 steps
Creating a SSL Certificate via portal. This step is divided in 3 steps
1 Selecting whether to upload or create their own SSL certificate
1 Selecting whether to upload or create their own SSL certificate
Creating a SSL Certificate via portal. This step is divided in 3 steps
Creating a SSL Certificate via portal. This step is divided in 3 steps
2.a If user selects generate a self signed certificate i.e. manually creating a certificate
2.a If user selects generate a self signed certificate i.e. manually creating a certificate
Creating a SSL Certificate via portal. This step is divided in 3 steps
Creating a SSL Certificate via portal. This step is divided in 3 steps
2.a Basic information that is required for a SSL Certificate
2.a Basic information that is required for a SSL Certificate
Creating a SSL Certificate via portal. This step is divided in 3 steps
Creating a SSL Certificate via portal. This step is divided in 3 steps
2.b If user selects yes upload enterprise CA
2.b If user selects yes upload enterprise CA
d. Web Categorization
d. Web Categorization
After putting all the research a proper display of all the categories created should be mentioned
After putting all the research a proper display of all the categories created should be mentioned
d.1 Previous interface
d.1 Previous interface
Web categorization was not intuitive and tough to navigate for new comers
Web categorization was not intuitive and tough to navigate for new comers
d.2 New interface
Having a search bar and all the categories was displayed below to have a quick look on what all categories are created
Having a search bar and all the categories was displayed below to have a quick look on what all categories are created
d.3 Having a search function to highlighting the text was also a input from our client
d.3 Having a search function to highlighting the text was also a input from our client
d.4 A whole new part where users can create their custom category in just 1 simple step and if they want they can add their description which is optional
d.4 A whole new part where users can create their custom category in just 1 simple step and if they want they can add their description which is optional
d.5 Switching from category to websites does not change the interface but having only relevant things will appear when website is requested. I also added a new feature that allows users to see what all categories that are not assigned to this website so users can add it without any hassle.
d.5 Switching from category to websites does not change the interface but having only relevant things will appear when website is requested. I also added a new feature that allows users to see what all categories that are not assigned to this website so users can add it without any hassle.
e. Signature
e. Signature
Same as web categorization there are digital signatures that reads specific regex and blocks malware. Creating this was easy because of success in custom categories
Same as web categorization there are digital signatures that reads specific regex and blocks malware. Creating this was easy because of success in custom categories
e.1 Previous interface
e.1 Previous interface
In the certificate section no clear display of information was available
In the certificate section no clear display of information was available
e.1 Updated interface
e.1 Updated interface
While creating signatures my main focus was on creating a card that can be expanded and clicked so that the overall structure should not look like pinterest but a uniform and organized section
While creating signatures my main focus was on creating a card that can be expanded and clicked so that the overall structure should not look like pinterest but a uniform and organized section
e.2 Creating a Signature
e.2 Creating a Signature
In the previous UI there was no description area where people could write important message so that new users would also get a idea why it was created
In the previous UI there was no description area where people could write important message so that new users would also get a idea why it was created
Creating a signature is now much more easy in 3 steps while the second step adding description is optional but important
Creating a signature is now much more easy in 3 steps while the second step adding description is optional but important
1 Adding a name to the signature
1 Adding a name to the signature
2 Adding a description (optional)
2 Adding a description (optional)
3 Adding keywords for regex matching
3 Adding keywords for regex matching
f. Team
f. Team
A team section for people to manage everything in the website was also necessary from a security point of view as well as not having access of everything to everyone was also a important task because not everyone can be trusted with highly secure settings
A team section for people to manage everything in the website was also necessary from a security point of view as well as not having access of everything to everyone was also a important task because not everyone can be trusted with highly secure settings
f.1 Interface
f.1 Interface
After careful discussions about the team section with the technical team 4 roles were selected
Super Admin, Admin, Technical Team, Procurement Team
After careful discussions about the team section with the technical team 4 roles were selected
Super Admin, Admin, Technical Team, Procurement Team
5
5
Conclusion
Conclusion
The SafeSquid customer portal redesign has significantly improved user experience, making it more intuitive and user-friendly. Users now rate the ease of navigation at an average of 4.5/5, up from 2.5/5 previously. The portal offers clear access to key features, a personalized greeting, and a helpful search function. Modernized instance management and performance monitoring, with 95% of users finding the new performance plots "very useful," provide real-time data and actionable insights. The inclusion of a history section and OTP for critical actions has reduced unauthorized access attempts by 70%. Mobile accessibility has increased by 60% since the redesign, and overall user satisfaction has risen from 30% to 75%. These improvements address prior pain points and lay a strong foundation for future enhancements.
The SafeSquid customer portal redesign has significantly improved user experience, making it more intuitive and user-friendly. Users now rate the ease of navigation at an average of 4.5/5, up from 2.5/5 previously. The portal offers clear access to key features, a personalized greeting, and a helpful search function. Modernized instance management and performance monitoring, with 95% of users finding the new performance plots "very useful," provide real-time data and actionable insights. The inclusion of a history section and OTP for critical actions has reduced unauthorized access attempts by 70%. Mobile accessibility has increased by 60% since the redesign, and overall user satisfaction has risen from 30% to 75%. These improvements address prior pain points and lay a strong foundation for future enhancements.
Thankyou soo much for giving your time and reading my case study. If you have any questions or feedback, feel free to reach out.
Thankyou soo much for giving your time and reading my case study. If you have any questions or feedback, feel free to reach out.