UI/UX

WEBA – Slideshow Element Editing Optimization

WEBA – Slideshow Element Editing Optimization

Improving editing logic and design flexibility for slideshow components

Year

2024

My Role

UI/UX Designer

Responsibility

End to end UX/UI design

Overview

WEBA is a no-code platform that helps users quickly build interactive web pages, with the slideshow being one of the most frequently used components. However, the original design lacked intuitive workflows and flexible style settings, making it difficult for users to edit efficiently or customize the layout as desired. This redesign addresses those issues by improving the setting structure and interaction flow, enabling users to create layouts that better fit their needs.

Design Strategy

WEBA users, mainly marketers and designers in banking and insurance, often need to build campaign pages quickly.
Drawing from our platform experience and user feedback, we identified three key usability issues.
We then redesigned the carousel component to streamline the editing process and offer more flexibility in visual customization.

Principle

I followed these key design principles throughout the redesign process:

Solution

Enhance Customization Flexibility & Editing Logic

The original settings were scattered and hard to use, limiting style flexibility. We reorganized them into Slideshow and Style sections, and added options like corner radius, arrow style, and navigation dots. These changes make it easier for users to adjust the component’s appearance and edit more efficiently.

Streamlined Editing Flow

Users previously had to switch between modes to configure and edit blocks. We unified the workflow into a single mode to reduce interruptions and improve focus.
We also refined the block naming logic, changing labels from “Block,” “New Block,” etc., to “Block 1,” “Block 2,” making it easier for users to identify and select the content they want to edit.

Clear Visual Feedback for Edit Mode

Previously, there was no visual difference between canvas and slideshow edit mode, making it hard to tell the current state.
We added a semi-transparent overlay and disabled interactions on non-carousel elements to help users clearly identify where they are editing.