SITE TEMPLATE & HOMEPAGE CONCEPT B y S t ua rt M cA da m
CONTENTS Introduction - 3 Aims - 4 Research - 6-8 Navigation - Header - 9 Navigation - Footer - 10 Homepage - 11-15 Hover States - 16 Mobile & Tablet - 17-20
2
INTRODUCTION What is this? - This presentation outlines my vision for the redesign of the Rapha homepage and site template. Who are you? - Stuart McAdam - The web design intern. Why are you sending me this? - To get these designs I’ve been working on out in the open, obtain some critical feedback and hopefully start a discussion about the future of Rapha’s web presence.
3
AIMS My key aims for this concept were to; • Streamline navigation across all devices - with a special focus on the footer • Focus on the wealth of beautiful imagery, which in my opinion is one of, if not the strongest aspect of the Rapha brand • Give the bespoke Rapha content (features, blogs and events) and Rapha Travel a stronger presence • Incorporate social media - in particular Instagram • Ensure the design translates well across all devices • Maintain the current brand guidelines and ensure a relatively seamless transition for current users
4
WARNING! THIS DOCUMENT IS SOMEWHAT TEXT HEAVY, SKIP TO PAGE 10 IF YOU JUST WANT TO SEE DESIGNS! (I’d prefer it if you read my analysis though)
5
RESEARCH As an aspiring web designer I’m constantly seeking out intriguing new websites that really push the boundaries of what’s possible online. I won’t bore you too much but here’s just a few examples of people who I think are getting it right, all of which have in some way influenced the design showcased later in this presentation. (Click the images to take a look at the sites in full)
6
URBAN INDUSTRY
TEAUGE
Urban Industry is possibly the largest online street-wear retailer in the UK born from what was originally just a little street-wear boutique in Eastbourne. The homepage consists of a large, full width carousel, tiled layout showcasing content, new products and brand features, there is also an interesting ‘Trending’ feed which shows popular products being purchased in real time by other customers.
Teauge is a pioneering design consultancy that has worked on some of the most innovative projects for some of the biggest companies in the world, in a plethora of industries, they even lay claim to the title of ‘The original design consultancy’.
The navigation features a fixed header which contains links to new products, brands, departments, sale and ‘Journal’ which links to the sites blog that houses a wealth of streetwear related content. To the right of the site menu is a search function and housed above in a contrasting div is a shopping cart, member login, locale/currency selector and a small line of text detailing current offers. The footer houses social media and newsletter calls to action as well as links to customer service and important company related information.
In terms of content and visual beauty this is a site anyone with an eye for design will love, it features an incredibly clean Masonry style layout which utilizes hover states to add titles and descriptions to the high quality imagery used, giving a short but relevant background to the linked content. It also benefits from some smooth transitions and interactive elements, particularly the landing transition. It is however let down by the overall navigation, which can at first be rather cryptic.
7
FLATSPOT
THE HUNDREDS
Flatspot is a beautifully simple e-commerce site focused on offering the latest products from some of the biggest street-wear brands around. The key features of the homepage include a focus on high quality imagery, featured/best selling products and blog content.
The Hundreds are a global street-wear brand that puts content front and centre - if you landed on this homepage by accident you could be forgiven for thinking it was just a blog, it is however much, much more.
The site template features a mobile first style header which is fixed at the top of the page, included in this is a menu icon, a variety of links that enable the user to quickly dissect the products offered (latest, brands, sale and so on) and a link to the ‘Journal’ which houses the brands content (features and blog posts). Located at the far right of the header nav is also a search function and the shopping basket. The footer contains a social media bank and newsletter sign up, as well as dryer aspects of the business such as T&C’s, FAQ’s, shipping, returns and even currency (£,$,€).
The homepage uses a striking Masonry layout to showcase the brands hugely diverse range of content, this highly visual style is accompanied by effective hover states which expand to give short descriptions of the content the user is currently interacting with. The site navigation stems purely from a fixed header (infinite scroll means a footer is redundant) and like many modern sites almost all of the navigation is hidden via a menu icon in the top left of the header. On the right side of the header is a huge link to the brands shop as well as a search function.
8
Site menu
Locales
Shopping cart
Header nav
Search
Account/settings
NAVIGATION - HEADER Using the current header and one of Ben’s recent mocks as a jump off point I aimed to balance and streamline the header navigation to ensure it can work well across all devices. My starting point for this was considering how the header would work on the smallest of devices, mobile phones, first I asked myself, what are the most important aspects of the navigation? And what is the current visual language used to represent them? After doing some research on other brands web and e-commerce offerings and thinking from a users point of view I decided that a industry standard menu icon and shopping cart icon would be the most appropriate focal points of a typical mobile header with one icon represented on each side.
Finding space for other important features such as the locales, account settings and a search function without cluttering the header is difficult for mobile, the simplest but also most effective solution is to incorporate these features into the menu section and introduce a dedicated icon for each on larger versions of the site (tablet & desktop). There is obvious potential for a more responsive and interactive header which would shrink and remain at the top on the screen, pushing elements such as the locales, search and account settings into the site menu section, much like the mobile version.
9
Newsletter sign-up
Social media
Trade Gothic logotype
NAVIGATION - FOOTER One of my first thoughts after inspecting the current site was that the footer desperately needed to be simplified and balanced. The simplest way to do this was the removal of all the product categories, this left a much more manageable and concise overview of parts of the site which are not always a customers first point of call. With the responsive header mentioned previously there would be no need to include any product category links, and other large chunks of the navigation which currently reside
in the footer - In short let the header do the E-commerce and content work and use the footer for information relating to the brand itself (Customer service, Guarantees and so on). A focus is also maintained on the newsletter sign up and social media calls to action, there is also a nice little touch at the very bottom, with the introduction of the Trade Gothic logotype which has been incorporated into the copyright note.
10
HOMEPAGE As stated in my aims I really wanted to play to the strengths of the brand and put the beautiful Rapha imagery and content front and centre - Big, bold, beautiful photos, showcasing the latest product features and blog posts. Much like the current site the way to achieve this is lots of carousels and less padding between elements. The introduction of hover states and overlays for content descriptions makes this all the more possible, with the later (static versions of hover states) being more suited to mobile devices. There is also the inclusion of travel and events, both are extremely important components of the Rapha brand and deserve a more prominent focus on the homepage. Featured product carousel - intended to focus on the beautiful location imagery rather than the product imagery that is currently displayed in the 4 featured tiles, this should also reduce the need to create any sort of product comp, thus saving time. Instagram - given Rapha’s wealth of beautiful imagery and success on Instagram (over multiple accounts for different locales) it makes sense to capitalize on this by making it a key fixture of the homepage, possibly linking Instagram and Rapha locales to provide for a more tailored experience for our customers around the world, particularly in Asia.
A rough wireframe from the development stages
11
HEADER CAROUSEL Rapha’s beautiful imagery should be the first thing a user sees, big, bold and beautiful - almost fullscreen.
FEATURES Putting Rapha’s content front and centre - focus on driving traffic to the beautifully crafted content and features created by the web team.
12
LATEST BLOG POSTS Once again giving more prominence to Rapha’s content, in particular blog posts, and not just the one!
PRODUCT CAROUSEL Just like the header carousel but with a pure focus on new/featured products - intended to replace the current featured tiles and remove the need to create comps with product images.
13
INSTAGRAM As the saying goes ‘A picture is worth a thousand words’ - Rapha’s strongest area of social media which really plays to the strengths of the brand - we pay people to look after the account/s for Christ sake, give it the space it deserves!
EVENTS A dedicated place to push upcoming Rapha events (Festive 500, M2L) - the brand spends a lot of time and money creating these awesome rides/journeys/challenges so it makes sense to allocate space on the homepage to give the events more exposure and hopefully increase participation.
14
TRAVEL A substantial part of the brand which supports the luxury label and provides a sufficient/large amount of revenue - the current homepage gives no indication to this service apart from the site menu and odd carousel feature - it deserves more and should be easy to implement given its similarities to the features of the current travel page.
15
HOVER STATES With such a image heavy design this is incredibly important, the user has to know what they are interacting with and in some cases that they can actually interact with it, hover states make this experience a lot more interactive and help engage the user in the content provided. This tends only to apply to desktop browsing rather than mobile devices so we need to cater for this eventuality, the simplest solution being keeping the hover state active all of the time. The possibilities are almost endless here and can really leave a user impressed and more importantly engaged in the site/ content, here’s a cool site dedicated to them - hoverstat.es.
16
MOBILE & TABLET Given that over 50% of our site visits come from mobile devices it is important to ensure the site template works seamlessly across them all, especially with regards to navigation, usability and readability. • Navigation - how the navigation responds to different devices is key - it is important that the design is intuitive and easily understandable across all devices. • Legibility - speaks for itself, copy must be sized appropriately for the device. • Usability - in particular touch-screens - links and icons must be big enough to interact with (touch/click) if not the site is useless, the user should not be struggling to navigate the site due to small links and icons and should never be forced to zoom in on a page to interact with a link.
17
IPAD - PORTRAIT
IPAD - LANDSCAPE
IPHONE
18
19
20
THANKS! Thanks for taking the time to view this presentation, any feedback would be greatly appreciated (I’m sadly due to leave on the 20th of April so the sooner the better). If you have any questions feel free to email me at stuart.mcadam@rapha.cc or just come and find me in team web!
21