Client
Archer IRM
Year

2023 – 2024

Role
  • Sr Product Designer
Deliverables
  • Initial Intake Research
  • Information Architecture
  • Design Specifications
  • High-Fidelity Prototypes
  • Development Handoff
  • QA Testing
  • Standards Documentation

How can we redesign the record page to make data entry easier and more intuitive for users?

Archer IRM, a leading risk management company, recognized the need to modernize their record page, a critical component used for data input and result tracking. The product had not been redesigned in many years, and the technology was being retired. The company sought to rebuild the record page using React and hired me as a senior product designer to assist with the workload and guide feature decisions.

Original design versus my design (with a touch of personal aesthetic).

Challenges and Initial Discoveries:
Upon joining the project, I noticed several key issues:

  • The product had been under development for a year with inconsistent standards.
  • There was no access to user data.
  • The transition to Figma was underway, but there was no organized documentation or standardized design system.

During my initial discovery phase, I identified that the existing information architecture was disorganized and outdated. I proposed a new Right Panel to house system data such as change logs, access history logs, data-driven events, and a relationship visualizer. This proposal received enthusiastic support from all stakeholders, including the C-suite, and was immediately incorporated into the project roadmap.

Goals and Approach: Following the initial intake and discovery phase, I set forth the following primary goals:

  • Update the Information Architecture: Redesign the information architecture to ensure logical organization and improved usability.
  • Introduce the Right Panel: Implement the Right Panel to house systematic data, enhancing the overall user experience.
  • Standardize the Design System in Figma: Lead the transition to Figma, building a comprehensive and standardized design system. See project Arrowhead Design Library.
  • Collaborate with Stakeholders: Ensure alignment and efficient implementation by working closely with the product owner, client-side UX team, and development teams.

My Process:

  1. Information Architecture Overhaul: Redesigned the information architecture to ensure logical organization, improved usability, and effective integration of system data into the Right Panel.
  2. Right Panel Integration: Developed the Right Panel to house systematic data like change logs, access history logs, data-driven events, and a relationship visualizer. One of the most popular features was the error panel, which highlighted errors in real-time as users inputted data, significantly improving efficiency.
  3. High-Fidelity Prototypes: Developed detailed, interactive prototypes to visualize the redesigned record page, featuring the Right Panel with its various tabs.
  4. Design Specifications: Created comprehensive design specification documents outlining all design elements, interactions, and functionality for the development team.
  5. Development Collaboration and Handoff: Worked closely with the development team to refine the design, ensuring technical feasibility and smooth integration, followed by a structured handoff process.
  6. Quality Assurance (QA) Testing: Conducted extensive QA testing to identify and address any issues, ensuring the final product met all design and functionality standards.
  7. User Feedback Integration: Collected post-launch user feedback to iterate and enhance the record page, ensuring continuous improvement and user satisfaction.

Errors

The user behavior regarding errors on the record page was incredibly unique, especially given the complexity and size of the form. Traditional error notifications at the top of the page were not helpful as they could occupy the entire page, making it difficult for users to locate the specific fields needing attention. The record page could house thousands of fields, causing users to lose significant time searching for key fields that required input.

To address this, I collaborated with the in-house UX team to design an innovative solution: housing error notifications in the Right Panel. This approach introduced two error paths:

  • Inline Error Notifications: When a user interacts with a field and makes an error, a notification appears in the Right Panel. The notification pulses three times before remaining in red, indicating an unresolved error. Users can continue their work and return to fix the error later if needed.
  • Save Error Summary: If a user attempts to save the form with missing required fields, the Right Panel displays a list of all required fields that need completion. Each error is hyperlinked, allowing users to click and be directed to the specific field in question. This feature significantly reduces the time spent searching for errors and ensures that all necessary fields are accurately completed.

Change Log

The Change Log panel was designed to provide users with a comprehensive history of modifications made to the record. Several important considerations guided its development.

We needed to determine whether the field name or the change itself was of top importance. The final design highlighted both elements to give users a clear understanding of modifications. The Change Log includes essential filters: a text filter to search for specific changes, a date range filter to narrow down changes within a specific timeframe, and an actor filter to track changes made by specific users or systems.

Given the potential for large volumes of data, we decided against pagination and implemented infinite scroll. Initially, data for the past 12 (or 24) months loads, with an option to load more as the user scrolls. The initial view shows a quick overview of recent changes, with the ability to collapse long lists of changes after three entries. This ensures that users can quickly see who made recent changes without being overwhelmed. Each change can be expanded to show more details, and long fields with many changes are collapsible, allowing users to expand all entries into a table view if needed.

Selecting a history log item shifts the focus on the Record page to the corresponding field, making it easy for users to locate and review specific changes. Users can also export the filtered view or the entire change log, ensuring flexibility in data management.

These considerations ensured that the Change Log panel was both comprehensive and user-friendly, allowing users to efficiently track and review modifications.

Access Log

The Access Log panel was designed to be simple yet effective, aligning with the structure of the Change Log panel. Key considerations and features include:

  • Primary Focus: Designed primarily for auditors and managers, the Access Log provides a clear, quickly scannable view of who has accessed the record.
  • Filters: Implemented text filters, date range filters, and actor filters to allow users to search access logs by specific criteria.
  • User Activity Tracking: Displays a list of all individuals who have accessed the record, along with timestamps indicating when the access occurred.
  • Security Monitoring: Provides a straightforward way to check for security purposes, ensuring that any unusual access patterns can be quickly identified and reviewed.

The considerations and features of the Right Panel collectively enhance the user experience by providing crucial information in an accessible and intuitive manner, significantly improving efficiency and accuracy in managing records. The careful design decisions and collaborative efforts ensured that the new features met user needs and expectations.