Role: UI/UX Designer

Tool: Figma, WordPress, Gmeet, AI illustration

1. Project Overview

Before ISPO Track, most people didn’t really understand what ISPO certification was — mainly because the info was scattered across different certification body websites. There wasn’t a single, official government platform, so the messaging was all over the place. Public awareness was low, and businesses weren’t sure what the benefits were or how to even start the certification process. Most websites only gave basic info — no clear guidance, no strong value proposition, and definitely no call to action.

2. Background & Problem

Up until now, there’s never been an official ISPO website managed by the government. People mostly relied on info from different certification bodies, which led to inconsistent messages and a lack of clarity about why ISPO matters.

The existing web experiences were mostly static — just plain descriptions with no real effort to educate, no clear business benefits, and no clear path to take action (like registering or asking questions).

3. Goals & Objectives

  • Build a centralized and trusted website that officially represents ISPO certification
  • Educate both the public and palm oil businesses: what ISPO is, why it matters, and how to get certified
  • Highlight clear benefits, share practical guides, and make the content easy to follow
  • Position the site as the main entry point into the ISPO Track system
  • Apply modern UX/UI best practices to ensure accessibility, engagement, and trust

4. Research & Discovery

To better understand the audience and business goals, I did a few key things:

  • Talked to stakeholders from the ISPO Committee Secretariat and certification bodies to understand communication gaps and business needs
  • Looked at how global certification programs like RSPO, FairTrade, and USDA Organic present their value and guide users
  • Mapped out a persona (mainly plantation owners and business operators) and their journey from “just curious” to “ready to register”
  • Found that most people feel unsure or skeptical — mainly because they haven’t seen a clear, trusted channel that explains what ISPO is and why it matters


Note: The persona was created using indirect insights — I didn’t interview plantation owners directly for this case study.

User Persona

Journey Map

Benchmarking

Sitemap

5. User Flow & Information Architecture

Here’s how the new flow was structured:

  • Users arrive via homepage or Google search
  • Right away, they’re introduced to ISPO with a clear hero, followed by “What is ISPO,” “Why get certified,” and real-life impact stories
  • From there, they’re guided step-by-step: benefits, who’s eligible, how to register, FAQs, and how to get in touch
  • Strong CTAs throughout, like “Apply for Certification,” “Contact Us,” and “Learn about ISPO Track”
  • Smooth pathways lead into the ISPO Track system when needed

User Flow

6. Wireframe & Ideation

  • Started with rough sketches and early wireframes — the goal was to keep it clean, educational, and focused on conversion
  • Refined the layout to balance storytelling and info depth — so users could start simple and dig deeper if they wanted
  • Shared early wireframes with peers, took in feedback, and improved the message clarity and CTA visibility

7. Visual Design

  • Built a fresh color palette inspired by the ISPO logo — using greens for plantations and orange as an accent (like palm fruits)
  • Used local-style illustrations and modern icons to help explain key ideas visually
  • Clean typography and plenty of white space made everything easy to read — especially on mobile
  • Designed key visual elements like the hero section, info cards, CTA banners, testimonial blocks, and simple educational infographics

8. Prototype & Interaction

  • Created a working prototype that included smooth transitions, active CTA states, expandable FAQ, and light microinteractions
  • Fully responsive — works great on both desktop and mobile
  • Tested the application funnel to make sure users could actually get through it without confusion

9. Design Rationable

Every design choice was intentional.

  • Bright, clean colors and a clear visual hierarchy to make navigation easier
  • Focused on building trust and making key info easy to find
  • Prioritized real-world user needs: first educate, then show benefits, then guide toward action
  • Integrated the ISPO Track system without making it overwhelming or confusing

10. Before & After Comparison

Before

After

Previous UI (Old Design)
ISPO Track Website (Redesign)
Visuals

Basic, heavy text, photo stock

Modern, green/orange, custom illustration

Storytelling

Minimal, generic

Engaging, step-by-step, impact stories

Education

Mostly static info

Interactive guides, FAQ, benefits

CTA

Weak, hard to find

Bold, visible, repeated throughout

Registration Flow

Manual, unclear

Clear steps, digital, direct link to ISPO Track

Trust

Low, no official channel

Trusted, branded, first official hub

11. Outcome & Impact

  • Brought all ISPO content together in one trusted place
  • Helped users — especially businesses — actually understand what ISPO is and why they should care
  • Made it easier for users to go from “I’ve heard of it” to “I want to apply”
  • Positioned the website as the front door to the ISPO Track system
  • The design now serves as a reference point for how ISPO communicates online moving forward

12. Status & Next Steps

  • Having a dedicated website really changes how ISPO is seen by both the public and industry players.
  • The focus on storytelling and actionable content is what makes it work — users get value right away, not just vague definitions.
  • Adding clear CTAs and system links early helps reduce drop-off.
  • Modern UX and accessibility aren’t just nice to have — they’re essential if ISPO wants to scale its reach and build credibility.
  • If I were to continue this project, I’d aim to test it directly with plantation owners, and work on making the educational content even more interactive.

13. Disclaimer

This case study is a conceptual redesign. All visuals and user flows are made for demo and portfolio purposes only — they don’t represent an official ISPO product. Logos of ISPO and related organizations are used for visual context only and don’t imply any endorsement or official partnership.