How to protect sensitive data on the Webflow website

tab_image
Region
Canada
Industry
Artificial Intelligence
Platform
Web
Project volume
100 hours
Team size
5 people

Delivered by WarmDevs

  • UX/UI design
  • Lottie animation
  • Webflow development
  • Hubspot Integration
Go to website
About the Project

Basetwo is the AI SaaS product working in the B2B market. The artificial intelligence platform allows for analyzing the chemical composition of substances.

Basetwo enables drug substance and drug product manufacturers to maximize yield, minimize product variances, and extend unit operation lifespans.

Integrate with multiple data sources to centralize knowledge and push model results to existing dashboards to easily visualize and collaborate on insights for scientists, engineers, and managers alike.

Challenges & Solutions

Challenges

Solutions

A challenge for WarmDevs was to demonstrate a complex product in an attractive and easy way.
We chose minimalist web design; we also created many animations to visualize technical content and demonstrate how the data was processed.
Providing easy access to articles, technical documentation, and webinars.
We set up a multiple parameter filter for documents and a word search.
Verification of requests and identification of fake emails to protect sensitive information.
We used Hubspot to set up analytics for incoming requests and data collection. Hubspot could show the list of users and specify what they downloaded. We created a blacklist of e-mails to protect the data from potential competitors or bots. We also made an algorithm for sending data.
The website should attract attention and ensure an increase in sales.
We developed an SEO-friendly website structure so that we could set up maximum SEO solutions. This, in turn, provided high search rankings and drove the site to the top. The site became easy to promote, engage the target audience and convert visitors into leads.
BaseTwo Client
Thamjeeth Gaffoor
CFO | Basetwo
arrow_icon

The WarmDevs team were a pleasure to work with for our SaaS business website!

We required a very complex set of features, as well as significant content. The team delivered this all in a reasonable schedule and budget. They were responsive, communicative, and very understanding of the need to make quick changes as a young company.

We would absolutely work with them again!

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
  • Gathering requirements
  • Project Setup
  • Selection of web hosting and CMS system
UX/UI design
  • Mapped Customer journey
  • UX Wireframes
  • Chosen style, colors, typography
  • UI design
  • Lottie animations
Web development
  • Webflow development
  • Hubspot Integration
  • Final Review
  • Deployment
  • QA & bug fixing
Mobile development
  • Mobile/Tablet design
  • Approval with the client
  • Layout
  • Development

Discovery

We started by examining Basetwo’s technical assignment as well as exploring the market of AI SaaS and engineering software in healthcare. We held a kick-off meeting to reach a unified understanding of the project goals. We also defined the expectations and set deadlines. We formed a team of 5 people: a project manager, a designer, a motion designer,  a developer, and a QA.

At the very start of the project, it was very important to decide on all technologies to be used. We chose Webflow as both a CMS system and a platform for the future website. Webflow allows you to make certain changes to the site without the help of a professional developer, which is ideal. This is very convenient for a client after the project is handed over.

Aside from creating a comprehensive design and providing solid development work, the key task in this website case study was to ensure security for sensitive information. It was vital to ensure that it reached only verified users. 

Further, you’ll find each development stage described separately in more detail.

UX/UI design

Bazed on our kick off meeting ideas that we agreed upon with the client, we proceeded with the design. Considering Basetwo is a sophisticated AI-based product, it was challenging to describe its operating principle without delving deep into excessive technical details. Together with the client, we decided to use animations instead. It’s an illustrative and engaging method to present complicated information in an easy-to-grasp way. This solution has eased the understanding of the data analysis process for users. Lottie animations were the perfect fit. 

Creating secure website design was also among our list of priorities. We made sure to lay a solid groundwork that would help us when it came to the development itself. 

At that stage, we divided the designers’ workflow into 2 streams: animations and UX/UI design. They ran simultaneously, which allowed us to save time. 

In the beginning, we developed the site structure and created a site map. We decreased the number of pages in relation to what was planned by uniting the info on the same topics in one place. This helped us to optimize the website and save time and money for the client. It also improved the perception of the content by the user.

We also created a mood board where we collected the client's references. That was a basis for creating style and selecting color spectrums and fonts.

We developed and approved the UX wireframe and moved on to UI design. The latter was created in Figma. The whole website consists of 21 pages, several of which are presented here.

BasetwoBasetwo

Site map

Primary Color Palet
Case study Basetwo | 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

Webflow implementation included responsive design and animation. We used Webflow and Hubspot as CMS systems for website development.

We set up easy access to articles, technical documentation, and webinars. We also arranged a word search and a filter for the articles in which you could select “by role” and\or “by industry.”
We had to set up an analysis of every request for an article. By analyzing requests, we avoided sending sensitive information to fake email accounts, competitors, or bots. We used Hubspot and managed to configure proper data collection and analysis as well as develop a data-sending algorithm. This included an email blacklist to protect sensitive data.

When it came to creating a secure web design with Webflow, our team leveraged the platform's robust features for the client's website.

The platform provides built-in SSL encryption, which means that all data transmitted between the website and its users is always encrypted and protected from unauthorized access. We also took advantage of the secure hosting infrastructure, which included regular backups and server monitoring to safeguard the website's data. Additionally, there are features like password protection for specific pages or sections, to ensure that sensitive information is accessible only to authorized individuals.

We adhered to the website security standards, such as implementing strong passwords, limiting access to sensitive areas, and regularly installing the latest updates for integrations to patch any security vulnerabilities. By combining Webflow's secure features with our expertise in web design, we created a safe and trustworthy digital environment for both the client and their website users.

Mobile development

In addition to creating internal website security, we put in extra care in user experience across mobile devices. Our team ensured that the client's website had a responsive mobile design and screen layout that adapted seamlessly to different screen resolutions.

By employing responsive design techniques, we made the website look and function beautifully on a variety of devices, regardless of their screen sizes or orientations. Whether visitors accessed the website on their smartphones or tablets, they were greeted with a visually appealing and user-friendly interface that provided a consistent and intuitive browsing experience.

Our attention to mobile development allowed the client to effectively reach and engage their audience on the go, ensuring a seamless experience across all devices.

Delivered Value

arrow grouparrow bigger
  • WarmDevs built the marketing website to help Basetwo promote their product and build strong online presence with the new platform, where Basetwo managed to raise $3.8m
  • We developed the algorithm for sending and analyzing data via the Hubspot system, which prodives the Basetwo team the nessessary toolset to managing their website.
  • The new secure website design solved a task of providing a reliable way of dealing with sensitive data.
BaseTwo Manager
Victoria Kravtsova
Project manager | Warmdevs
arrow_icon

Basetwo project encouraged us to dive deeper into the chemical industry coupled with AI. We learned the user needs and built a multi-functional website, which had not only a nice design but also great functionality and user experience.

Although the company had just started its business journey, it already got orders from big names like Coca-Cola.

Prior to this project, I and my team already had experience in SaaS startup design language and branding. Cooperation with Basetwo enriched us with expertise in the AI industry.

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