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

Transcription

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 lookand-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 PRODUCT POPUP PRODUCT POPUP MENW OMEN PRODUCT POPUP TEXAS 25 DENIM PERFORMANCE PRODUCT LISTING PAGE LIVING DENIM PRODUCT DETAIL PAGE BASKET

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 PRODUCT POPUP OUTLET (WHEN LIVE) FIT GUIDE INSIDE WRANGLER SEARCH TEXAS 25 DENIM PERFORMANCE PRODUCT LISTING PAGE LIVING DENIM FIT - MEN FIT - WOMEN BLOG POST RESULTS NO RESULTS PRODUCT DETAIL PAGE BASKET

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. In the first instance, these styles should be approved by the brand.

9 DESIGN - PATTERN LIBRARY PATTERN LIBRARY EXAMPLES

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 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 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. We welcome any input from VF and HT on the technical aspects of fonts used.

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 NOTE: Be aware that this is purely for style approval and not functional feedback. Please refer to the wireframe for functionality and features. CLICK HERE TO VIEW DESIGN ONLINE Alternatively, copy this link Carrier 12:00 PM

13 DESIGN - INITIAL DESIGNS INITIAL DESIGNS NOTE: Be aware that this is purely for style approval and not functional feedback. Please refer to the wireframe for functionality and features. CLICK HERE TO VIEW DESIGN ONLINE Or, copy this link

14 DESIGN - INITIAL DESIGNS INITIAL DESIGNS NOTE: Be aware that this is purely for style approval and not functional feedback. Please refer to the wireframe for functionality and features. CLICK HERE TO VIEW DESIGN ONLINE Or, copy this link

15 NEXT STEPS 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 THANKS AUTHOR Matt Kendall +44 (0) RetroFuzz 20 Dale Street Manchester M1 1EZ retrofuzz.com twitter.com/retrofuzz facebook.com/retrofuzz