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
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.
Difficulty visualizing all available modules.
02.
Lack of clarity on what each module offered.
03.
No information on which services were already active.
04.
Unintuitive navigation with multiple clicks and separate screens.
Dores dos Usuários e da Empresa
Goal
Redesign the hiring flow to deliver a centralized, clear, and efficient experience aligned with the manager’s operational needs.
My Role
Conducted desk research, analyzing competitors and similar solutions.
Created early user flows using quick wireframes (Excalidraw) and later developed high-fidelity prototypes in Figma.
Collaborated with the Customer Experience team to validate pain points and refine the flow.
Presented the solution to the development team during the business refinement phase to ensure technical feasibility.
Note
Due to confidentiality (NDA), some sensitive data has been removed from the mockups. Module names, description, values and so on were adapted for presentation purposes.
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.