Home
Work
Experience
Summary
Problem
Goal
Design process
Final solution
Outcome
Course sale platform

Block Feature for Website Customisation

Role
Product designer
Team
Prodduct design - Ya Ling
Engineer - Warren Wilson
Product manager - Chloë Threadgold
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.

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. Secondary research

Understanding the administrator's frustration and daily workflow through the frequent requests in customer support.

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
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.

Other works

Course sale platform

Admin experience for enrolment and revenue management

View work
Assessment Tool

Designing a Survey Experience

View work

Contact

Let’s connect and discuss how I can help.

Email me at
ooyaling@gmail.com
Work
LinkedIn
Download Resume