Elevating app experience
"MD Endpoint App UI Revamp: Boosting Usability & Consistency for a Seamless Cybersecurity Experience"
COMPANY
OPSWAT
ROLE
Product designer
EXPERTISE
UX/UI design Mobile design
YEAR
2024
Project Overview
OPSWAT's endpoint products safeguard sensitive data, ensure compliance, and prevent breaches, particularly in finance, healthcare, and government. They secure devices through malware protection, data loss prevention, and vulnerability management to defend against cyber threats."
One of the most critical aspects of managing these threats is registering and managing all devices used within the organization. Our team collected and managed client feedback specifically to revamp the application during the design, build, and QA stages. This challenge motivated us to create a new UI/UX design and a tool focused on enhancing usability and intuitiveness.
Team
I collaborated with 1 product manager, 3 product designers, and 3+ developers to revamp the MD Endpoint app's UI. I worked closely with the CX department to gather valuable customer feedback, ensuring that the design was aligned with user needs. Together, we refined the design direction, standardizing data formats and creating a more consistent and intuitive user experience.
1 Product manager
3 product designers
CX department
3+ Developers
Process
Discovery
Our UX research revealed that customers struggled with our product, feeling it no longer appeared trendy and professional. The colors, fonts, and marketing techniques we had used for five years felt stale compared to competitors who were actively rebranding.
A cluttered display with too many non-prioritized buttons can confuse users, leading to difficulty in interacting with CTAs. The lack of organization in the information architecture makes the workflow unclear and overwhelming on a small screen.
The overall UI layout required adjustments to improve usability. For instance, the font size for key information was too small, making it difficult to read. Additionally, the icons were inconsistent in size, leading to a lack of visual hierarchy.
HMW
Brand Perception and Aesthetics
How might we refresh our color palette and typography to enhance brand appeal and modernity?
How might we add interactive design elements to enhance user interest and increase engagement?
Cluttered Interface and Prioritization
How might we simplify the UI to reduce clutter and prioritize essential actions for users?
Information Architecture and Workflow
How might we group related elements to streamline the user experience on smaller screens?
Readability and Visual Hierarchy
How might we create a consistent iconography system to establish a clear visual hierarchy throughout the UI?
Design Workshop
We typically conducted workshops by defining objectives and gathering cross-functional teams to discuss previous application design versions, present new designs for feedback, facilitate brainstorming sessions, prioritize information architecture, and collaborate with the engineering team to assess the feasibility of implementing ideas. We also scheduled follow-up meetings for continuous feedback and documented outcomes for alignment.
Icon Renew
Because there was no distinction between our product icons and those of other products in our company, we had to add small elements to create a clear difference.
Component Renew
Component renewal is complete, featuring standardized colors, thin and modern icons, and clean buttons without gradients, all contributing to a more intuitive and simpler appearance.
Interaction Design
Incorporating interaction in our application enhances user engagement and usability, encourages action, and fosters brand loyalty, ultimately creating a more enjoyable and effective user experience.
Design Improvement
Several generations of concepts for the new design were implemented. Throughout this process, we explored various design concepts that showcased the current brand in a fresh way while preserving the conservative nature of the business. However, we are now introducing a new design that is simpler and more intuitive, aligning with our focus on enhancing usability.
Prototype
This version is concise and highlights the key aspects of prototyping—testing, user feedback, and refinement.
Solution
To address the challenges identified, we followed a user-centered design approach. Here's how we tackled the key issues:
Simplified Interface and Prioritization
We simplified the user interface by reducing clutter and prioritizing essential actions. We focused on ensuring that key features were immediately accessible, especially on smaller screens, leading to a more intuitive experience and smoother navigation for users.
Streamlined Information Architecture
To improve workflow, we reorganized related elements and restructured the layout for better clarity. This ensured that users could easily find the information they needed without feeling overwhelmed, especially on mobile screens.
Improved Readability and Visual Hierarchy
We standardized iconography and font sizes across the interface to create a clearer visual hierarchy. This improvement made it easier for users to navigate through the application and understand key information at a glance.
Results
Post-Redesign Success: Improving User Experience and Driving Efficiency Through Dashboard Unification
Increased Efficiency
The dashboard unification project has created a more consistent and intuitive user experience across OPSWAT products, leading to 15% faster onboarding and enhanced productivity due to standardized design elements.
Positive User Feedback
Customer feedback shows a significant reduction in confusion and errors when navigating between dashboards, with a 25% decrease in UI-related support tickets. This has contributed to a 20% increase in overall user engagement, as users find the design more intuitive.
Growing User Adoption
The modular design approach enables faster updates and feature integration, helping OPSWAT stay aligned with customer needs and adapt quickly to market trends, ensuring sustainable growth and a continued positive user experience.