Your Billabong Concept

Your Billabong Concept

In early 2018 I saw an opportunity for an exploratory UI / UX and branding project in what is an already is a growing use of online pre-purchase customisation already undertaken by the bigger brands such as Nike and Apple and smaller brands starting to follow suit.
I chose Billabongs brand to develop this project conceptually with as besides from being a big fan of the surfing myself in general, their website was outdated so there was little contraints or ideals, they already produced lines of professional or high end products that I could see people would spend money on. Lastly it's famous slogans 'life's better in Boardshorts' and 'Bikini Kinda Life' offered a clear branding / campaign opportunity as in a way of spin off, with the slogans morphing to become 'Life's better in Your Boardshorts' and 'Your Bikini Kinda Life' ultimately naming the new experience 'Yours' or ‘Your Billabong’.

Billabong at time of writing has since released a personalising shopping experience to their wetsuits but I chose to focus on Boardshort for Mena and Womens Bikinis as they both offer greater choice of adaptation with colours and patterns for the consumer. I also think as it's the first steps in to a new buying experience and product line it will likely offer greater launchpad / exposure as a starting point with the higher output of garments and the range would also be better recognised when worn by sponsored riders / surfers creating their own unique designs and names, somewhat in the same notion as football shirt/ jersey.

The different components of the branding having been selected do create links to the surfing culture and designable nature of being able create your own board shorts. The Ink in water ties in the creativity to water and thus a nod to surfing, it could also be adapted to whatever colour is on trend at the time,I've just used pink and blue to distinguish between Mens and Womens. The script font gives that signature / own had feel and helps distinguish it from the other pages on the site whilst also providing a stylised font used on the actual font for people to add their name if they wish.

Services Provided

Digital Design:
Vector Graphics / Graphics / Layout / UI

Identity:
Conceptualisation / System 

Animation:
Interactions

Credits

Ink in water clip by CyberWebFX

‘Yours' script font is Tuesday night by Font Forestry

Surf and clothing images © Billabong sourced from Billabong.com.au

Overview

On starting this project in early 2018 Billabong.com.au looked in a desperate need of updating, it wasn’t that the site was fundamentally bad, just outdated and so lacked some of the more recent findings and improvements in UX / UI…

Previous & Current Site (by Billabong)

Image

On starting this concept project Billabong had the site above, towards finishing they released a newly designed site, rolling it out first on their US region and then on their Australian. They have also introduced wetsuit customisation option followed by most recently their boardshorts, although just on their US side. My original UX / UI observations and improvements were therefore obsolete and so I have decided update them using their latest site.

On starting this concept project Billabong had the site above, towards finishing they released a newly designed site, rolling it out first on their US region and then on their Australian. They have also introduced wetsuit customisation option followed by most recently their boardshorts, although just on their US side. My original UX / UI observations and improvements were therefore obsolete and so I have decided update them using their latest site.

Image

UX Analysis

Despite my design eventually evolving to a redesign of most of the site in this UX anaysis I’ve primarily focussed customisation page as it’s the main and initial focus of this project.

Recording of Current User Journey

Landing → Product Page (US)

Desktop

Mobile

Product Page - Interaction Analysis

Image

Part Menu

Currently to select a new part you have to press ‘see all’ or use the ‘next’ and ‘prev’ buttons but to me it feels like you should just press the center of the part button and it should expand out to a full list leaving the circle as the button for editing that particular part, you could also remove the ‘no colour selected’ text and have an indicator in the circle that it is currently no edit made either a zero or slightly faded. Having the full screen list active covering the content below isn’t ideal but is ok if it’s the secondary option with a quciker primary option available like scroll through whilst remaining in the same view or selecting the part on the product itself which they have enabled on desktop but oddly not on mobile. Alternatively the parts list feature could be removed entirely and a small scrolling in the place showing two and a half parts having the currently selected item as highlighted. 

Product View & Relating Text

I think the clarity of what is interactive and what is just content has become lost, the ‘back’ and ‘next’ buttons need to be positioned below, it’s odd that throughout most of the site that the title or text preceeds the link and then all of a sudden it’s switched. There is no indication that it is a button at all, a simple arrow icon would suffice, same is true with the see all link / button there is no indicator that it is a link, if it’s need at all which I’ll discuss in the next point. I think the parts or edit list in genreal is fine on the desktop layout although taking up an unecessary amount of space as mentioned in the previous points. 

Image

Colour / Pattern Selection

The circles or views of each colour or pattern is too small for my liking, particularly when picking the patterns.

Currently the steps each time to edit a part is: 

  1.  Click ‘see all’.
  2. Select the part and wait for a zoomed / edit view state change to load. 
  3. Select a colour or pattern. 
  4. Cross off then select a new part or use the ‘next’ or ‘prev’ buttons to cycle through then go from step 2-4 again. 

This is too many number of steps / make the process too slow, one simple fix would be to have the ‘next’ and ‘prev’ buttons in with the edit view so you can just scroll through parts so once it’s loaded also including the ability to touch or click a part like found on the desktop site.

Individual Elements - Anaysis

Loader

Loaders are usually a given when there is browser or server intensive content being displayed, Billabong have used a really nice animation but unforuntately due to being static in the final frames of the animation and then just dissapearing and repeating itself you may be tempted to think it’s crashed. A simple fix would be to have the loader run in conjunction with the load progress, or alternatively broaden the top portion of the black box to allow for a percentage overlay.
Image

Header

This is a little bit too large for my liking, I like the negative spacing in general particularly around the logo and primary navigation text but the space around the secondary nav (Custom, New Arrivals) paired with the advertising top bar has pushed a lot of content below the fold. The header does dissappear on scroll but even so the product view and part selectors fit uncomfortably in the browser space or not at all on 1024px. One fix could be the removal of the top bar and collapcing of the two central bars aka the Men / Women and the Sign in to a burger icon as particularly in the case of the gender slection you are likely to back track and change once decided. On Mobile the menu is reduced significantly, the product view should be edge to edge with the interactive content and hierachy clearer.

Image

Product View & Relating Text

The product view, associated text and part selectors columns are a 50% split, I feel this is a mistake and the product view should be at least 60% with associated content being 40% this results in the primary feature being the view and elminates that uncomfortable feeling of miss alignment or left aligned that is currently felt. This is likely exacerbated in this pages case by the dominant title on the off-white backgrounds and the white borders on the content elements attracting greater eye attention. On smaller devices just make the product view full screen, I can’t see why it needs a large boarder. 

Research References

Loaders - https://www.nngroup.com/articles/progress-indicators/
Mobile menu space - https://www.nngroup.com/articles/mobile-navigation-patterns/
Content Hierarchy - https://www.nngroup.com/articles/flat-vs-deep-hierarchy/
Above the fold - https://www.nngroup.com/articles/scrolling-and-attention/
Page Anchors / In Page Navigation -
https://www.nngroup.com/articles/in-page-links/
https://uxdesign.cc/porting-long-scroll-content-to-a-small-screen-a-different-approach-to-sticky-in-page-navigation-ca94f15262fe
UX best practices website header -
https://uxplanet.org/best-practices-for-website-header-design-e0d55bf5f1e2
https://www.toptal.com/designers/ux/top-5-common-ux-mistakes
Content Hierarchy - https://www.nngroup.com/articles/layer-cake-pattern-scanning/

Design

Image
Image
Image
Image
Image
Image
Image

Bikini Desktop Experience

Image

Full Experience

Image

Product Listings Page

Image
Image
Image

Boardshorts Desktop Experience

Image

Full Experience

Image
Image

Global Landing

Image
Image