Web design and Webflow development for Bionutrec

tab_image
Region
Colombia
Industry
Healthcare
Platform
Web
Project volume
400 hours
Team size
4 people

Delivered by WarmDevs

  • UX/UI design
  • User Management
  • Lottie animations
  • Webflow development
  • 3rd party API integration
Go to website
About the Project

Bionutrec is a Colombian laboratory specialized in the manufacture of probiotic supplements and functional foods for human consumption. Bionutrec is a brand of probiotics that takes care of its consumers.

Why are probiotics necessary? Probiotics are live microorganisms, which help improve and maintain the health of human body. The alteration of this microbiota has very important consequences for people's health. These alterations tend to be very frequent in today's life, especially due to unhealthy diets and lifestyles.

Challenges & Solutions

Challenges

Solutions

Creating a niche-specific design
We’ve provided several options that both our team and the client found very much pleasing, but not quite right functionality-wise. So we kept improving the product according to the client’s feedback, and after 3 iterations we were able to nail down perfectly both the visual side and the functional.
Re-design other web pages and build an additional part for the existing website.
Since our design was way beyond the client’s initial website capabilities, WarmDevs agreed to re-design all pages to make them fit with the new system, including motion design. Our team implemented this task without an issue and moreover provided some marketing design material as well.
Create animations and interactions that look professional and guide a user through the page effectively.
We had to be careful with implementing movement into this design. Since the company works in the healthcare industry, animations couldn’t be too over-the-top, but they still needed to look appealing and eye-catching. After trying a few options, we came up with the one that is now visible on the website.
Incorporate portal user management with the ability to log in using Facebook and Google SSO.
It is not a trivial task for the portal user to be able to log in in such a way and have some internal logic on the user profile page. We couldn’t go with an easy solution like Memberstack, since the customer wanted a single sign-on. We needed a backend solution that would also be self-hosted, which is why we decided on Google Firebase. It took much more JavaScript coding for us but was totally worth it in the end.
Bionutrec Client
Carlos Hernan
Digital Manager | K2 digital
arrow_icon

Their ability to translate my requirements into reality was impressive. The team was incomparable, responsible, and dedicated to providing optimal solutions that helped the client to succeed. They were clever in understanding the requirements and turned them into reality.

Ihor's work was unbeatable. I remember him as a great human being, responsible, fulfilled, and always willing to provide solutions for my benefit.

arrow_icon

Get free consultation

Book a Call

Our
Process

arrow_imagearrow_group

In every project, we divide workstreams and determine milestones. Then we identify competencies needed to fulfill the tasks, calculate the work time of each expert, and approve everything with the client. After signing the contract, we allocate a separate team for the project. The project manager directs and supervises the process; he is the contact point for the client.

Project scope

Discovery
  • Identified the pain points
  • User management
  • User Logic
UX/UI design
  • Customer journey map
  • Site map
  • UX/UI design
  • Lottie animations
Web development
  • Webflow development
  • Mobile/Tablet development
  • Layout
  • QA & bug fixing
  • Deployment

3rd party API integration
  • Integration with Mailchimp
  • Subscription form
  • SSO login

Discovery

It wasn’t our first time collaborating with K2 Digital Agency, and we were excited to work together again on the Bionutrec project. We’ve started the collaborative process with the kick-off meeting to define the primary goals and requirements of the project. We’ve determined the main pain points of the business and discussed the tasks at hand.

The client wanted to upgrade the company’s website design, and they were very particular in choosing between different options. The client wanted to incorporate animation and motion into the design to guide a user visually through the information on the page. At the same time, any added movement needed to be minimalistic to suit the healthcare industry style of design and make the company look professional. 

The client also had a very particular wish for user management and user logic systems. It was vital to incorporate Facebook and Google SSO, while simultaneously having internal logic in user profile pages.

After we’ve agreed with the client on the details, we’ve dedicated a team of a product manager, a designer, a developer, and a QA tester to take on the project.

UX/UI design

We’ve built a site map that visualizes all the web pages the website would have and sections that are related to each other. Our team provided the client with a UX design, and after all logical parts were approved, we moved to work on the visual part.

Our designer picked fonts and colors that worked well for the company’s brand. With this and the help of references, we were able to create a UI design  custom-tailored to the client’s taste and requirements.

We’ve also created lottie animations that made the website look more lively but still preserved the minimalistic aesthetic of the website overall. Our designer also made sure the motion symbols visually are associated with the topic of health and healthcare.

BionutrecBionutrec

Site map

Primary Color Palet
Case study Bionutrec | Warmdevs
Typography: 
Poppins
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9

Web development

The website was built on the Webflow platform. Our developer also integrated a CMS system and created a template for future use. This had solved the problem of always needing a developer to make changes to the website even after its completion. With Webflow and CMS that we introduced into the project, the client will be able to make future changes to webpages by themselves, having complete autonomy after the project completion.

All webpages are optimized to work well and perform without a hitch on all display sizes and resolutions, from mobile screens to 4K monitors.

For user management and user logic our developer additionally used JavaScript and Google Firebase. This allowed the integration of all the necessary features while also staying away from the bulky servers that full-cycle development always brings into the picture. With the solution that our team came up with, we were able to keep the product as light as possible while successfully meeting all the needed requirements.

3rd party integration

There were several integrations our team provided to widen the website’s functionality. We’ve added Mailchimp services for email marketing: managing mailing lists and creating email marketing campaigns. We’ve integrated the subscription form for customers to leave their contact information and be able to stay in touch with the company.

We’ve incorporated SSO for users to be able to authorize with both Facebook and Google since it was essential to the client’s request.

Delivered Value

arrow grouparrow bigger
  • Our client received an attractive and functional website with a fresh design and updated operating system.
  • Bionutrec company’s new website has incorporated portal user management and user logic, including SSO for Facebook and Google authorization.
  • Since the website runs on the Webflow platform, we made sure the client will be able to make any necessary changes in the future on their own, without the need of a developer’s help.
  • The website we created is easy to promote online, so those who are interested in such feature will enjoy all the benefits of the platform.
Bionutrec Manager
Ihor Chalapchii
COO | Warmdevs
arrow_icon

We were so grateful for the opportunity to work on such a challenging project, and our team couldn’t be more proud of the results we’ve accomplished.

Communicating with the client was always such a pleasure, and the complex task they provided turned out very rewarding!

arrow_icon

Get free consultation

Book a Call
Book a Call

Case Studies

Let's scale your business today

Schedule a consultation with our representative to talk about development services with no obligations from your side. Take a part in a professional discussion that will provide you

A reply from our manager within 24 hours
Eye icon
Approved time of a meeting convenient to you
A folder icon
WA signed NDA provided the project information needs to be confidential
Graph icon
Defined project scope, specifically the requirements, deadlines, and cost estimation