Serhan's John Lewis & Partners: A Web Design Journey
- Serhan Kalabak
- May 19
- 27 min read
Updated: Jun 1

Created by the author using Higgsfield Cinema Studio (Team, Higgsfield.AI, 2026).
The Design Journey: Building John Lewis & Partners for a New Generation
Introduction
This reflective blog covers the stages and decisions in the design and build process of a fully functional e-commerce website for John Lewis & Partners, according to the D&AD New Blood Awards brief provided by Ravensbourne University London. Rebranding John Lewis for 18-34 year old customers became a very difficult task due to current customer demands for convenience and technology in shopping.
According to Watty (2025), approximately half of millennials in the United Kingdom prefer shopping online, and digital experience is becoming a key element of successful retail business. In this blog, discussed below are some important decisions taken in the process of designing the website. (see Appendix E1 for campaign theme)
My Design & Development Journey
Week 1: Research, Brief and Analysis
This week focused on gathering information about requirements outlined in the D&AD New Blood Awards brief (D&AD, 2025). As per the brief, students have to redesign the website of John Lewis & Partners and make it appealing and relevant to the demographic of 18-34 year olds interested in sustainability and authenticity, as well as convenience. In this sense, my task was to learn how some key competitors of John Lewis & Partners, like ASOS (2025), Zara, and Net-a-Porter, attract the target demographic in digital space.
According to Branagan (2020), knowing the identity of the company and its audiences should be the starting point for creating new design and branding.
Week 2: Web Standards
This week involved acquiring knowledge about W3C (World Wide Web Consortium) web standards and their importance. According to Duckett (2014), web standards are vital for making any website accessible to all users regardless of their device, browser, and screen size. My knowledge of this issue affected the process of decision-making during the development of the website.
W3C Validation
The process took place using the website called Nu Html Checker. As for the errors produced by this validation process, they were associated with CSS (Cascading Style Sheets) and view transition name. Errors arose because of using the Wix site and were associated with view transition name and active view transition. As stated by Duckett (2014), these kinds of errors could not be fixed by the developer and, therefore, needed to be accounted for during validation with respect to the development environment used.
For selecting colours for website design, I had to follow guidelines recommended by WCAG 2.1 (Web Content Accessibility Guidelines 2.1) (W3C, 2025). The colour scheme I chose included black (#0F0F0E), burnt orange (#C2501F), and cream (#F5F0E8). In terms of colour contrast and its ratio, all those colours pass these checks and do not negatively affect the user experience of the website.
Weeks 3-4: Wireframing
Wireframing in Figma (2025) is an essential part at this stage, which started from sketching and ended with creating staged wireframes according to the brief. As Salmond and Ambrose (2013, p. 96) explain, this process is vital for all web design projects because designers have the opportunity to plan the information hierarchy, navigation, and user experience flow in advance.
Grid-based layout principles were applied throughout the wireframing process to ensure visual balance and consistency across all pages (Samara, 2023). Responsiveness was also considered in this case. As Hay (2013, p.11) states in his book Responsive Design Workflow, responsiveness is the key aspect of website creation to attract more traffic, because the target demographic accesses websites using their mobile phones. In this context, I had to think about breakpoints at 1440px (desktop) and 390px (mobile).
Brand Identity & Logo Design
One of the most difficult tasks for me during the design process was creating the logo. For me, the current logo of John Lewis is outdated; nevertheless, it is possible to reconsider it in order to create something more appealing to young customers. In this sense, I decided to create a wordmark for John Lewis & Partners, with '&' incorporating the partnership heritage of the company. This logo has a black (#0F0F0E) background and burnt orange (#C2501F) ampersand, which is the most visible element. (see Appendix A)
Burnt orange, which is a passionate and vibrant colour, was a perfect choice for targeting a younger audience. It was the reason for selecting this particular colour for CTA buttons, stats boxes, and text highlights. As recommended by Branagan (2020, p.112), visual consistency is one of the most important principles of brand identity design. Gordon (2021) confirmed that visual hierarchy based on colour and contrast directs attention to the most important elements of the page.
Week 5: Formative Presentation and Peer Feedback
During the presentation in Week 5, I received formative feedback on my design from my lecturer which allowed me to improve some aspects of navigation and responsive layout. At the same time, I worked out a way of using Harvard referencing in my assignments and made sure that all sources used throughout this project are appropriately cited in accordance with this style.
Week 6: Search Engine Optimisation
Applying SEO techniques was essential to creating a truly engaging website that would be able to attract visitors through the use of page titles, meta descriptions, and alt text for images. As discussed by Siou & Patel in the Marketing School podcast (School, 2020), SEO strategies would become truly effective if implemented based on a content approach where the quality of content makes a difference. (see Appendix E2)
Weeks 7–8: Languages of the Web and Web Development
The seventh week gave me the chance to understand three languages of the web (HTML, CSS, and JavaScript) which allowed me to comprehend how visual coding platforms work. As stated by Abraham (2015, p.1), it is crucial to learn these languages even if you work visually, as it will help you code better and faster. Learning HTML (HyperText Markup Language) and JavaScript helped me understand how to use Wix's Velo functions to add dynamic content to the site.
Development
In order to bring more life and energy to the site for the 18–34 demographic, a cinematic hero video was used as the homepage background in place of a static image. Gentle wave animations were also added to the homepage sections and footer, giving the overall experience a sense of movement and depth. This was a deliberate creative decision, as research by the Nielsen Norman Group suggests that motion design and video are effective tools for increasing user engagement and interaction (Laubheimer, 2020). Animation of the card frames was also used in product and category sections in order to provide more visual dynamics. (see Appendix E3)
The header was changed at this stage as well. Namely, the text link to My Orders was replaced by a custom SVG (Scalable Vector Graphics) icon that maintained visual consistency with basket and sign-in icons (see Appendix D1 and D2). Also, the URLs (Uniform Resource Locator) were improved from generic 'blank-' to descriptive slugs such as 'delivery-experience' and 'women-and-men-style-guide', implying more clearly what the site is about and enhancing SEO performance of the page.
One of the important factors while designing the website was mapping out a user journey on the website. It starts from the homepage that will be filled with campaign theme and hero video showcasing the whole brand experience. Afterward, the customer will move on to the categories of Women, Men, Home & Garden, Furniture and Electricals where he or she will be able to view the products on sale. Each page will contain images, price, description and different delivery options. The customer may place goods into the cart and proceed with payment by the manually configured method with academic disclaimer included. In addition to that, there is going to be a Delivery Experience page with five premium deliveries proposed.
The Delivery Experience: A Creative Response to the Brief
One of the most interesting and creative aspects of the website project is the Delivery Experience section. To create this section and make it attractive and original, it was suggested that I would produce a page containing five distinct propositions dealing with delivery issues experienced by the target demographic. Specifically, the five propositions developed are: Choose Your Moment, Try Before You Buy, Green Delivery, Same Street Delivery, and Drop Point Social. (see Appendix B1 and B2)
These five propositions were chosen based on my secondary research findings. Namely, research conducted by Gelder (2023) indicates that flexibility and sustainability are among the top concerns that shape the decision-making process of customers regarding delivery services among the 18–34 age group. Therefore, two key propositions were related to this concern.
Week 9: E-commerce Store Creation
To create the store for this website, Wix Stores (Room, 2026) was used. This tool allowed for creating four main product categories: Women, Men, Home & Garden, Furniture, and Electricals. The majority of product and lifestyle images were created with the help of AI, including Higgsfield Cinema Studio (Team, Higgsfield.AI, 2026) (see Appendix C1–C15). Only a few original pictures were obtained from the official website of John Lewis & Partners (John Lewis, 2023) for academic and historical purposes.
As Salmond and Ambrose (2013, p. 118) state, good visual hierarchy is the most important feature of an effective e-commerce website. In other words, all elements are supposed to be arranged in such a way that the consumer sees everything in the sequence of increasing importance defined by the brand. This is confirmed by Gordon (2021), who explains that visual hierarchy consists of designing elements in such a way that the eye will be directed to see all elements in the order intended by a designer.
To further increase engagement of the target demographic (aged 18–34), two new content elements were developed. Specifically, a brand navigation feature called 'Find Your Style' was produced, featuring five different categories for women (Effortless, Bold, Minimal, Street, and Weekend) and for men (Sharp, Street, Casual, Active, and Classic). Every single category leads to the Style Guide page, where there is lifestyle imagery and brand copy presenting a curated selection of products based on aesthetic style.
A new 'Live the Look' lifestyle showcase section was added to the homepage, with oval-frame images of fashion, furniture, and lifestyle products. To add more dynamics to the site, Switx XR (3D/AR/VR Viewer) was installed and used for 3D and AR viewing.
AI-generated Content
An interesting aspect of the project development is AI-generated visuals. Namely, AI was used to generate one delivery brand video (Seedance.io, 2026) (see Appendix B1–B5) as well as several lifestyle photos. Higgsfield Cinema Studio (Team, Higgsfield.AI, 2026) was used to produce them (see Appendix C1–C15).
The use of Higgsfield and Seedance tools was a good learning experience because, instead of replacing the role of a creator, they allowed me to bring to life a many-sided visual idea that otherwise would never have come true. Besides this, while preparing prompts for AI, much thinking had to be done in terms of lighting, tone, composition, and other aspects. Thus, it could be stated that working with AI was a creative experience.
A new video was produced with the use of Seedance 2.0, describing the process of designing this website. Namely, a five-second cinematic was made, showing how the design was made starting from wireframe sketches and ending with the website alive, with the logo of John Lewis & Partners incorporated in it (see Appendix B5). The video embedded in the blog section describes the full creative process that led me to the creation of the website.
Critical Reflection and Evaluation
Reviewing myself and looking back at this project, it turned out that the key component of a web development and design project is user research. In fact, every design decision made for this website is grounded in user research and brand strategy.
Another important thing I noticed about the design process is that it should be iterative and gradual. Namely, wireframing and then development in Wix was iterative in nature, which meant that each element was made in relation to all others. Finally, I think that for better justification of design decisions, it would be useful to conduct user tests and collect opinions of those aged 18–34.
In addition, a particular effort was made in order to make this website especially targeted to the 18–34 demographic, and not just a regular retail website. Namely, decisions on the animated hero video, navigation called 'Find Your Style', Style Guide pages, 'Live the Look' showcases, and animations in the sections were all made with this demographic in mind. As noted by Watty (2025), millennials and Gen Z consumers in the United Kingdom prefer a quality digital experience, making these design choices strategically sound.
Conclusion
This project was one of the most challenging tasks I have undertaken in this module. To complete it, I had to draw on a variety of skills, including brand strategy, UX/UI (User Experience/User Interface), visual production, and e-commerce. One of the most important lessons of this project is that good design is not purely aesthetic. It is strategy-oriented.
As part of the campaign response, two promotional social media assets were created to advertise the website and the campaign call to action. Both assets use the same visual identity, burnt orange colour palette and campaign message as the website, ensuring a consistent brand presence across digital channels. These assets are included in the submission materials. (see Appendix E4)

Created by the author using Higgsfield Cinema Studio (Team, Higgsfield.AI, 2026).

Created by the author using Higgsfield Cinema Studio (Team, Higgsfield.AI, 2026).
Reference list
Abraham, N. (2015). Coding For Dummies. New York: John Wiley & Sons Inc.
Anthropic (2026). Claude. [online] Available at: https://www.anthropic.com [Accessed 27 May 2026].
ASOS (2025). ASOS. [online] ASOS. Available at: https://www.asos.com [Accessed 8 Apr. 2026].
Branagan, A. (2020). Essential guide to business for artists and designers. Bloomsbury Publishing Plc.
D&AD (2025). D&AD New Blood Awards 2025. [online] D&AD. Available at: https://www.dandad.org/en/d-ad-new-blood-awards/ [Accessed 1 Apr. 2026].
Duckett, J. (2014). HTML & CSS: Design and Build Websites. Indianapolis, IN: John Wiley and Sons.
Figma (2025). Figma: the Collaborative Interface Design tool. [online] Figma. Available at: https://www.figma.com [Accessed 13 Apr. 2026].
Gelder, K. van (2023). Topic: Online Shopping Behavior in the UK. [online] Statista. Available at: https://www.statista.com/topics/7887/online-shopping-behavior-in-the-uk/#topicOverview [Accessed 11 May 2026].
Gordon, K. (2021). Visual Hierarchy in UX: Definition. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/visual-hierarchy-ux-definition/ [Accessed 10 May 2026].
Hay, S. (2013). Responsive design workflow. San Francisco, CA: New Riders.
John Lewis (2023). John Lewis & Partners | Homeware, Fashion, Electricals & More. [online] John Lewis & Partners. Available at: https://www.johnlewis.com [Accessed 1 Apr. 2026].
Laubheimer, P. (2020). The Role of Animation and Motion in UX. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/animation-purpose-ux/ [Accessed 27 May 2026].
Room, W.N. (2026). Wix Launches Wix Harmony, the AI Website Builder that Merges Human and Artificial Intelligence, Reinventing We. [online] Newsroom. Available at: https://www.wix.com/press-room/home/post/wix-launches-wix-harmony-the-ai-website-builder-that-merges-human-and-artificial-intelligence-rein [Accessed 8 May 2026].
Salmond, M. and Ambrose, G. (2013). The Fundamentals of Interactive Design. London: Bloomsbury Publishing Plc.
Samara, T. (2023). Making and Breaking the Grid, Third Edition. 3rd ed. Massachusetts: Rockport Publishers.
School, M. (2020). 4 Underrated SEO Plays That'll Double Your Organic Traffic | Ep. #1439. [online] Marketing School Podcast. Available at: https://marketingschool.io/4-underrated-seo-plays-thatll-double-your-organic-traffic-ep-1439/ [Accessed 4 May 2026].
Seedance.io. (2026). Seedance: Free Online AI Video Generator. [online] Available at: https://seedance.io/ [Accessed 13 May 2026].
Statista and Watty, F. (2025). Shopping online vs. offline by generation in the UK 2023. [online] Statista. Available at: https://www.statista.com/statistics/1390013/mostly-online-vs-offline-shopping-uk-generation/ [Accessed 11 May 2026].
Team, Higgsfield.AI. (2026). Higgsfield. [online] Higgsfield. Available at: https://higgsfield.ai [Accessed 5 May 2026].
W3C (2025). Web Content Accessibility Guidelines (WCAG) 2.1. [online] W3.org. Available at: https://www.w3.org/TR/WCAG21/ [Accessed 9 May 2026].
Appendix
A Note on Prompt Development
All prompts included in this appendix were developed collaboratively with Claude (Anthropic, 2026). The creative brief, visual direction, and conceptual ideas were provided by the author, and Claude was used to translate these ideas into structured, detailed prompts suitable for AI video and image generation tools. This collaborative approach allowed the creative vision to be communicated precisely to tools such as Seedance 2.0 and Higgsfield Cinema Studio.
Appendix A: Logo Design
The logo for the John Lewis and Partners rebrand was designed from scratch as part of the brand identity development process. The visual below shows the finalised logo used across the website, video content, and all AI-generated imagery.
Concept: The logo uses a 'Punch' concept. A solid black square contains a burnt orange ampersand symbol. The wordmark 'John Lewis Partners' sits alongside the icon. The design deliberately modernises the heritage brand to appeal to an 18 to 34 year old audience.
Formats produced: SVG (Scalable Vector Graphics) for web use | PNG for Wix upload and video production
The logo can be viewed live at serhandesigns.co.uk
Appendix B: Seedance AI Video Prompts
The following prompts were used to generate AI video content via Seedance 2.0. All prompts were written specifically for this project to produce cinematic, on-brand content targeting the 18 to 34 demographic.
Appendix B1: Delivery Experience Opening Sequence (15 seconds)
Tool: Seedance 2.0 | Duration: 15 seconds | Style: Cinematic lifestyle
A cinematic 15-second opening sequence for a premium retail delivery brand. Scene 1 (0 to 4s): Extreme close-up of elegant hands tapping a smartphone screen selecting a delivery time slot, warm morning light, slow motion, rack focus. Scene 2 (4 to 7s): A stylish young woman opens her front door to find a premium white branded box on her doorstep, golden morning light, she smiles, slow motion. Scene 3 (7 to 10s): A gleaming white electric van glides silently through a quiet London street at golden hour, cinematic tracking shot, city skyline in background. Scene 4 (10 to 12s): A young professional walks briskly along a Georgian London street carrying a white branded box, purposeful energy, warm light. Scene 5 (12 to 15s): Inside a warm East London cafe, a barista places a white box on the counter, young professional picks it up smiling, slow motion, fade to black. Throughout: shallow depth of field, warm golden tones, premium lifestyle feel, no dialogue, no text on screen.
Negative Prompt: No logos except on van and box exterior, no brand names, no text overlays, no subtitles, no watermarks, no readable text anywhere, no shaky camera, no dark or gloomy lighting, no winter scenes, no crowded spaces, no stock footage aesthetic, no CGI environments, no dirty streets, no rain, no diesel vehicles.
Appendix B2: Delivery Experience Shot-by-Shot Timeline (15 seconds)
Tool: Seedance 2.0 | Duration: 15 seconds | Format: Detailed shot-by-shot production prompt
Shot 1 (00:00 to 00:02): Choose Your Moment, Morning Selection. Effect: Rack focus and digital zoom (scale-in). Extreme close-up of a finger hovering over a smartphone screen showing only simple clock and time-slot icons with zero text visible anywhere on screen. Warm morning kitchen light bleeds in from upper left, soft and golden. Rack focus pulls sharply from blurred kitchen background to sharp fingertip in approximately 0.8 seconds. Frame slowly scales inward toward the screen as finger taps and the screen emits a brief soft glow on contact. Approximately 40% speed on the tap moment. Exits with a hard cut on the glow flash.
Shot 2 (00:02 to 00:04): Choose Your Moment, The Confirmation. Effect: Speed ramp (deceleration) and white bloom flash (exit). Wide shot pulls back to reveal young woman in modern kitchen, holding phone, soft smile as she lowers it. Camera at mid-height, slight tilt downward. Speed decelerates from normal to approximately 35% as she lowers the phone. Warm amber kitchen tones with no text or logos anywhere in frame. Exits with white bloom flash dissolving into Shot 3.
Shot 3 (00:04 to 00:07): Try Before You Buy, The Reveal. Effect: Slow-motion (deep) and digital zoom (scale-in on garment). White bloom entry into a modern London apartment bedroom with morning window light. Young woman holds up a plain beige cashmere sweater against her body in front of a full-length mirror with no logos or branding on garment. Camera at chest height, static, with her reflection filling the right half of frame. Frame scales inward slowly toward the sweater at approximately 20% speed. She smiles and the moment holds for 1.5 seconds. Exits with whip pan (left to right). This is the SIGNATURE VISUAL EFFECT: stillness within motion.
Shot 4 (00:07 to 00:10): Green Delivery and Same Street Delivery, The Van. Effect: Cinematic tracking shot (lateral) and speed ramp (acceleration). Pure white electric van parked on a quiet London residential cobblestone street at golden hour. Camera begins at the front of the van at ground level and tracks laterally to the rear with the van completely stationary and rear doors firmly closed. Warm golden light reflects off the van's clean white surface with city buildings soft in background bokeh. Camera speed ramps from slow crawl to normal pace as it reaches the rear of the van. Hard cut to Shot 5.
Shot 5 (00:10 to 00:12): Same Street Delivery, The Handoff. Effect: Speed ramp (acceleration) and digital zoom (scale-out). Delivery person walks briskly along a sunlit London street with a plain white unbranded package under arm. Camera at low angle (hip height), looking slightly upward with purposeful, confident energy. Frame scales outward as they walk away, widening to reveal the street and buildings. Speed ramps from 60% up to normal pace. Hard cut to Shot 6.
Shot 6 (00:12 to 00:15): Drop Point Social, The Cafe. Effect: Slow-motion and camera pull-back (scale-out through glass). East London cafe interior with warm amber morning light. Barista places a plain white unbranded package on a minimal counter. Young professional picks it up alongside their coffee and glances at a friend and both exchange a brief smile. Camera outside the cafe, shooting through the window, slowly pulls back as the scene plays out. Approximately 50% speed throughout, unhurried, warm, and human. Window reflections of the street layer over the interior scene. Fades to clean white.
Negative Prompt: No logos on clothing or garments, no logos on packaging or boxes, no brand names printed on any surface except van exterior only, no text overlays, no subtitles, no watermarks, no readable text or letters on phone screens, no random or distorted letters anywhere in frame, no garbled or abstract text on any surface, no moving van with open rear doors, van rear doors only open when completely stationary and parked, no grey or silver vans, pure white van only, no shaky camera, no dark or gloomy lighting, no winter scenes, no crowded or chaotic spaces, no stock footage aesthetic, no CGI environments, no dirty streets, no rain, no diesel vehicles, no low quality lighting.
Appendix B3: Homepage Hero Shot-by-Shot Timeline (10 seconds)
Tool: Seedance 2.0 | Duration: 10 seconds | Format: Detailed shot-by-shot production prompt
Shot 1 (00:00 to 00:01): Opening Flash, London Street. Effect: Speed ramp (deceleration) and heavy motion blur and white bloom entry. Enters from pure white as London street materialises through bloom flash. Diverse group of young people aged 18 to 25 of mixed ethnicities walking together, laughing, earphones in, coffees in hand. Frame decelerates from blur to sharp in approximately 0.8 seconds. Handheld energy with slightly loose camera. Exits with hard cut on motion.
Shot 2 (00:01 to 00:02): Phone Swipe, Product Discovery. Effect: Digital zoom (scale-in) and speed ramp (deceleration). Extreme close-up of a thumb swiping rapidly through a product feed on a phone screen as colourful clothing images flash past. Frame punches inward as swipe slows to a stop on one product. Approximately 30% speed on the final swipe. Screen light illuminates the face of a young woman in her mid-twenties. Exits with a whip pan (right to left).
Shot 3 (00:02 to 00:03): Unboxing, Apartment. Effect: White bloom flash (entry) and slow-motion (deep). SIGNATURE VISUAL EFFECT. Enters from white bloom into a bright minimal apartment. Two friends sit on a bed as one tears open a John Lewis delivery box excitedly. Approximately 20% speed as the garment is lifted out and tissue paper floats in slow motion. Genuine laughter, real reaction, not posed. Warm window light, plants visible in background. Exits with a whip pan (upward).
Shot 4 (00:03 to 00:05): Street Style, Wearing the Product. Effect: Lateral tracking shot and speed ramp (acceleration). A young man in his early twenties walks confidently along an East London street wearing a John Lewis piece. Camera tracks alongside at hip height, accelerating from slow to normal pace. Street art visible in background. Quick cut at peak speed to Shot 5.
Shot 5 (00:05 to 00:07): White Van, Green Delivery. Effect: Cinematic tracking shot and digital zoom (scale-out). Gleaming white electric van moves silently through a quiet London street. John Lewis logo on van side panel. Frame scales outward as van passes and city opens up behind it. Clean, purposeful, modern. Exits with hard cut.
Shot 6 (00:07 to 00:09): Cafe Drop, Social Moment. Effect: Slow-motion and camera pull-back through glass. Three young friends in a warm East London cafe. One picks up a John Lewis box from the counter. They crowd around it laughing and one holds it up for a photo on their phone. Camera pulls back slowly through the cafe window. Approximately 40% speed, warm, social, energetic. Exits with fade to cream.
Shot 7 (00:09 to 00:10): Logo Close-Up, Brand Close. Effect: Digital zoom (scale-in) and fade to black. Extreme close-up of burnt orange ampersand on delivery box. Frame scales in slowly, logo fills screen, fades to black. Confident, minimal, final.
Negative Prompt: No text overlays, no subtitles, no watermarks, no readable signage, no shaky unwanted camera movement, no dark or gloomy lighting, no winter scenes, no stock footage aesthetic, no CGI environments, no dirty streets, no rain, no diesel vehicles, no logos except John Lewis on van and box only, no posed or stiff acting, no all-white homogeneous cast, no harsh artificial lighting.
Appendix B4: Brand Heritage Film (15 seconds)
Tool: Seedance 2.0 | Duration: 15 seconds | Style: Cinematic brand story
15-second cinematic brand story video, no dialogue, no text. Five seamless scenes telling the story of a heritage British retail brand reimagined for a new generation.
Scene 1 (0 to 3s): Black and white archive-style footage of a grand Victorian building on a busy London street in the early 1900s, elegant shoppers in period clothing, horse-drawn carriages passing, absolutely no signage, no store names, no readable text on any building or surface, slow cinematic fade from black and white to warm colour.
Scene 2 (3 to 6s): Interior of a bright modern premium retail store, stylish young professionals browsing beautiful homeware and fashion displays, warm natural light flooding through large windows, minimal and premium feel, slow tracking shot, no signage visible anywhere.
Scene 3 (6 to 9s): Close-up of two young colleagues, a man and a woman, laughing together in a bright modern office, genuine warmth and connection, partnership feel, shallow depth of field, slow motion.
Scene 4 (9 to 12s): Slow cinematic close-ups of premium products: a folded cashmere sweater, a ceramic lamp, a pair of wireless headphones, each on clean minimal surfaces, soft natural light, rack focus between products.
Scene 5 (12 to 15s): Wide aerial drone shot of London skyline at golden hour, slow pull-back revealing the city, warm amber tones, slowly fades to cream. Throughout: no logos, no text, no dialogue, warm cinematic colour grading, premium and emotional feel.
Negative Prompt: No store names, no shop signs, no readable text anywhere, no logos, no text overlays, no subtitles, no watermarks, no readable signage on any building or surface, no shaky camera, no dark or gloomy lighting, no crowded chaotic spaces, no stock footage aesthetic, no artificial CGI environments, no fast cuts, no harsh artificial lighting, no winter scenes.
Appendix B5: Wireframe to Website Process Film (5 seconds)
Tool: Seedance 2.0 | Duration: 5 seconds | Style: Motion design, creative process
A cinematic 5-second motion design video showing the journey from wireframe to real website, no dialogue, no text overlays.
Scene 1 (0 to 1.5s): Dark screen slowly reveals a hand-sketched wireframe drawing on paper with rough pencil lines showing a basic webpage layout, warm desk lamp light, slow zoom in.
Scene 2 (1.5 to 3s): The sketch seamlessly morphs into a clean digital Figma wireframe on screen, black and white, grid lines visible, smooth transition from paper to screen.
Scene 3 (3 to 5s): Burnt orange colour slowly bleeds into the wireframe from the logo position, the reference image logo anchors itself in the top left corner, colour spreads across the design, the wireframe fully transforms into the real website with lifestyle photography and premium feel, camera slowly pulls back to reveal the full homepage, fades to black.
Negative Prompt: No text overlays, no subtitles, no watermarks, no shaky camera, no stock footage aesthetic, no CGI environments, no random logos except reference image, no fast jump cuts, no dialogue, no music visualisation, no loading screens, no error messages, no other brand names or logos anywhere.
Appendix C: Higgsfield Cinema Studio AI Image Prompts
The following prompts were used to generate lifestyle and product imagery via Higgsfield Cinema Studio. All prompts were written specifically for this project. The generated images were used across product pages, the Delivery Experience section, category pages, and the homepage.
Appendix C1: Men's Lifestyle, Desk Scene
Usage: Men's category page and Electricals page
A stylish young man in his late twenties sitting at a minimal modern desk in a bright London apartment, wearing Sony wireless headphones, working on a laptop with an iPad beside him and a Nespresso coffee machine on the desk. Soft natural light from large windows, clean Scandi interior, warm neutral tones. No logos, no text, no brand names visible. Editorial lifestyle photography, shallow depth of field.
Negative Prompt: No logos, no text, no watermarks, no dark backgrounds, no cluttered spaces, no artificial lighting, no brand names on any device.
Appendix C2: Men's Page Hero, Flat Lay
Usage: Men's category page hero section
A flat lay arrangement of men's lifestyle essentials on a clean white wooden surface. Items include a cream linen blazer, a white Oxford shirt, a navy canvas tote bag with brown leather handles, a dark brown leather belt, forest green chino trousers, dark indigo denim jeans, a grey marl crew neck sweater, tan suede desert boots, tortoiseshell sunglasses, a navy wool beanie, a slim leather watch, and a brushed steel hip flask. Perfectly arranged, editorial styling, soft natural light, no shadows. Product lifestyle photography, overhead flat lay, clean and minimal, warm neutral tones. No logos, no text, no brand names on any item.
Negative Prompt: No logos, no text, no watermarks, no dark backgrounds, no artificial lighting, no people, no clutter, no brand names on any item, no coloured backgrounds.
Appendix C3: Home and Garden Newsletter, Flat Lay
Usage: Home and Garden category page newsletter section
A flat lay arrangement of home and garden essentials on a clean white wooden surface. Items include a solid olive wood chopping board with leather cord, a sage green linen apron with brass eyelets, a mustard yellow knitted throw blanket, a stack of botanical notebooks in sage and cream, a white ceramic pot with a haworthia succulent, a glass cloche dome with a small terracotta potted plant inside, a brass plant mister, tan leather gardening gloves, stainless steel garden secateurs, a wooden herb marker set, a folded teal linen napkin, and a navy and white striped cotton towel. Perfectly arranged, editorial styling, soft natural light, overhead flat lay, clean and minimal. No logos, no text, no brand names on any item.
Negative Prompt: No logos, no text on any item, no watermarks, no dark backgrounds, no artificial lighting, no people, no clutter, no brand names.
Appendix C4: Furniture Newsletter, Flat Lay
Usage: Furniture category page newsletter section
A flat lay arrangement of premium home furniture and interior accessories on a clean white wooden surface. Items include a folded forest green herringbone fabric swatch, a set of three nesting side tables with white marble tops and black metal legs, a mustard yellow chunky knitted round pouffe, a sage green adjustable anglepoise desk lamp with brass joints, a pair of black metal book ends with a small decorative wooden chair figurine between them, a tan leather square footstool with brass stud detailing, a tan leather round pouffe with brass stud trim, a navy blue linen cushion, a folded denim blue linen throw, and a light blue woven cotton blanket. Perfectly arranged, editorial styling, soft natural light, overhead flat lay, clean and minimal, warm neutral tones. No logos, no text, no brand names on any item.
Negative Prompt: No logos, no text, no watermarks, no dark backgrounds, no artificial lighting, no people, no clutter, no brand names on any item.
Appendix C5: Electricals Newsletter, Flat Lay
Usage: Electricals category page newsletter section
A flat lay arrangement of premium consumer electronics and kitchen appliances on a clean white tiled surface. Items include a white and copper electric pressure cooker, a white high-performance blender with glass jug, a black DSLR camera body, a detached camera lens, a white multi-port USB power strip with cables, a black smartphone, a slim silver portable power bank, a black over-ear wireless headphone, a pair of silver and rose gold over-ear wireless headphones, a small black wireless earbuds charging case, a smartwatch with black strap, a silver closed laptop, an open silver laptop, a white tablet, a white robotic vacuum cleaner, and a small black smart home speaker. Perfectly arranged, editorial styling, soft natural light, overhead flat lay, clean and minimal. No logos, no text, no brand names on any item.
Negative Prompt: No logos, no text, no watermarks, no dark backgrounds, no artificial lighting, no people, no clutter, no brand names on any item, no visible brand markings on any device.
Appendix C6: Delivery Experience, Choose Your Moment
Usage: Delivery Experience page, Choose Your Moment proposition
A young stylish man in his late twenties sitting on a modern sofa in a bright London apartment, casually scrolling on his smartphone, selecting a delivery time slot. Relaxed morning atmosphere, soft natural light from large windows, minimal Scandinavian interior. No logos, no text on phone screen, no branding anywhere. Editorial lifestyle photography, shallow depth of field, warm neutral tones.
Negative Prompt: No logos, no text on screen, no watermarks, no dark backgrounds, no cluttered spaces, no artificial lighting, no brand names.
Appendix C7: Delivery Experience, Try Before You Buy
Usage: Delivery Experience page, Try Before You Buy proposition
A young stylish woman in her mid-twenties stands in a bright modern London apartment, holding up a perfectly folded camel cashmere sweater against herself, smiling naturally. A premium open white box sits on the bed behind her, white tissue paper visible inside. Soft morning light floods through large windows. Clean minimal bedroom interior, neutral tones. No logos, no text, no branding on any surface or clothing. Editorial lifestyle photography, shallow depth of field, warm natural light.
Negative Prompt: No logos, no text, no watermarks, no dark backgrounds, no cluttered spaces, no plastic packaging, no artificial lighting, no brand names on clothing or boxes, no faces obscured.
Appendix C8: Delivery Experience, Green Delivery
Usage: Delivery Experience page, Green Delivery proposition
A gleaming pure white electric delivery van parked on a quiet London residential street at golden hour. The van is clean and minimal with no visible exhaust. Surrounding trees and plants are lush and green. A delivery person in smart casual clothing places a white box at a front door. Warm golden light reflects off the van's surface. No text, no branding on any surface. Editorial lifestyle photography, wide angle, shallow depth of field, warm tones. Reference image logo appears only on the van side panel, nowhere else.
Negative Prompt: No text, no watermarks, no diesel vehicles, no dirty streets, no dark lighting, no rain, no crowded spaces, no artificial lighting, no brand names on van or clothing.
Appendix C9: Delivery Experience, Same Street Delivery
Usage: Delivery Experience page, Same Street Delivery proposition
A confident young professional woman walking briskly along a quiet London residential street on a sunny morning, carrying a premium white box under her arm, smiling. The white box has the reference image logo printed on its side. Beautiful Georgian townhouses in the background, golden morning light, green trees lining the street. Smart casual outfit, effortless style. No logos except reference image on box only, no text, no other branding. Editorial lifestyle photography, shallow depth of field, warm tones.
Negative Prompt: No other logos, no text, no watermarks, no dark backgrounds, no cluttered spaces, no artificial lighting, no other brand names on clothing or box, no rain, no winter scenes.
Appendix C10: Delivery Experience, Drop Point Social
Usage: Delivery Experience page, Drop Point Social proposition
A young stylish professional picking up a premium white unbranded box from the counter of a warm cosy East London coffee shop. The barista smiles in the background. Warm amber cafe lighting, minimal Scandi interior, exposed brick walls, green plants. The box has the reference image logo printed on its side. Relaxed, social, effortless morning atmosphere. No other logos, no text, no other branding. Editorial lifestyle photography, shallow depth of field, warm tones.
Negative Prompt: No other logos, no text overlays, no watermarks, no dark or gloomy lighting, no crowded or chaotic spaces, no artificial harsh lighting, no other brand names anywhere, no rain, no winter scenes.
Appendix C11: Women's Page, Linen Blend Shirt Model
Usage: Women's product page
A young stylish woman in her mid-twenties, full body shot from head to toe, standing confidently in a bright minimal studio with white background. She is wearing a sage green linen blend shirt. Natural relaxed pose, slight smile, hands by her sides. Editorial fashion photography style, soft natural light, shallow depth of field, clean and premium feel. Full length portrait, entire body visible from head to toe.
Negative Prompt: No cropping, full body must be visible from head to toe, no dark backgrounds, no busy patterns, no logos, no text, no watermarks, no artificial harsh lighting, no cluttered background, no other people in frame.
Appendix C12: Women's Page, Relaxed Fit Trousers Model
Usage: Women's product page
A young stylish woman in her mid-twenties, full body shot from head to toe, standing confidently in a bright minimal studio with white background. She is wearing relaxed fit camel tone trousers. Natural relaxed pose, slight smile, hands by her sides. Editorial fashion photography style, soft natural light, shallow depth of field, clean and premium feel. Full length portrait, entire body visible from head to toe.
Negative Prompt: No cropping, full body must be visible from head to toe, no dark backgrounds, no busy patterns, no logos, no text, no watermarks, no artificial harsh lighting, no cluttered background, no other people in frame.
Appendix C13: Women's Page, Cotton Oversized Blazer Model
Usage: Women's product page
A young stylish woman in her mid-twenties, full body shot from head to toe, standing confidently in a bright minimal studio with white background. She is wearing an oversized cream linen blazer, open front, relaxed fit. Natural relaxed pose, slight smile, hands by her sides. Editorial fashion photography style, soft natural light, shallow depth of field, clean and premium feel. Full length portrait, entire body visible from head to toe.
Negative Prompt: No cropping, full body must be visible from head to toe, no dark backgrounds, no busy patterns, no logos, no text, no watermarks, no artificial harsh lighting, no cluttered background, no other people in frame.
Appendix C14: Women's Page, Minimal Everyday Dress Model
Usage: Women's product page
A young stylish woman in her mid-twenties, full body shot from head to toe, standing confidently in a bright minimal studio with white background. She is wearing a minimal ivory cream midi dress with short sleeves and a self-tie ribbon belt at the waist, A-line silhouette. Natural relaxed pose, slight smile, hands by her sides. Editorial fashion photography style, soft natural light, shallow depth of field, clean and premium feel. Full length portrait, entire body visible from head to toe.
Negative Prompt: No cropping, full body must be visible from head to toe, no dark backgrounds, no busy patterns, no logos, no text, no watermarks, no artificial harsh lighting, no cluttered background, no other people in frame.
Appendix C15: Blog Page, Minimal Workspace
Usage: Blog page, second hero image
Minimal workspace setup, laptop on desk showing UI design or wireframe, soft natural light from window, neutral beige tones, clean desk, coffee cup, modern minimal interior, premium lifestyle photography, no clutter, no text, 2:1 aspect ratio.
Appendix D: Custom SVG Icons
The following custom SVG (Scalable Vector Graphics) icons were designed and created for the website header to ensure visual consistency across all interactive elements. Both icons were built to match the style and weight of the existing Wix basket icon.
Appendix D1: Sign In Icon
Usage: Website header, right-hand icon group
A minimal line-style user silhouette icon. The icon consists of a circular head and curved shoulder line, drawn with a stroke weight of 2.2pt in black (#0F0F0E). A small burnt orange (#C2501F) circular badge with a white checkmark is positioned at the top right of the icon to indicate an active or signed-in state. The viewBox is set to 40x40 units. The icon was designed to sit alongside the My Orders and basket icons in the header navigation.
Appendix D2: My Orders Icon
Usage: Website header, right-hand icon group
A minimal line-style receipt or document icon. The icon consists of a rounded rectangle representing a page with three horizontal lines indicating order details, drawn with a stroke weight of 2.2pt in black (#0F0F0E). A small burnt orange (#C2501F) circular badge with a white checkmark is positioned at the bottom right to indicate order confirmation. The viewBox is set to 40x40 units. The icon was designed to sit alongside the Sign In and basket icons in the header navigation.
Appendix E: Campaign Marketing Assets
Appendix E1: Campaign Theme
Campaign theme: Modern Living, Delivered to Your Door.
This theme directly connects the traditional John Lewis store experience with a reimagined digital and delivery journey. It was developed to resonate with 18–34-year-old digital consumers who expect convenience, trust, and an elevated online experience. The theme is reflected throughout the website design, the hero video, the Delivery Experience page, and both marketing assets.
Appendix E2: SEO and Blog Content Strategy
At this stage, a blog section was created and regularly published posts with long-tail keywords corresponding to the John Lewis product range and interests of the demographic aged 18–34. All posts were optimised in accordance with SEO recommendations using tools of Wix Harmony (Room, 2026): meta description editor, H1 tags, and alt text generator. Site Search was added to the website to make the process of finding information more comfortable for visitors (Room, 2026).
Appendix E3: Development Process Details
The creation of each element of the site was carried out in several stages. The Wix Harmony Editor (Room, 2026), an AI-supported platform, was used throughout the design process. However, all AI-generated content was reviewed and manually modified by the author to ensure accuracy, tone and brand consistency.
Appendix E4: Marketing Asset Prompts
Tool: Higgsfield Cinema Studio | Usage: Social media and digital promotion
Asset 1: Instagram Post (1:1)
A premium lifestyle Instagram feed post for a British retail brand. A stylish young woman in her mid-twenties stands confidently in a bright minimal London apartment, holding a premium white delivery box with a black and orange logo on the side. Warm natural light, clean Scandi interior. Aspirational, editorial, premium feel. The image should feel like a high-end fashion and lifestyle brand campaign. No text overlays, no cluttered background.
Negative Prompt: No text, no watermarks, no dark backgrounds, no cluttered spaces, no artificial lighting, no other logos or brand names.
Asset 2: Digital Campaign Poster (16:9)
A cinematic wide-format digital campaign poster for a premium British retail brand targeting 18-34 year olds. A diverse group of young stylish Londoners in their twenties, laughing and walking together on a sunny London street, one carrying a premium white branded delivery box. Golden hour light, Georgian townhouses in background, urban and aspirational feel. Wide cinematic composition, shallow depth of field, warm tones.
Negative Prompt: No text, no watermarks, no dark or gloomy lighting, no winter scenes, no cluttered spaces, no artificial lighting, no other logos or brand names except reference image on box.


Comments