Metricly
Metricly is a concept SaaS platform built to help small businesses streamline their data management and automate daily tasks, providing real-time insights to improve decision-making and boost productivity. This was a personal project.
Team
Solo
Tools
Figma
Framer
ChatGPT
Duration
5 days
Responsibilites
Branding
UI Design
Content Strategy
No-Code development
Team
Solo
Tools
Figma
Framer
ChatGPT
Duration
5 days
Responsibilites
Branding
UI Design
Content Strategy
No-Code development
Process
1. Planning
It was a long weekend and my creativity was kicking up so I decided to make one new framer project! It was a quick decision and I was sure I wanted to make something around SaaS product.
I wanted to make an one page introductory SaaS product website which includes features, how it works, testimonials, pricing and sign up sections.
2. Creating company's identity
First step was to make the identity of the concept company and what SaaS product they are selling. By giving detailed prompts in the ChatGPT, I made a basic identity of the product and also figured out what exact service they are providing. I found it a bit tedious task because I had to reiterate lots of time.
Then I made simple brand identity which included color palette, typefaces and logo.
3. Inspiration gathering and sitemap
After creating basic brand identity, I looked up for the inspiration from websites like SaaSlandingpage.com and landingfolios.com
I also made a simple sitemap so I can have a track of what sections will be included in the website.
4. Design + Development
After getting basic idea of what sections I want to include, I started the development.
No wireframes part! Shocking right?
The only reason to skip wireframing step is that the website is just one page and I was sure what sections would go in the website and what kind of structure the website would be following.
I used ChatGPT to produce the content for the website.
I spent around 3 days to develop this website, and these were the sections I developed
Hero Section
Features section
'How it works' section
Testimonials section
Pricing section
FAQ
CTA section
I also made some small interactive components to make the website modern, clean and visually appealing. Have a look below.
5. Future Development
The website it responsive and the landing page is looking decent but for the real SaaS product, I would add more sections in the website. Also more pages could be added such as privacy policy and terms-condition pages.
I have found a potential to make this website into a framer website template. So in future, I will be making this website 'project' user friendly and add helping steps in the project to convert it into Framer template.
Here's how the website looks
Want a website for your business?
Book a free discovery call with me!
Book now
Metricly
Metricly is a concept SaaS platform built to help small businesses streamline their data management and automate daily tasks, providing real-time insights to improve decision-making and boost productivity. This was a personal project.
Team
Solo
Tools
Figma
Framer
ChatGPT
Duration
5 days
Responsibilites
Branding
UI Design
Content Strategy
No-Code development
Team
Solo
Tools
Figma
Framer
ChatGPT
Duration
5 days
Responsibilites
Branding
UI Design
Content Strategy
No-Code development
Process
1. Planning
It was a long weekend and my creativity was kicking up so I decided to make one new framer project! It was a quick decision and I was sure I wanted to make something around SaaS product.
I wanted to make an one page introductory SaaS product website which includes features, how it works, testimonials, pricing and sign up sections.
2. Creating company's identity
First step was to make the identity of the concept company and what SaaS product they are selling. By giving detailed prompts in the ChatGPT, I made a basic identity of the product and also figured out what exact service they are providing. I found it a bit tedious task because I had to reiterate lots of time.
Then I made simple brand identity which included color palette, typefaces and logo.
3. Inspiration gathering and sitemap
After creating basic brand identity, I looked up for the inspiration from websites like SaaSlandingpage.com and landingfolios.com
I also made a simple sitemap so I can have a track of what sections will be included in the website.
4. Design + Development
After getting basic idea of what sections I want to include, I started the development.
No wireframes part! Shocking right?
The only reason to skip wireframing step is that the website is just one page and I was sure what sections would go in the website and what kind of structure the website would be following.
I used ChatGPT to produce the content for the website.
I spent around 3 days to develop this website, and these were the sections I developed
Hero Section
Features section
'How it works' section
Testimonials section
Pricing section
FAQ
CTA section
I also made some small interactive components to make the website modern, clean and visually appealing. Have a look below.
5. Future Development
The website it responsive and the landing page is looking decent but for the real SaaS product, I would add more sections in the website. Also more pages could be added such as privacy policy and terms-condition pages.
I have found a potential to make this website into a framer website template. So in future, I will be making this website 'project' user friendly and add helping steps in the project to convert it into Framer template.
Here's how the website looks
Want a website for your business?
Book a free discovery call with me!
Book now
Metricly
Metricly is a concept SaaS platform built to help small businesses streamline their data management and automate daily tasks, providing real-time insights to improve decision-making and boost productivity. This was a personal project.
Team
Solo
Tools
Figma
Framer
ChatGPT
Duration
5 days
Responsibilites
Branding
UI Design
Content Strategy
No-Code development
Team
Solo
Tools
Figma
Framer
ChatGPT
Duration
5 days
Responsibilites
Branding
UI Design
Content Strategy
No-Code development
Process
1. Planning
It was a long weekend and my creativity was kicking up so I decided to make one new framer project! It was a quick decision and I was sure I wanted to make something around SaaS product.
I wanted to make an one page introductory SaaS product website which includes features, how it works, testimonials, pricing and sign up sections.
2. Creating company's identity
First step was to make the identity of the concept company and what SaaS product they are selling. By giving detailed prompts in the ChatGPT, I made a basic identity of the product and also figured out what exact service they are providing. I found it a bit tedious task because I had to reiterate lots of time.
Then I made simple brand identity which included color palette, typefaces and logo.
3. Inspiration gathering and sitemap
After creating basic brand identity, I looked up for the inspiration from websites like SaaSlandingpage.com and landingfolios.com
I also made a simple sitemap so I can have a track of what sections will be included in the website.
4. Design + Development
After getting basic idea of what sections I want to include, I started the development.
No wireframes part! Shocking right?
The only reason to skip wireframing step is that the website is just one page and I was sure what sections would go in the website and what kind of structure the website would be following.
I used ChatGPT to produce the content for the website.
I spent around 3 days to develop this website, and these were the sections I developed
Hero Section
Features section
'How it works' section
Testimonials section
Pricing section
FAQ
CTA section
I also made some small interactive components to make the website modern, clean and visually appealing. Have a look below.
5. Future Development
The website it responsive and the landing page is looking decent but for the real SaaS product, I would add more sections in the website. Also more pages could be added such as privacy policy and terms-condition pages.
I have found a potential to make this website into a framer website template. So in future, I will be making this website 'project' user friendly and add helping steps in the project to convert it into Framer template.
Here's how the website looks