MaaS Console
Marketplace for retail services at Magalu, with public and registered views, service registration flows and integration with MaaS Account for authentication.
I worked at Magazine Luiza (One of the biggest retailer companies in Brazil) as UX/UI Designer, and my challenge there was to Design from scratch the ecosystem of the MaaS Platform (Magalu as a Service). The MaaS platform is formed by two applications: the MaaS Console and the Maas Account. The MaaS Console is a marketplace for retail services that will allow Magazine Luiza and other retail stores to sell digital or physical services online (free services too) to small retailers integrated on their own e-commerce, paying based on the demand used, like Firebase do it for back-end cloud services.
As a UX/UI Designer in this project, my responsibilities were to design Tasks and User Flows, User interfaces, and Interactive Prototypes. I worked alongside a Product Owner and the Development Team that started to build it, composed of a Teach Lead, QA engineer, four Front-end developers, and two Back-end developers.
The Maas Console has two views, one is Public and the other is Registered.
At the Public view, the main challenge was to show the services available to hire and authenticate users integrating with the MaaS Account application because without authentication it wasn't possible to hire any service, just browse the relevant information, like details about the service, images, technical documentation of how to integrate, and plans offered.
At the Registered view, and with an organization associated, the main challenge was to transform a complex and extensive service registration process into a clear and descriptive experience for the users and organizations wanting to sell their services in the MaaS Console and hire services from others as well.
Tasks and User Flow
The Product owner provided the high-level Epics with the business goals. Together with the Tech Team, we broke the epics into user stories and requirements and generated the acceptance criteria for each one.
Based on the user stories I started the design process by drawing the Task Flow to have a high-level view of the main tasks that the users could do at the MaaS Console, either Public and Registered views, and how they related to each other.
Proto-personas
After understanding the Tasks relationship, it was time to get into the details of each one and design the user flow for the possible scenarios. To do that I create two proto-personas: Owner and Associated.
- The user called "owner" is the one that has super admin privileges at the platform.
- "Associated" user, has permissions set by the Owner at the Platform.
- Image
User Interface
To design the user interface we followed the Material Design Guidelines, doing some small customizations to the visual of the components to adapt to the platform's needs and the Magazine Luiza visual identity, as one of the Front-End development requirements to speed up the process was to use the Material UI react framework.
Layout, Grid, and Spacing
Was used the 4 pt baseline grid to position the typography, and for most of the elements on the pages was used multiples of 4, like 12, 16, 20, 24, 32, 64px, and so on.
The grid had 12 columns with a 24px gutter for displaying the content. The platform is responsive but the main focus was desktop.
- Images
Figma Design Library
Figma was my main Design Tool, where I created a Design Library with components and instances used to design the interfaces and prototypes, to give more speed to the process and generate more consistency between the MaaS Console and MaaS Account design work.
- Link to the library
- Images
Interactive Prototypes
I created interactive prototypes to show the behavior of the interface for the development team and other stakeholders.
Check out the Interactive Prototypes