Confirm BioSciences

The Past

• Customers can't do instant buy and custom orders. The site only serves B2B customers with bulk orders

• All buying action leads back to contact form and have to go through a sales rep every time

• The old site was outsourced to many different places so there was too many confusion every time a new page is needed, hence I had to design a whole new page each time we launch new contents

The Build Up

As marketing and design work closely together even with the old CB site, we have conducted many tests and drew datas each time to compare. Hence, we are striving to build from the current function we have and only eliminate unnecessary contents. This made my job a little quicker because I already have data and contents to work from as this is a rushed project

Re-Navigate

One of the most important goals of this project is to assist all customers' needs including both B2B and B2C. Hence, a clear and well-planned navigation is very important. We went from multiple 1 column drop downs to full page 3 column drop downs with distinguished categories and hierarchy to help guide customers through all the functions the site can offer.

The Most Important CTA

The majority of our customers are businesses who want bulk orders and have been using our site contact form to get to a sales representative to place an order. Knowing this form works for customers wanting to place quantity in the thousands, we kept most of the old form functions and add more options for single order buyers and custom order buyers

Making sure all of the buying options are above the fold while maintaining hierarchy of CTAs was the main goal of our product page. Hence, creating thin boxes and different CTAs in the global style as well as making sure there are adequate spacing between each action helps achieve our goal

Define and Categorize

Our site has so many different types of contents - from white papers, to products sell sheets, to instructions, to different categories of drug test compliance and industries, we have to make sure all this information is presented without overwhelming customers

Clearly defining categories and build the design for each type of content categories to create a hierarchy and will help separate contents for users creating an easy flow. I have created different global content types for the site to make sure it can help guide customers throughout the site

Scalable Design

In order to make sure we’re not repeating our old mistakes of having to design a new page every time, we pushed to consolidate and refined our contents to 7 pages of 7 different content types. From there I developed 7 page templates alongside with a global kitchen sink so that future e-commerce sites of CB can use the same design system with new branding to create a smooth experience throughout all the future sub-brands

Using a 12 grid system to create a responsive, consistent and pixel perfect layout for all of our page templates help boost future page creation and even using for other brands within the biotech ecosystem of Confirm BioSciences

To scale our design further, we created a design system with Adobe XD. Having a design system on hand allows us to work with cross functional teams and most importantly developers and third parties to see and inspect to create pixel perfect details to the vision we wanted. We can continue working on it and updating a public link for all others to see so we are all in the loop.

With updated branding and global style, Confirm BioSciences’ new branding features a darker color scheme and taller typography to carry a clean, minimal and professional brand visual through design.

THE END.