THE WHY

Why do customers go online to Old Navy?

Browsing (looking for new releases, gift ideas, window shopping etc.)

Looking for specifics and may want to transact

Others (investors, media, competitors, job seekers etc.)

 THE WHAT

Brand History
Community
Product Story
Contact
Green Business Returns Policy
Recognition
Hotline
Blog
New Releases
Sale Offers
Awards
Price Demo
Store Info Delivery
Uniqueness
Loyalty
Engagement
Customers who browse

Customers looking for specifics Careers Investors

Supplier
Others Privacy Media Page
Common features
No transactional value
 THE PURPOSE

oldnavy.ca website exists to…

➤ Grow sales, capture online market share
➤ Sell to existing & new customers
➤ Attract new customers
➤ Represent the brand presence
➤ Gather intelligence about customers
 GOALS OF HOMEPAGE

1. Bring users to the website

2. Introduce the brand, story and products at relevant detail
3. Engage the visitors through offers and community
4. Transact with users
 CHARACTERISTICS OF A WELL DESIGNED HOMEPAGE

➤ Well organised and visually appealing to the user!

➤ Easy to find a specific information
➤ Provides seamless buying experience
➤ Good, consistent technical performance

Challenges / Interferences
➤ Legal - Consent for cookie settings
➤ Location - If the home page is not country specific
 COMPONENTS OF A GOOD HOMEPAGE
Subtle yet effective “Everything” A bold image that represents the Invites member and
on Sale advertisement! brand and products - clear & direct non-member

Know what you

Latest Season, want? Try our
distinguished as big and
not part of sale prominent
using font colour search bar!

Engaging visitors
to join the
community -
touching the
emotional aspects
of the user!
For everything Invitation to learn There is sale ongoing!
else, go here! about the brand!
 COMPONENTS OF OLD NAVY HOMEPAGE
8x Sales offers + Banner at top, Invites member and
overwhelms the visitor! non-member

Strange
placement of Ad
Prominent Logo,
choice setting
straightforward
categories
Small and
subtle search
function

Bold and
2nd pop up can
colourful images
only be
minimised

Need for action (scroll) to see

further content including
brand details…
OLD NAVY HOMEPAGE - OFFERS GALORE!
 NAVIGATION - OPTIONS OVERLOAD?
Example - Selecting Men’s

Old Navy - 5 Sub categories, 34 choices

Joe Fresh - 3 Sub categories, 17 choices

Zara - 15 Sub categories

Aether - 9 sub categories

 COMPARISON OF ZARA AND OLD NAVY HOMEPAGE
Browsing Customers looking
Other Customers
Customers Customers for Specifics

Design Old Old Old

Zara Zara Zara
Navy Navy Navy

Appealing N N Y Y N

Accessibility N Y Y Y N

Navigation N Y N Y Y

Engaging N Y N Y N

Sale Offers Y Y Y - -

Technical N Y N Y N
 THINGS NOT TO DO IN A HOMEPAGE
➤ Selling in homepage
➤ Interrupting a user click through!
➤ Pop-ups, not more than 1 please…
➤ Repeated offers, sale posters and
site-links
➤ Overwhelming content
➤ Technical - slow, bad descriptions
and broken links
OLD NAVY HOMEPAGE - A PRELIM LOOK
 PERFORMANCE

Customer Traffic

➤ SEO - Traffic to site

Loss ➤ Organic vs paid
➤ Bounce rate
➤ Time spent on site
Loss ➤ Click through
➤ Pattern
Loss ➤ Engagement
➤ Items added to cart
➤ Transaction
Loss ➤ Loyalty

Success

87% <1800 17S 47%

 PERFORMANCE
Rank
➤ Advertising (keywords)
➤ Brand strength
Site performance
➤ Content quality
➤ Rank
➤ External site links
➤ Size
➤ SEO - Traffic to site ➤ Speed of loading
➤ Organic vs paid ➤ Quality of code
➤ Bounce rate ➤ Compatibility

➤ Transaction
➤ Loyalty
Transaction
➤ Newsletter sign up
➤ Account creation
➤ Watched a full video Account creation
➤ Purchased an item ➤ Successfully created
➤ Routed to partner site ➤ Email link not verified
➤ Email link verified
➤ Email bounced
 NEED FOR HOMEPAGE OPTIMISATION

Trends shape compatibility needs

 HIGH PRIORITY FIXES
➤ Appeal
➤ Reduce images
➤ Remove redundant content
➤ Remove pop-ups
➤ Improve consistency
➤ Navigation
➤ Optimise categorisation
➤ Accessibility
➤ Improve mobile compatibility
➤ Technical (wave 1 fixes)
➤ Remove broken links
➤ Improve description
 DESIGN ELEMENTS OF HOMEPAGE
UI/UX/Wireframe Design
➤ Visually communicating to customers
➤ Tells an appealing story about the brand and their page
➤ Engage customers to be part of the journey…
➤ Might Leverage user generated content
Backend
➤ Utilise best habits of SEM into site development
(avoid broken links, make webpage crawler friendly, ensure
proper documentation, maintain at least 10% content:code etc)
 DESIGN SPRINTS
Sprint 0

➤ User feedback
➤ User journey mapping
➤ Red route prioritisation
Design & Sketch
➤ Existing metrics (KPI) >> Wireframe
➤ Competitive analysis Basic Prototypes
➤ Benchmark samples
➤ Review brand guidelines
 SAMPLE SPRINT 0

Redesign Development KPI Design & Sketch

Desktop website
➤ Reduce website area - 3 screen size
➤ Improve speed score > 80%
➤ Reduce images < 28
➤ Cleanup redundant information
Minimum Viable Page
 SAMPLE SPRINT 1

Evaluate updates from Updated development KPI

previous sprint Desktop website
➤ Speed ➤ Restructure the menu
➤ Broken links ➤ Optimise categorisation
➤ A/B or impact customer
feedback
Design & Sketch
Measure performance
➤ Total site visits
➤ Bounce rate
➤ Time spent
Minimum Viable Page
 SOURCES
➤ alexa.com for site metrics on oldnavy.ca and gapcanada.ca
➤ varvy.com sitechecker.pro & google analyser for technical
performance metrics
➤ Images from cirkr.com, medium.com, strategyzer.com and
Google
➤ Factsheet from CIRA & Google about online consumers
➤ References taken from zara.com, Gap, Banana Republic,
joefresh.com, Tommy Hilfiger, Valentino, Aether, H&M,
saksfifthavenue.com
➤ Product Management Handbook by Linda Gorchells
Thank You!