App - Web Revamp
App - Web Revamp
OVERVIEW
OVERVIEW
AvaKids, a member of Mobile World Group, specializes in baby essentials such as milk, diapers, and personal care products. The brand aims to create a trusted and convenient online shopping ecosystem for modern parents across App and Web platforms. Initially, both platforms had inconsistent UI and poor promotion visibility, resulting in lower conversion rate (CR) and revenue.
AvaKids, a member of Mobile World Group, specializes in baby essentials such as milk, diapers, and personal care products. The brand aims to create a trusted and convenient online shopping ecosystem for modern parents across App and Web platforms. Initially, both platforms had inconsistent UI and poor promotion visibility, resulting in lower conversion rate (CR) and revenue.
Role:
Role:
Product Manager, UX/UI Designer
Product Manager, UX/UI Designer
Product Manager, UX/UI Designer
Redesigned 100+ screens across App & Web to improve CR.
Analyzed user funnel to define conversion bottlenecks.
Worked cross-functionally with engineering & marketing to deliver unified experience
Redesigned 100+ screens across App & Web to improve CR.
Analyzed user funnel to define conversion bottlenecks.
Worked cross-functionally with engineering & marketing to deliver unified experience
Tools:
Tools:
Figma
GA4
Crazy Egg
Duration:
Duration:
2 months (full module)
2 months (full module)
MODULES & OBJECTIVE
MODULES & OBJECTIVE
The redesign covered the entire AvaKids digital ecosystem, redefined around key functional modules and strategic objectives to align UX with business growth.
Key Modules:
Key Modules:
Homepage: Entry point for promotions & campaigns
Homepage: Entry point for promotions & campaigns
Product Listing (PLP): Product browsing by category & filters
Product Listing (PLP): Product browsing by category & filters
Product Detail (PDP): Product info, price, gifts, promotions...
Product Detail (PDP): Product info, price, gifts, promotions...
Brand Page: Dedicated brand landing for partners
Brand Page: Dedicated brand landing for partners
Cart & Checkout: Purchase flow optimization User Profile: Orders, loyalty, address & preferences...
Cart & Checkout: Purchase flow optimization User Profile: Orders, loyalty, address & preferences...
Project Objectives For App:
Project Objectives For App:
Entry point for promotions & campaigns
Entry point for promotions & campaigns
Increase conversion rate and revenue
Increase conversion rate and revenue
Improve promotion visibility and product clarity
Improve promotion visibility and product clarity
Grow app user base and drive web-to-app conversion
Grow app user base and drive web-to-app conversion
PROBLEM DEFINITION
PROBLEM DEFINITION
Understanding the Initial State
Initially, AvaKids App and Mobile Web were developed separately without a shared design system. As a result, users found it difficult to identify deals and felt inconsistency across platforms.
Understanding the Initial State
Understanding the Initial State
Initially, AvaKids App and Mobile Web were developed separately without a shared design system.
As a result, users found it difficult to identify deals and felt inconsistency across platforms.
Initially, AvaKids App and Mobile Web were developed separately without a shared design system. As a result, users found it difficult to identify deals and felt inconsistency across platforms.
Used a different layout where promotions were easily overlooked.
Web:
emphasized featured products but lacked clear discount visibility.
App:
Web:
Used a different layout where promotions were easily overlooked.
App:
emphasized featured products but lacked clear discount visibility.
Research Overview:
Research Overview:
While the research covered the full App and Web ecosystem, this case study focuses specifically on the Homepage, the key touchpoint driving both conversion rate and conversion volume.
The goal was to understand how users perceive and interact with promotional content, forming the foundation for a redesign that increased both conversion efficiency and total conversions
While the research covered the full App and Web ecosystem, this case study focuses specifically on the Homepage, the key touchpoint driving both conversion rate and conversion volume.
The goal was to understand how users perceive and interact with promotional content, forming the foundation for a redesign that increased both conversion efficiency and total conversions
While the research covered the full App and Web ecosystem, this case study focuses specifically on the Homepage, the key touchpoint driving both conversion rate and conversion volume.
The goal was to understand how users perceive and interact with promotional content, forming the foundation for a redesign that increased both conversion efficiency and total conversions
Research Methods:
Data Analytics
User Interviews
Competitor Analysis
Heatmap
Research Methods:
Data Analytics
Competitor Analysis
User Interviews
Heatmap
Data Analytics
Analyzed 30 days of Google Analytics, focused on CR, Total Users, Sessions
Process:
App achieved 8% CR but low total conversions (<100k active users). Most sessions started from Homepage, yet drop-offs were high, highlighting it as the key area to optimize.
Finding:
Conversion Rate App
8%
Total User App
<100k
Total Session App
<150K
Heatmap
Focused on Homepage interactions: banner clicks, scroll depth, and Deal Zone visibility.
Mapped user heat concentration and drop-off behavior along the scroll path.
Process:
Users focused on search/navigation but ignored promo banners.
Only 32% scrolled to the Deal Zone → key offers placed below view. Needed stronger hierarchy & promo visibility to drive action.
Finding:
User Interviews
Conducted an on-site user interview session with 20 customers at AvaKids’ official offline store
Goal: understand why users preferred purchasing in-store instead of via App or Mobile Web, and observe how they interacted with the App when introduced to it in-store
Each participant was asked to explore the App for 3–5 minutes while sharing feedback aloud
Process:
Drop points identified: Many users opened the App but didn’t notice the “Deal Zone” or active campaign banners, several commented that “nothing looks special” or “it feels boring than the website”
Motivation gap: Users were not motivated to switch channels unless the App showed clearer, stronger value (e.g., visible discounts, app-only offers)
Finding:
Competitor Analysis
Benchmarked 2 major competitors in the mom & baby retail market: Con Cưng, KidsPlaza
Compared homepage layouts, promotional hierarchy, and user motivation design across App and Mobile Web
Focused on how each brand communicates trust, promotion visibility, and convenience
Process:
ConCung
Strength: Prioritizes promotion visibility and purchase urgency through strong banners and top-fold deal sections
Weakness: UI feels cluttered; too many competing elements reduce focus
Kidsplaza:
Strength: Builds trust and convenience, layout emphasizes store network, product reliability, and parent-oriented guidance. Uses subtle banners and curated deals instead of flash sales
Weakness: Promotional content lacks energy and distinctiveness; users may overlook deals due to soft hierarchy
Finding:
Conversion Rate App
Conversion Rate App
8%
Total User App
Total User App
<100k
Total Session App
Total Session App
<150K
Data Analytics
Process:
Analyzed 30 days of Google Analytics, focused on CR, Total Users, Sessions
Finding:
App achieved 8% CR but low total conversions (<100k active users). Most sessions started from Homepage, yet drop-offs were high, highlighting it as the key area to optimize.
Heatmap
Process:
Focused on Homepage interactions: banner clicks, scroll depth, and Deal Zone visibility.
Mapped user heat concentration and drop-off behavior along the scroll path.
Finding:
Users focused on search/navigation but ignored promo banners.
Only 32% scrolled to the Deal Zone → key offers placed below view. Needed stronger hierarchy & promo visibility to drive action.
User Interviews
Process:
Conducted an on-site user interview session with 20 customers at AvaKids’ official offline store
Goal: understand why users preferred purchasing in-store instead of via App or Mobile Web, and observe how they interacted with the App when introduced to it in-store
Each participant was asked to explore the App for 3–5 minutes while sharing feedback aloud
Finding:
Drop points identified: Many users opened the App but didn’t notice the “Deal Zone” or active campaign banners, several commented that “nothing looks special” or “it feels boring than the website”
Motivation gap: Users were not motivated to switch channels unless the App showed clearer, stronger value (e.g., visible discounts, app-only offers)
Competitor Analysis
Process:
Benchmarked 2 major competitors in the mom & baby retail market: Con Cưng, KidsPlaza
Compared homepage layouts, promotional hierarchy, and user motivation design across App and Mobile Web
Focused on how each brand communicates trust, promotion visibility, and convenience
Finding:
ConCung
Strength: Prioritizes promotion visibility and purchase urgency through strong banners and top-fold deal sections
Weakness: UI feels cluttered; too many competing elements reduce focus
Kidsplaza:
Strength: Builds trust and convenience, layout emphasizes store network, product reliability, and parent-oriented guidance. Uses subtle banners and curated deals instead of flash sales
Weakness: Promotional content lacks energy and distinctiveness; users may overlook deals due to soft hierarchy
DESIGN EXECUTION & IMPACT
DESIGN EXECUTION & IMPACT
Main Problem
Main Problem
Before the redesign, the AvaKids App and Mobile Web shared almost identical content, lacking a cohesive experience and distinct value. Although the App achieved a high 8% conversion rate, its small active user base limited both revenue and campaign engagement. User research revealed that there was little motivation to switch to the App, as many felt “it looked just like the website” highlighting an issue in perceived value and exclusivity
Before the redesign, the AvaKids App and Mobile Web shared almost identical content, lacking a cohesive experience and distinct value. Although the App achieved a high 8% conversion rate, its small active user base limited both revenue and campaign engagement. User research revealed that there was little motivation to switch to the App, as many felt “it looked just like the website” highlighting an issue in perceived value and exclusivity
Key Insights
Key Insights
High Conversion, Low Scale
High Conversion, Low Scale
→ Strong conversion rate (8%) but small user base limited total revenue
→ Strong conversion rate (8%) but small user base limited total revenue
→ Growth must come from increasing App adoption, not only CR optimization
→ Growth must come from increasing App adoption, not only CR optimization
Promotional Visibility Gap
Promotional Visibility Gap
→ Major deals was placed below the fold, resulting in low user awareness and engagement
→ Major deals was placed below the fold, resulting in low user awareness and engagement
Low Perceived Value of App
Low Perceived Value of App
→ Users saw no unique advantage compared to the website; exclusive value was unclear
→ Users saw no unique advantage compared to the website; exclusive value was unclear
Fragmented Cross-Platform Experience
Fragmented Cross-Platform Experience
→ Inconsistent layouts weakened trust and made the ecosystem feel disconnected
→ Inconsistent layouts weakened trust and made the ecosystem feel disconnected
Opportunities
Opportunities
Communicate App-Exclusive Value
Communicate App-Exclusive Value
→ Highlight App-only pricing, voucher hunts, and Flash Sales with strong visual hierarchy
→ Highlight App-only pricing, voucher hunts, and Flash Sales with strong visual hierarchy
Create a Unified Promotion & Brand Ecosystem
Create a Unified Promotion & Brand Ecosystem
→ Integrate structured zones for brand banners, Top Brand sections, and Brand Pages, monetizing visibility without hurting UX
→ Integrate structured zones for brand banners, Top Brand sections, and Brand Pages, monetizing visibility without hurting UX
Personalize the Experience
Personalize the Experience
→ Use data-driven personalization (Recommended, Buy Again, Favorites) to build loyalty and increase retention
→ Use data-driven personalization (Recommended, Buy Again, Favorites) to build loyalty and increase retention
Strengthen Consistency & Trust
Strengthen Consistency & Trust
→ Unify design system between App & Web to improve usability and brand credibility
→ Unify design system between App & Web to improve usability and brand credibility
These insights became the foundation of our design strategy. Rather than treating the homepage as a static surface, we redefined it as a growth engine where design, data, and business objectives align to drive both conversion and engagemen
These insights became the foundation of our design strategy. Rather than treating the homepage as a static surface, we redefined it as a growth engine where design, data, and business objectives align to drive both conversion and engagemen
PROBLEM SOLUTION
PROBLEM SOLUTION
PROBLEM SOLUTION
Design Execution
The new home screen was restructured into a clear, conversion-oriented flow designed to guide users from awareness → engagement → action → retention. Each section was intentionally crafted to solve specific user pain points found in research
Before (Home Screen)
Web
App
After (Home Screen)
App/ Web
Key Breakdown
every module was intentionally designed to solve a specific user pain point and link seamlessly within the purchase journey. This ensured that the homepage not only communicated value clearly, but also supported both user motivation and business objectives
The Impact
The homepage redesign was not just about visuals, it was a strategic shift to drive measurable business outcomes. Every design decision was guided by KPIs: increasing conversion rate, scaling user base, and maximizing brand revenue and the results proved the impact.
After 2 months of launch, data clearly demonstrated how user-focused design translated into tangible growth across conversion, engagement, and brand monetization.
Conversion Rate
~13%
Improved product visibility, clearer promotion hierarchy, and interactive product cards helped users make faster purchase decisions.
App Installs
+50%
App-exclusive pricing and voucher hunt campaigns attracted new users through visible added value and shareable promotions
User Retention
62%
And Rising
Improved product visibility, clearer promotion hierarchy, and interactive product cards helped users make faster purchase decisions.
Revenue Growth
+140%
And Rising
Gamified voucher hunts and ML-powered personalized recommendations built a strong habit loop
The Impact
The homepage redesign was not just about visuals, it was a strategic shift to drive measurable business outcomes. Every design decision was guided by KPIs: increasing conversion rate, scaling user base, and maximizing brand revenue and the results proved the impact.
After 2 months of launch, data clearly demonstrated how user-focused design translated into tangible growth across conversion, engagement, and brand monetization.
Conversion Rate
~13%
Improved product visibility, clearer promotion hierarchy, and interactive product cards helped users make faster purchase decisions.
App Installs
+50%
App-exclusive pricing and voucher hunt campaigns attracted new users through visible added value and shareable promotions
User Retention
62%
And Rising
Improved product visibility, clearer promotion hierarchy, and interactive product cards helped users make faster purchase decisions.
Revenue Growth
+140%
And Rising
Gamified voucher hunts and ML-powered personalized recommendations built a strong habit loop
The Impact
The homepage redesign was not just about visuals, it was a strategic shift to drive measurable business outcomes. Every design decision was guided by KPIs: increasing conversion rate, scaling user base, and maximizing brand revenue and the results proved the impact.
After 2 months of launch, data clearly demonstrated how user-focused design translated into tangible growth across conversion, engagement, and brand monetization.
Conversion Rate
~13%
Improved product visibility, clearer promotion hierarchy, and interactive product cards helped users make faster purchase decisions.
App Installs
+50%
App-exclusive pricing and voucher hunt campaigns attracted new users through visible added value and shareable promotions
User Retention
62%
And Rising
Improved product visibility, clearer promotion hierarchy, and interactive product cards helped users make faster purchase decisions.
Revenue Growth
+140%
And Rising
Gamified voucher hunts and ML-powered personalized recommendations built a strong habit loop
The new home screen was restructured into a clear, conversion-oriented flow designed to guide users from awareness → engagement → action → retention. Each section was intentionally crafted to solve specific user pain points found in research
Design Execution
Before (Home Screen)
Web
App
After (Home Screen)
App/ Web
Key Breakdown
every module was intentionally designed to solve a specific user pain point and link seamlessly within the purchase journey. This ensured that the homepage not only communicated value clearly, but also supported both user motivation and business objectives
REFLECTIONS
REFLECTIONS
What I Learned
What I Learned
This project gave me the opportunity to bridge UX decisions with business growth. As both a Product Manager and UX/UI Designer, I learned how critical it is to align design strategy with measurable KPIs, not just aesthetic goals.
Redesigning the homepage taught me that small, data-driven changes like improving product card clarity or restructuring promotion hierarchy can significantly increase user engagement and revenue.
I also learned the importance of cross-team collaboration. Working closely with the marketing, data, and brand teams helped ensure that design not only solved user pain points but also supported commercial goals.
Finally, observing real users interact with the new homepage reinforced a key lesson: great design feels invisible it simply helps users achieve their goal effortlessly.
This project gave me the opportunity to bridge UX decisions with business growth. As both a Product Manager and UX/UI Designer, I learned how critical it is to align design strategy with measurable KPIs, not just aesthetic goals.
Redesigning the homepage taught me that small, data-driven changes like improving product card clarity or restructuring promotion hierarchy can significantly increase user engagement and revenue.
I also learned the importance of cross-team collaboration. Working closely with the marketing, data, and brand teams helped ensure that design not only solved user pain points but also supported commercial goals.
Finally, observing real users interact with the new homepage reinforced a key lesson: great design feels invisible it simply helps users achieve their goal effortlessly.