Back to Portfolio 4flow
UI/UX Case Study

SAPPO

Two platforms, one organisation — redesigning "World of Pork" and building the SAPPO Academy portal from the ground up.

Role UX & UI Lead
Tools Adobe XD · HTML · CSS;C#,ASP.NET,JS,Razor
Team UX Lead + Dev Team
The Brief

Challenge & Objectives

Challenge

As the UX & UI lead, I tackled two independent projects for the South African Pork Producers' Organisation (SAPPO). The first was redesigning the "World of Pork" digital platform, which suffered from a cluttered interface and poor navigation, making it hard for users to explore pork industry content. The second was building the SAPPO Academy portal, where staff needed an efficient way to manage educational content and users — small-scale farmers — required a simple, accessible way to purchase and engage with training. Both demanded intuitive, user-friendly designs tailored to distinct audiences.

Objectives

My aim was to transform "World of Pork" into a streamlined, engaging platform that elevates the user experience for pork enthusiasts and industry stakeholders. For the SAPPO Academy, I sought to craft a dual-sided portal — staff-facing for content management and user-facing for seamless education access — ensuring both were intuitive, visually cohesive, and optimized for real-world use.

Project Scope

The "World of Pork" redesign involved auditing the existing site, creating wireframes, and prototyping a cleaner, more navigable interface. The SAPPO Academy portal required a staff dashboard for managing 11 educational modules and a user side with purchasing, video lessons, assessments, and certificates — all mobile responsive and accessible.

Tools

Adobe XD, Visual Studio (HTML, CSS)

Role

As UX & UI lead, I led the end-to-end design process — research, wireframing, prototyping, and front-end production. I worked directly with developers, delivering polished interfaces for them to integrate functionality.

Team

I collaborated with a skilled team of developers who brought my designs to life. SAPPO stakeholders provided content and feedback, while I drove the UX vision.

The User

Meet the User

Before any wireframe, a persona and a journey map kept both platforms grounded in one real user — not an abstraction.

User persona for Johan van der Merwe, a 42-year-old abattoir inspector from Middelburg, South Africa
Abattoir verification user journey map showing four steps: open movements, go to all, verify abattoir, and accept verification
The Research

Research Synthesis

For both SAPPO projects, I built empathy maps from user interviews to distill their pain points and desires. "World of Pork" users craved simplicity, while Academy staff and farmers needed efficiency and clarity — insights that shaped my design decisions across these distinct platforms.

Insights

  • "World of Pork" users were frustrated by disjointed navigation and overwhelming content.
  • Academy staff required a dashboard that streamlined module management, while farmers needed an uncluttered purchasing and learning experience.
  • Rural farmers favored mobile-friendly designs with minimal complexity due to connectivity issues.

Needs

  • A redesigned "World of Pork" with intuitive navigation and a cohesive content flow.
  • An Academy staff portal with efficient tools and a user side that simplifies purchasing and education access.
  • Responsive, lightweight designs that perform well on low-end devices for rural users.
Going Deeper

Research & Strategy

Plan & Goals

Uncover navigation pain points in "World of Pork" to streamline the user journey.
Identify distinct staff and farmer needs for the SAPPO Academy portal.
Ensure both designs support SAPPO's goals of accessibility, engagement, and brand alignment.

Assumptions → Findings

Tap a row to see what the research found.

0 / 3 revealed
✓ Confirmed

A flatter structure with fewer clicks and stronger visual hierarchy significantly improved content access. Users preferred concise, visually guided content over dense text walls.

✓ Confirmed

The two audiences had fundamentally different mental models. Farmers needed the clearest possible path to purchase and start; staff needed an efficient management dashboard — and both required separate design solutions.

✓ Confirmed

Lightweight, responsive designs built for low-bandwidth environments were essential. Rural connectivity constraints shaped every layout decision — images, load order, and interaction patterns all adapted accordingly.

Methodologies

  • Site Audit — Analysed "World of Pork" for UX flaws including poor hierarchy, cluttered navigation, and content buried too deep.
  • Competitive Analysis — Benchmarked industry platforms and e-learning portals to identify best practices.
  • Content Review — Studied SAPPO's 11 Academy modules to align design decisions with educational structure and progression logic.
  • User Interviews — Engaged both "World of Pork" visitors and Academy users (staff and farmers) to surface real expectations.
  • Usability Testing — Tested prototypes with both audiences to observe navigation behaviour and refine workflows.
  • Stakeholder Sessions — Collaborated with SAPPO to pressure-test design decisions against business goals and brand requirements.
Design Principle
"One vision, two audiences."

The same design system that guides an industry professional through World of Pork had to guide a rural farmer through their first online course — without compromise on either side.

Two Briefs

Two Projects, One Vision

Distinct audiences, distinct problems — but one consistent design vision tying both platforms back to SAPPO.

World of Pork

A Cleaner Industry Platform

A cluttered interface and disjointed navigation made it hard for pork enthusiasts and industry stakeholders to explore content. The redesign focused on a flatter structure, clearer hierarchy, and a more navigable interface — reducing clicks and improving content access.

SAPPO Academy

A Dual-Sided Learning Portal

Staff needed an efficient dashboard to manage 11 educational modules; small-scale farmers needed a simple way to purchase and engage with training — video lessons, assessments, and certificates — on lightweight, mobile-friendly screens built for rural connectivity.

The Product

Inside SAPPO Academy

One pink-and-black design language, two platforms — from Academy registration and course modules to World of Pork's vaccine, movement, and membership tools.

SAPPO Academy registration screen with pig photography and pink Register button Academy | Register

Pig photography and a single pink CTA guide farmers to sign up.

SAPPO Academy course module list Academy | Modules

11 structured training modules, each unlocking on completion.

Open module view with video lesson and progress bar Module | Lesson View

Video, notes, and assessment — all in one scrollable view.

World of Pork new vaccine submission form WoP | Vaccine Form

Guided submission keeps producers compliant without confusion.

Pig movement tracking interface WoP | Pig Movement

Track and log movement between farms in a few taps.

SAPPO membership application screen WoP | Membership

A clean application flow for new producer registrations.

Outcome

What We Built

Two cohesive platforms under one design vision — a redesigned World of Pork and a purpose-built SAPPO Academy portal, each serving its audience with clarity, consistency, and confidence.