The goal of the project was to set up a single website for Novozymes, replacing all the various platforms and URLs the company’s content was divided up into at the time. We needed to take into consideration the transfer of information from those hundreds of pages and streamline the user experience of their extensive amount of different user types.
Additionally, the company wanted to use this opportunity to launch their new corporate visual identity, designed by an external brand designer. In close collaboration with the creative director of Novozymes, I refined those new visuals and implemented them into the Novozymes component library in Figma.
My role: UI Designer, external consultant
When: 2022
Team: Jesper Frederiksen, Ross Peart, Nikolaj Heger, Emre Arman, Christos Karavasileiadis
Software I used: Figma, Adobe After Effects, Adobe Illustrator
Disclaimer: I did not take part in the UX research or the UX design of the site, as that had already been done prior to me joining the team. Furthermore, I did not get the chance to test any of my designs before their implementation or to review any of them after their implementation, as budgets got cut. Therefore, what is currently live on Novozymes’ website does not reflect my work directly.
The goal of the project was to set up a single website for Novozymes, replacing all the various platforms and URLs the company’s content was divided up into at the time. We needed to take into consideration the transfer of information from those hundreds of pages and streamline the user experience of their extensive amount of different user types.
Additionally, the company wanted to use this opportunity to launch their new corporate visual identity, designed by an external brand designer. In close collaboration with the creative director of Novozymes, I refined those new visuals and implemented them into the Novozymes component library in Figma.
My role: UI Designer
When: 2022
Team: Jesper Frederiksen, Ross Peart, Nikolaj Heger, Emre Arman, Christos Karavasileiadis
Software I used: Figma, Adobe After Effects, Adobe Illustrator
Disclaimer: I did not take part in the UX research or the UX design of the site, as that had already been done prior to me joining the team. Furthermore, did I not get the chance to test any of my designs before their implementation or to review any of them after their implementation, as budgets got cut. Therefore, what is currently live on Novozymes’ website does not reflect my work directly.
Brand colors were adjusted
.gif)
Slow-moving shapes called “bioscripts” became the new brand’s main characteristic
Icons and fonts became lighter
An overview of all the different components I created for the new Novozymes.com, consisting of everything from buttons and color themes, to complex search flows and hero sections.
I was hired on the project after the agency that had originally been hired, to both design and develop the site, did not live up to their promises. The various internal teams of the company were subsequently left very short of time to meet the strict deadlines that had been set for the launch. Another agency was then hired to assist with the web development, but I became the only UI designer to replace the ones that were let go.
Therefore, I started my work where the previous agency had left off. At that point, a thorough overview of all the components needed for the website had been made. However, this became the most advanced UI design process I had ever worked on. Not only were we designing this new extensive website, but also making sure that each component we set up could be used by editors from all over the world. Therefore, the Figma components had to be extremely well thought through to be used in boundless different use cases.
The team and I set up an extensive amount of pages using the new component library.
I built every component using Figma’s auto-layout feature to imitate responsiveness and facilitate editing. All of them also included several variants for the same reasons.
Each component was optimized for two different screen sizes; desktop and mobile.
I made sure to include different states and interactivity to the relevant components; e.g., hover, active, idle, error, etc.
To assist content creators, developers, editors and other users of the component library, I wrote guides for each relevant component. Those included information on character count limitations, aspect ratio of media frames, design/responsiveness details, and more.
The branding team, the development team and I worked in collaboration to ensure accessibility requirements were met in all of our components.
The key objective of an internal developer platform (IDP) is to standardize the process of developing and maintaining internal applications and services. The advantages of doing so are extensive, but here are a few of the ones my team and I put emphasis on, categorized by the platform's main user groups:
Developers:
- Allows them to focus on writing code and delivering faster.
- Reduces the risks of inconsistencies and errors.
- Improves communication and collaborations between teams.
- Onboarding processes become faster.
Product owners:
- A better overview of the product development progress.
- Access to all development costs in one place, along with a comparison to their set budgets.
This project was an especially important one for me as a growing professional. Developers and POs are people I work with on every project I take on. So, now that I have a better understanding of their work processes and needs, I feel I'm even better equipped to collaborate with my closest colleagues.
The challenge of this project for me was to gain a deep enough understanding of the highly technical processes and needs of the platform's user base. In order to do so, I worked in close collaboration with one of its developers, the front-end lead, from beginning to end. Furthermore, we held a team workshop and conducted several user-testing sessions together, gathering valuable insights and ideas from our end-users.
Throughout the process of designing the platform, it was very important for me to empathise with and understand the work processes and needs of our users in detail. Not only was it important for ensuring a smooth user experience, but also for me as a growing professional. I feel that I am now even better equipped to collaborate with my closest colleagues on future projects, but developers and POs are people I work with on every project I take on.
My role: UI/UX Designer, external consultant
When: 2023
Team: Morten Anderskov, Christos Karavasileiadis, Michael Buch
Software I used: Figma
Head of Digital Solutions at Novozymes
Your work fully lived up to our high expectations. [The Front-end Lead] demoed the result and I love it. It is going to take our apps to the next level, and it has been a great experience for him working with you, so thank you very much. :)
An overview of all of the pages I designed for the platform.
These are the interaction connections of the high-fidelity prototype I made for our user testing sessions.
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
This slide shows an animation I made for the calculators to help guide the user's attention to the correct locations on the page; both before and after results appear.
Novozymes has developed several digital tools to assist their potential customers in understanding the benefits they could achieve by using enzymes in their production processes.
I was hired by Novozymes to design an interface and a component library that could be used for a variety of those tools. More specifically, their simpler calculators, but those usually require the same types of layout and features.
I was repeatedly invited to join this project, but always had to decline. When I finally was able to join, two other designers had worked on the project already. My task was to redesign the components; both due to Novozymes’ new visual identity and because the team wanted to bring the UI/UX to a higher level.
My role: UI/UX Designer, external consultant
When: 2022-2023
Team: Valeria Galanti, Christos Karavasileiadis
Software I used: Figma, Adobe After Effects, Lottie
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
Presentation slides that I set up for the team to present the project to stakeholders.
This slide shows an animation I made for the calculators to help guide the user's attention to the correct locations on the page; both before and after results appear.
