top of page

Building a new modals system

By creating a consistent yet flexible modals system that supports Duda’s UI, we were able to create a clearer, more consistent, and delightful user experience.

Background

When I joined Duda's design team at the beginning of 2020, there was already a cohesive Design system but there were almost no guidelines for the different modals in our product, which created a lack of consistency and a bad user experience. 
A bigger problem was that the existing modals design did not provide a good basis for my needs as a designer.
 
At this point, I decided to take the modals design as a side project alongside my other projects. The work was independent, but since these decisions would affect the entire design guild, the final decisions were made in collaboration with all the product designers.
 
As a first step, I conducted a thorough review of the modals in the product. Then, I divided all of them into categories, in order to understand what are the different needs.
header pic png.png

The basic dialog 

The first modal I approached was the dialog. Accuracy in the most basic component will be important for the more complex modals.
EXISTING dialog MODAL.png
EXISTING DIALOG MODAL

Competitive Analysis

I looked at other products to identify modals design. I found that the modals of most companies are based on the same principles and are very similar to each other.
dialog MODAL - Research.png
DIALOG MODAL - RESEARCH

The basic dialog new design

The goal for the new design was accuracy of the details. Therefore, the design has not changed drastically. However, when applying the accuracies in the product, the impact is significant.
dialog MODAL - new design.png
DIALOG MODAL - NEW DESIGN

Scenarios

Following my research, I learned that other companies use a unique design for different types of dialogs - such as, destructive and upsell dialogs. Giving tailored design to the content can help sharpen the message and gain users' attention. 
destructive and upsell dialogs - Research.png
DESTRUCTIVE AND UPSELL DIALOGS - RESEARCH
Making a small change in the design, such as changing the CTA’s color can have a significant impact on the product. 
failed payment.png
NEW DESTRUCTIVE DIALOG
upsell modal.png
NEW UPSELL DIALOG

Complex modal dialog 

Once the rules for the basic dialog were defined, I moved on to items that can be used in a more complex dialog - items such as footer, notes, checkbox, etc. There were no defined rules in the design system regarding how the various components should be used within the dialogue.
OLD VS. NEW complex dialog MODAL.png
arrow.png
11.png
OLD VS. NEW COMPLEX DIALOG MODAL
EXISTING modals - MULTIPLE STYLES AND LAYOUTS.png
EXISTING MODALS - MULTIPLE STYLES AND LAYOUTS

Onboarding & announcement modals

The Announcement modal is a modal that focuses the user's attention on an impactful update/action needed. We have many designed modals from this category.
In addition to the inconsistency, the design of the modals design is not ideal.
MODAL 1.png

I defined the details that should be considered for the new design:

1. Title.
2. Content.
3. An illustration or an icon that celebrates the success of the process.
4. Optional: a transaction summary that includes items purchased and the total amount.
5. Optional: a link for more details.
6. CTA.

Announcement modals new design

I created a basic modal design, that will be the infrastructure for all types of Onboarding & announcement modals.
new modal DESIGN with an illustration.png
NEW MODAL DESIGN WITH AN ILLUSTRATION
new modal DESIGN with an image_gif.png
NEW MODAL DESIGN WITH AN ILLUSTRATION

Congratulations modal

The congratulations modal symbolizes the completion of a successful process in the product, such as - purchase plan, publish your website, changing the site's URL, installing an application, etc. We have a variety of designs for congratulations modals in our product.
EXISTING Congratulations modals - MULTIPLE STYLES AND LAYOUTS.png
EXISTING CONGRATULATIONS MODAL - MULTIPLE STYLES AND LAYOUTS

Announcement modals new design

The design for the congratulations modal is based on the announcement modal's new design.  
CONGRATULATIONS NEW DESIGN.png
CONGRATULATIONS NEW DESIGN2.png
NEW CONGRATULATIONS MODALS IN THE PRODUCT
Once the basic congratulations modal design was completed, I combined more elements. The idea was that the modal would be dynamic and fit the range of needs I had defined initially.
CONGRATULATIONS OLD.png
ARROW2.png
CONGRATULATIONS NEW DESIGN.png
OLD VS. NEW Congratulations modal
2.png
1.png

Project goals

After I had an early design for the different modals, I presented the entire process to the product team. Presenting helped a lot with communicating the goals of this project internally -

Showing examples from other products and demonstrate the problems on our existing modals, was a great way to gain confidence from stakeholders in the importance of this project.

bottom of page