Web App UI Redesign
Search and Search Result Redesign
This web application is designed for government epidemiologists to track and monitor HIV cases across the nation, facilitating efficient surveillance and case management.
Intro & Project Scope
This project involved a small but impactful redesign aimed at enhancing the UI for a simple database search workflow.
The client needed updates for three specific pages: the terms and agreement page, the search form, and the search results page.
While the database functionality remained untouched, the primary goal was to improve the overall user interface.
The existing UI was functional but outdated. While the workflow itself was simple, the design created unnecessary friction, leading to higher cognitive load and slower task completion times.
The client wanted a UI refresh that maintained familiarity but improved user satisfaction by streamlining the experience.
Enhanced search instructions and affordances for clarity
During the heuristic evaluation, we identified that the existing interface lacked clear guidance for the multiple case search feature. To address this, we removed the block of text and replaced it with concise, step-by-step instructions. We also improved the labeling of the search name, call-to-action buttons, and introduced clear affordances, making the intended actions more intuitive and encouraging user interaction with the search functionality.
Simplified actions and information display
To reduce cognitive load and better support epidemiologists who frequently use this application, we streamlined the presentation of a key search parameter—whether to include or exclude U.S. states, federal districts, and territories. Instead of overwhelming users with excessive details upfront, we introduced a modal that provides a more in-depth explanation of what inclusion or exclusion means, along with a detailed list of the states, districts, and territories involved. This approach accommodates both users who are familiar with the parameters and those needing additional guidance. This small yet impactful change reduces the learning curve and ensures seamless user interaction within this live software.
Clicking on “Learn More”
The modal offers detailed information, including the full names of states and territories, while remaining hidden for regular users who don’t need frequent access to this information. This ensures clarity for those who require additional guidance, without cluttering the interface for experienced users.
Terms and Conditions Page
One of the main client requirements was to modernize the user interface. In the previous design, buttons closely resembled links, offering little visual indication of their interactivity. I improved visual clarity by redesigning the buttons to be more distinct, while also increasing the clickable area to meet accessibility standards. This update not only gave the interface a more modern feel but also significantly improved overall usability. Additionally, to reduce visual clutter, I separated the search parameters and result count from the table, creating a cleaner layout that enhances readability and user focus. These changes collectively contributed to both decluttering and modernizing the user experience.Accessibility, Visual Clarity, Declutter, and Modernization
Final Design
User Testing
Prior to handing off the final designs to the development team, I conducted a user testing session with 10 active users. Since this is a work application, we focused on key metrics such as cognitive load, learnability, and error reduction. Specifically, we measured task completion time, success rate, and user satisfaction. The results confirmed the redesign's effectiveness, showing improved task efficiency and increased user satisfaction. The reduction in task completion time, while maintaining a high success rate, indicates that the redesign has a low learning curve and effectively enhances usability.Task Completion Time
↓18%
Task Success Rate
100%
Satisfaction