Print screens of MGM designs

Designing a vision for Proesc's products

Designing a vision for Proesc's products

Designing a vision for Proesc's products

Print screens of MGM designs

Results

Results

More than 250 components created, including variants

A Scalable design base to use in all devices and products

Users more satisfied after the new design implementation

For confidentiality purposes, more detailed data, research and results can't be shared.

The Company

The Company

Proesc is a ERP company that offers a management system for schools. Until 2023, they haven't done a design work for their platforms

My role

My role

As the first Product Designer at Proesc, I collaborated closely with Product Managers and Developers to enhance the product’s usability

I led the end-to-end design system strategy, ensuring the product delivered a delightful user experience.

This involved componentizing key elements, creating variables, and developing templates to enable the team to prototype efficiently

Print screen of the new MGM home page

People Problem

People Problem

School directors and teachers find the system difficult to navigate, often getting lost in its complexity

School directors and teachers find the system difficult to navigate, often getting lost in its complexity

Find it through conversations with service team

Business Problem

Business Problem

Lack of quality and branding, all the pages look the same

Lack of a scaling system for Proesc multidevices products

Context

Context

Until 2023, Proesc relied on outdated code and provided a poor user experience in their ERP

After analyzing the product, we began redesigning components and full journeys to enhance usability and give the brand a new visual appeal

Process

Process

The project started with an Heuristic Analysis of the product main flows

Prints of the MGM first user flow

Then, we analysed what were the product main components to start recreating them

Prints of the MGM first user flow

After that, we did a several benchmark research and Design system study, to understand what was the principles other companies follow in their products

Prints of the MGM first user flow

In the end, we defined their style guide

Prints of the MGM first user flow

Proesc already had their brand well defined, but for the product, we needed to improve usability and accessibility.

We created a new color palete and defined the typography for the system, combined with other visual aspects for the product, as shadows and border radius.

Design System Structure

Design System Structure

Proesc's Design System was first created in Figma, using Variants and Components to ensure consistency and visual quality

Then, the tech team was responsible for developing the components, leaving space for a visual review

The Design System file contains more than 250 components, 37 variables and 14 styles

The Design System file contains more than 250 components, 37 variables and 14 styles

The Design System file contains more than 250 components, 37 variables and 14 styles

Print screen of the second version of MGM page

App created with Proesc's Design System

App created with Proesc's Design System

App created with Proesc's Design System

Print screen of the second version of MGM page

Proesc's Web System pages

Proesc's Web System pages

Proesc's Web System pages

Print screen of the second version of MGM page
Print screen of the second version of MGM page

Results

Results

More than 250 components created, including variants

A Scalable design base to use in all devices and products

Users more satisfied after the new design implementation

For confidentiality purposes, more detailed data, research and results can't be shared.

What's next

What's next

After my time at the company, Proesc saw the value of design and how it can increase user satisfaction and retention. Now, they have two designers who are using and improving what I started

Final considerations

Final considerations

After more than one year at Proesc as a freelancer, I felt really proud about the company's new design vision

Creating those components was a hard task, but seeing the prototypes working well in clients hands was totally worth it

I also redesigned a lot of journeys in Proesc products, so if you want to know more about my work there, feel free to reach me out and let's do Growth together

mariagomes.uxdesign@gmail.com

Maria Gomes © 2024

Maria Gomes © 2024