ASOS Marketplace Digital Transformation
Replatforming the ASOS Marketplace site to a modern stack, directed by design
I enjoy the challenge of both creative and strategic thinking, solving problems and crafting great experiences.
I've worked across numerous multi-disciplinary teams, and have learnt a lot from the challenges of designing and developing solutions at scale in Britain's best loved retailers.
I've spent the last couple of years creating web applications with React, and over the past year worked with Next.js, Nest.js & friends, and have loved every minute of it.
Finding efficiencies is part of my nature and something I thrive on. I'm continually learning and always interested in keeping up to date with new standards of best practice and seeing how I can apply that to day-to-day work.
Working on the digital transformation of an Australian national retailer.
The initial effort is on decoupling the UI from the existing monolithic application. Next steps include an initial design system setup, upgrading the CMS provider, and a refined shopping journey.
My focus is on helping ensure we build it in a scalable, accessible and resilient manner. All built in TypeScript with Next.js, Nest.js and friends.
I spent 6 months travelling around Europe and across Asia. It was something I had always dreamt of doing and had planned to do for years.
It was fantastic to experience so many different cultures and cuisines and I feel fortunate to have been able to take the time from my career to do so.
The best food arguably was either India, Indonesia or Italy; however my overall favourite country was probably Japan.
Joined the team as a UI lead (contract) on the ASOS Marketplace digital transformation project.
Replatforming the ASOS Marketplace site to a modern stack, directed by design
Brought in to a full backend team, the decision had already been made to use TypeScript.
This was my first time using it entirely and it was quite an interesting experience, given the rest of the team felt more comfortable with typed languages. The project also used NextJS as scaffold for our site; alongside Jest, Cypress, Algolia, Amplience, Azure, Docker and other usual suspects.
Musings on my lessons learnt from a different technical stack
Part of my remit was to also upskill the rest of the team in a frontend knowledge, and to help bridge the gap between design and development.
This meant not only running workshops on how we should architecht our app, but also on fundamentals like accessibility and cross-browser testing.
A distilled overview of inclusive design patterns
I led the creation of the John Lewis & Partners Design System – Mono. This work is not public yet, but I am putting together what I can share, including details on how I approached running workshops to define our Design Principles, how we drive adoption and how we maintain contribution, very soon.
Focusing on reducing time spent across teams creating similar solutions to common problems.
During my time at JL, my main role has been developing UI for the John Lewis website and partner-facing applications, focused on building even better customer experiences. I've worked across many product teams, both contributing to existing apps and writing them from scratch.
I've written both client-side and server-side React apps, and am familiar with the challenges each of them bring. We also have older Java/Handlebars applications which I've had to work in, although we are moving away from this stack. Most recently I've been fortuitous to get stuck in with the infrastructure setup, working more with Docker and Kubernetes.
I adhere to web standards; always ensuring my work is cross-browser compliant, built with best practices and progressive enhancement in mind. I've been fortunate to work in an environment where accessibility was a real focus for the business and sweating the details to ensure all customers had a great experience is something I'll take with me.
As Senior UI Developer I have been the authority on best practice in the UI space for how we design and build web experiences at John Lewis.
Over the years I've also been instrumental in establishing patterns for most frontend concerns including
I have run countless workshops and delivered presentations on nearly all of these topics, and am often sought out to do so for new teams.
An astute testing approach is essential to engineering resilient software and web applications. We advocate TDD and utilise linting tools to reduce errors and improve developer experience. Tests for both quality and style help catch errors at both build-time and runtime, and common configs/practices help ensure some consistency in development across the multiple product teams. We currently favour Jest, Puppeteer, Prettier and ESLint as our basic toolchain. Over the years I've used various libraries including Mocha, Chai, Enzyme, Sinon and JSDom.
We use a mix of Gitlab CI and GoCD for our CI/CD. We favour failing pipelines to help ensure errors are found early and never reach our customers.
I'm proud to have established an ecosystem where we have common and shared resources for styles, components and patterns for all to reference. This has helped during the rapid scaling of teams over the past 18 months, where it's been ever more crucial to ensure consistency, not just for visual atenutiy but for familiarity of customer experience.
Shared resources currently exist as Sketch Libraries and NPM Modules, and are managed through Abstract and Git respectively, both of which I set up.
About 5 months into starting in my role as Senior UI Developer, I championed an assessment on our approach to developing the UI for our web applications. At the time we were 12 months into rebuilding JohnLewis.com, moving from a traditional JSP based application, to a MVC Java powered app, using Handlebars as the templating language for
I'm in the process of providing some insight into how journey developed and what we learnt along the way.
The challenge of changing technology mid way through a rebuild, and how we got on.
In September 2018 John Lewis rebranded as John Lewis & Partners. I managed the UI development strategy for the applications which make up JohnLewis.com, and some internal supporting applications.
This invloved establishing ways of working for all our product teams to enable the development of both the rebranded and live sites, so we could still deliver value throughout.
We used a mix of delivery approaches, broadly using Branch-by-Abstraction to enable multiple builds from Master, and a centralised resource of style resets to align apps agnostic of language. More of this is explained in detail in the post I'm just finishing up, detailing delivering the rebrand.
The John Lewis and partners rebrand was the biggest project I've worked on to date.
During planning a workshop on how we will deliver the rebrand in April 2018, I challenged Product Management that if we didn't use the rebrand as an opportunity to also progress our tech stack we never will.
I managed to get approval, and was given 6 weeks and 4 developers to prove that we could build the new homepage for the rebrand more efficiently in a new application, than in the legacy app.
With weekly demos to the online leadership team, and the rest of the programme, we were given the green light in our fifth week.
The new app was a step-change to how we write our applications, and one focused on resiliency given it'd initially be serving the homepage (3.5M views/week).
The app we built created a lot of firsts for John Lewis' as an organisation:
We benefited from our newly enabled Google Cloud Platform, and released the new app in August, in time to test its resiliency in the Summer Clearance traffic, ahead of the rebrand launch in September and peak traffic.
We then had 4 weeks to rebuild most of the UI to align to our rebrand, and had a smooth and successful deployment in September.
We had validated and demonstrated the benefits of efficiency we gained in the new app over the Java based Monolith, and are now focusing on how we can continue to improve as we experiment with Microfrontends and Edge Side Includes.
Following on from the benefits realised in developing the Checkout, our first React based app, I lead the UI development for the Account app.
Part of the aptly named Team Crayon, we architected the design for a headless CMS solution using Adobe Experience Manager to provide content for both Web and Native App clients. Our focus was on reducing effort in the authoring experience and to render the preview of content using the web application code.
I was a web designer in the online operations team. My role was to interpret and create designs to match the needs and wants from around the business. These were then built in Adobe CQ5 and published on JohnLewis.com.
My key areas of responsibility were the designing content for the homepage, the Electricals categories, and MVT tests via Monetate. Not limited to these, as a team we flexed between picking up larger design campaigns such as Black Friday, Re:new_all and The Edit – the key marketing campaigns throughout the year.
By definition I am a problem solver, and I always seek to improve on processes to help make ourselves and the business more efficient. I was instrumental to creating and testing a new way of working for all online content, and then rolling this out to all departments after a successful trial with the Electrical, and Home Technology teams.
I lead all in-house frontend development for Waitrose’s specialist shops. I worked within the online trading team, handling tight turnarounds and unexpected deadlines for onsite content. I was part of the in-house design team. Working alongside other designers and developers, we managed the multiple briefs and tasks that needed building across seven websites.
I managed, built and produced all modules for the content, merchandising and marketing teams’ briefs. As the content teams managed any updates to the HTML post-build, all markup was as clean as possible. I built using the BEM styling framework, using modifiers to simply create variants of modules.
All seven websites followed a shared theme of styles; to help maintain a core consistency, to feel distinctively Waitrose. This was managed through a bespoke set up of shared and site-specific SASS partials, using Grunt to do the legwork, for concatenation and compiling.
I strive for consistency and keeping to brand guidelines, and as such created a component library for the Waitrose specialist sites to adhere to. All modules I produce or sign off, will be compliant between browsers and devices that we’re specified to support. For functionality we used either vanillaJS or jQuery.
Our ethos was test and learn. I oversaw all of the multi-variant testing from a frontend perspective, and covered any bespoke build when needed. I also reported to my managers, on my work’s analytics, to consistently iterate and improve. I have experience with implementation and reporting of both Google Analytics and Adobe SiteCatalyst.
Launched October 2015
Waitrose’s latest specialist shop. Largely kept look and feel of existing sites, but brought some new functionality for new content styles.
Launched October 2015
The first white label partnership site for Waitrose Cellar. I led the UI development, and helped with UI design also.
Launched March 2015
All elements are built mobile-first, ready for the ongoing Responsive Design project.
Launched October 2014
I built and designed the UI module templates for the Waitrose Pet team to use.
Launched May 2014
I led the in-house frontend development for the site content. Over 40 rich content pages were built for launch, introducing over 10 new functional features.
2013 Roehampton University / Sep ‘10 - July ‘13
2010 Weald of Kent Grammar / Sep '08 - June '10
2008 The Hayesbrook School / Sep ‘03 - June ’08