This site uses cookies to improve your user experience. If you continue to use our website, you consent to our Cookies Policy

Accept
Bionorica

Bionorica

Phytoneering Extract Solutions

Phytoneering Extract Solutions is a subsidiary of Bionorica that manufactures and sells plant-based pharmaceutical products.

https://images.ctfassets.net/0nm5vlv2ad7a/5ynEDdSQf58xlXg0RAZtia/53c67095a25a4a0b7386d9b2ee6a6a92/preview.png

Industry:

Corporate website

Type:

Web development

Time:

3.5 months

Platform:

Web

About

Project Idea

Phytoneering Extract Solutions partnered with Yellow to rebuild its existing website. The first step in our process was to analyze the site, after which we identified the aspects that should be changed, devised the structure for a new site, and produced the final solution.

The client had

  • The old version of the website

Inherent challenges

  • Site analysis
  • Site optimization
  • A multi-language interface
  • Map integration
  • Bilingual search implementation

Team

Project manager

Technical lead

Two full-stack engineers

Designer

Team

Wireframes

The main goal of creating wireframes for the website was to optimize the user flow so that it would correspond to real-user behavior as well as the daily needs of the client business.

https://images.ctfassets.net/0nm5vlv2ad7a/5AudOTGiD82Ot00RSKzCk7/008445d6f8d122f0600daee1ecb9e790/Group_5592.pnghttps://images.ctfassets.net/0nm5vlv2ad7a/5AudOTGiD82Ot00RSKzCk7/008445d6f8d122f0600daee1ecb9e790/Group_5592.png
https://images.ctfassets.net/0nm5vlv2ad7a/1DsH2PfCteoWT8X4WRNNyl/3d179269e01a74074c473e1e77a1a745/Group_5591.pnghttps://images.ctfassets.net/0nm5vlv2ad7a/1DsH2PfCteoWT8X4WRNNyl/3d179269e01a74074c473e1e77a1a745/Group_5591.png

Technologies

The website was built through the use of specific tools and technologies:

https://images.ctfassets.net/0nm5vlv2ad7a/1ALe1ie0xXuiMPXjdGoS8L/4902265fa655627d5f5645f5f3225a81/technologies.png?w&h&fm&flhttps://images.ctfassets.net/0nm5vlv2ad7a/3zPeZlpxoQpvNSs2XYBbJC/8668895c8840a1a828430d538bf60704/Technology_Stack.png?w&h&fm&fl

Design

It was necessary to profile—or predict—user behavior so as to ensure convenient, intuitive functionality. Another important aspect of the production was to create numerous illustrations. We drew them from scratch so that the site's visual style would further convey the company's brand image.

https://images.ctfassets.net/0nm5vlv2ad7a/3r4EQlEjKopJa2hhZMn0uK/ea9b16fc1b4a2fa85fcd4fe6ebff2364/image_6.png?w&h&fm&fl
https://images.ctfassets.net/0nm5vlv2ad7a/2cWVKVRQBxOOzDCrf04u0T/f397e69bb22c16b46cd8eec98aba11b3/image_12__1_.png?w&h&fm&fl
https://images.ctfassets.net/0nm5vlv2ad7a/5CltkFELuNqg74max4Xb5w/1dc4ba1a76d6429733d99e0ba744663f/image.png?w&h&fm&fl
https://images.ctfassets.net/0nm5vlv2ad7a/2JrcNY8leiTGgftz9Meb1j/00c8372bdcda38668d0f63bf246b2bcb/image__1_.png?w&h&fm&fl

Challenges and Solutions

The project had five main challenges, as described below:

Site analysis

Problem:

Development started with a careful analysis of the client's existing website so that the new one would be free of weaknesses and other pain points.

Solution:

Because the client's existing site was difficult to understand and navigate, we devoted great effort to the structural design of the new website.

Site optimization

Problem:

It was essential to optimize the website's efficiency for quick loading and instant response.

Solution:

Services such as GTmetrix and PageSpeed Insights helped us check the site's performance. After testing and optimizing the code, we were able to reach almost the highest site loading speed.

A multi-language interface

Problem:

The website for Phytoneering Extract Solutions had to be bilingual: German and English. This requirement presented certain difficulties. For example, the switch to the other language would trigger a page reload, in which case the user would return to the top of the page regardless of the point at which the selection was made.

Solution:

Our specialists modified the AWS configuration and various architectural elements so that a user could freely switch from German to English or vice versa.

Map integration

Problem:

We had to install a scalable, interactive map on the Contact page. An additional task was to make the map reflect the style of the website.

Solution:

We produced a custom version of Google Maps in which we removed everything that was shown by default, such as the names of establishments, streets, and other landmarks. Moreover, we changed the code in Google Maps to achieve a halftone look, i.e., black and gray on white.

Bilingual search implementation

Problem:

Because the website would be bilingual, its content also had to be searchable in a bilingual manner.

Solution:

We added two separate fields—"English search tags” and "German search tags"—via Contentful.

Results

We achieved a pleasantly dynamic, user-friendly website.

https://images.ctfassets.net/0nm5vlv2ad7a/4DJRaqtBTEKJabM99TryQk/3848e353eb35b3c0d64cbbe209f67e31/image__1_.pngbionorica