Transforming the Usability process of a Ecommerce Module Hiring
Managing an e-commerce business requires efficiency, and hiring and integrating essential services should be a straightforward process. However, users often faced a frustrating experience—navigating dropdown menus without clear visibility into what each service offered or which ones were already activated. To address this, I redesigned the hiring experience, replacing dropdowns with a dedicated interface that centralizes information and simplifies module selection. This case study explores the journey toward a more intuitive and efficient module hiring experience.
Context and Problem
Previous Scenario
Before the new solution was implemented, supermarket managers accessed the module hiring process through a dropdown menu in the e-commerce management area. This dropdown allowed them to select one service at a time, redirecting them to a separate screen where they could review the module’s specifications and proceed with hiring.
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.
User and Company Pain Points
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.