Redesigning WorkSpan’s Overview Page
Transforming Information Overload into Instant Insights - Driving a 36.7% Engagement Surge for WorkSpan’s Global Users
Role: Lead Designer
Launched: 2023
Note: All images are for illustrative purposes only and contain dummy data.
Project Summary & Business Impact
The Overview Page is a critical hub for 90% of WorkSpan users, enabling them to manage co-selling partnerships. Our redesign streamlined information discovery, improved readability, and optimized performance, making it easier for users to access key insights quickly and collaborate efficiently. We helped 200+ enterprises optimize their co-selling partnerships.
Designs That Power Co-Selling at 200+ Global Entreprises
Detailed Project Overview
Context
The Overview Page serves as the central hub for partners to track their co-selling process. It provides key metrics, ensures alignment across stakeholders, and reduces time spent searching for information.
However, users such as Partner Business Managers, Operations Managers and Account Executives found the four-column layout overwhelming - it required excessive scrolling and made important insights difficult to locate.
Solution Approach
We approached the problem through two key focus areas:
Layout redesign: Improved hierarchy, consistency, and load time
Information display: Refined field-value pairs, typography, and spacing
Reaching the Solution
To guide our redesign, we analyzed leading B2B platforms like Salesforce, Reveal, Crossbeam, and Freshworks to identify dashboard patterns that simplify data-heavy layouts and make insights instantly accessible. These insights guided our design decisions.
Prioritize Key Metrics
Learning: Users focus on top KPIs first in tools like Salesforce and Freshworks.
Applied: Surfaced key metrics and actions at the top for quick visibility.
Use Modular Layouts
Learning: Flexible, card-based dashboards
(e.g., Mailchimp, Stripe) scale better as features evolve.
Applied: Standardized card sizes to maintain rhythm and support new features.
Combine Data Types
Learning: HubSpot and Dynamics display related qualitative + quantitative data together.
Applied: Merged contextual insights into unified sections to reduce tab switching.
Enhance Readability
Learning: Clean hierarchy and whitespace in analytics tools improve comprehension.
Applied: Refined typography, spacing, and contrast for better scanability.
Success Criteria
Ease of comprehension: Users should quickly grasp the layout.
Effective information architecture: The design should serve the needs of all roles.
Findability: Users should easily locate what they need.
Consistency and scalability: The layout should adapt seamlessly to new features.
Efficiency: Reduced scrolling and navigation effort.
Seamless transition: Helping existing users adapt effortlessly to the new layout.
Layout Redesign Improvements
1.
Inconsistent Card Sizes
Info cards varied in size between left and right sections, disrupting visual balance.
Consistent Card Sizes
Standardized card sizing across sections for visual harmony. |
2.
Wasted Space
Empty gaps appeared when right-side cards had fewer elements, leading to visual imbalance.
Optimized Space
New layout adapts dynamically, minimizing empty areas. |
3.
Cluttered Data Display
Cards displayed excessive information or blank fields, overwhelming users.
Optimal Data Display
Displayed only essential fields, reducing visual clutter.
4.
Low Readability
Inconsistent layouts across sections made scanning and understanding information difficult.
Improved Readability
Unified layouts made information easier to scan and comprehend at a glance.
5.
Poor Discoverability
Users struggled to find and access all available sections quickly.
Better Discoverability
All sections are visible at a glance, improving navigation speed and ease.
Blockers, Pivots and Constraints & How We Solved Them
We faced two key challenges once we started:
Convincing Stakeholders to Simplify the Layout
Familiarity with the old four-column structure led to initial hesitation. Live demos and usability tests proved the two-column redesign improved usability and efficiency, helping secure alignment across teams.
Making Search Work in a Tabbed Layout
Users relied on Command + F, which initially didn’t work with tabs. To fix this, we introduced infinite auto-scrolling, ensuring seamless search while keeping the new structure intuitive.
Iterating information display for better readability
Before finalizing the design, I explored different layout structures and font hierarchies. I tested these iterations with multiple stakeholders to find the most scannable and user-friendly version.
Option 1
Label and value share the same font size → limited visual hierarchy.
Option 2
Vertical stacking with smaller label font → improved contrast but slower scanning.
Option 3
Horizontal layout with distinct font sizes → faster scanning and clearer structure (final choice)
Tested with 12 key stakeholders across departments (Design, PM, Sales, PS) - Option 3 was preferred for fastest readability.
Shipped Features
Two-Column Layout: Reduces cognitive load, making it easier to scan and find relevant details.
Infinite Scrolling & Auto-Scrolling: Ensures seamless transitions between sections while preserving search functionality.
Customizable Tab Ordering: Empowers users to arrange tabs based on their workflow.
Clear Font Differentiation: Enhances readability by distinguishing field labels from values.
Jump-to-Top Button: Simplifies navigation in long sections.
By aligning the design with user expectations, we created a cleaner, more functional overview page that improves workflow and usability.
Use the slider to see the difference yourself!
Can you now find key information more easily?
Is navigation between sections simpler and faster?
Impact
Enhanced global user experience, empowering faster decision-making across regions.
Reduced friction across workflows, leading to smoother navigation and increased self-service.
Boosted platform stickiness, strengthening daily usage and user retention.
(1.39s → 0.46s)
Rollout & Adoption Strategy
We launched a BETA version on May 12, 2023, with select customers (Kyndryl, EY). Positive feedback from the BETA validated our approach, so we introduced a toggle button to let existing users explore the new layout without disruption while new customers were directly onboarded with the redesigned interface. The Overview Page is now live for 200+ customers, driving enhanced usability and engagement.
Iterations & Enhancements
Post-launch, we added several enhancements based on customer feedback, such as:
Auto-scrolling between sections for smoother navigation.
Jump-to-top button to help users quickly navigate large sections.
Section headers for better content segmentation and clarity.
Full Feature Walkthrough
Lessons Learned
Ideas Need Visuals
Not everyone envisions a concept the same way. Quick mocks and prototypes make ideas tangible, helping align expectations early.
Early Collaboration Prevents Last-Minute Changes
Bringing key stakeholders in from the start ensures everyone stays aligned - reducing surprises and rework later.