Transformando a usabilidade do processo de contratação de um e-commerce
Gerenciar um e-commerce exige eficiência, e a contratação e integração de serviços essenciais deveriam ser simples. No entanto, por vezes os usuários enfrentavam um processo frustrante navegando por menus suspensos, sem visibilidade clara do que cada serviço oferece e os serviços ativados. Para resolver isso, redesenhei a experiência de contratação, substituindo dropdowns por uma interface dedicada que centraliza informações e simplifica a seleção de módulos. Este estudo de caso explora a jornada de contratação de módulos mais intuitiva e eficiente.
Contexto e Problema
Cenário Anterior
Antes da nova solução, os usuários acessavam o módulo de contratação através de um menu dropdown na área de gestão do e-commerce. Esse dropdown permitia selecionar um serviço por vez, redirecionando o usuário para uma tela separada onde eram apresentadas as especificações do módulo e a opção de contratação.
01.
Some dropdown options were duplicated or outdated, causing confusion.
02.
Users needed to navigate individually through each module, making it difficult to get an overview of available services.
03.
There was no clear visibility into which modules were already active, causing uncertainty about the services in use.
Dores dos Usuários e da Empresa
2. Project Objective
The new module screen was developed to:
-
Centralize the visualization of available and hired modules, along with their respective statuses.
-
Improve user experience, allowing them to quickly understand which modules are available and which best suit their needs.
-
Facilitate the hiring process by reducing the number of clicks needed to access detailed information and complete the acquisition.
3. Design Process
-
Desk Research: Other CRMs were analyzed to understand how they organized module hiring.
-
Wireframes: Initial sketches were created in Excalidraw to speed up layout definition.
-
Prototyping: The wireframes were refined and transformed into navigable prototypes.
-
Validation: Feedback was collected from the Customer Experience team, which praised the clarity and organization of the new flow.
-
Business Refinement: The solution was presented to developers to assess technical feasibility, with no negative feedback.
-
Implementation: The final design was sent for development.
4. Proposed Solutions
-
Dropdown Replacement: Instead of opening a dropdown menu, the "Modules" option now directly leads to a dedicated screen.
-
Unified Visualization: All modules are listed on the screen with a brief description and activation status.
-
Enhanced Experience: Users can quickly evaluate which modules meet their needs without having to enter each one individually.
5. Wireframes and Final Screens
-
Initial wireframes developed in Excalidraw.
-
Prototyping and final implemented version.
-
"Before and After" comparison to highlight the improvement in user experience.
6. Learnings
-
Business Refinement strengthens the solution → Validating with developers before implementation prevented rework.
-
Simplicity improves experience → Reducing clicks improved usability and efficiency.
-
Feedback is essential → Collaboration with Customer Experience helped refine the solution.
-
Functional design is more important than visual innovation → Even a simple change can have a significant impact on usability.