Introduction
This project was a quick and exciting challenge. I was asked to design and code a landing page to promote the HP Z-Book workstation range in a specific campaign aimed at major retail chains in Peru and Chile.
The main objective was two-fold: to get users to spend more time on the page, absorbing all the equipment information, and to increase clicks on the purchase buttons for each model.
Challenge
Time was limited. The technical challenge was to create an aesthetic, informative website with a responsive design and ultra-fast loading speed. The major constraint was that the site would be integrated into the retailer’s platform, meaning no JavaScript could be used to avoid code conflicts.
My role was comprehensive: from generating the prototypes and web design to the final coding.
The key UX challenge was information distribution. I needed to showcase 3 different hardware teams, multi-angle images, and shared category features, all without generating an endless scroll. The user had to grasp the message instantly and make a purchase decision.
Implemented Solutions
To tackle the challenge, I made design decisions focused on visual impact and scroll efficiency:
- High-End Visual Impact: Z-Book equipment are premium and innovative products. Therefore, the natural introduction to the page was a high-impact image that immediately captured the user’s attention.
- Controlled Information Flow: After the initial image, I guided the user by displaying main texts and category features to spark interest and intentionally motivate the scroll down.
- Pure CSS Carousels (Zero JS): The most innovative solution for the product section was image handling. To allow the user to view different product angles without infinite scrolling, I implemented fast-loading image carousels made solely with CSS. This resolved the JavaScript restriction and ensured perfect adaptation to smaller screens (responsive design). Additionally, each product contained its most important features concisely.
Creative and Technical Process
The process was agile and focused on problem-solving.
- Research and Benchmarking: Initially, I searched for Z-Book campaigns in other countries, but I encountered an obstacle: no graphic material or standardized graphic line was available for this promotion. This gave me freedom but increased the responsibility of defining the visual language.
- Rapid Prototyping: I used Figma for prototyping, as it is a fast, versatile tool and the industry standard. Quick mockups were created to validate the position of the main sections and user interaction with the different product features.
- Technology Choice: To meet the zero-JavaScript requirement, coding was done with pure HTML and CSS. I avoided any library or framework, ensuring the maximum loading speed and total compatibility with the retail platforms.
Results
Despite the time and technology constraints, the design and coding of the landing page were a success.
Thanks to the good distribution of information and the focus on usability, we achieved the campaign objective: the site successfully directed higher quality traffic to the individual product pages, significantly increasing visits and purchases of the Z-Book category during the promotion period.
Learning and Final Reflection
This project reaffirmed the importance of creativity within limitations. Often, the best design solutions do not come from using the latest technology, but from understanding the technical restrictions and finding elegant solutions with the available resources (as was the case with the CSS-only carousel). I learned that a well-thought-out design, which prioritizes information flow and load speed, is much more effective for e-commerce than any complex visual effect. Demonstrating user experience and website performance are key to achieving business objectives.