In the original design on the mainsite, scientists must navigate an outdated design flow. Many of the visual design elements like buttons were inconsistent. But, the largest problem was the way the information was currently all displayed, making it hard to distinguish what a user should complete first, second, and last.
I landed on my final design based by combining the areas from each exploration I liked! This final design also was technically feasible and built off existing design patterns we had.
The goal was for each offering of Addgene (Plasmids, Viral Service, Antibodies, Pooled Libraries, and Plasmid Kits) to have their own catalog browsing pages. However, given how the original pages were set up, they prevented this organization from being possible. Thus, this led me to combine 2 existing redesigned pages to become the singular Plasmids Catalog Page.
Because of the changing needs of the catalog pages and the growing company, I worked with content to finalize all of the writing in the page and the information architecture.
On the mainsite, there are several browse pages (such as Browse Plasmids) that are meant to help make searching quicker and more approachable. But the unorganized structure of the current pattern makes little sense, making navigation difficult.
I wanted to modernize the page to feel more aligned with current design standards while making it concise and easy to navigate. One method to do this was checking in with the content team to find out what information was absolutely necessary and what could be cut out.
I also wanted to make a well designed template with repeatable patterns so all the following browsing pages can follow!
- Hard to scan
- Not visually engaging
I explored different layouts keeping in mind composition, readability, and scalability (using the same template for future pages like this one).
After receiving feedback, I narrowed it down to these 3 directions and the final design eventually came down to 1. Vertical List of Links (treated as buttons) which were stylized in a new way but uses existing components like link text size, color etc. This pattern would also be used on other parts of the consumer facing site.
The hover states for these buttons needed to be differentiable enough from the default state and pass AAA accessibility guidelines. This led to 1. blue stroke, white background, and blue text style.
The Education Resources page on the Addgene site is extremely important for students, teachers, and anyone interested in learning more about the biology field; It is one of the most frequently visited pages. However, the original webpage design was lacking and needed to be updated to better align with its purpose.
- Not visually engaging
- Unfitting for branding
- Wordy
- Outdated copy
I experimented with different layouts to eventually come to a 3x2 card view which was the most digestible and visually clean. I also created new illustrations to add to the page.
- Easily scannable
- Less design real estate
- More room
- Efficient and compact
- More space between
cards and within cards
- Follows old pattern
- Fits more in one screen
