Improving E-commerce homepage navigation & conversion
UI/UX
Shopify
E-commerce
CLIENT/PRODUCT
vivo Philippines
MY ROLE
Ecommerce/UX Specialist
TIMELINE
1 month
TEAM
Shopify Expert
Design Comparison
Before
Previous vivo web store design
After
Improved and launched vivo web store design
The Problem
The online store had traffic but customers were leaving without buying.
The three stacked banners dominated the page while key details like pricing, CTAs, and product collections stayed hidden or missing entirely leading customers to leave the online store quickly.
The Solution
The fix was about removing the barriers between browsing and buying.
Replaced static banners with a carousel to free up homepage space
Added prices and CTAs to navigation dropdowns per phone series to reach and browse more product page collections
Added New Arrivals and On Sale sections directly on the homepage
The Impact
Results are projected — to show what resolving these three friction points can realistically deliver.
25% → 60%+ Scroll depth homepage
+15% page views per session product page with CTA button
+5% conversion on featured collections
Problem
Definition
Before designing anything, I observed live chat inquiries to understand where users were
dropping off.
The same three questions kept repeating — "How do I buy?", "What's the price?", "What's new or on sale?" — confirming most users never made it past the homepage.
There were 4 friction points that have been identified:
Stacked banners blocked the homepage — 3 large banners consumed most of the page,
pushing users directly to the nav instead of scrolling down
Nav dropdowns were a dead end — no prices or CTAs per series, so users found
no reason to explore further
Pricing was unclear on product cards — too small to notice, with no visual distinction
between sale and full price
No promotional collections on the homepage — New Arrivals and sale items were
hidden, yet these were exactly what users kept asking for
Research &
Discovery
Without analytics tools, I used what was available and the Live Chat and Live View
features were the window into real user behavior, and it told me everything I needed
to know.
No analytics platform available — used live chat as a qualitative research alternative
Treated repeated chat queries and Shopify Analytics tools as equivalent to:
Instead of doing:
Session recordings
What I did:
Used Live View feature and Live Chat to observe users struggle real time
Instead of doing:
Heatmap Data
What I did:
Identified which pages and elements caused the most confusion/friction
Instead of doing:
Funnel drop-off reports
What I did:
Mapped recurring questions to specific journey stages
Each recurring question = a friction point = became a testable CRO hypothesis
Design
Solution
Every design decision mapped directly to a friction point. The homepage was restructured so users could find what they were looking for without relying on the navigation bar.
Homepage restructured into three deliberate zones:
Above the fold: Single carousel banner (3-4 product/slide), nav dropdowns with Product Prices + View more button
Mid-page: New Arrivals and On Sale collection. Pricing cannot be emphasized as Shopify expert mentioned they can't fix the UI at that time.
Lower page (remained the same): Trust badges and footer
Section order follows a CRO content hierarchy: intent → browse → purchase confidence
Impact &
Results
The redesign was proposed and launched with projected results with the use of Shopify tools and
secondary research, each change tied directly to the friction point it was meant to solve.
Carousel banner replacing 3 stacked static banners
Scroll depth: 25% → 60%+
A focused carousel frees up the homepage, encouraging users to scroll further and discover New Arrivals and On Sale sections below the fold.
Track: Scroll depth · Homepage engagement rate · Add-to-cart rate
Source: Real Agency — How Scroll Depth Affects Ecommerce Conversion Rates
Nav dropdowns with prices + View More button
+15% page views per session product page
Showing prices upfront clarifies value and removes a click barrier, making it easier for users to compare phones and explore all products
Track: Page views per session · CTR on View More · Time on page · Add-to-cart rate
Source: Shopify Live View feature on Product Page
New Arrivals + On Sale sections on homepage
+5% conversion on featured collections
Surfacing the products users were already asking for eliminates the need to browse through navigation, turning intent directly into purchases.
Track: Add-to-cart rate · Sales on featured products
Source: Live Chat — Sales have increased and decreased 20% repeated inquiries on Which products are new or On Sale
Reflections and Learnings
Collaborating with Shopify expert/agency, I'm proud of what we delivered within the constraints we had. But this project also made clear how much further we could go and what I'd do differently with more resources.
What I Learned
Build the basics first
At early stage, the priority is getting the e-commerce
fundamentals right with clear navigation, product
info, and payment process. Data tools come after the
foundation is solid.
Know your customers before investing in tools
Live chat gave me direct access to real customer
language and real friction. That understanding is more
valuable at the start than any analytics dashboard.
Working within real constraints builds better instincts
Collaborating with Shopify expert and Manager meant every design decision had to be practical, not just ideal
What still needs work
Activate customers as advocates
Encourage post-purchase reviews with a small reward
— discount, loyalty points, or a freebie. Each review is
social proof that sells to the next buyer.
Reviews close the trust gap vs. marketplaces
Shopee and Lazada win on social proof. A review system
on the vivo site directly counters that advantage and
builds buyer confidence online.
Mobile-first UX is still a gap
Most Filipino shoppers are on mobile. The layout needs mobile-first testing, not desktop-down adaptation.
Given more resources, there's still room to improve. A proposed wireframe outlining the ideal experience,
unconstrained by current limitations, is shown below.
