TSP (Tri Sinar Purnama), a leading Indonesian pipe manufacturer established in 1983, holds an impressive 80% domestic market share and exports to over 20 countries. With a sprawling 60,000 m2 production facility and a capacity of 12,000 tons annually, TSP employs 1,700 people. Having solidified its position in the national piping market, TSP sought to strengthen its brand identity, including its online presence.

In 2022, a website redesign project was initiated, leveraging the flexibility and scalability of WordPress. Given my familiarity with WordPress theme structures, I designed custom page templates for both specific and generic pages, including essential WordPress templates like blog, single post, and single page layouts.

Below some pages I designed based-on WordPress and WooCommerce standard (and the website is alive). ✨

TSP has had a website since 2018, but it has been neglected since then. Using Wappalyzer, I discovered that TSP’s site runs on WordPress as its CMS. Therefore, the website redevelopment leveraged WordPress fundamentals, including index pages, specific pages (e.g., single pages and single posts), and custom pages. Additionally, I integrated a WooCommerce storefront to enable a product catalog. However, for large-scale (bulk) purchases, the checkout process redirects users to WhatsApp.

My responsibilities included the following:

Design System: Developed a comprehensive design system by translating brand guidelines into web elements. This included not only components but also configurations such as font styles (both Inter, but with alternate fonts if not rendered) and element styles (slightly rounded only).

Theme Development: Created a robust WordPress theme based on WP fundamental. This system leveraged the latest WordPress configurations, allowing each web section (e.g., header, footer, sections, sidebar, widgets) to have predefined layouts and responsive design across all devices, from desktop to mobile.

UX Research: Conducted data-driven UX research, utilizing both qualitative and quantitative methods. Tools like Hotjar and Microsoft Clarity were employed to record user sessions and inform design decisions. The research conducted by analyzing data gathered by trackers in around 3 weeks.

Design Inspection: Ensured that the Figma designs were accurately translated into web pages with my partnered FE, maintaining visual alignment with the original design specifications.

Below are the design outcomes from the website redevelopment for TSP: