Lygos
- Typescript
- Next.js
- Builder.io
- Styled Components
Biotech company looking for a complete refresh
Lygos specializes in innovative, sustainable solutions, working to replace petrochemicals with cleaner, high-performing plant-based alternatives. During my time working with The Program, Lygos came to us in need of a new brand identity and website that would reflect its core values and support their growth.
Visit the Live Site(opens in a new tab)
Completely new web site to accompany a new brand
At project kickoff, I was working as a part of the technical development team of five. Working hand in hand with the design team in a fully remote environment, we successfully completed a full site build in under three months, just in time for Lygos' new product launch.
An easily editable website for a growing company
Because of the nature of the company, Lygos and their product offerings are always growing and changing. Meaning their website needed to be just as flexible to allow for that growth and change. To support this need we implemented a visual CMS, Builder.io.
Builder.io supports custom components, enabling us to maintain a consistent design and user experience aligned with the new brand guidelines. At the same time, it empowers editors to add new content, reorder page flows, edit links, and upload assets, all without requiring developer support.
With a tech stack including Next.js, custom React components, Typescript, Styled Components, and Vercel for hosting, we delivered a flexible, high-performance solution and more.
Give it structure
The first step in the site build was reviewing and analyzing the finalized Figma prototypes. From there, we identified which content was reused frequently enough to warrant reusable data entries, versus which pieces were better suited as one-off entries. We then broke the designs into self-contained components, finalized the content model, created detailed tickets, and dove into agile development.
Video playing. Click to pause.
Flexible site with guardrails
While Builder.io allows for full editor control in the interface, we recognized the need to establish thoughtful limitations. With a beautiful new brand in place, it was important to strike a balance between editorial flexibility and maintaining design consistency. To achieve this, we implemented a library of fully styled, custom components, ranging from smaller building blocks like inline links, buttons, and informational cards, to larger page sections like carousels and contact forms. Each component, from large to small, was developed with responsive, mobile-first design, incorporating accessibility best practices, and guardrails for usage.
For example, editors can select if the section should have a grey background or a navy, but the color of the text in that section is dynamically determined based on the selected background. This ensures proper contrast for accessibility while maintaining design consistency.
Cross team collaboration
As we neared the final launch of the refreshed site, the development team worked hand-in-hand with design to complete functional and visual QA. Staying true to our agile workflow, we created new tickets on the fly as the design team requested adjustments or finalized assets and copy.
Unlimited pages
Leveraging Next.js dynamic routing and static site generation, the site was initially launched with 14 main landing pages and 9 blog page entries. However, the site was built to scale, enabling the marketing team to create and publish an unlimited number of additional pages and blog posts, all without requiring further developer involvement.
Final launch also included several key integrations, including HubSpot form embeds with tracking and Google Analytics for conversion and event monitoring.
Post-launch support
After the initial site launch I shifted into a hybrid development/design role to continue to support Lygos. Over the following year and a half, I collaborated with the Lygos marketing team to expand site capabilities and to design and develop new components to support their changing needs and growing product offerings.
Full spectrum support
Working within the new brand standards and design framework, and in collaboration with Lygos leadership, I covered the full spectrum for ongoing support. I was responsible for all stages of work, from initial visual designs of new components, to approved functional Figma prototypes, through technical development and launch.
This work included:
- Category and filtering capability for blog entries
- New hero variant with video capabilities
- A dynamic, categorized drop-down section to share product specific technical formulation sheets
- Interactive map of distributors and distribution areas
- ...and more.
Beyond development and design I also lead client trainings on the Builder.io interface, walked them through the authoring and publishing process, and created detailed training videos. It was a rewarding collaboration, and I found it truly fulfilling to help a sustainable company like Lygos grow and expand their reach.
Visit the Lygos Live Site(opens in a new tab)
Back to My Full Portfolio