Next Project: Designing for Instant Insights
Detailed Project Overview
Context
The Overview Page is the central hub for partners to track their co-selling process. It:
Provides key metrics and collaboration insights
Ensures alignment across stakeholders
Reduces search time and improves decision-making
Key issues included:
Excessive scrolling to find key insights, causing inefficiency
Hunting for specific details across multiple sections, leading to frustration
Inconsistent information formats, causing confusion and delays in decision-making
Longer page load time due to heavy information, resulting in a poor user experience
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. |
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. |
Cluttered Data Display
Cards displayed excessive information or blank fields, overwhelming users.
Optimal Data Display
Displayed only essential fields, reducing visual clutter.
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. |
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.
Key Issues
The Solution
5.
4.
3.
2.
1.
Key Issues & Our Solution
Success Criteria:
Ease of comprehension: Users should quickly grasp the layout.
Effective information architecture: Serve the needs of all roles.
Findability: Users should easily locate what they need.
Seamless transition: Ensuring the layout is intuitive for existing users.
Evolving Toward Clarity: Iterating Layouts for Better Readability
Option 2
Vertical stacking with smaller label font
Option 1
Label and value have identical font size (less visual hierarchy)
Option 3
Horizontal layout with better scannability (Final Choice)
Tested with 12 key stakeholders across departments (Design, PM, Sales, PS) - Option 3 was preferred for fastest readability.
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.
Before vs After: A Clearer, Faster Experience
Note: All images are for illustrative purposes only and contain dummy data.
Use the slider to see the difference yourself!
Can you now find key information more easily?
Is navigation between sections simpler and faster?
Key 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.
Impact
+36.7% growth in user engagement, indicating higher platform adoption and satisfaction.
Page load time reduced by 67%, accelerating access to key insights (1.39s ➔ 0.46s).
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.
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
Note: All images are for illustrative purposes only and contain dummy data.
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.
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 Enterprises
Role: Lead Designer
Launched: 2023
Note: All images are for illustrative purposes only and contain dummy data.