Role: Marketing Engineer
Dec 2019 - Present
www.biolytic.com
Last Updated 2021
I am a Marketing Engineer at Biolytic Lab Performance, a Biotechnology company in California that designs, manufactures, and sells DNA RNA oligonucleotide instruments and consumables.
Below I describe select projects I have worked on that resulted in sale lead generation, increased brand/product awareness, and improved customer buying / user experience.
I utilized my background in web development, design, photography, and knowledge in molecular biology to achieve the projects listed below.
Summary of work:
Code:
HTML/CSS/JavaScript/React
Product Landing Pages
Various Company Website/Storefront Pages
Email Campaigns
Social Media Campaigns
Internal Company Tools
Analytics
Design:
Landing Pages
Email Campaigns
Web Design
Brochures
Banners
Iconography
Social Media Campaigns
Copywriting
Tools:
I designed using Adobe Creative Cloud (Photoshop, Lightroom, Illustrator, Xd, Premiere Pro).
I developed code using front end tools (HTML, CSS, JavaScript, VSCode, Chrome Dev Tools, Bitbucket, SourceCode, React, Power Apps, Power Automate).
Website Redesign and Development
A portion of my time spent at Biolytic Lab Performance is working on updating and improving the company website/ecommerce store. I have designed and developed numerous HTML/CSS/Javascript landing pages for the website homepage, services section, and product pages in efforts to modernize as well as improve the customer and user experience.
Understanding and Defining The Problem
In the start of the design process, it was important to understand the direction the stakeholders wanted to go with the company website, along with other requirements. I then compared the list of wants to the company’s current website to see where the design could be improved.
Biolytic.com was in need of an update. The previous version of the website can be seen on the right. At a glance, it is hard to tell the full scope of what the company offers. With only a single banner to convey what is sold, other menu items and cards tell very little about the company or its products.
A crucial requirement was to market the company’s end to end oligonucleotide synthesis solutions. The company offers everything you need in order to successfully synthesize DNA RNA oligos, and customers needed to be able to easily infer that from the company’s homepage.
The current color palette is monotonous and flat. Eyes are initially drawn to the banner but the rest of the website gets lost.
Design Ideation
Biolytic Lab Performance at its core is a Biotechnology company that designs and manufactures DNA RNA synthesizers. I took inspiration from the cyclohexane chemical structures that are found in nitrogenous bases of DNA. These building blocks of DNA contain a 6 sided structure that has been translated into design accents and icons that act as a motif around the website.
The three primary hexagons spit the company’s product offerings into three main categories: Pre-Synthesis, Synthesis, and Post-Synthesis. These three distinct categories were created to place emphasis on the company’s end-to-end oligonucleotide synthesis offerings.
Color Palette
The new color palette is bright, comprised of primary colors as well as a teal tone that is found in the company’s logo. The primary colors in the palette span across the color spectrum, able to mix with each other to create endless possibilities. Similarly, Biolytic’s products span the whole oligo synthesis process, from pre-synthesis, synthesis, to post-synthesis. Combining these products, like mixing of primary colors, brings a world of possibilities for scientific discoveries. The palette is friendly, inspiring, and promotes trust.
Icon System
The cyclohexane inspired motif is found again in the icon system I created for Biolytic. Line art illustration vectors were made of instruments, accessories, and consumables. Each product icon sits above a color coded hexagon, signifying its place in the oligosynthesis process.
Each primary color is assigned to a stage of the synthesis process. Red = Pre-Synthesis, Yellow = Synthesis, Blue = Post-Synthesis. Giving these processes a color identity acts as a visual cue, allowing customers to easily distinguish between products and processes.
Prototype, Testing, and Feedback
Initial prototypes and wireframes of website pages were created in Adobe XD. Wireframes were sent to stakeholders for feedback. After making edits from the feedback, high fidelity pages were coded using HTML, CSS, and JavaScript. These high fidelity pages were sent to stakeholders for feedback and edits were made. This feedback and editing loop continued until a polished page was complete.
See Gallery of Updated Live Pages Below:
Live site can be seen at www.biolytic.com.
2. Product Marketing Campaign
I took on a 6 month, full-cycle marketing campaign for a new product launch. During this campaign, I completed the following:
Designed and developed HTML/CSS/JavaScript product landing page
Designed and developed HTML email campaign push to a ~5,000 person mailing list
Designed brochures, data sheets, banners
Designed social media posts
Directed and shot product photography
Wrote marketing copy for website, email, and social media posts
See Gallery of Product Marketing Campaign Below:
3. Analytics
I learned and used Power BI with MailChimp, Microsoft Dynamics 365, and Google analytics integration to create visual dashboards that display analytics for leads, mailing list trends, and website traffic.
Thanks for reading!