Helps website customisation with CMS and block design features.

Intro

Role

Product designer

Team

Skill

UX design

UI design

Feature Design

1. Product

Palette (Renamed to Course-hub) is a service that helps learning providers market, manage, and sell courses. We helped clients set up their websites to sell courses, which included managing course content on their websites, payment solutions, enrollment management, and marketing campaigns.

2. User

Our clients are universities or training organisations that need a white-label website aligned with their brand to sell their courses and efficiently manage enrolment.

3. User Story

As an administrator, I want to add one more testimonial and add one more lecturer to the course description. I can edit the text, but I don't know how to edit HTML to add more information.

Summary

I led the design of a website customisation feature using reusable content blocks, empowering non-technical users to edit course pages easily and confidently. This improvement significantly enhanced usability and user satisfaction.

As our team was still small, efficiently managing resources was crucial during our growth stage. This new feature also helped reduce the setup time for white-label websites for new clients by 50% within two months.

Problem

Many clients' administrators wanted to add content on course pages, but they were afraid of breaking the layout or needed to rely on our team for small changes. This created inconvenience for both our clients and our development team.

📌 Challenge:

How can we give administrators confidence to edit layouts without needing design or coding skills?

Goal

Reduce Customer Support Requests

Empowered client administrators to independently manage and update content, reducing change requests to customer support.

Design process

1. User research

2. Exploring Layout Variations

Analysed past client projects to identify common layout patterns, then transformed frequently used sections into blocks.

3. Designing Blocks by scenarios

‍General Pages: Blocks in this category include a broader range of flexible layouts to support marketing and landing pages as needed
‍
Course Pages: Blocks in this category don't have variations. The purpose is to present course details clearly, such as Text, Video, Accordion, and Program.

4. Keeping the block number lean

Template-based approaches can limit visual diversity, so I introduced "style control option" in the block setting .

For example, the Hero block offers options like
- Carousel
- Image ratio
- Text alignment
- Colour style

This ensured diverse design needs while maintaining a lean block number.

5. Focusing on content more than visual

Users frequently need to add content with the same visual style.

For example, the user wants to add a new teacher bio after the existing one as an update. She doesn't want a new block instead of a new item under the same block without any visual changes.

The" add item" under the Author and image, List, and accordion blocks is essential.

5. Ensuring proper contrast

We also added manual colour overrides —such as text colour on image backgrounds.

For example, when a user applies a background image, they can manually adjust the text colour to ensure proper contrast, improving both accessibility and aesthetics.

Final solution

Users can add new introductions underneath the existing one and maintain visual consistency without any front-end knowledge.

Users can also edit the homepage with blocks that are designed for different purposes, such as Hero, Testimonial, Carousel, and About etc.
‍

Adds a teacher bio to the course page. -> 1. Add a Block > 2. Click "add item" to edit > 4. Save

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }