Course sale platform
Block Feature for Website Customisation
.jpg)
Role
Product designer
Team



Skill
UX design
UI design
Feature Design
Background
Our clients use our subscription-based admin system to manage website content, enrolment, marketing campaigns, and payments in a unified platform.
However, many administrators were frustrated by the editor’s technical limitations and feared breaking the page layout since it was based on raw HTML.
However, many administrators were frustrated by the editor’s technical limitations and feared breaking the page layout since it was based on raw HTML.
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.
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. Secondary research
Understanding the administrator's frustration and daily workflow through the frequent requests in customer support.
.jpg)
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.
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.
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.
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.
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.
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
After
Add a hero section to the homepage -> 1. Click "add block" 2. Hover the icon to see the preview> 3. add
Outcome
Content-related requests dropped by only 10%, falling short of expectations.
Many users were unaware of the new feature, highlighting the need for better client education and feature adoption support.