top of page
Updating the National Retail Data Monitor Website
Spring 2021 | The University of Pittsburgh
For my senior capstone project, a small team of students and I worked with a client from the National Retail Data Monitor - a Pennsylvania public health surveillance initiative that uses over-the-counter healthcare product sales to document and predict disease outbreaks - to update their user functionalities and website design.
The Problem
When my team first saw the original NRDM website, it was immediately apparent that the site was dated. The website is only available to verified health officials and the NRDM team themselves, but even for these individuals, it was hard to navigate. The site was functional, but the design was clunky and unexciting, and the UI for navigating and querying data into graphs was not intuitive. This greatly frustrated the members of the NRDM team. In addition, we noticed there was very little user functionality aside from a database that tracked a user's name, information, and jurisdiction (which dictates which area's datasets they had access to). Even before we gained official access, it was clear that the system for onboarding new users also suffered. We needed to get our login and sign a contract from directly through the NRDM's secretary via email, which quickly became slow and taxing.
Our task involved updating the entire website, from the UI and graphics to the user functionality. The APIs that the original website used to query data were still functional and efficient, so we needed to integrate those into the new website. Everything else could be rebuilt from the ground up.
The Planning
We approached our redesign using the agile methodology. We met with our client, a representative from the NRDM, twice a week to update him on our progress and to go over new tasks to accomplish during each sprint. During the first few two-week sprints, my team conducted a small usability test on the website, which showed us which areas users typically struggled with. By analyzing the results of the test and taking into account our client's own feedback of the site, we made a list of issues that needed to be changed and ordered them based on importance.
Once we had a list of clear goals, we plotted them on a schedule to ensure that we stuck to our timetable, as we only had one semester to complete our redesign. Since each member of our team had a different set of skills, we divided some of the smaller goals amongst ourselves to suit our individual strengths, while the larger, tougher goals would be tackled by the team as a whole. We started on the most important goals, such as designing a new prototype of the website and writing new code to handle user functionality, early to give us enough time to finish them. Smaller tasks, such as creating an intuitive navigation bar or integrating a new graphing API to display data, were tackled in later sprints.
The Process
The first task we tackled as a team was creating a quick prototype for the new website design. Taking into account what we had learned from the usability test and what needs our client wanted us to include, we first drew up a low-fidelity prototype on paper. This method allowed us to quickly get an idea for what we wanted the new site to look like without getting weighed down by making a fully-fledged prototype.
We showed the client our mockup for the new design, which gave him the chance to offer his feedback. After getting his critiques, we set about creating a more realistic high-fidelity prototype on Figma. Using an application like Figma let all of us work together on the same file, offering help and suggestions to each other as we designed multiple pages for the final product. Figma also allowed us to animate some of our elements, which gave the client an idea for how we envisioned different aspects of the site working, such as the navigation bar and the connections between different pages.
While we worked on the prototypes, we also focused on creating the new code for the website. We chose to use Flask, a web application framework that utilizes Python, because it offers simple functions for routing pages of a website together. Once we selected our framework, we set about building the new website from the ground up, following the initial goals set for us by our client and the prototypes we had made. We created the new code to handle the expanded user functionality at the same time that we developed the web framework, which allowed us to integrate them together in a natural way.
The Results
By the end of the semester, we achieved our goal of redesigning the critical pages of the NRDM website. The way we created the new website makes it easy for the NRDM team members to update the last few pages themselves.
The new website boasts an updated, modern design featuring the blue and gold colors of the University of Pittsburgh, the school which first sponsored the project. The navigation pane now resides in a sliding panel tied to a hamburger button in the top left of every page, which provides the rest of the page more space for graphics or details. The graphs on the Epiplot page now allow users to hover over points to find exact values, whereas the old website lacked this ability.
Perhaps the biggest update is the overhauled user functionality. Admin users - those who are responsible for adding and monitoring other users on the site - are now able to add, remove, or edit the attributes of each user directly on the website. The admins now have their own page visible only to them that allows them to search for individual users in order to edit their status.
Regular users are now able to request access to the website when they create an account, whereas before they would need to reach out to the admin directly via email. Admins receive email notifications when new users request access, allowing the admins to respond promptly. Regular users are also able to reset their password when logging in instead of needing to contact the admin directly.
While we did not have the time to conduct a full usability test on the final product, we did showcase the new website to our client and to his immediate team of developers. They found the new site to be much more intuitive, efficient, and appealing than the old one.
bottom of page