Library Product Page
Redesigning Library Product Page for SAMHSA.gov
March 2025 - April 2025
Timeline: 1 Month
Role: Designer
Tools: Figma
Project Summary
SAMHSA has it's own library website which allows users to either download or have free informative products shipped to their homes. Certain products have the option to be downloaded or ordered, and some products have multiple downloads available.
Products on the library site have unique combinations of quantities and formats, causing product pages to differ from one another. A modular, component based approach was taken in order to solve this problem, making offerings and selections more clear to the user, and making the UI and UX clearer and more intuitive.
​​
Goal: Redesign the Product Page for SAMHSA's Library site, to reduce the cognitive load on the user when selecting a product, performing multiple downloads, or ordering a free physical copy online.
​​​
Function: Using custom components designed specifically for this application, SAMHSA Library patrons are more easily able to interact with digital product offerings and make multiple selections pertaining to specific items they would like to download. They will also be able to seamlessly recommend, share, and find related information pertaining to the product they are viewing.
​​
Style: Style updates will be made to the mobile and desktop experiences, in order to establish page flow, reduce cognitive dissonance among users, improve look and feel, and bring the page up to date with SAMHSA's official style guide.
Phase 1: Low Fidelity Designs
The first phase of design involved creating low fidelity designs in the form of a wireframe. These wireframes implemented several components and featured strong design cues specific to mobile. These wireframes were presented to the client and received well. They were ready to be used as the basis for the next phase of design.
Phase 2: Grayscale Design
Single Download Available
Single Download and Physical Copy
Multiple Downloads and Physical Copy
The grayscale designs provided a clearer picture of how the main issue of product variation would be solved via the use of unique components. The first screen represents a scenario in which a product offers only a single download. The second screen presents a scenario in which there is a single download available, and a physical copy available for order as well. The third screen represents a product which offers multiple individual downloads, and has a physical copy available for order as well.
In the old library page design, only one of the multiple downloads could be selected and initiated at a time. In this new design, the user is able to select whichever downloads they would like, and initiate all downloads as a batch download. This saves time, effort, and confusion resulting from having to clunkily initiate all required downloads individually.
Phase 3: High Fidelity Design
The high fidelity designs feature the addition of a contrasting strip at the top of the page. This helped to differentiate the mobile experience from the rest of the page, as well as provide a clear and easy route back to the library homepage. This change helped to more clearly define the transition from desktop to mobile, by using design patterns that are subconsciously associated with mobile a UI.
Another update is the full width download button. Having a full width button on mobile allows the user to make a selection using their thumb as they are holding their phone as opposed to needing to adjust their grip and make a selection with their index finger. For the section which displays similar results, the thumbnails are shrunken to two-thirds the size of the main thumbnail. This tapering down creates a sense of hierarchy and adds flow to the page.
For the Related Information section, standard links were removed and replaced with a more stylized component, one that users may possess a stronger existing mental model of, and be more inclined to pay attention to.