1. Project Overview

• Title: Digital transformation of NTPEP System
• Timeline: 1.5 years
• Team: Business stakeholders, Product Manager, 10 Devs, 6 Tester, Me (Sole UI/UX Designer)
• Tools:MS Visio / Sketch, HTML5 / CSS3 / JavaScript / jQuery / Twitter Bootstrap, .NET Framework / Team Foundation Server, Adobe Photoshop / Adobe Illustrator
• My Role: End-to-end UX (research → prototyping → UI development), stakeholder workshops, usability testing.
• Summary: As the UX Designer for the NTPEP DataMine transformation, I led the end-to-end redesign of this complex, multi-role platform. My role encompassed the entire UX process, from initial research and problem definition—conducting heuristic evaluations and stakeholder workshops—to creating user personas, sitemaps, and user flows. I designed low and high-fidelity wireframes and developed an interactive prototype, ultimately delivering a modern, user-centered solution that streamlined workflows for all user roles.

2. Problem Statement

The legacy NTPEP DataMine system, built on outdated circa-2000 technology, provided a poor user experience and inefficient workflows for its diverse user base. Its cumbersome design led to operational inefficiencies, difficulty in discovering critical data, and an inability to adapt to new business requirements, hindering the core mission of the National Transportation Product Evaluation Program.

• Challenge:
  • Outdated Technology: A legacy system built on obsolete architecture, making it difficult to maintain and improve.
  • Poor Usability & Complex Workflows: A cumbersome and frustrating experience for all user roles (Manufacturers, AASHTO, Testing Facilities).
  • Inefficient Information Architecture: Users struggled to find data, leading to poor data discoverability.
  • Diverse User Needs: Designing a single system that intuitively serves the distinct goals of manufacturers, administrators, and lab technicians.
  • Scalability: The old system could not accommodate evolving business needs and growing data volumes.
• Business Goals:
  • Increase Operational Efficiency: Streamline complex processes like application submission and status tracking to save time and reduce errors.
  • Improve Data Accessibility & Utility: Make audit reports and product data easily searchable and available through modern features like advanced filters and graphical timelines.
  • Enhance User Satisfaction & Adoption: Create an intuitive, user-friendly platform that reduces frustration and encourages proper use.
  • Modernize the Platform: Incorporate contemporary technology and design patterns to ensure long-term viability and ease of maintenance.
• Constraints:
  • Legacy System Integration: The redesign needed to address the limitations and data structures of the existing system.
  • Complex Role-Based Permissions: The architecture had to seamlessly support vastly different functionalities for manufacturers, administrators, and testers within one application.
  • Stakeholder Alignment: Ensuring the design met the requirements of multiple stakeholder groups (AASHTO, states, manufacturers).
  • Technical Stack Limitations: The solution was likely constrained by the chosen or existing development framework (.NET, Bootstrap).

3. Research & Discovery

A thorough analysis was conducted to understand the existing system's shortcomings and define new objectives.

• Heuristic Evaluation & Cognitive Walkthroughs: The old application was meticulously analyzed to identify specific usability issues against established principles.
• Stakeholder Workshops: Meetings with key stakeholders and domain experts were held to gather fresh requirements and understand business goals.
• User Research: Given the absence of direct competitors, research focused on the users themselves. The primary audience was identified as professionals from engineering backgrounds, including vendors, manufacturers, lab technicians, and government managers. Understanding their technical proficiency, goals, and pain points was crucial.
• Requirements Synthesis: The findings were synthesized into clear goals:
  • Revamp the information architecture for a logical and improved user flow.
  • Implement industry-proven design patterns for familiarity and efficiency.
  • Design distinct, role-based dashboards tailored to specific tasks.
  • Streamline the complex application submission process.
  • Provide clear, transparent status tracking throughout the application lifecycle.
  • Ensure high data availability through advanced features like structured data grids, contextual filters, multi-level search, graphical timelines, and event calendars.

4. Ideation & Design Process

The design process followed a structured, user-centered approach to translate research into a viable solution.

• User Personas: Fictional characters were created based on research to represent the different user types (e.g., "Manufacturer Mary," "AASHTO Admin Alex"). These personas helped keep user behaviors, objectives, and needs at the forefront of every design decision.
• User Scenarios & User Flows: Specific scenarios were mapped out for each persona, such as "Application submission process for a manufacturer" or "Test results compilation for a testing facility." These scenarios were then woven into detailed user flows to ensure a seamless journey through the application without compromising user goals.
• Information Architecture (Sitemaps): A comprehensive sitemap was developed to structure the complex, role-based application. This was essential for preventing users from getting lost and ensuring that information was logically grouped and accessible.

5. Mockups and Prototypes

The design vision was progressively refined through increasing levels of fidelity.

• Low-Fidelity Wireframes:Initial skeletal structures were created to focus solely on layout, functionality, and the placement of elements without visual distractions. These wireframes established the foundational UX for all key user scenarios.
• High-Fidelity Mockups:Built upon the wireframes, these detailed designs incorporated the visual aspects of the UI, including a modern, corporate color scheme, typography, iconography, and adherence to Twitter Bootstrap's grid system. Tools like MS Visio, Adobe Photoshop, and Illustrator were used to create pixel-perfect representations.
• Interactive Prototypes:Interactive Prototypes: A fully interactive prototype was developed using Twitter Bootstrap, HTML5, CSS3, and JavaScript/jQuery. This prototype, with its defined style guide and UI patterns, allowed stakeholders to experience the application's flow and functionality with realistic, clickable interactions before any development began.

6. Usability Testing & Validation

While not explicitly detailed in the initial text, a robust UX process implies validation. The interactive prototypes served as the primary tool for this phase.

• Stakeholder Reviews:The prototypes were presented to stakeholders to validate that the design met business requirements and correctly interpreted the complex workflows.
• User Feedback Sessions:Likely, sessions were conducted with representative users (or internally with team members role-playing) to test key flows like application submission and report searching. This feedback would have been used to identify any remaining points of confusion and iterate on the designs before final handoff to development.

7. Conclusion

The redesign of the NTPEP DataMine successfully applied a rigorous user-centered design process to modernise a critical legacy system. By first deeply understanding the problem through research and then systematically progressing through personas, flows, wireframes, and high-fidelity prototypes, the project transformed an outdated application into a sleek, efficient, and user-friendly platform. The new design directly addressed the core issues by improving the information architecture, implementing a modern UI, and creating a logical, role-based experience that enhances productivity for Manufacturers, AASHTO administrators, and Testing Facilities alike. The use of interactive prototypes ensured alignment between stakeholders, designers, and developers, setting the stage for a successful implementation.