Your browser doesn't support some of the latest features used to build this site. For the best experience you might want to look at upgrading your browser.

Skip to main content

Westward Leaning

Founded in 2012, Westward Leaning has grown to become one of the world’s leading independent sunglasses brands. Their website redesign has a very clean minimal look to help put the focus on their products and reinforce the high-end look they’re going for.

Role:
Front-end development
Job:
Freelance
Type:
Ecommerce site

My involvement in the project meant working on a pattern library (built using Grunt, HTML, SASS and jQuery) – that is independent of the live site. The front-end build was done by me and Luke Tongue (another front-end developer) – I was in charge of building the product listing and product detail templates along with adding some animations to specific components. In doing so the pattern library included:

0 Templates
0 Components
0 Component variations

Style guide

In order to keep everything consistent as the project grows, we put a style guide together. This involves standardising key styles in the designs, such as colour, typography, icons, buttons and form elements.

Colours

Primary
Black
Grey Extra Dark
Grey Dark
Grey
Grey Light
Error Dark
Error Light
Success Dark
Success Light

Typography

Bold font

Bold condensed font

Regular font

Icons

Bag

Chevron Down

Chevron left

Chevron right

Chevron up

Cross

Edit
Grid 1
Grid 2
Grid 3

Lock

Menu

Minus

Plus

Search

Facebook

Instagram

LinkedIn

Pinterest

Twitter

Vimeo

YouTube

Buttons

Regular
Hover State
Focus State
Regular
Hover State
Focus State

Regular
Hover State
Focus State
Regular
Hover State
Focus State
Default
Hover State
Focus State
Default
Hover State
Focus State

Forms

Default
Focus State
Filled State
Error State

Default

Focus State

Filled State

Error State

Default
Focus State
Filled State
Error State

Default
Focus State

Filled State
Error State

Default
Focus State
Filled State
Error State

Templates

Once the components are built, I then move onto creating page templates. This is important to see how components work responsively together. Here’s a look at some key templates:

Product detail

Components

The product detail template was put together using the following

  • Navbar
  • Mini-basket
  • Product detail
  • Image grid
  • Product carousel
  • Image carousel
  • Footer

Product image carousel

To make the best use of space on mobile, we turned the image gallery into a carousel. This kept important information near the top of the screen (like product details and add to basket button), whilst still putting the focus on the product image – arguably the most important feature for the customer.

Product image carousel (mobile)

Image grid zoom

The image grid was designed to be used on the product detail page but was built to be reusable across pages with different images.

One important feature of the image grid was to re-use the product images above it and just zoom into different parts of the image.

This meant from a content editors perspective they wouldn’t need to upload any more images, the CSS would take care of the heavy lifting. This is also great from a performance perspective as the browsers not having to load any additional images.

Product image grid zoom

Product detail structured data

Standing out in Google search results is vital, so it was a no-brainer to add structured data to the product page.

In doing so, Westward Leaning products get displayed as rich snippets in Google’s image search results, like below:

Product detail structured data (Google search results)

Key animations

Whilst building the components I added some key animations – this was to add a little bit of depth to the UI. It was important to keep the animations subtle to match the look and feel of Westward Leaning.

Logo animation

When building the navbar component we made it fixed to the top of the page – so navigation items would always be in easy reach. As the user scrolls down we also made the navbar slightly thinner and swapped out the logo for the “W\L” variation.

Mini-basket animation

With the mini-basket animation, I added a slight animation delay to the product items so they animated in a little bit later than the container – this was to add a little bit of depth to the UI, but not too much that it became a barrier to the user.

Accessibility

I’ll carry out various levels of accessibility testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Performance

I’ll carry out various levels of performance testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Product listing

Components

The product listing template was put together using the following components:

  • Navbar
  • Mini-basket
  • Product listing
  • Footer

Product filtering

As Westward Leaning didn’t have that many products, they wanted to handle product filtering client side. Each product could be filtered by:

  • Frame type
  • Lens type
  • Colour
  • Collection

To handle filtering I set a data attribute for each filter type to each product. So when a user filtered down the products, I used JavaScript to find each product that matched the filter criteria and hid the rest.

On top of this, I also updated the URL with a query string with the filter criteria, e.g. ?collection=new&filters=atlas%2Cdyad. So when a user clicks through to product and back again they don’t have to re-filter the products again.

Product listing filter drawer (mobile)

Product listing layout size

The product listing also allows the user to change how many items they want to see per row: 1, 2 or 3.

I wanted to add the ability to remember this information between page visits. In this case, a query string wasn’t going to cut it, as the user might leave the site and come back again at which point the information is lost.

Instead, I opted to store this information in local storage, so when the user visited the product listing page, I checked to see if the value had been set in local storage and used this information to set the listing layout.

Product listing filter drawer (desktop)

Filter animation

With the filter drawer animation, I built it to show the filter options first with a delay on the clear and apply button – so the filter options would be seen first. I also added a counter to the apply and open button so the user could see how many filters have been applied.

Accessibility

I’ll carry out various levels of accessibility testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Performance

I’ll carry out various levels of performance testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

I’m available for new front-end development and design work

Get in touch