1. OVERVIEW
TESCO F&F
Fashion eCommerce
Tesco's fashion label "Tesco F&F" selected SapientNitro to develop a strategic e-commerce platform for its multi-currency and multi-lingual international business. In the initial phases of the programme our challenge was to create a responsive design solution for multi-device access for delivery into Irish, Polish and UK markets.
2. PROJECT DETAILS
The Project
Client: Tesco F&F
Sector: Fashion Retail
Project: Re-platforming and redesign for internation e-commerce
Dates: 2013-2014
Employer: SapientNitro
Objectives
Tesco aimed to build a new platform which would allow its F&F clothing retail business to scale globally to 80+ countries and enable customers to transact with local language, local currency and local payment, unified by a global F&F portal.
Problems
Tesco F&F were losing ground to competitors like ASOS who were generating 65% of sales from international business. F&F was limited to selling in Sterling and to only accepting UK payments.
Results
(1) Design and development completed in time for deployment to initial target markets: Ireland, Poland, UK
(2) Features incorporated for delivery, returns, clubcard loyalty, payments
Challenges
(1) Design and delivery to a tight schedule with a large team onshore and offshore
(2) Complexities of transactional customer interactions involving basket, delivery options, checkout, returns
(3) responsive design across desktop, tablet and mobile formats
My Role & The Team
My role: Lead Information Architect
Team: Project Managers, Business Analysts, Creative Directors, Information Architects, Visual Designers, Front-end Developers, Solution Architects
3. APPROACH
Research
A research phase was conducted to discover relevant global competitors, industry-wide best practices, the current F&F ecosystem and to define a phased approach to a multichannel platform.
F&F Home
Product Listing Page
Product Detail Page
4. WIREFRAME DESIGNS
Product Listing
Designs for product listing pages included filtering (colours, sizes, brand, price ranges, ratings, reviews), swatch options, promotions and quick view.
WIREFRAME DESIGNS
Product Detail
Desktop
Tablet Portait
Mobile
Product detail page designs covered single and multi garment products, size, colour and quantity selection, full-screen view, video and product carousels, delivery, collection and return details.
Desktop
Tablet Portait
Mobile
WIREFRAME DESIGNS
Shopping Bag
The Shopping Bag features included product selections, quantities, promo codes, discounts, delivery information, loyalty points.
Desktop
Tablet Portait
Mobile
WIREFRAME DESIGNS
Checkout
Checkout designs explored both multi-page and single-page formats. Checkout features included customer and guest flows, delivery (address look-up, delivery options for click & collect or to address), postage tiers, card payment options, order review and order confirmation.
Desktop
Tablet Portait
Mobile
5. BRANDED DESIGNS
Product Listing
Wireframe designs for Product Listings were developed into branded executions by the visual design team.
BRANDED DESIGNS
Product Details
Wireframe designs for Product Details were developed into branded executions by the visual design team.
BRANDED DESIGNS
Shopping Bag
Wireframe designs for Shopping Bag and Checkout were developed into branded executions by the visual design team.
