Original Page Below

UX Case Study: Redesigning a Data Table for Enhanced Interpretation and Usability

Project Overview

The task was to improve the usability and functionality of a data table used to manage candidate invitations for assessments. The table displayed key data points such as recipient information, delivery status, and invitation links. However, it suffered from a lack of clarity, poor hierarchy, and limited feedback mechanisms, which hindered user efficiency.

Objective

1. Enhance data visibility, interpretation, and usability.

2. Improve the navigation and organization of table elements.

3. Incorporate key UX principles for a more intuitive user experience.

Phase 1: Understanding the Problem

Original Design Issues

1. No Status Indicators: Delivery statuses were displayed as plain black text, offering no differentiation between states.

2. No Critical Statistics: Users lacked an overview of key metrics such as total invitations sent or delivery performance.

3. Poor Information Hierarchy: All data was displayed in uniform text style and size, making it difficult to scan and interpret quickly.

4. Limited Feedback: User actions like copying links or navigating between pages lacked immediate system feedback.

Phase 2: Research & Analysis

User Feedback: Users found it difficult to understand the status of their invitations without clear visual indicators.

Heuristic Evaluation: Identified issues in feedback, visibility, and the system's failure to prioritize information effectively.

Relevant UX Law: Jakob’s Law Users spend most of their time on other platforms and bring those expectations with them. The table lacked familiar design patterns such as visual indicators for statuses and feedback cues, increasing the cognitive load.

Phase 3: Improving Status Visibility and Data Tracking

Solution: Introducing Status Tags To make delivery statuses more distinguishable, I introduced color-coded tags along with distinct icons:

• Sent: Grey

• Delivered: Purple

• Bounced: Red

• Opened: Green

Each tag was supplemented with an icon to cater to users with color vision deficiencies.

Relevant UX Principle: Color Accessibility Adding color-coding with iconography ensures that users, including those with visual impairments, can easily distinguish between statuses.

Solution: Implementing Monospace Fonts for the Entire Table

• Since the table's primary purpose is tracking date-time stamps and ensuring precise comparisons, I used monospace fonts for all columns. This choice enhances readability by aligning all characters uniformly, whether they’re timestamps, statuses, or recipient information.

Relevant UX Principle:

• Monospace fonts improve scanability by maintaining consistent spacing across characters. This is especially beneficial for tabular data, as it allows users to quickly track and compare data points with minimal visual strain.

Solution: Improving Date-Time Readability

To make the date-time data even more distinguishable, I introduced an extra space character between the date and time within the columns.

Relevant UX Law: Gestalt’s Law of Proximity This adjustment helps users perceive the date and time as separate yet related elements, enhancing the clarity and reducing the chance of misreading the timestamps.

Phase 4: Adding Critical Statistics

Solution: Top-Level Summary Section A statistics bar was added above the table to provide a snapshot of:

• Invitations Sent

• Delivered

• Bounced

• Opened

This summary allows users to gauge overall performance at a glance.

Relevant UX Law: Miller's Law By consolidating key metrics in one place, users no longer need to remember data across different screens, reducing cognitive load.

Phase 5: Enhancing Information Hierarchy

• Recipient Information: Email addresses were bolded for quick identification, with secondary details (candidate names) displayed in lighter text.

• Delivery Status: Status tags were designed with distinct colors and bold text for immediate recognition.

• Action Links: Styled consistently to stand out while maintaining a clean look.

Solution: Filter and Sort Buttons

• Sort Controls: Placed directly beside column headers to avoid misfires and improve clarity.

• Filter Button: Positioned on the far right for easy access, minimizing interference with sorting.

Relevant UX Law: Fitts’ Law By optimizing the placement of the filter and sort buttons, the design reduces mis clicks and improves task efficiency.

Alignment & Proximity

Columns were reorganized to group related elements, such as recipient information and delivery statuses. Adequate spacing was introduced between rows and columns to avoid clutter.

Relevant UX Law: Gestalt’s Law of Proximity Grouping related elements improves scan ability and helps users focus on specific data points more easily.

Phase 6: Feedback Mechanisms

Solution: Immediate Feedback for Actions

• Copy Link: Replaced the “Copy Unique Link” text with a copy icon. Upon copying, the text changes to "Copied" followed by a tick icon, giving instant and non-intrusive feedback as opposed to toast notifications, which are intrusive and violate Fitts' Law.

• Pagination Controls: Highlighted the active page and provided clear, immediate transitions between pages.

Relevant UX Law: Doherty Threshold Quick system feedback ensures that users remain engaged, reducing frustration and uncertainty about whether their actions were successful.

Phase 7: Optimizing Navigation

Solution: Streamlined Pagination and Search

• Pagination: Reworked to combine and display the current range of results (e.g., 1–10 of 95) along with streamlined navigation controls.

• Search Bar: Repositioned for better visibility, with clear placeholder text for guidance.

Future Enhancements

The redesigned data table serves as a solid foundation for continuous improvements. Future updates could include:

• Row Highlighting on Hover: Enhancing focus on individual data points.

• Advanced Tooltips: Providing extra context for truncated data.

• Dark Mode: Improving usability in low-light environments.

Conclusion

The redesign transformed the data table into a more user-friendly, efficient tool. By integrating UX laws and principles, the updated interface offers better clarity, enhanced navigation, and meaningful feedback, ensuring a more seamless user experience.

To collaborate contact me at :

shreyasjswork@gmail.com

I specialize in crafting compelling and empathetic user experiences that drive conversions through the fusion of design ,psychology and neuromarketing.