FavBots Website

Firstly... Research!

Although it was not as much as usual, the research phase helped me a lot to have some clarity on what the final website should look like and other details. The research consisted majorly of competitor analysis as I checked out several websites of startups and established companies offering similar services.

I found a couple of them and examined their websites thoroughly for improvements and then leveraged that to create the website for FavBots. The research phase took me a few nights to find the startups and then to examine their services and websites too.

Below is a moodboard of some of the hero-pages and sections of competitor startups that inspired the design for FavBots.

The most significant among them was Figure.ai...

I really loved the website for Figure but the issue with it was that it was full of videos which therefore made the website quite heavy and definitely not user-friendly with low internet connectivity scenarios.

Also, most of the shapes of the website were all sharp and thus gave the robots too much mechanical and machine feeling. I felt that could be better and so I made sure that for FavBots, the main shape had both sharpness and curviness just like most Robots actually have.

Now back to FavBots Website...

For the Typography, I used two font families; one for headers and the other for body text. The reasons for the choice of fonts are explained below. For the colours, I decided to simply stick with something simple, robotic and very close to grey and that was Crystal Teal for me. Although the website uses more of black, the primary colour is reflected in some prominent sections of the website.

Next was the actual design of the website!

This is the heropage below. The brief animation on loading the website is to mimic the way Robots are usually assembled. It also reflects the core idea and message of the brand; which is to have robots that can help with actual home chores or other related tasks and thus become your favorites.

I know you are probably already wondering how the heropage will look like on mobile view and probably thinking it's not UX-friendly but scroll to the end to see how I handled that. I decided not to sacrifice the beauty of this style because of functionality on mobile view.

These two sections (above and below) shows two of the products of the brands in action and how they help their owners too. The backgrounds of the sections are intentionally filled with the image of the product such that it keeps the sections organised without looking boring or empty.

Also, this shape of the images is also consistent with most shaped items all through the website.

This section of the website below talks about the mission of the brand and again, just like robots parts usually have some edges straight and some curved, the grids in this image are also designed to mimic the shape of robots in an organised manner.

This way, the mission of the brand is communicated in words, with images and with shapes.

Then the multipurpose footer...

Designed to serve as both the footer and a form to collect the details of potential buyers and other prospects, the footer is both functionally and aesthetically excellent.

The idea behind this is to prevent the website from being overly long and since the footer won't also have much links in it, it was just great to combine both the form and the footer into one such that it didn't feel overloaded or busy...

The images below show what the website looks like on mobile and tablet. I was also initially worried too about how the hero page would look like on mobile but it looked pretty good and still captured most of the idea that it contained on desktop, hence it works pretty fine too...

This is a screen record of the whole website that shows the various sections and the animated parts of the website which is a very cool feature of Framer.

I hope you enjoyed going through this and hope you now love Robots a little bit more too. Would you consider getting a robot soon from FavBots? 😊🤗🤔