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
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 remotely collaborating, we completed this 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 new visual CMS, Builder.io.
Builder.io allows for custom components, to keep the design, look and feel of the website consistent and in line with the new brand guidelines, while also allowing editors to add new content, reorder page flows, edit links, and upload new assets without developer involvement.
With a tech stack including Next.js, custom React components, Typescript, Styled Components, and Vercel for hosting, we delivered this and more.
Give it structure
The first step of this site build was digesting the finalized Figma prototypes. From there we determined which information was being reused throughout the site widely enough to constitute reusable data entries vs which content should be one-off entries. We then broke the designs down into self contained components, solidified the content model, wrote the 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 decided that there needed to be limitations. We now had a beautiful new brand and while we wanted to allow editor freedom, we didn't want anyone to be able to break from the design system. Instead we opted for a library of completely controlled and styled custom components. From smaller building blocks like inline Links, Buttons, and Informational Cards, to larger page sections like Carousels and Contact Forms. All of which were developed with baked-in responsive, mobile-first design, accessibility considerations and best practices, and usage guardrails.
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 hard coded based on the selected background color for contrast needs and design consistency.
Cross team collaboration
As we neared the final launch of the refreshed site, the development team worked hand-in-hand for final functional and design QA. Continuing to work in an agile approach, new tickets were created as the design team requested adjustments or received final approval on assets and copy.
Unlimited pages
Utilizing Next.js dynamic routes and static site generation functions this site was initially launched with 14 main landing pages and 9 blog page entries. However, the site could support the creation and publication of as many additional pages and blog entries as the marketing team decides to publish. All without any additional development work.
Final launch also included multiple integrations, such as enabling Hubspot form embeds and tracking, and Google analytics – for conversion and event tracking.
Post-launch support
After the initial site launch I shifted into a hybrid development and 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, explained the authoring and publishing process, and recorded detailed training videos. It was a great collaboration and so rewarding to be helping a truly sustainable company grow and expand their reach.
Visit the Lygos Live Site
Back to My Full Portfolio