User Experience / Interface Tiger Team

Context

Why was this started?

At first, it was noticed that the interface was missing some modern features that are common in today’s brands and designs. This led to the realization that the platform wasn’t user-friendly enough, leading to considerations of embarking on a redesign in October 2023.

Next, outreach was made to the community to hear what marketing professionals, who use this tool daily, would like to see improved. Ideas and styles were shared, aiming to find what fits best for marketing pros. These are creative, tech-savvy adults who potentially appreciate a more friendly tool but also need a software that looks professional enough for big companies and important players in the market.

At the beginning, some basic changes were made and shared with the community so that it could express its ideas, desires, and concerns about this proposal, aiming to idealize a path to make this transformation possible.

Initial plan

Meanwhile, several issues were encountered that affected not just the look of the platform but also how users interacted with it. This broadened the perspective, showing that the platform needed more than just a visual update; users were struggling with various tasks because the user experience wasn’t well-planned.

The community proposal, made in mid-October 2023, received widespread support, with many votes and comments from members eager for improvements in these key areas.

At that time, this roadmap was outlined:

• Marketplace
• Header, sidebars and footer
• User profile
• General interface
• Email builder
• Campaign builder
• Installation process
• Error page, 404 and messages

In mid-November, feedback began to be gathered on what was making the platform hard to use every day. A form was created for everyone to share their thoughts, and notification about it was spread through different Slack channels. This was a key part of shaping the understanding of what users needed from a new interface.

As the project grew, a flood of ideas and issues were received from people, making it quite large. People kept refining ideas, shifting the approach as more community members shared their thoughts. But eventually, it was seen that this method wasn’t effective. It led to community members going in different directions, which didn’t align with others’ suggestions.

So, this idea was paused to create a better plan, incorporating the community’s input and the feedback collected through the form.

Design system (DS) suggestion

Before we move further, what is a DS? A design system is like a recipe book for creating digital products, websites or apps. It’s a collection of ingredients—colors, fonts, and buttons—and instructions on how to use them consistently. This helps teams build products that look and feel the same, no matter who’s working on them. It’s all about making sure that everything matches and works well together. It’s well-tested, designed with real user input to be not only beautiful but also functional and easy to use, through tests with variations conducted over time with thousands of users.

Carbon was introduced on Slack for its numerous advantages over other design systems. Ideas from Google’s design system and open-source projects, like a Drupal theme that updates the admin area, were also brought by community members.

The idea of creating a new design system, bespoke for Mautic, was discussed, but there would be costs.

To elaborate on why this design system was suggested as the basis for this proposal, it’s important to understand how it works, project limitations, and all related aspects.

A significant challenge for the Mautic community has been attracting UI/UX professionals to contribute to the project, as seen by the few user experience enhancements in the GitHub repository.

Considering the project’s budget, it’s impractical to develop a new design system from scratch that can meet both current and future needs. When creating a design system it’s necessary to define in detail how each and every element of the user interface is to be created including the various states - for example when active, hovered, inactive, etc. It would be very costly to have a designer need to create an addition for every new interface change a developer introduces.

Without a design system in place and adopted, developers would handle the visual and experience aspects of new functionalities as they see fit, which might not match the consistency that users of Mautic expect in the product they use. The community discussed that it might be better to adopt a more standardized approach through an existing design system rather than risk a visually inconsistent platform due to various individual contributions over the years.

Thus, it seems not feasible to create a unique design system for Mautic.

Community considered how other tools in the market, including open-source ones, are addressing interface design. Some members noted that many tools are moving away from features like rounded edges, catering to a broader audience rather than a corporate or technical one. The community agreed that making Mautic ‘cute’ may not align with the desired professional image.

To select a design system, it is essential to choose one that is actively maintained and updated. This ensures the design stays current with evolving interface trends and user expectations. The focus wasn’t solely on ease of use for developers, such as a simple import command, but also on comprehensive and adaptable documentation to prevent any design-related issues.

Carbon offers extensive documentation. It includes detailed information on design tokens, akin to CSS variables or universal codes, which update the interface consistently when their values are changed. This feature allows developers to easily reference the documentation for guidance on design elements like button spacing or other practical applications.

By choosing this design system, it would enable developers, even those who aren’t experts in UI/UX, to add great new features to the project while maintaining a consistent look and feel. The various benefits of this system are impressive and led it to be included in this proposal. 

After months of discussions with the community and considering all these points, the initial plan was revised to reflect the broader perspective developed.

The new redesign plan

Embarking on a user interface redesign project requires a structured approach to ensure both aesthetic appeal and functional improvement. Collaboration between designers, developers, and stakeholders is crucial to align goals and expectations. Furthermore, usability testing and continuous feedback are essential to refine the interface and ensure that changes are beneficial and intuitive for end-users.

It was with this vision that a new plan was started.

Implementation steps

Before diving into the specific steps, it's important to establish a clear understanding of the path ahead. Implementing a user interface redesign is a meticulous process that involves everything from strategic planning of code resources to the final polishing of the project.

The following workflow have to be considered to achieve the best result:

1. Plan the code resources that will be available in the project.
2. Making basic improvements to prepare the layout for larger changes.
3. Aligning elements with the design system.
4. Final cleanup, to remove old code.

Now, let's dive deeper on the steps.

Code resources

Many companies use Mautic for their clients or have implemented customized versions according to their own brand. However, projects like these require a large operational effort in development as the platform currently does not readily favor this type of customization.

Do you remember a few screenshots ago when we had a comparison between square and rounded edges?

It is possible (with careful planning) to allow different brands to customize the overall feel of the interface through extremely small changes to the values of these variables in the code. A central file would be responsible for defining which style you would like to adopt, whether with rounded edges or in the colors of a client's brand or your own company; making tables more minimalist; or simply leaving everything at default values so that you have an extremely pleasant interface to use right after installing Mautic.

So the approach would take the Bootstrap standard, plus existing Mautic custom changes, to modify what is necessary and extend new visual resources.

This also guarantees that any update to Bootstrap would no longer affect the project. This way, all users and companies that use the application would be sure that they are working with something solid and without the risk of waking up one day with absolutely everything broken due to an update.

Furthermore, there is another benefit which would be, on a technical level, to speed up the use of the platform as many currently unnecessary codes would be removed.

Basic improvements

To implement certain features in the interface, a new icon pack is necessary. One of the basic principles of user experience is to make sure people can understand what each feature does in the interface with as little difficulty as possible.

As the project was initially formed a decade ago, the availability of icons to assist in the visual representation of features was extremely limited. This means that the platform has, for example, cubes representing an email template when everything you see in other applications in your daily life uses an envelope (Gmail, Outlook, etc.).

Another growing factor in discussions around the world is about privacy, GDPR and other legislation focused on users' consent to being tracked. But Mautic has been using its interface fonts hosted by external third-party servers where we simply don't know how they may have used data over the years.

Among this data, there were some items such as the language defined in the user's browser, their IP address (which allows location tracking or even crossing other data to discover their identity), all sent to third-party servers on a mandatory basis by each Mautic user.

All this needs to be solved.

These basic changes will allow for increasingly interesting additions to the platform, primarily focused on user experience solutions.

Tasks:

•  Add a new set of icons
•  Change the font for better compatibility and make it self-hosted
•  Change all icons to the new icon pack

Getting started with Design System (DS) alignment

Mautic has different libraries, used together to make all the functionalities happen. The problem is that these libraries do not always have the same styles as the platform's standard interface, which creates a disruption, a UI which just combines pieces that don’t fit.

With this project, the aim is to achieve alignment of the different libraries, in addition to updating the appearance of the interface to a template that makes the user experience simpler, easier, and faster.

The ultimate goal is for Mautic to become more attractive, inviting people to try a quality open source tool that leads the market.

Elements which would be changed:

•  Header
•  Notification panel
•  Sidebars
•  Footer
•  Page body styles
•  Stabilize changes for mobile view.
•  Buttons
•  Tables
•  Headings
•  Links
•  Dropdown
•  Date picker
•  Forms
•  Fields (select, input, file uploader, password, text area)
•  Accordions
•  Modals
•  Notifications
•  Search bar
•  Tabs
•  Tags
•  Code snippets
•  Lists (number, letters and bullets points)
•  Tiles
•  Loading
•  Pagination 
•  Toggles
•  Tooltips
•  Cards

Clean up

So that there is no unnecessary code left after all these changes, the final step is to clean up, check everything that is not being used and simply remove it.

Tasks:

•  Validate switching all Font Awesome icons
•  Replace all manual values with variables
•  Make corrections to icons if necessary
•  Remove FontAwesome
•  Check the use of unused CSS classes
•  Remove unused classes
•  Validate cleaning
•  Deploy

Prototypes

Prototypes were created to assist with the practical visualization of what a direction would look like on the Carbon design system path and to consider the general improvements that come with them.

Choosing the right way to display information

When updating the design of a platform’s interface, it’s crucial to keep a consistent look and feel across different parts. Consistency often means using the same design elements throughout, which helps users have a smooth and predictable experience. But it’s not just about making everything look the same. It’s also about applying insights from design experts to find ways to keep the design uniform while also placing the best elements where they’re most effective. In designing a new interface, consistency is prioritized. 

Being "consistent" means offering a seamless and expected experience, using familiar design patterns and elements. The goal is to make the platform easy for users to navigate while also keeping it interesting by adding variety in a way that fits with the overall design style.

Watch this video to understand inconsistency on a design system.

Regarding data display, tables are effective for organizing information and facilitating comparisons, such as in contact and company management. They provide a clear and structured view, allowing for detailed analysis:

But cards are like little billboards for information, which are great for when you need to highlight important parts of information to the user clearly. They help people make choices quickly without getting too much thrown at them, and they look clean and modern.

Whether to use cards or tables always depends on what kind of data you’re looking at. Tables are good for numbers and ratings, like how many downloads or stars something has. But they might make you miss out on other useful details. Cards, on the other hand, can show more than just numbers; they can highlight features or perks that might be just what you need. Thankfully in Mautic, most views allow you to switch between table and card layout with a keyboard shortcut. 

See an example:

Using cards to show data works great on phones because it’s easy to read and makes sense of the information. Tables can be hard to use when there’s a lot to look at, and you have to scroll sideways to see everything. As more plugins come to the marketplace, using cards could make important details stand out in a clean way.

Focusing on user experience (UX) is key when making interfaces that work well, are enjoyable to use, and easy to understand. Ok, Mautic might need to fix other things first, like adding sorting options in the marketplace or improving the search box, but these can be sorted out later or in parallel with the redesign process. A redesign doesn’t always fix all the problems, but it can highlight any find so that someone from the community can work on them.

This all makes it easier for people to start using Mautic and helps more people want to try it.

If the user preferred to have a tabular layout, the marketplace would look something like this:

This might be preferred for some users, so having the choice between the two is an important feature.

Information handling

Another topic that came up for discussion was whether modals would be consistent for displaying certain types of content (read in this PR, New look and feel by andersonjeccel · Pull Request #13169 · mautic/mautic (github.com)).

Using pop-up windows, or ‘modals’, for making changes to information is a smart choice in design. Modals let you update info quickly without having to wait for a new page to load, which is really handy, especially on slower servers. Plus, using a common style for modals makes everything feel smooth and connected for the person using it. So, even if we show plugins in a card layout and use modals for editing their information, it’s not a mismatch. It’s actually a smart use of different design parts to make using the platform easier and better.

Interaction feedback and hierarchy

Visual hierarchy could also be introduced. It’s a key part of designing interfaces because it guides users through the system naturally. Think of it like a newspaper; the most important news story gets the biggest, boldest headline and is placed at the top of the page. Less critical stories have smaller headlines and are placed further down. In a design system, buttons work similarly:

Primary buttons grab attention for the main actions you can take. Secondary and tertiary buttons are more low-key, so you know they’re not the main focus. Then there are special buttons like “ghost” buttons, which are subtle, danger buttons that warn you, or icon-only buttons that save space but still tell you what they do. This mix of buttons helps users quickly figure out where to click and what each click will do, making the whole experience smoother and less confusing.

This implementation would act as an answer to user's feedback:

> Differentiate in CTA's: have primary, secondary and tertiary CTA's styled differently

> Make the actions stand out

The implementation of a new button design with hierarchy will improve user navigation and interaction, aiding in the prioritization of actions and enhancing the overall user experience by providing a more intuitive and organized interface.

You can read about it here: https://carbondesignsystem.com/components/button/usage/

User interface interactions are enriched when accompanied by clear visual feedback, indicating the action taken and the expected response from the platform. For example, a button that initially displays only an icon can be highlighted with additional borders when clicked, signaling to the user that the displayed menu is associated with that specific action.

This approach not only facilitates the understanding of the workflow but also meets accessibility criteria, assisting users with visual impairments. A well-crafted design system anticipates these needs, providing solutions that make the software more inclusive and intuitive, allowing users to focus less on navigation and more on performing their tasks.

Visual organization of information

The structuring of the user account page into distinct sections is a practice that reinforces organization and security. By separating settings into specific categories, such as security, personal data, and location, it facilitates user access and management of this information.

In the security section, options such as password change and privacy preferences would be grouped together. In the personal data section, the user could manage their name and other identifiable information. Finally, the location section would cover language and country settings, allowing for a finer customization of the user experience according to their region and language preferences.

This modular approach not only improves the user experience by providing a more intuitive and easy-to-navigate environment but also contributes to security by allowing users to have clearer and more direct control over different aspects of their information.

When planning the design of a user interface, it’s crucial to ensure everything is set up for success. A well-planned interface improves the user experience by making the product intuitive and easy to use. Good planning also helps identify potential issues early on, saving time and resources.

How to contribute

If you have ideas to improve this project workflow, please comment so we can talk about it.

How could we make this plan better and closer to what people need?