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.
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.
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.
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.
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.
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.
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.
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.
In addition to the web app, I also worked on a few growth campaigns that grew BioRender's user base exponentially.
I designed a COVID-19 vaccine tracker where users could see updates on the latest vaccine / therapeutic drug developments.
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.
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!”
Tell me more about your project and I'll get back to you in 24 hours.Contact me