Loading Project

Loading image 1...

01/02

TresnoJamuWebsite

Figma Design and Custom WordPress Development for Traditional Herbal Brand Showcase

Client
PT. Tresno Jamu Indonesia
Year
2025
Timeline
3 weeks
Category
WordPress Development / Corporate Profile
UI Goal
Maximize brand trust and clarity by providing comprehensive company information, product details, and career access in a visually appealing platform.
VISUAL STYLE
Natural, earthy, and clean aesthetic using colors derived from natural ingredients (browns, greens, creams) to align with the product and heritage.
LAYOUT SYSTEM
Structured layout prioritizing the brand story, product catalog, and clear calls-to-action for contact and careers.
PRIMARY DEVICE TARGET
Mobile-first optimization, ensuring a smooth browsing and information access experience for potential customers and job applicants.
Tresno Jamu Website
Featured Work

Tresno Jamu Website

Figma Design and Custom WordPress Development for Traditional Herbal Brand Showcase

Overview

Figma Design and Custom WordPress Development for Traditional Herbal Brand Showcase

Delivered both the UI/UX design (Figma) and the WordPress development for Tresno Jamu Indonesia. The site was built as a corporate profile to showcase the brand’s natural essence, display its product catalog, highlight job openings, and provide essential company information. Implementation used WordPress with *WPBakery* and custom modules for efficient content management.

Challenge

The Problem

The core challenge was translating the traditional, natural essence of Jamu into a clean, modern corporate interface. The site needed to present company history, product portfolios, and career opportunities clearly, all within a rapid 3-week timeline.

Solution

First, created the design in *Figma* focusing on a natural, earthy color palette. The frontend was then implemented using a custom WordPress theme foundation with *WPBakery Page Builder*, utilizing custom modules to effectively structure the *product catalog display*, *careers section*, and contact information for easy client management.

VisualJourney

Project Showcase

Loading image 1...

Screenshot 1

Project visualization and interface design

01/02
Navigate|ESCExit Fullscreen

TechStack

01

Figma

UI/UX Design

02

WordPress CMS

CMS

03

WPBakery Page Builder

Page Builder/Visual Editor

04

Custom Wordpress Modules

Frontend Development

05

PHP

Backend Language

06

HTML5 / CSS3

Frontend

07

Tailwind CSS (via custom integration)

Styling

KeyFeatures

[01]

Custom Product Catalogue Modules

Developed custom WPBakery elements to clearly display jamu product names, descriptions, and accompanying imagery for informational purposes.

[02]

Dedicated Careers/Job Openings Section

A structured module designed to display current job vacancies and application instructions, managed through the WordPress backend.

[03]

Natural & Authentic Design

UI/UX emphasizes natural ingredients and traditional Indonesian heritage through design elements and color choices.

[04]

Clear Contact & Location Display

Prominent, easily readable sections for contact details, physical address, and operating hours.

[05]

Responsive Layout for Information Display

Ensured the layout is fully responsive, optimizing product viewing and company information access for mobile users.

[06]

Client Content Management System

Structured the site using WPBakery to give the client full control over product updates, news, and promotional banners without developer input.

OurProcess

A detailed look at how we brought this project from concept to reality through our proven methodology.

01
Duration
1 week

Design & Visual Strategy (Figma)

Created the UI/UX design in Figma, defining the visual style, color palette, and corporate information hierarchy (including products and careers).

Deliverables
Figma Design File
Visual Style Guide
Corporate Component Mockups
02
Duration
1.5 weeks

WPBakery Setup & Custom Module Creation

Configured WordPress and WPBakery. Coded necessary custom PHP/CSS for WPBakery modules to handle product displays and the dedicated careers section.

Deliverables
WPBakery Template Setup
Custom WPBakery Modules Code
Custom Post Type Structure (Products, Careers)
03
Duration
0.5 week

Content Integration & Deployment

Integrated all initial product listings and company content. Conducted final visual QA and client training on using the WPBakery editor before deployment.

Deliverables
Content Integration Complete
WPBakery Training Manual
Production Deployment
3

Delivered a cohesive UI/UX design and functional website within the tight -week timeline.

2

Successfully implemented an appealing visual design emphasizing natural ingredients and traditional heritage.

3

Provided the client with a visual editor (WPBakery) and custom modules for simple product and careers content management.

4

Structured the site to guide users from brand story discovery to product viewing and job application inquiries.

The design beautifully captures the authenticity of our traditional Jamu, and the backend is a game-changer for managing our growing product line and publishing job opportunities quickly.
Tresno Jamu Management
Tresno Jamu Management
Marketing Director
Tresno Jamu Website - Portfolio | Javapixa Creative Studio