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 the Y Combinator program, BioRender hired me to redesign V1 of their web application.
As the first product designer, I redesigned every part of the application and was in charge of all design related tasks including: user research, wireframes, user flows, high-fidelity mocks, prototypes and more.
I also coded the designs using HTML and CSS to ensure that there were implemented correctly, saving a lot of headaches for both the developers and product team.
My first task was to see how we could improve the UI design to improve consistency across the app. I went through each screen in detail and took inventory of the different types of components.
I found that there were many components that looked slightly different, but had the same purpose. For example there were a total of 18 different button styles. This was very inefficient for developers because they wouldn't know which button to choose and increase the size of the codebase.
After taking inventory of all the components and inconsistencies, it was clear what each component's purpose was. We strategically chose which components to get rid of to simplify the app.
The end result is a simple and elegant style guide that has a list of components that developers can easily use. This helped developers save time and gave us a great foundation to start redesigning screens.
With the new style guide in place, we were ready to start redesigning screens. We started with the subscription flow because it was outdated and confusing to users. The redesign increased conversion rates and revenue, making this a positive ROI for BioRender.