Web design and development for Basetwo

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.
Thamjeeth Gaffoor
CFO | Basetwo

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!

Get free consultation

Book a Call

Our
Process

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 the deadlines. We formed a team of 5 people: a project manager, a designer, a motion designer,  a developer, and QA.

 

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

 

The key task was to provide security of sensitive information and to ensure that it reached only verified users. We solved the task by integrating with Hubspot. Every stage of the work is described in more detail below.

UX/UI design

BaseTwo was an AI-based product, so it was challenging to describe how it worked without excessive technical details. We decided with the client to use animations, which would have eased the understanding of the data analysis process. Lottie animations came in handy. 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 client's references. That was a basis to create style, selecting color spectrum and fonts.

 

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

Site map

Primary Color Palet
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.

Mobile development

We have also made a responsive mobile design and screen layout for all types of screen resolutions (mobile devices and tablets).

Delivered Value

  • WarmDevs built the website, where the complex product was demonstrated in a visually attractive and easy way.
  • The website was easy to promote, attract the target audience and convert the visitors into leads.
  • We developed the algorithm for sending and analyzing data via Hubspot system.
  • After finishing the project, the client had been able to make corrections himself without a developer. Webflow platform allowed for it.
Victoria Kravtsova
Project manager | Warmdevs

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.

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
Approved time of a meeting convenient to you
WA signed NDA provided the project information needs to be confidential
Defined project scope, specifically the requirements, deadlines, and cost estimation