Sitejet SaaS Interface: Creating No-Code Website Builder for Everyone

Client: WebPros

Summary
WebPros is the largest web hosting software and automation company globally, manages 900,000+ servers, 85 million domains, and 33 million users. Beside cPanel, Plesk, SolusVM, WHMCS, XOVI NOW and360 Monitoring, they own Sitejet, a dynamic, no-code website builder tailored to maximize the creativity of web designers.
Role:
Senior Product Designer

Design tools:
Figma, Sketch, Adobe CS

Challenge
How can we design a user interface that is intuitive enough for beginners but robust enough for professional designers? What features can we incorporate to streamline the website creation process while ensuring a high degree of customization? How can we enhance the drag-and-drop functionality to make the website building process as seamless and efficient as possible?

Team
The project was brought to life by a multidisciplinary team consisting of UI/UX designer, front-end and backend developers, content strategist, and project manager. As a senior product designer, I collaborated closely with the team to ensure that every design decision enhanced the overall user experience while aligning with technical feasibility and project goals. The team worked in agile sprints, with continuous input from user feedback to iteratively refine the product.

Key Objective
Enable users without coding skills to build fully responsive and professionally designed websites using templates through a user-friendly, intuitive interface that supports drag-and-drop functionality.

Solution
Drag-and-Drop, No-Code Approach
In response to the need for an efficient and accessible design tool, we redesigned the Sitejet Website Builder’s interface to support easy, intuitive website creation. This revamped interface allows users to create visually appealing websites through a simple drag-and-drop system, eliminating the need for any coding. The quick and straightforward visual editor ensures that even users with no technical background can edit and customize their sites effortlessly, focusing on productivity and creative freedom. This approach follows Sitejet’s mission to make web design accessible to all.
Template Library
Introduced over 140 professional templates that can be customized easily, enabling users to quickly start and scale their website design according to industry-specific standards.
Streamlined Navigation
The Sitejet Website Builder now features a dual navigation system designed for optimal efficiency and user experience. The sidebar, or content bar, includes quick access to frequently used elements like favorites, columns, boxes, and tables. The top navigation is streamlined to provide direct access to essential sections such as To-dos, Pages, Publish, and Design. It also allows users to switch views seamlessly between desktop, mobile, and tablet, facilitating easy adjustments across different devices. This setup enhances workflow by ensuring all necessary tools are just a click away.
Dark mode
To enhance visual comfort and provide users with a customizable viewing experience, a Dark Mode feature was introduced in the Sitejet Website Builder. This mode offers a darker color palette that reduces eye strain, especially in low-light environments, making it ideal for long design sessions. Implementing this feature involved adapting UI elements to seamlessly switch between light and dark themes without compromising on functionality or aesthetic appeal, thereby catering to user preferences for either mode.
Multi-device Preview Modes
To ensure that websites look perfect on any device, the Sitejet Website Builder incorporates multi-device preview modes. This feature allows designers and developers to instantly view how their site will appear on desktops, tablets, and smartphones. By providing real-time previews across multiple devices, users can make necessary adjustments to design elements, ensuring optimal layout and functionality without having to switch devices or use additional software. This capability is crucial for achieving responsive design standards and enhancing user engagement.
File and Folder Manager
First thing that came to my mind is that the old Manager needed organization and management of website assets. We designed it in a way to allow users to efficiently manage their images, documents, and other files by enabling easy uploads, quick edits, and structured categorization in folders. With drag-and-drop functionality, users can rearrange files and folders, ensuring that all resources are neatly organized and readily accessible, which significantly enhanced the workflow and efficiency of web design.
Enhanced AI Text Generator
As part of the design team, I contributed to the enhancement of the AI Text Generator feature in the Sitejet Builder. This tool now includes comprehensive customization options, allowing users to select input and output languages, define maximum word counts, and choose specific content types, tones, reading levels, and target groups. Additionally, users can select an author style to better tailor the content to their audience, ensuring the generated text is both engaging and appropriate. This level of detail in customization aims to help create more precise and impactful content, directly contributing to a richer user experience on the website.
Back to Top