UI/UX & Product Design · 2026 · Self-initiated concept, shown with iLearn's permission
iLearn Concept Note
Three mockups and a one-page proposal for iLearn, a South African provider of accredited workplace learning.
- Format
- Live HTML · PDF, 6 pages
- Discipline
- UI/UX & Product Design
- Year
- 2026
- Tools
- 2
Overview
A concept note for iLearn, which has run learnerships and skills programmes for South African employers since 2001. It holds three mockups and a one-page proposal: a homepage, a Programme Finder and an employer leave-behind, all built on iLearn's existing blue and gold.
Challenge
iLearn's catalogue is large: learnerships, skills programmes, short courses and digital learning, across NQF levels, delivery modes and regions. A visitor with a specific goal had to know the vocabulary to find the right programme, and companies and learners were sent through the same homepage.
Solution
The homepage leads with iLearn's own promise and uses its accreditations as proof. A Programme Finder filters the whole catalogue by who you are and what you want to achieve. A one-slide leave-behind gives consultants something to hand an HR lead, drawn from the same design system as the site.
Process
- 01
Audit
Read the current site and listed what the design was hiding and where visitors got lost.
- 02
Mockups
Designed the homepage, the Programme Finder and the leave-behind as one system.
- 03
Proposal
Wrote a one-page note on what the studio saw, what it proposes and what could follow.
- 04
Export
Set the note in HTML and printed it to a six-page A4 PDF.
Screenshots
Sample Material
Everything behind the project, as it was delivered.
The live build
One HTML file that runs in the browser with nothing to install. Its typefaces load from the web, so it needs a connection to look as designed.
Tools used
- HTML & CSS
- Headless Chrome
Outcomes
- Three mockups and a written proposal in one six-page document.
- A Programme Finder that sorts every programme by the visitor's goal.
- A direction that keeps the blue and gold people already know as iLearn's.
This is a self-initiated concept about iLearn, made without being commissioned. It is shown with iLearn's permission, which is not an endorsement of the studio. The outcomes describe what was made, not results for iLearn.