BioRender

BioRender is a web-based design tool that scientists use to create beautiful scientific figures. As an early stage start-up that recently graduated from Y Combinator, BioRender hired me to redesign V1 of their web application.

The Problem

When BioRender hired me for the project, they had a fully developed web application with 10,000+ users. However, it was in desperate need of a redesign. Users saw BioRender as a fun website for scientists, but it was BioRender's goal to be seen as the industry's best tool for creating scientific figures.

A few screens from BioRender's early days
Styleguide

My first task was to create a styleguide of simple re-usable components for the redesign. I analyzed every screen and documented all the current components. It was clear that BioRender desperately needed a styleguide. Every time new features were launched developers added new buttons, colors, fonts, etc. which made the code base more bloated and confusing.

UI inventory of old components

By grouping similar components together, I could clearly see the use cases for each component. I combined similar ones and got rid of unnecessary ones to create the first styleguide.

Colors
Icons
Various components
Front-end Development

Although there were already developers on the team, I also coded the HTML/CSS of the components. This ensures that the designs are implemented exactly like the designs, pixel for pixel. This also allows developers to focus on the functionality instead of the minor details of the design.

Documentation

I built a styleguide page in the web app with documentation on how to use each component. Developers loved using this tool while coding because it was super easy to use. This has saved hundreds of hours for developers, and will be a great foundation for designers who join the team.

Design Process

As the first product designer, I worked with the team to create a unique process for shipping features that worked for their needs. The most important part of this process is truly understanding the problem before any design/development work starts to ensure that no time is wasted creating features that won't help users.

Final Design

By using the new style guide and process, we successfully redesigned the core features of the app and created new features as well. The final result is a clean and modern UI design that is intuitive for users.

Growth Campaigns

In addition to the web app, I also worked on a few growth campaigns that grew BioRender's user base exponentially.

COVID-19 Vaccine Tracker

I designed a COVID-19 vaccine tracker where users could see updates on the latest vaccine / therapeutic drug developments.

Graphical Abstract Contest

To bring the science community together, BioRender hosted a graphical abstract contest that resulted in 5000+ submissions from around the world. My role was to design a contest platform where users could enter the contest and view submissions.

End Result

Today BioRender has over 200,000+ users and is growing exponentially. Nature, one of the world's best and most reputable science journals referred to BioRender as the staple of biomedical research drawings. BioRender is no longer viewed as a fun website, but as the best tool in the industry for creating scientific figures.

“As our first product designer, Gareth had a huge impact on BioRender. He's great at taking complicated product requirements and turning them into intuitive experiences. His combination of skills is rare to come across – As a design/developer hybrid, he worked great with developers and even coded the front-end of the designs he created. I highly recommend him for any early-stage startup looking to take their design to the next level!”

Shiz Aoki

CEO @ BioRender

See more work

Vocabie

Leading the design of a web application from idea to launch.

View project

BRED

Helping a startup move from web to mobile and design their app from scratch.

View project

Interested in working with me?

Tell me more about your project and I'll get back to you in 24 hours.

Contact me