Benny Luk

Site Editor

Drag & Drop Site Builder
The main product of the business is a WYSIWYG site builder that allows users to add elements to their site page and adjust the element settings or styling without any prior coding knowledge.
Role
Senior Developer
Designer
Date
2016-2022
Introduction to the Editor
01

Challenges & Solutions

Ease of Use

To address complaints from clients about our editor being too difficult to use, we added alignment guides and rulers, and updated the UI to focus on core features. These changes significantly improved the user experience and served as inspiration for our new site editor, Bentobox.

Performance

Due to the outdated tech stack used in the editor, performance issues started to arise as our user base grew, and our servers became overloaded. We tackled this problem by optimizing the SQL code, minimizing network requests, and only bootstrapping necessary data. While looking back, I realized that reducing the number of event triggers being fired would have been beneficial, but it would have taken too much time to test.

Mobile Development

To enable responsiveness on our website builder, we had to store two sets of data, one for mobile and one for desktop. While storing the data was easy, rendering it posed challenges as different browsers render fonts differently and devices come in different viewport sizes. We had to overcome this through testing and tweaking CSS and other workarounds.

Screenshot of Bentobox site editor editing a section
Changing the section design in Bentobox site editor
Previewing their website using our real-time mobile mode preview.
Frontend Stack
Backbone
SCSS
Webpack
Backend Stack
Coldfusion
NodeJS
MSSQL Server
02

Features

Apps Integration

To expand the functionality of our main product, the site editor, we created several side products such as the Store Manager, File Manager, Form Manager, and Members Manager. These products were designed to seamlessly integrate with the site editor, enhancing its capabilities and giving it a more complete feature set.

Multiinguial Support

To support our international clientele, we implemented multilingual support, which is not a common feature among our competitors. This required a site data migration, but we ensured the process was smooth and that clients could undo the changes if necessary.

Screenshot of Bentobox site editor editing a section
Changing the section design in Bentobox site editor
Previewing their website using our real-time mobile mode preview.