User Experience & User Interface Design
The Nonneoplastic Lesion Atlas is a pathology website incorporated within the National Toxicology Program government website. It was originally created externally and maintained through a third party. The graphite theme of Atlas does not conform to the NTP branding. It looks like a completely separate website.
As the parent website, NTP wanted Atlas to be redesigned to align its look and feel. All existing issues on the Atlas fuctionalities or user issues must be addressed on the redesign.
Role: Design Lead
Client: National Toxicology Program (NTP)
Project Site: Nonneoplastic Lesion Atlas*
*(This it the original website. The redesigned version will be implemented after completion of website migration to a new CMS)
Tools: Adobe XD, Photoshop, Illustrator, Adobe Premiere and Audition, Sketch, Html, CSS, Javascript, Zeplin-for developer hand-off.
The Atlas provides diagnostic guidelines for microscopic nonneoplastic lesions for better understanding of human environmental diseases. It is intended for pathologists, scientists and researchers.
It is an inter-agency program run by the U.S. Department of Health & Human Services to research, coordinate, evaluate and report on the health effects of chemical agents in the environment.
(i.e. side navigation, lightbox, etc.)
The client was initially informed of the various issues of the Atlas website by the Stakeholders before the redesign. To find out more details, an interview was conducted with the Experimental Pathology Labs, specifically the Biology Digital Imaging unit team.
User tests were also administered to get information on their experience using the website.
Users: Pathologists, Scientists, Researchers
Method: Interviews, Moderated remote and in-person usability tests
User Test Results: The areas identified with issues were mainly in the Atlas sublevel categories and image navigation in a lightbox gallery.
The focus of this section is the analysis of how the redesign was done in detail. The following are the webpages that received a considerable amount of attention and went through further deliberations and testing. Each image below shows the design solution to find a middle ground:
Design solution to the opposing views
The functionalities have been tested and positive feedback has been attained. Hi-fidelity wireframes were then created to show the new colors or branding of the Atlas website.
Correcting the colors for the sidebar
Resolving the issues with the double header style
The Atlas website was originally created and maintained through a third party prior to being integrated into the main NTP website. This is why the design and the look and feel are completely different.
The following shows how the double header style was transformed to solve the visual experience issues.
Redesigning the Search Page by understanding the purpose of the search
To come up with a design solution to the search format dispute, the purpose of the search was analyzed for both NTP and Atlas. A comparisson was presented to show the difference.
The final design introduces a third search format, the radio Button which serves as the a middle ground. The on or off function is able to retain the search facets that is imperative to the stakeholders and it also made way for the implementation of the look and feel that the client required.
Although slight variations had to be made in some areas, the new search page style was tried out and accepted without further issues.
The website has over 9,000 pages and over 12,000 lesion images. The following are the core pages of the site that were redesigned.