In Numbers
More Sign ups
Less onboarding dropout
Less deploy time
Less bots
More conversation rate
New components
The new website won an award in awwward
Overview
Sky-rocking our KPIs
- In a period of 3 months we increased the signups by 35% and had 80% less drops from the landing page.
- Decreased the dropout from the onboarding by 65%
- Reduced the deploy time needed by 25%
- Reduced the bots from using the platform by 95%
Rocking the conversation rate
Our main goal was the make conversation rate higher and we rocker it with more than 70% comparing to before joining the team
+250 New components
We added more than 250 component in very little time to the design system to make it shine like star
#1 in Awwward
We happily got the #1 in Awwward for the landing page
Revamping the landing page
We were in need in a website revamp after we started making our inventory tool
Before
After
Project Brief
Codesphere transforms deployment into a developer-centric self-service experience, reducing time-to-market and costs.
It eliminates the wall by enabling developers to manage their own infrastructure needs end2end. On Codesphere you can deploy anything from simple frontends to multi service production landscapes and LLMs. Includes zero config autoscaling, replicas and managed services.
Problem Statement
While we have a lot of gaps in development in the tech world but Codesphere wants to eliminate the gap between development and operations to have faster development that aligns with the operation speed
Challenges
Revamping the feel of codesphere
We wanted to not only give codesphere a better UI but a different feeling for the product that help the user feel that the platform will make their life easier and simpler
Consistency
The platform needed to be more consistent to a point that the user experience will be smooth to get the results quicker
More conversion rate
We had a lot of people checking the website and knowing the company but never sign up or get started to use the platform, we needed to keep them hooked after signing up
Keep it Simple, Stupid
Every developer knows how to use complex platform and tickle around but giving them a simple platform always convert them to pay and making their life easier is the best gift you can ever give them - as well as bug free.
Design System
We built a design system for Codesphere that’s tailored to work according to our goals and need
Some product shots
Here are some part of the design that I made through using the design system
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
