Overview
Software as a Service (SaaS) products have the potential to galvanize businesses across industries, reshaping the way they operate, collaborate, and innovate. As user expectations evolve and competitors vie for market dominance, the need to continuously enhance and revamp SaaS products became increasingly apparent for one of our clients. With strategic revamping, they sought to minimize churn and maximize the lifetime value of their existing customers. This case study aims to showcase the transformative impact of UX redesign on the featured SaaS product, optimizing its usability, functionality, and overall user satisfaction.
Goals
- Enhance User Experience: Improve the overall usability and satisfaction of users interacting with the platform.
- Simplify Navigation: Streamline the navigation structure to make it more intuitive and user-friendly.
- Optimize Performance: Increase the speed and responsiveness of the platform to enhance user efficiency.
- Design System: Establish a design system for consistent UI/UX for the future development
- Enhance Visual Design: Update the visual design to create a modern and visually appealing interface.
- Increase Engagement: Encourage users to interact more frequently with the platform through enhanced features and functionality.
- Simplify Onboarding: Streamline the onboarding process for new users to reduce friction and encourage adoption.
The 10-step UX Redesign Process
The SaaS product redesign involved a meticulous process focused on accessibility, usability, improving functionality, and modernizing the user-centric interfaces. This intricate undertaking required a comprehensive approach that encompassed several key phases as described below:
Phase 1: Stakeholder Interview
The UX design process was initiated with in-depth research conducted via multiple stakeholder interviews to grasp the current pain points, user preferences, and client expectations for the SaaS product aimed at streamlining transport operations. Our questions were carefully drafted to ensure absolute clarity and eliminate any ambiguity or uncertainty.
Phase 2: Heat map
Heatmaps visually reveal user interactions, guiding designers to optimize flows and enhance experiences. They offer insights into popular features, navigation patterns, and friction points, supporting data-driven design decisions through A/B testing.
Tool we used
Google Analytics
Segmentation
Product Users
Tested on
Around 20 Users
Vehicle List Heatmap Analysis
- Proper attention on Add New CTA
- Users get distracted by multiple visible action icons
- Filter CTAs get unnecessary attention
Booking Heatmap Analysis
- "Create Booking" button gets strong user attention
- Individual CTAs cause potential distractions
- Secondary CTAs receive undue attention
- Location icons have good visibility
Phase 3: Information Architecture
The next phase in the journey reinvention case study was Information Architecture (IA) - a standardized process adopted worldwide for designing intricate systems. Ideally, it involves creating a blueprint or framework that defines how information will be organized and presented to users in the SaaS product. We defined content hierarchy, established clear pathways, and ensured intuitive labeling, which helped us to create a seamless user journey.
Phase 4: Heuristic Evaluation
In this phase, our team conducted a Heuristic evaluation to uncover usability issues within the previous SaaS product. We applied 10 key principles of Heuristic Evaluation to assess the design's effectiveness. Here are the results of our evaluation:
Phase 5: Competitor Analysis
The SWOT analysis model was applied to examine the strengths, weaknesses, opportunities, and threats of the leading three competitors.
Phase 6: User Persona
Our initial research revealed that the SaaS product team consists of two distinct user categories: Admin (Transport Manager, Supervisor) and Operator (Booker, Dispatcher, etc.).
Phase 7: User Journey Mapping
This phase helped in understanding users' actions, behaviors, and obstacles encountered while completing tasks.
Phase 8: Impact-efforts Matrix
Following the gathering and analysis of data, strategic decisions were made to prioritize SaaS product redesign features that effectively address user needs and align with business objectives
Phase 9: SaaS Product Redesign Comparison
Compare the before and after of our SaaS product design through a side-by-side comparison of redesigned screens. See firsthand how our design process has elevated usability, aesthetics, and overall user experience.
Phase 10: Revamped Screens
Dashboard
Introduced a widget rearrange and manage feature in the dashboard to cater to diverse user needs. Users can customize widget placement and prioritize data, enhancing their dashboard experience by eliminating excessive scrolling and saving time.
Added a drop down in the header for quick access to switch between multiple venues. Always visible to the user, reducing confusion during specific tasks.
Utilized a 12-column grid system for effective organization of data cards.
Reduced cognitive load by incorporating visual representations such as graphs, charts, icons, and colors.
Navigation
Collapsible Nav Bar
Implemented collapsible navigation bars to conserve space, ensuring essential information is
easily accessible without pushing data off-screen. The navbar expands and collapses on mouse
hover, eliminating the need for extra clicks to view navigation items and concerns about
large menu titles.
Increased space by
20%
Reduced extra clicks by
2 clicks
Comprehensive Heading bar
Applied three principles to make the heading bar comprehensive, efficient, and
user-friendly:
- Law of Common Region: Clearly defined title bar, action bar, and tabs.
- Law of Proximity: Grouping CTAs, secondary navigations, and titles with related information.
- Visibility of System Status: Defined page titles and breadcrumbs
Results
By focusing on user-centric design principles, seamless workflows, and performance optimization, we successfully transformed our client's innovative SaaS platform. It not only addressed the challenges faced by our client but also set a new standard for user experience for all stakeholders.
There were significant improvements after the SaaS product redesign in both the number of clicks needed to complete tasks and the average time it took to complete a task.
Number of clicks
By implementing various strategies such as incorporating one-click actions, auto-filling data, and minimizing confirmation, the number of clicks needed to accomplish tasks was notably reduced. Optional fields were combined, menus were simplified, and key features were prioritized, resulting in a more streamlined user experience.
Avg. Task Completion time
Efforts to minimize task completion time focused on several factors including reducing clicks, optimizing navigation, and providing clear hierarchy and labels. By keeping linked data accessible, simplifying menus, and avoiding overwhelming users with unnecessary information, users were able to complete tasks more efficiently. The responsive and inclusive layout, along with fast loading times, further contributed to enhancing task completion speed.
Overall User Experience Improvement in the SaaS Product
30%
Time Savings and Increased Efficiency
82%
Enhanced User Satisfaction
15%
Reduction in Errors
20min
Condensed and Organized Menu Structure
10min
Personalized User Workspaces
