Mission

Redesign a library of over a hundred responsive widgets for the website editor, while creating a design system that accommodates all possible widget combinations. Address edge cases, prioritize a mobile-first approach, and also consider crafting designs with significant impact on larger screens.

Ensure that all users maintain a high level of visual quality in their designs, even if they lack knowledge of design rules and principles.

Problem

Upon releasing the MVP, we found that users frequently violated basic visual design principles, resulting in unappealing and hard-to-understand websites.

The issue lies in the product inadvertently allowing, and even slightly encouraging, users to personalize their websites without providing proper guidance.

Steps

A 6-month mission with a team of designers involved the following steps:

1. Conduct user research to examine real use cases and understand user needs.

2. Identify and outline major visual problems and areas for improvement.

3. Compile a list of edge cases that may affect the user experience.

4. Define widget behaviors for each display size to ensure responsiveness.

5. Develop a comprehensive design system that addresses the identified issues.

6. Apply the new design system to the extensive library of widgets.

7. Implement the updated design system within the framework, making sure to prevent negative changes or disruptions to existing websites.

8. Test and validate the improvements, gathering user feedback to ensure the changes meet user expectations and enhance the overall experience.

The result

We've significantly improved the visual aspects of our average users' websites, including readability, clarity, and information architecture. Furthermore, we received no complaints about this extensive upgrade, indicating a successful and well-received enhancement of the user experience.

Tags
Product design
Product management
Design System
Responsive
UX/UI

Team
2 UX designers
2 UI designers
1 Editor
5 Developpers