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.
Using zoomed in crops to highlight the leather detailing in a pair of Sennheiser headphones
Big and bold photography show off features of this Siemens washing machine available exclusively at John Lewis
John Lewis are "Never Knowingly Undersold" and reactionary offers like this 3-year guarantee banner cropped up from time to time
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.
The finished result: each character in this banner were individually cut out and reassembled to create a fun, playful image
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.
Apple banner
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.
Offer ending banner
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.
A banner for the main electricals landing page
The same message but just for the fridges and freezers page
The same message but just for the washing machine page
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.
Option 1 A
Option 2 A
Option 2 C
Option 1 B
Option 2 B
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.
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.
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.
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.
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.
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.
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.
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