Widgets Customisation

Primary Widgets

Cards

Horizontal Table

List Rundown

Calendar

Kanban

Gantt Chart

Metrix

User Persona

Sarah Thompson

Senior UX/UI Designer at a Global Enterprise

Age: 30-45

Demographics:

Goals

To design highly customizable dashboards that meet diverse business requirements.
To leverage cutting-edge tools for creating dynamic, engaging user interfaces.
To implement modern animations and interactive elements to enhance user experience.

Challenges:

Struggling with limited flexibility in traditional Div-based systems for unique and detailed customization.
Finding efficient ways to integrate advanced 3D materials and micro-interactions within tight project timelines.
Balancing creativity with the technical limitations of existing enterprise tools.

Motivations:

Empowered by tools that enable endless customization and innovation.
Excited to bring creative ideas to life through advanced JavaScript integrations and micro- animations.
Driven to set a benchmark in enterprise design with visually stunning and user- friendly interfaces.

Solution Fit:

The grid-based page builder is sarah’s ultimate design companion. with its customisable structure—pages, shelves, primary widgets, and unlimited widgets—it provides the flexibility she needs. The seamless integration of javascript for 3d materials and micro-interactions fuels her creativity, enabling sarah to craft next-level enterprise solutions.

Design Process

Design Process: Creating The New Builder By Leveraging Feedback
From The Previous System

Key Testing Issues & Solutions

Pixel Misalignment

Issue: Pixel-perfect alignment not matching the design specs.

Solution:

Implement snap-to-grid functionality with adjustable grid sizes.
Add validation for alignment during widget placement.
Use design system tokens to ensure consistent spacing and dimensions.

Widget Overlapping on Publish

Issue: Widgets overlap when published despite proper arrangement in the builder.

Solution:

Implement collision detection during widget placement.
Validate layouts dynamically before saving or publishing.
Introduce warnings for overlapping widgets and auto-adjust placements.

Version Not Saving

Issue: Changes are not getting saved in the version history.

Solution:

Create auto-save functionality at regular intervals.
Add a confirmation pop-up for successful version saving.
Log every version with a timestamp and rollback option for easy restoration.

Animations Have Jerk and Are Not Smooth

Issue: Animations are laggy and disrupt the user experience.

Solution:

Optimise animation performance using CSS.
Reduce animation duration or complexity for smoother transitions.

Design Guidelines

Design Practices

This design practice ensures an intuitive, flexible, and powerful dataset widget and page-building experience while meeting business needs for pixel-perfect customization and enterprise-grade dashboard delivery.