Goal: To set up a template which all other page can easily follow.

Elements: Cleaning structure, neat and easy to read

Process:

This project was assigned to me when there was a basic layout for the template. I started by ensuring that all the elements on the layout align with the brand and website standards, including margins, padding, colors, and font sizes. After making style adjustments, I focused on ensuring a smooth flow and readability, as this template will serve as a blog-style page. To meet specific requirements, I implemented several functions, including auto-adding anchor points for the sidebar, CSS print styles, and linking products to the page. I presented my suggestions and worked on a mockup to obtain approval before proceeding with the implementation.

Goal: Easy and happy to read

Elements: Spacing, Hierarchy and Mobile view

Process:

When considering how to optimize content for mobile viewing, I focused on several key aspects. First, I ensured that all elements maintained consistent spacing to help readers navigate seamlessly from paragraph to paragraph. Second, I emphasized the clarity of content text and titles, ensuring they conveyed their value effectively to the reader. Lastly, recognizing that certain elements, such as the sidebar on desktop, are unnecessary for mobile users, I created a quick mockup and obtained approval from the manager before proceeding with implementation.

Goal: Clear structure and well-thought-out plan.

Elements: Header, Function bar, Content and Side bar

Process:

All elements should be carefully considered in this standardized template, as it will serve as a foundation for other content and the French version. The color theme must be established, and the font size should be consistent with other H tags on the website.

Goal: Easy to use

Elements: Click to Scroll, Product List and CSS Print

Process:

To create a user-friendly and easy-to-read page, I have implemented a click-to-scroll function. Customers can click on the subheading they are interested in, and the page will automatically scroll to the top. For future implementations, setting up anchor points will be simple by adding a "data-anchorpoint" attribute to the tag. Additionally, to increase the conversion rate, three products selected by the manager will be featured on the page. The setup process will be easily modifiable by accessing the company database. Furthermore, I have included CSS Print functionality on the page, allowing for seamless transfer from the website to a PDF file. The advantage of this is that all links on the website will remain functional, providing customers with a convenient reference.

Challange: Coding and Clear Document

Solution:

One of my primary focuses in several projects is to ensure that the code can be easily reused in any situation. Therefore, the functions and structures should be practical and well-organized. Additionally, I make it a point to thoroughly document all procedures for future adjustments or similar projects. This involves noting down all key elements, major components, and detailed steps.

Result:

The page has been launched, and the feedback has been positive. There are plans to add other elements such as links to other pages in the sidebar and social media share buttons. This serves as the initial step and will serve as the template for future content/blog pages. Please take some time to check it out!