Skip to main content

Mulberry

I was working at Mulberry for rolling 3 month contracts for each main chunk of tasks. The first task was to set up and style the main Mulberry components in Amplience so the content editors could easily update products, text, product images, videos and pricing ranges. As I was new to Amplience it was a very challenging first few weeks, but really enjoyable getting stuck into a new experience. The last task was to re-vamp the global site and components. Outside of Amplience the core of the site was within Hybris, which I’d worked with before. Fantastic place to work, with the added bonus of being a 20-minute walk from home when I lived in Central London.

Visit website
  • CSS (SCSS/SASS) · HTML · Responsive Design · Media Compression & Optimization · Web Performance Optimization · Testing & Debugging · UI/ UX Design Principles · JSON Data · Handlebars Templates · jQuery · JavaScript · Amplience CMS · Bootstrap CSS · CMS Content Editing & Development · Figma · Design Patterns & Principles
  • Frontend Development
  • Global Bug Fixing
  • Amplience CMS Integration
  • Localized Fonts
  • Seasonal Microsites
Mulberry Various Projects Collage
A dramatic ocean scene with lava forming a new land mass.

Key Responsibilities

Set up and integrate all current + new Amplience components

Create new micro site + live updates for the Eccentric Sensibility Korea Fashion Show

Re-styled the pre-Amplience site: Wish list, Global Header, Secondary Header, Videos and PLP

Overhauled the localized fonts: Latin vs. Asian font rendering

Regular meetings with various teams: design, PM, business analysts, client, third-party design agency. The main focus was clarification, estimates, expectations and workloads

Key Achievements

Learning Amplience at pace

Training developers and marketing team in Amplience content editing

Setup and integrate new Amplience CMS Dynamic Content

As Mulberry wanted to update their content via Amplience I set up the Amplience CMS Dynamic Content. I created the styled and functional components for the Mulberry content and marketing team so they could edit content live via Amplience. This included various image layouts, text layouts, videos, carousels, grids, heroes and banners.

The Challenge

The main challenges were Amplience caching issues and numerous dynamic files requiring updates and tweaks in different file locations. As all the files were stored in various locations, any code errors or caching required constant testing and strict code writing to prevent errors.

Proudest Of

Learning new skills and working within a totally new environment for me. The components came out looking great and working perfectly.

Mulberry New Product Listing Page Example
Mulberry New Product Page Showing Alexa Bag
A dramatic ocean scene with lava forming a new land mass.

Microsite: Pre-production and live updates for the Eccentric Sensibility Korea fashion show

The annual fashion show was hosted in Korea this year. Initially, my main task was to add content and style to the base micro-site. Then during the show I would add content and bug fix while the show was running.

The Challenge

The main challenge was the live updating content, and bug fixes as the fashion show was running. Any errors in the code and the whole page would be down during the event. It made for a challenging but fun three weeks.

Proudest Of

I was most proud that the whole process ran smoothly, with no major bugs or errors. Most importantly, the page never went down.

Mulberry Annual Eccentric Sensibility Korea Fashion Show Gallery Page
Mulberry Annual Eccentric Sensibility Korea Fashion Show Landing Page

Styling global components & Localised fonts for China/ Korea

Another task for Mulberry was a total revamp of the look and feel of the global site, to make it more consistent with branding guidelines. These were the components I worked on: Wishlist, Global Header Search, Secondary Header, Video, Product Listing Page. I also added localised fonts for their new China and Korea sites, which turned out to be surprisingly challenging.

The Challenge

The most challenging aspect of these tasks was numerous changes to the designs, crashing local git environments. The China/ Korean localised fonts proved to be a bit trickier than expected as both localizations had to use specific Asian fonts, and the Mulberry font (both using different character encoding). A kind of hybrid of Latin and Asian fonts. My solution was to target specific Unicode ranges within the CSS. Time-consuming but a decent solution to the problem.

Proudest Of

The fonts localisation for China & Korea being the most challenging, was also the most rewarding. A simple, but time-consuming solution and the problem was solved.

Mulberry New Product Page Showing Alexa Bag Details
Mulberry Code Example Showing Loading Localized Fonts For China and Korea Only
Photo of Tyrona National Park - Shot By Rowley Macklin