After working on Meta, I connected with Shiz Aoki from BioRender, a venture-backed startup and graduate of Y Combinator. Since 2017, BioRender has been working on a mission of empowering scientists to quickly and consistently make their own medical illustrations and communicate science faster through visuals.
BioRender already had a beta version of the product in the market for just over a year, loved by many researchers. However, the editor user experience and interface were lacking consistency and polish. Toolbars and modals were constantly being added with addition of new features added by rapidly-moving development team. This complexity started to cause friction with the user-base and slowed down development.
My tasks as a designer: setup a design system, work with front-end team on rapidly improving the interface and onboard a full-time product designer.
BioRender needed a robust design system to make improvements to the interface before a full-time product designer was hired to take ownership of the product. The BioRender website was also in need of an update, as the product was maturing, requiring confident positioning in the life science tool marketplace.

Research findings

Working closely with a user researcher, we first identified and interviewed high-value users and and stack-ranked the following needs:

• Quickly browsing over 20,000 icons in the BioRender library, both via search and by browsing
• Choosing from a selection of pre-made templates or create your own
• Easy mechanism to request new icons
• Creating scientific diagrams with intuitive drag-and-drop functionality
• Changing or update your figures as needed over time
• Exporting to multiple formats for publications, presentations, web, or print
• Ability to use optimized pre-set colors based on scientific conventions
• Sharing illustrations with a lab, team or organization

Prototyping the interface

A comprehensive audit and redesign of all of the existing tools and associated icons took place to provide consistency in the interface.

Redesigned pane navigation to support multi-level browsing, improved search, drag-and-drop functionality and a darker canvas were introduced.

Redesigned toolbars allowed the app to house secondary menu actions on selected elements (context menus).

Hover actions and previews were introduced to allow user  to quickly preview and drop relevant visuals on canvas.

Interactions

Thumbnail browsing, coupled with powerful search and drag-and-drop allows users to pull out the most relevant elements quickly.

Drag-and-drop makes selection of visuals and variants quick and easy.

Transform and copy tools allow users to replicate groups of elements quickly.

Libraries organized by field allow user to pull out related visuals with ease.

What’s next?

Today, BioRender has users in over 40 countries around the world, and has built up a library of icons and templates from over 30 fields of biology. They are passionate about science communication and driven to build an intuitive, practical product that empowers scientists to share their passion with the world.