HACA Design School — Web UI/UX Design Case Study

A concept, and not a shipped one: these are the pages as drawn.

The course name is the picture. Students are set into the letters, so the people and the promise arrive as one object rather than a photograph above a sentence.

The hero: HACA Design School introducing Branding Mastery, in heavy purple display type with student portraits set into the letters — The hero.

Every section takes a colour of its own, so scrolling feels like moving through rooms rather than down a list.

Why people join this program, on green, with four reasons each carrying a face for the feeling it describes — Why people join.

The reasons are faces before they are sentences: the doubt at the top, the ease at the bottom.

What you will learn, with eight numbered module cards showing level and instructors beside a video thumbnail — The modules.

Eight numbered cards, each showing its level and who teaches it, so the shape of the course is visible without reading a word of it.

The AI bonus module section, with four stacked colour cards describing what it covers — The bonus module.

Four claims given the weight of objects rather than bullet points.

Some of the things you will be learning and doing, on red with an illustration — What is included.

Alternating rows for instructional videos, course projects and templates, each with an illustration — And the rows under it.

A branding school cannot afford to leave out the work its students make. This is the section that was missing.

A row of student project cards, each with the work, the student name and their batch — Students’ work.

So were the people teaching it, when part of what is being paid for is access to them.

The instructors section with a large founder portrait beside three smaller ones — The instructors.

And the awkward question of how you pay, in how many instalments, answered on the page rather than in a message to the team.

A frequently asked questions accordion with the payment options answer open — The questions.

The last thing on the page gets a shape of its own.

The closing section on purple with orange curves behind three team portraits and an enrol button — The closer.

The first iteration

The pass this came out of. Every section is already here. The argument was settled, and only the voice was still missing. Light sans headlines, flat blocks of colour, and a module list that says Branding basics eight times.

The first hero: a photograph of three people over purple, with the headline Land Your Next Big Client With A Branding Solution — The hero.

Why people join this program as six items in a two-column grid on a red ground — Why people join.

Introducing the course.

What you will learn, as a list of identical module rows beside a video thumbnail — The modules.

The AI bonus module on yellow, with its four points as a bulleted list — The bonus module.

By the end of this course you will be able to, as four coloured cards — The outcomes.

Some of the things you will be learning and doing, on cream with an illustration — What is included.

Become an expert that can take any project, on green with a checklist and an illustration — The promise.