Context
FPTShop is Vietnam's second-largest consumer electronics retail chain. It serves customers through over 600 branches nationwide, as well as an e-commerce website fptshop.com.vn and a mobile app.
I joined FPTShop's UI/UX team of 5 designers in September 2025. My onboarding project was to audit the product detail page and propose improvements.
My presentation resonated with the team, allowing me to continue the project as the main contributor. This case study focuses on the most critical aspect of the project: the promotion selection mechanism. The project also involved a complete UI redesign of the page and other new features.
Screen examples are originally in Vietnamese and translated to English for this case study.
Identifying the main problem: promotion complexity
Problems with current promotions
By analyzing HotJar recordings and previous research reports, I identified promotion complexity as the primary problem.
Promotion schemes of Thegioididong, CellphoneS, and Hoang Ha Mobile
Compared to our competitors, FPTShop has the most complicated promotion logic. Products often feature long promotion "options" that can conflict with each other or specific payment methods. For instance, flash sales are incompatible with financing or student discounts. This complexity imposes a heavy cognitive load and creates two critical issues:
- Flow dead ends: Incompatibilities frequently block users from proceeding to check out with unhelpful error messages.
- Price Inconsistency: Users often see different prices between the product detail page and the final cart due to some incompatible discounts being dropped at check out.
The impact wass reflected in metrics: our conversion rate trailed the industry average by 1%, and our page satisfaction score stagnated at 60%.
Siloed departments constrains shape design goals
The solution may seem simple at first: just make those promotions compatible!
However, the reality is that promotion schemes are managed by other departments such as Category Managers and Promotion, without consideration on UX.
Organizational constraints limit what product designers can change
Design Goals
Due to organizational constraints, I focused my design strategy on optimizing the selection experience and error handling. My primary goals were:
- How to make it easier for users to understand and choose the best deal? and
- clearly communicate promotion/payment conflicts and price changes? and
- help user navigate blockers efficiently, if occurs?
Understanding business rules as basis for design
Before jumping into designing, I first had to map out the full promotion system, identifying all incompatible cases.
How final price is calculated for each product
Iterative design
With the requirements and constraints in place, I began drawing up alternative designs. Taking advantage of the design system, I jumped straight into high-fidelity prototypes, which were validated informally with colleagues until a good enough version ready for user testing.
Redesign 1: Improved error handling
1. Put promotion choices into an expanding sheet
Moving selection into a sheet both reduced information density on the detail page and enabled users to re-select promotions wherever they were on the page.
2. Prompting user to reselect promotion when required
When conflicts occurred, users could immediately reselect promotion from the opened sheet without wondering how to proceed.
3. Reducing visual emphasis on secondary promotions and adding disclaimers
This lessened information clutter and informed users of mutually exclusive discounts.
User testing #1
Participants: 10
Tasks:
- Explore the promotion offerings on the product detail page. Choose one and explain your choice.
- Buy this product using a financing option.
5 users experienced the current version first (A group) while the others experienced the redesign first (B group).
An air conditioner was chosen as the test case as it had the most complex promotion scheme.
Data collection:
- Single Ease Question (SEQ). Only count the first version experienced to avoid carry-over effect.
- Which version they prefered?
- Qualitative data from user’s feedback and probing questions
Test setup
Results
New promotion re-select flow significantly improved blockers when choosing financing, raising task 2 SEQ from 3.8 to 5. Users quickly realized they needed to re-select promotion thanks to the opened selection sheet.
However, task 1 SEQ remained roughly the same (4.6 v.s. 4.8). Some notable observations were:
- Some users repeatedly switched between choices to compare prices.
- Users reread the promotion options many times. A few complained about the length of the texts.
Breaking through organizational barriers to address the underlying issues
While the first redesign mitigated blockers, the complexity of promotion content still caused cognitive overload. It became clear that I needed to look beyond the UI and challenge the underlying promotion definition.
I initiated a series of workshops with Category Managers, Operations, and the Promotion department to further simplify promotions. By framing UX improvements as levers for conversion and revenue growth while empathizing with challenges of the stakeholders, I managed to reach crucial common grounds:
- We agreed to replace "Reduced by..." bullet points with final price tags on each promotion option, thus simplifying price comparison.
- We had a surprising discovery: the Promotion team were deliberately duplicating items between the promotion choices out of fear that these high-value gifts would get lost in the “Other” section. Acknowledging this concern, we propose to merge sections, guaranteeing visibility for important items while removing redundancy.
- We also uncovered a key misconception: contrary to what we thought, promotions in the second section and flash sales are mutually exclusive. We have to adjust the UI to reflect this.
This experience showed me the importance of not just working with end users, but also with other stakeholders whose work influences UX.
Redesign 2: Consolidating promotions
1. Add final prices to the promotion choices
Users can now easily compare values without repeatedly switching between promotions.
2. Combine two sections of promotions
This eliminated the need for Category Managers to set duplicated promotion items.
Combine two sections of promotions
Move duplicated promotion items to the "Other offers" area
Overall, removing the unnecessary and duplicated promotions, the promotions choices had become much more compact.
User testing #2
Results
The second test saw marked improvements on SEQ scores of both tasks, indicating that the new design both simplified information presentation and reduced blockers relating to promotions.
Final screens
Different promotion types
Promotion re-selection flow
Verification discount selection flow
This project also involved major redesign of other sections on the detail page.
Other screens of the product detail page redesign
Next steps
- Project is under active implementation
- I have written change log, documentation, and supported BAs and developers in the implementation phase.
- Keys API will be monitored after the design go live:
- Conversion rate
- Average order value
- Customer satisfaction score
Key learnings
- Collaborate cross-functionally to address UX problems caused by internal constraints.
- Build upon and contribute to a large design system.
- Take ownership over a sizeable project.
