GrapesJS Landing Page Revamp
Role
Product Designer
Company
GrapesJS
Project Scope
Revamp
UI/UX Design
Illustrations (2D & 3D)
Overview
GrapesJS is an open-source web builder that allows users to create HTML templates using a drag-and-drop interface, speedup the development process of frontend. With powerful features like customizable CSS, responsive design tools, and an asset manager, it simplifies web development for both engineer & non-engineers users.
I aimed to enhance the landing page’s visual design, streamline content structure, and improve feature presentation for better clarity and engagement.
Challenge
GrapesJS faced the following key challenges on its landing page:
Outdated Design and Branding
The design felt outdated, leading to a branding inconsistency that failed to reflect the modern, innovative nature of the platform.
Excessive Content
The landing page was wordy, with too much text and little emphasis on calls to action, which resulted in low lead generation and conversions.
Ineffective Feature Presentation
The explanation of features was not visually compelling or easy to understand, making it difficult for users to quickly grasp the value of the platform.
Design Approach
Update Design and Branding for Consistency
Redefine Color Branding
I refreshed the color palette to align with modern design trends, using bold, statement-making colors that evoke innovation and professionalism. This helped to communicate GrapesJS’s cutting-edge nature and improved brand recognition.
Rework the Logo
I redesigned the logo to better match the platform’s symbol, creating a more cohesive and visually appealing representation. The updated logo reflects the brand’s forward-thinking image, enhancing user trust and overall brand identity.
Revamp Landing Page to Increase Conversions
Analyzing the old page
Hero section lacked clarity → It didn’t explain what GrapesJS is in a nutshell, so new visitors couldn’t quickly understand the product’s value. There was no strong hook to make users want to scroll further.
About section was text-heavy → The explanation of GrapesJS was presented as a long paragraph, which made it hard to grab attention or skim.
Feature section wasn’t engaging → Features were explained with too much text and poor use of space, so they didn’t look appealing or clearly show the product’s strengths.
Defining a new content structure
I mapped out a cleaner content flow based on current landing page & what thing that need to add in new landing page
Wireframing to bring the concept
I created wireframes to test different layouts and spacing. One version emphasized larger visuals to showcase the product more boldly, while another focused on a more compact structure for quicker scanning
Visual Exploration
Moodboard
I started with a moodboard to define the visual reference to make the Landing page foundations
Hero explorations
Next, I explored several hero section variations. The approach are to show grapesJS function in nutshell with different style of objects that represent it
Illustration style
After aligning on the overall style and hero direction, I defined an illustration style that felt modern and slightly futuristic. These illustrations were mainly used to highlight and support the feature explanations.
Unique Pattern of GrapesJS
As decorative assets, I created custom grape-inspired pattern. Using a dark, futuristic palette with a 3D glass effect, it gave GrapesJS a distinctive, ownable look.
Final Design
Before vs After
Outcome
Modernized overall design, streghten brand position
Refreshed visuals, refined logo, and unique patterns gave GrapesJS a professional identity aligned with its innovative product.
Simplified product story
Restructured content flow and visual feature highlights made the landing page clearer and more engaging.
Improved performance
After the partial rollout of the new design, website visits doubled and CTR increased
*Exact number cannot be disclosed*
