Olivier.uk

Boxing Trainer London


Consultation

The client, and experienced and professional personal trainer, was using a stock WordPress theme, having had relationships with a designer working remotely fall through.

Through our meetings, we developed a set of goals and structure for the site, condensing the number of pages from 9 to 5 to reduce visitor bounce rates.

I also helped the client select a modern domain, boxingtrainer.london instead of boxingtrainerlondon.com, and setup new hosting and email as an extension to the original project.

Thought the project I was happy to help select and optimise the clients photos, as well as assisting with producing copy and curating the content.

Development

Once we had clear branding goals, I then found a premium theme to base the site on. This allowed us to achieve a richly featured site with minimal development costs.

The theme uses Visual Composer, a powerful drag-and-drop layout system. This was important since the client wanted to ability to easily customise the content without my assistance, and I was able to save many of the layouts I built as templates for the client to re-use later.

Unfortunately, software like Visual Composer ends up forcing a designer to choose whether to optimise for desktop or mobile, since the built in options only go so far. Once the core layout and content was established, and optimised for desktop devices, I then augmented the theme with custom CSS and JS- this allowed us to refine the site experience across screen sizes.

Brickly


Design

The site (this site) was designed as a portfolio of my work, so it’s very important to me that it is extremely creative and clear to use. Various mood-boards and UX designs were trialled.

Certain browser animations can be complex, fast, and smooth, and the design principle was to engage visitors through immediate and fulfilling illustrative animations. These would not be frivolous, but serve the role of a UI while create a clear UX pathway.

Development

By leveraging SASS, styling which would previously have required javascript can be accomplished easily with CSS. Furthermore, package management and a modern built environment allow better automatic support of older browsers, and quicker prototyping.

The site uses many animations which must be synchronised and sometimes reversed, for which I used the Anime-JS library. Since page transitions were also largely taken over by javascript, much of the site effectively became an state dependent app. Fortunately the power of ECMAScript 6 (compiled into vanilla JS though webpack) meant that the project could move from a functional to object oriented paradigm with appropriate encapsulation, abstraction and inheritance.

I Talk to Strangers


The client

The client was a entrepreneur responsible for starting and maintaining various social change projects, including I Talk To Strangers which became Speak Freely. A small site was needed to sell the badges which facilitate this campaign, which would allow the orders to be fulfilled automatically by the badge manufacturers.

Design

Having worked with this client in the past, I knew a tactile sense would be needed. However, I am no fan of skeuomorphic design. Instead I used a proprietary font I had created on a pervious project, which was produced from scanning an analogue typewriter, the layout keeping all information and CTA in a minimal single column, embellished with reactive imagery.

Once it was clear that a payment gateway would be needed, and the project was on a tight deadline, I opted to use the flexible e-commerce platform WooCommerce. The software is easily customisable in house avoiding the need for expensive 3rd party dependencies on such a small project.

Development

Development required a trade off between how robust the customisations to WooCommerce were, and how much time I had been given to work on this project. While sacrificing multi-lingual features, the site remains extremely accessible for all devices, including screen readers.

In order to keep page load times down given the image-heavy layouts, I kept all imagery with a restricted palette, allowing the use space-saving of 16-bit PNG images. And of course, all the content is served up using the latest in responsive media handling.

Find Enlight


The Client

The client was a zine producer who wanted an online outlet for their weekly collections of media. The requirement was delightfully difficult- my client had virtually no understanding of modern UX, and seemed to dislike the homogeneity which most modern sites adhere to.

Design

Full page video and animation enabled scrolling of the current collection greets the visitor, with simple archive navigation. The current UX reflects several drafts, including a working mockup site.

While underway, the client added various requirements- the site now had to be comment enabled, with permalinks for individual items and post descriptions. Not an usual request, but difficult to integrate late in the day. My solution was to have a sliding area to the right which contained the individual item’s meta.

Development

We looked at various platforms, but came back to WordPress since it could handle the custom taxonomies and complex queries needed to generate our content. These taxonomies formed the base of the project, since we needed to create collections of individual posts which themselves would have any of the attributes of a post itself. Once this structure was in place, the rest of the development continued smoothly.

Since the project uses Roots/Trellis to manage deployment, updates can be easily pushed from development machines without the need for myself as a dev logging into the production server. This has made applying new patches to the theme very easy.