LJM

John Lewis is one of Britain's best loved department stores. I was a mid-weight digital designer working in operations.

John Lewis logo

Working in daily operations was a highly creative role. It involved picking up day-to-day projects and seeing them through from design to launch; like page designs and redesigns, banner creations, artworking and coding. John Lewis is also co-owned, so everyone working there is a Partner in the business and each Partner has a duty to own their work and increase sales whilst upholding the quality customers come to expect.

John Lewis banner design

Using zoomed in crops to highlight the leather detailing in a pair of Sennheiser headphones

John Lewis banner design

Big and bold photography show off features of this Siemens washing machine available exclusively at John Lewis

John Lewis banner design

John Lewis are "Never Knowingly Undersold" and reactionary offers like this 3-year guarantee banner cropped up from time to time

John Lewis banner design

Particularly in electricals, banners were offer-focused and equal attention is given to all elements

Banners and display adverts were the flavour of design at John Lewis. They were a high source of revenue for the Partnership and an inspirational area for customers to browse and discover new products, brands and offers.

John Lewis banner design

The finished result: each character in this banner were individually cut out and reassembled to create a fun, playful image

John Lewis banner design

The finished result: some banners were just indivdual product shots and required interesting arrangements

The briefing process for banners (and most content on John Lewis) came from the trade team, through to copywriters and image executives then lastly to the designers. There was freedom to suggest ideas when elements in the brief didn't quite work on screen. In the two examples above the image executives had a hard time finding appropiate images to use, so I suggested rearranging exisiting imagery to create a finished, intentional look.

John Lewis banner design

Apple banner

John Lewis banner design

Google Chromecast banner

In my time at John Lewis, I worked predominantly in the electricals area and was able to fine-tune my design eye and know what worked on some brands and not others. John Lewis was one of Apple's closest partners when it came to launching their new products. I was invloved in getting Apple Watch and iPhone 6 onto the John Lewis site: we were the first Apple partner in Europe to get product online at that time.

In the examples above, Apple would provide their own creative and we would follow their design guidelines to apply it on the John Lewis site: generous white space and clear spacing of products. With this Chromecast banner, there were multiple brands involved: HBO, Google and NOW TV. Since the customer would be familiar with Game of Thrones I kept the creative to-the-point and ensured our own in-house design styles were followed too: one primary logo in the bottom right corner and legibility of copy with an image text overlay.

John Lewis banner design

Offer ending banner

John Lewis banner design

Offer ending banner

Sometimes sales would be slow and buying offices and trade teams would collaborate with the design team to figure out ways to boost numbers. When asked to create an "offer stamp" mark on banners to indicate offers were ending, we felt that kind of visual approach would look off-brand and imply a cheapening of our overall offering. I looked at ways that would get this message across, but would allow for quick turnaround and settled on the idea of image replacements rather than coding up new elements onto exisiting banners. Titles on banners were actually transparent pngs so adding the message "Offer ends soon" on top of the existing title and replacing the image on the servers meant an instant update on the site. It could be retroactively removed the same way without the need for a new brief to be drawn up or site updates to be launched.

In regards to the banners above, they were product cut outs and reasembled to look more inspirational and "shop window'y" as we called it internally. I used the default wallpaper of Windows 10 as the background image for the Lenovo banner and used a play with perspective for the kitchen appliance offer banner.

There was a direct uplift in sales when offer messages were added above the titles on banners.

John Lewis banner design

A banner for the main electricals landing page

John Lewis banner design

The same message but just for the fridges and freezers page

John Lewis banner design

The same message but just for the washing machine page

John Lewis banner design

The same message but a smaller size for a product list page

Banners would go acorss multiple pages on the site. Uniformity was obvious with sizes and images.

John Lewis banner design

Option 1 A

John Lewis banner design

Option 2 A

John Lewis banner design

Option 2 C

John Lewis banner design

Option 1 B

John Lewis banner design

Option 2 B

John Lewis banner design

Option 2 D

Often times, brands would supply the funding and images to use on banners. Sometimes these images wouldn't quite work so I would create multiple options where appropriate that might be more beneficial for the brand, and ultimately the customer.

If there was one thing I learned on my time at John Lewis, it was the power of the crop! "Detail, detail, detail" is a mantra I carry forward.

John Lewis page design

In this mock-up for a feature called "Wardrobe Essentials" or "All-time Heros", the trade team wanted to create a page that would be educational and inspirational for male customers. It would showcase key wardrobe items and drive sales. It helped that the photography was exceptional.

John Lewis page design

In this idea, I wanted to see how separating the page out into clearer blocks would look. I also suggested the idea of a "Shop by colour" area, however the CMS wouldn't plumb up this easily. I suggested ideas like "Get this look" and "Get that look" as a play on the imagery provided.

John Lewis page design

In the previous mock-ups, on reflection, I felt the top of the page was too deep or the pages overall were too long and didn't get to the content sooner. I reduced the images of the clothes and together with the trade team's decision to reduce the product offering, the content was brought further up the page above "the fold". We would look at heatmaps of pages and work with the UX team to see what was best practice.

John Lewis page design

This was the current Edition magazine landing page before I took the opportunity to refine it. John Lewis encouraged a sense of ownership so if we felt something wasn't quite working we would try and improve it. I thought this page was a mix of options: downloading the digital magazine, shopping trends and reading articles. We did a quick usability test on this page and it confirmed other customers weren't sure what to do when asked to navigate the site and download the digital magazine.

John Lewis page design

In my redesign I felt the page needed a single purpose; downloading the digital magazine. It incorporated strong call-to-actions, bold imagery and teaser content. The previous page gave a lot of information away and discouraged downloads of the digital magazine.

John Lewis page design

As with most retail, Christmas is one of the most important times of the year. The Christmas creative was designed separetly by the brand team and it was our job to "treat it" accordingly on the website.

John Lewis page design

I designed both of these Party Outfit pages at the same time, one that was "Christmas'ifyied" and one that would exisit pre/post-Christmas for SEO purposes and customer shopping too.

I really grew as a designer at John Lewis. I learned simple (sometimes obvious) details like the power of cropping, crafting options, being open to feedback positively and negatively and learning to juggle multiple stakeholders. I worked with numerous international brands including Apple, Google, Microsoft, Amazon, Siemens, Levi's and Calvin Klein. I learned how to uphold their brand and John Lewis's simultaneously and strike balances visually and professionally.

Thanks for checking out John Lewis.

Go back home or check out Perfume Lovers London

Get in touch

Dribbble

LinkedIn

Email

Top