Branded Editions Landing Page Templates

The Challenge

Publishers often had landing page customization requests that were not included in our old templates. A pattern was established though as we found that these requests were quite similar despite coming from different publishers. The new templates introduced a more flexible framework to support these requests while maintaining ease of implementation. While many live landing pages included these features, the templates lacked them, making frequent requests time-consuming to implement.

The Process

My first step in this project was getting the account managers to provide the best examples of landing pages to take inspiration from. For a fresh perspective, I also looked at modern examples through Behance for additional ideas in terms of the toolbar, color-blocking, layouts, etc. One thing I had to keep in mind when creating the templates was that some publishers serve as single publications, while others manage multiple editions which can affect the content requirements on this page.

The next step was implementing the code. Since I was working solo on this project, I decided to skip creating detailed mockups and instead focused on extensive A/B testing directly with the code. This approach allowed me to compare designs in real time and save time by merging the learning process with actual implementation.

Using Figma I also created the device mockup assets and put placeholders in the space to easily create the customized mockups for the templates that required them. I did this in Figma using a plugin called “Edit Mockup.”

After I completed the code for the four templates, I uploaded it to our test environment to easily display on a live website for our account managers to view. I then put all the details and links on our Trello design board for easy access.

Outcome

These templates helped cut launch time significantly and provided a standard that PressReader's international team could reuse with minimal edits. They are still being referenced by teammates and included in ongoing launches. Their modular layout and usage instructions helped non-developers contribute more effectively.

Live Publisher Sites Examples:

The National Herald

Diario Epoca

Library Hub

Reflection

This project enhanced my web development skills and boosted my confidence in using JavaScript libraries. By implementing features with both widely used libraries like jQuery and more specific ones like Owl Carousel, I gained a deeper understanding of how to select and apply the right tools for different requirements. Overall, this project has been a good learning experience that has prepared me for more complex development challenges in the future.