VP Configurator - SAAS
This is a module that help users to configure the variant type of products in any e-commerce platform or other internal application.
Role
Lead UX Designer
I was responsible for the end to end activities starting from UX hours planning, UX Research, User Interviews, Analysis & Report, Low & High Fidelity Mocks, Prototyping & Design Handover.
Tools used
Project year
2025
Objectives
Identify the painpoints of the existed third party application.
Build an effecient configurator module with enhanced user experience and eleminate the dependency of a third party tool.
How it all started..
There was a third party tool used in the organization to configure a variant product. As the tool had a lot of limitations and challenges for the expanding products, business decided to build an internal module which could be used as a SAAS module for any e-Commerce platform and other internal applications at the customer end.
Discovery
Knowing the tool
As I was new to the tool and needed more technical experties to understand the values and terms, I took help from an SME to understand the tool. In about 6 to 7 days, I was able to get an hands on experience to configure a product using the existing tool. As a UX person, I realized how cumbersome the tool was to use.
Research
Stakeholder Envisioning
Once I almost understood the tool in and out, I connected with the stakerholders of this product line.
I prepared few high level and open questions to identify certain factors like
- Potential users
- Extended scope of this product
- All possible ways a user can navigate to this module
- Places of impact in the existing flow
- Competitors & similar players in the market
Consolidated all the data using Figjam and had them verified with the Stakeholders.
Known Persona
As I already lead the e-Commerce project 
earlier, user group was the same and was very much familiar.
This helped me to quickly gel with the user and speed up the interview process.
Competitive Analysis
As the reference provided by the stakeholders, went through the configuration modules of these players out in the market to set a benchmark.
Challenge
I couldn't not get direct user logins to those portals due to certain restrictions. However, tried to collect data from the known sources and surfing on internet.
Analysed on certain factors like
- What is the current trend in the market?
- What features do they currently provide?
- What is the overall customer journey or process?
- What could have been better?
Key take aways
After analysing the players out in the market along with the inputs from the users, I arrived at these points as a benchmark for a configurator module.
Improve usability & system performance
Provide visual relief and ease of navigation
Provide help text for error prevention
High Level Flow
Post my detailed analysis, I came up with the high level flow and made understanding a bit more simpler.
Challenge
- With the existed third party tool, user already had a fixed mental model.
- Proposing a new design or layout will affect users productivity and impact business.
- In the whole list of configuration items, unselected fields need to be communicated to the user
Visual Design
As I already work on this module's bigger picture in the e-Commerce project, I was comfortable with the UI. The inputs received from the research helped me to jump on the visual design.
I created a really simplified UI in less time, which matched the layout with the existed third-party tool.
I knew the page will have a lot of configurable groups list, so took that screen for a discussion with technical team to see if there were any technical challenges.
With the earlier implimentation, Yes! there were a few technical challenges..
- Not all the data can be loaded in the list at once
- Price of the product cannot be automatically updated
Proposed configurator screen
Justifying the design with the below metrics was well recived by the stakeholders. This provided some more time for the technical team to make necessary changes in the backend to retrive the data.
However, due to some integeration restriction, the price update was kept for the next version considering the timeline..
Recommended metrics
Reduced visual load
- Provide a clear UI for the user to focus on product configuration.
- Hide main navigation and other header links to avoid the clutter and to gain more screen realestate.
Ease of access
- All the groups of configuration can be viewed on the left side of the page.
- On scroll - The corresponding pages will show up on the top of the main content.
Reduces motor load
- Single scrollable page allows user to configure all the groups without have to click on next or previous buttons or switch between tabs.
Supportive information
- In each characterestics, additional information is provided on hover of "i" icon (as required).
- Prices will be shown against each characterestic as applicable.
Action of trust
- Product image on the right summary, helps evena new user to confirm the config against the corresponding product.
Reduced time to order
- Providing all required imformation in single page helps user to configure and place order in less time.
Started on the complete visual design with all possible scenarios covered. At this stage, I got one designer to support on the design deliverables.
Product Listing & Description page
For all the configurable products, the price will be available only after the configuration. In the PDP page, a clear CTA was given to trigger the configuration page.
Configuration page ✨
On click of the "Configure" button on the PDP, user will be landing on this configurator. I made sure the complete realestate was used, with a clean layout.
Edit configuration
For a configured product, user will have edit option from the PDP, which will navigate to the same configuration page and with details filled in.
Result
⬆ 86% Increase in cost effeciency
⬆ 22% Increase in system performance
🔻 27% Reduction in the configuration time
⬆ Overall increase in efficiency & User satisfaction
Let’s connect and discuss how I can bring value to your business.
I am just a call away.
phone
