WRANGLER, PACKAGE 01 - HOMEPAGE 01, 17/01/2014

(1)

WRANGLER, PACKAGE 01 - HOMEPAGE 01, 17/01/2014

CONTENTS

1) Introduction 2) User Journeys

3) Blending Brand Experience and Direct Shopping content 4) Responsive Breakpoints

5) Wireframe - Overview 6) Wireframe - Hyperlink 7) Design - Pattern Library 8) Design - Fonts

9) Design - Initial mockups 10) Next Steps

(2)

INTRODUCTION

HOMEPAGE

This document outlines our response to WRANGLER - Package 01 - Homepage - V.1.2.pdf supplied by HNT on 08/01/2014.

Firstly, 2 User Journeys were mapped out to ensure the homepage facilitated these. Wireframes are included based on the contents of the Functional Concept Document, for both desktop and mobile.

We have also begun to develop the Design Pattern Libraries following consultation with each brands Marketing department, to ensure they are inline with their offline styling in order to present a consistent brand message.

These Pattern Libraries have also been applied to the homepage wireframes to begin creating a style overview for the site.

(3)

USER JOURNEYS

USER JOURNEYS

“The regular Wrangler customer is shopping on demand; thereby the way to the product (search, entrypages, filters) should be as quick and comfortable as possible. The look-and-feel of the homepage should be simple and clearly structured. It has to be limited to the most important features as well. Nevertheless the main goal of the website is to deliver the full brand experience through storytelling.”

WRANGLER - Package 01 - Homepage - V.1.2.pdf

Key user journey should be Home > Product > Apps

Note from Design Workshop, 03/12/2013

We need to ensure that the structure of the homepage allows the brand to integrate this in such a way it can provide 2 possible user journeys.

• The user who quickly and easily wants to purchase product

• The user who wants to find out more about the product features through apps

The homepage needs to strike a balance between these 2 user flows.

HOMEPAGE

BASKET

MENW OMEN

PRODUCT POPUP

PRODUCT POPUP PRODUCT POPUP

PRODUCT LISTING PAGE DENIM PERFORMANCE TEXAS 25 DENIMLIVING PRODUCT DETAIL PAGE

(4)

SITEMAP OVERVIEW

MIXING BRAND AND SHOP CONTENT ACROSS THE SITE

Upon request, we have applied this schematic across the whole site to illustrate how Brand and Shop content seamlessly fit together to create an integrated user experience. Note: sitemap simplified to show content areas. Checkout funnel, Account etc all remain unchanged.

HOMEPAGE

BASKET

OUTLET

(WHEN LIVE) FIT GUIDE INSIDE WRANGLER

BLOG POST

PRODUCT POPUP

FIT - MEN FIT - WOMEN PRODUCT LISTING PAGE DENIM PERFORMANCE TEXAS 25 LIVINGDENIM PRODUCT DETAIL PAGE SEARCH RESULTS NO RESULTS

(5)

RESPONSIVE BREAKPOINTS

We will define the responsive breakpoints once the designs are approved - we always prefer to let the design define the breakpoint, rather than a specific devices resolution.

(6)

WIREFRAMES

WIREFRAME - DESKTOP

We have taken the Brand Experience content discussed with Wrangler along with the input from Hermes in the Functional Concept Document to create a Wireframe for the homepage.

The coloured dots outline the user journey available from each component following on from the plan shared on page 3.

It will have a max width of around 1180px so the page does not become too wide. The main teaser area has a carousel functionality and can be used to promote any relevant information. The main teaser area also has the ability to have a product layer functionality applied to it. In this case “Get the look” which will open a pop up window featuring linked product items.

The content below the main teaser is based on a 3 column grid with large areas given for promotional image placement. White space throughout the site allows

the site to breath and gives order to content.

This wireframe will form the basis of the final design once approved.

CLICK HERE TO VIEW WIREFRAME ONLINE

Alternatively, copy this link

(7)

WIREFRAMES

WIREFRAME - MOBILE

The Wrangler Homepage is very clear which leads very clearly into a simple and effective responsive layout.

The coloured dots outline the user journey available from each component following on from the plan shared on page 3.

At this moment we do not advise including any swipe functionality included on mobiles. With the release of Apple’s iOS7 using left/right swipe functionality we do not want to risk losing any users accidentally swiping out of the site. iPhone is the dominant mobile device used by Lee users according to the existing site analytics.

NOTE: This wireframe has been created to fit an iPhone 5’s width (320px x 568px) but the final site will automatically adjust it’s width to fill the device. Please be aware of this if you are previewing on a Device with a wider screen.

CLICK HERE TO VIEW WIREFRAME ONLINE

Alternatively, copy this link

(8)

DESIGN - PATTERN LIBRARY

PATTERN LIBRARY

To assist the design process going forward we have begun developing a Pattern Library which will inform the design throughout the site and ensure set rules are followed throughout.

This has been developed from the SS14 designs, and follows the offline communication as close as possible.

This Pattern Library covers

• Fonts (see next page for more information) • Text sizes

• Link styling • Button styling • Rollover states

The Pattern Library will be finalised to include all styles needed across the site, across both desktop and mobile, and will be supplied to HNT once complete.

(9)

DESIGN - PATTERN LIBRARY

(10)

DESIGN - FONTS

DESIGN - FONTS

The fonts used throughout the Wrangler Pattern Library are as follows.

All have web licenses and can embedded using the CSS @font-face command.

NEWS GOTHIC

News Gothic is the font being used by Wrangler in it’s offline communications, so should be brought through into the designs.

A license can be bought by HNT from MyFonts http://www.myfonts.com/fonts/paratype/news-gothic/

News Gothic contains Greek and Cyrillic characters, so will provide a wide range of compatibility over many locations.

Arial

Arial is a system font used across almost all platforms.

(11)

DESIGN - INITIAL DESIGNS

INITIAL DESIGNS

The pattern library has been applied to the Wireframe to give a visual overview of the sites style.

As with the Pattern Library, we have taken our SS14 designs to provide a consistent evolution into FW14.

NOTE: Be aware that this is purely for style approval and not functional feedback. Please refer to the wireframe for functionality and features.

(12)

DESIGN - INITIAL DESIGNS

INITIAL DESIGNS

CLICK HERE TO VIEW DESIGN ONLINE

Alternatively, copy this link http://wranglerfw14.retrofuzz.com/01_homepage.html

Carrier

(13)

DESIGN - INITIAL DESIGNS

INITIAL DESIGNS

(14)

DESIGN - INITIAL DESIGNS

INITIAL DESIGNS

(15)

We look forward to your feedback on the points in this document.

There are several key action points we need answering in response to this document.

RF & HNT

Arrange call to discuss responsive breakpoints on Monday 19/01

WRANGLER

Feedback on overall graphic style Feedback on fonts used

HNT

Technical feedback on fonts used

Technical feedback on a fixed header from an eCommerce perspective

ALL PARTIES

Feedback on content balance between Brand and Product Feedback on Wireframe layouts

(16)

© 2013. IDEAS, PROPOSALS & SUGGESTIONS IN THIS DOCUMENT BELONG TO RETROFUZZ LTD. ALL RIGHTS RESERVED. AUTHOR Matt Kendall matt.kendall@retrofuzz.com +44 (0) 161 235 5350 RetroFuzz 20 Dale Street Manchester M1 1EZ retrofuzz.com twitter.com/retrofuzz facebook.com/retrofuzz

WRANGLER, PACKAGE 01 - HOMEPAGE 01, 17/01/2014