What
1) A database that holds all applicable publications submitted to the health institution, including books, documents, videos, informational pamphlets and more. New design allowed for ease in search with filterable options.
2) A revamped version of an outdated public tool that accounted for more than 50% of the site visits.
federal contract: specialized health institution
— publication database and refreshed public tools
Roles
UX Research, Visual Design, Interaction Design, Information Architect
Deliverables
Competitive Analysis, User Stories, User Flows, Wireframes, Mockups
Tools
Figma
Publications Database
Outdated database display: publications were listed as they were uploaded with minimal details/description.
Multiple versions: the same publications but in different languages were uploaded. This caused a lot of redundancy and forced users to have to go back and forth and searching for the correct version if they needed to access or download the different versions.
Unmonitored filters: some filter options had multiple items where some had no matching publications filed under it. This led to excessive filters that weren’t being used and only taking up unnecessary space. Some filters also had duplicate items which could indicate that there was no limitation when adding a filter, especially if spelt incorrectly.
BMI Calculator
Small interface and lack of a responsive webpage: the full tool was squeezed into a small box and the page as whole used styling different from the rest of the site due to different hosting platforms. When accessing the page on smaller screens and devices, the page loaded as a tiny webpage taking up the device screen size and you had to manually zoom in to access or view any part of the website.
Basic form design: there was nothing special about the form and the tool featured an outdated, tacky image that took up more than half of the tool itself.
Missed resources: because of the size of the tool, helpful resources can be often overlooked because the link text is small while only displaying the link title and no further details.
Problem
Publications Database
Cleaner, more detailed display: publications showed important details (e.g., publication image, title, short description, file type and size, etc.,) as well as the option to download the file or add physical copies to a shopping cart. A sorting drop-down was added to allow for the option to view items in different manners, such as “Newest first” or “Titles A-Z”.
Condensed items: publications with multiple languages included access to other language versions within the publications instance page which allowed users to minimize the amount of back-and-forth navigation.
Filter clean-up: filters were analyzed and reorganized to allow for combining multiple instances of the same filter options. Other filter options were not used were removed to clean up space.
Publication instance pages showed more details to allow for easier reading. For example, we added details on page length and file size, language(s), health topics associated, file types, and more. We also placed limits on quantity available to allow for users not to be able to add more items to their shopping cart than is available.
BMI Calculator
The overall page was updated to match the current theming and styles of the section of the website the BMI Calculator lives in. The calculator itself is larger, but it is also responsive to the device the page is accessed on.
The calculator adopted a more clean and modern design while incorporating the page’s color scheming. In addition to the calculator, I added a chart to help visualize the result of the calculator - the chart will highlight the color of the result as well as what weight category the result falls under.
I added a “BMI Resources” section to showcase and highlight related articles and resources already hosted on the NHLBI website. Rather than just listing the links by their titles, the resources section give a little blurb of the link to provide more details.
Solution
