Check it out here: https://www.addgene.org/browse/
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
- Approved by design team and stakeholders
- Set to be delivered / implemented by next year
Partnered institutions like the Broad Institute often want to display statistics through Addgene. However, the current graphic designs were outdated with little character and branding.
Check it out at https://www.addgene.org/browse/institutions/788/
- Not representative of caption copy
- Unfitting for branding
On Addgene PI pages, there is an option for other institutions to create a link to their page but, the existing action and modal was not prominent and did not fit the page well.
Check it out at https://www.addgene.org/James_Trimmer/
- Blue action button feels out of place and gets lost
- Poor visual hierarchy on page
- Modal design looks unpolished and unreflective of existing Addgene modals
I looked to existing links on Addgene's sites which were almost always blue text (not buttons) and an icon often accompanied the link. I also looked to existing modals on Addgene's sites. There was more variation in the design layouts but, there would always be an ample amount of padding, an exit button in the top right, and a close button in the bottom right.
I tried out a few different directions but, overall wanted to make sure there was more contextual placement and to keep in mind the existing patterns. With these considerations in mind, I chose V1 as the final link choice!
I also created and added a blue plus icon which related to the function and helped the link stand out more.
Next was trying out different styles of modal designs based on the references I looked at earlier.
After many iterations, this led me to the final version!
