What Have I Achieved At M&S
What Have I Achieved At M&S

What Have I Achieved At M&S

5 years after getting my first web developer (ish) role, I really do need to update my domain name of iwillbeawebdeveloper, don’t I?!

4.5 years my first proper web developer role, 2 and a bit years as a software engineer at M&S. Yes I do call myself a software engineer nowadays. It sounds more upmarket, right?

And it probably actually is more accurate to my skills and what I do – after all, the app that I’ve been working on at M&S is a piece of software that happens to be on the web.

So what have I been doing the last two years?

Website Improvements

I started at M&S on the Product Details Page team – which looks after the page where the product is, say the pair of jeans, or the dress that you are about to buy. The mission was to rebuild what was a tired-feeling page built on AngularJS, into a more modern, slick and responsive page.

Here’s a look at how it used to look like:

It was a greenfield project, built using their internal front/end framework – so much of the elements like the carousel, buttons, etc were already built – we just had to consume them, and make any changes required for the individual component.

So everything on the page was a component. The colour swatch is a component. And if someone selects a colour, then this component updates and any other related components such as the image grid would update with the new information. Other components wouldn’t update – the description, for example, would stay the same, as would the customer reviews.

Technology-wise we used NodeJS on the server-side, JavaScript, SCSS and Handlebars on the client-side, along with a library called IncrementalDOM to do all the component re-rendering.

It took around 5 months for a team of 5 to get a basic working page live, including the server side rendering, client side rendering, all the pipeline and DevOps stuff (which really was a mystery back then) and all the supporting elements. And even then, we only launched it to something like 5% of customers.

Here’s what it looked like after launch:

Not only was it much quicker, but eventually it was much more performant from a revenue point of view – though that took a bit of work, notably we had poorer performance on some tablets, so that took a bit of debugging with the various devices that we had on hand.

Another thing was that we’d changed the look of the reviews component – it can be difficult to compare the revenue performance of an old page with a new one, if you are also going to change design too. Making the review score more prominent actually hindered sales of products with average reviews (not for poor reviews, weirdly).

This was actually my suggestion to look into this – as I was trying to find anomalies to explain why the page wasn’t performing so well.

Thankfully, once all this, and other things were ironed out – we had a super performing page.

I remained on that team for most of 2020 and we then mostly worked on new features for the page – before around October ish I was offered the opportunity to join a newly-formed “mission” team.

Sounds exciting, right?


And it was exciting. Basically, we are like a self-serving team, with front-end, back-end, data scientists, data analysts, product, design, delivery – and we use recommendation engines to try to drive incremental revenue.

We come up with the ideas ourselves, the designer does the designs, the data science people will create/amend the recommendations engines – I do the display and user interaction side of things. And then we launch an a/b test – which is where 50% of users get the new experience, 50% get the control.

So one of my ideas which we implemented, was to add the “similar” recommendations carousel to the top of the page when a product is out of stock. It was successful, the analysts proved that it added extra revenue (enough to pay my salary quite a few times!) so we implemented it permanently.

OK, that was my only idea that we’ve implemented so far, and I stole that from another website. But hey, it was a good idea. If you see Percy Pig recommendations coming online soon then that’s also my idea…waiting for acceptance that we’ll do it though!

We’ve also fairly recently done “add to bag” recommendations – I think this only works for lingerie at the moment, and I think it is currently under test – don’t ask me to remember everything!

But basically, if you add a bra to your bag – then we suggest the matching knickers.

Shop the look

The most recent major piece of work that we’ve released is called Shop The Look and is a more bespoke component to suggest other items for the customer to buy to create an outfit.

Some of the product pages then have this component – so if you are on this jumper page, you’ll then get shown the jeans, trainers or whatever other items the model is wearing. It’s on an a/b test as I write so there’s a 50/50 chance that you’ll get it by following this link. And at some point in the future it will either be implemented for all users or discarded – I hope not discarded as it was a lot of work and I think it looks pretty sweet.

The only downside of being on such a mission team is that the work can be a bit samey – there is a lot of amending carousels and finding new ways to use/display the carousel component – but there are plenty of other things that I’m getting involved with too, plus a new tech stack upcoming to learn.

Now would be the natural point for a “where am I going” heading, but I’ve talked enough and have plans for a little 3 blog series. Yeah, wait 2 years for a blog and 3 come along at once.

Granted I’ve been planning this post for around 9 months, so it may be a while until I get around to the next posts.

See you soon! And don’t forget to buy lots of stuff and think, “ahhh James made that”.

Gosh I really need to sort my developer portfolio site out – what a mess.

Leave a Reply

Your email address will not be published. Required fields are marked *