Sep 2021 - Continuing

Design Thinking Online Learning Platform

Design Thinking Web Application Educational Platform Flipping Classroom Post Covid
Team in 3 (UI Design, 3D Modeling Designer, Animator)

Hong Kong Design Institute, Vocational Training Council

With over 200,000 students each year, Vocational Training Council is the largest vocational and professional education and training provider in Hong Kong. In these several years starting the design thinking training in the post-secondary course. The digital platform for teaching design thinking, the system development in 2021 - 2022 and pilot run at Hong Kong Design Institute in 2022 - 2023.

My Role & Duty

  • Project PIC (Planning, Monitoring, Consultation)
  • Led of design team (UX, UI, Visual, Theme, Character)
  • Led of content production (Education use video)

With whom I worked

  • Institute lecturer
  • Institute IT team
  • Internal development team


Design Thinking is the foundation for design learners in future, this online learning platform for 2000+ higher education students study in a hybrid model with the digital way. The academy staff can easily use timely feedback and facilitate activities based on the learning pace; the institute management can monitor and respond opportunely.


Process of the project

Chaining - process

Simplify Stakeholder Understanding (Situation)

Responsive image College Student
Frustration with learning and lack of motivation in the class

The elementary learner of design thinking, it is difficult on applying abstract concepts and hard to pick the right tools for the process. It reduces learning motivation and begets frustration in learning.

How might we...
  • Create the mainline of learning materials for easier self-learning of the foundation
  • Offer simplified design thinking tech tools with the basic template
  • Set up the award system to build the intrusive and extrusive motivation
  • Build the gamifying world to enrich the novelty of learning
Responsive image Teaching Staff
Hard to give advice during the out classroom activities of the design thinking research

Under the frame of the traditional education system and resources, it is a lack of a method for timely feedback. It relies on sense and experience to guess the student's needs.

How might we...
  • Set up the customer alert to help the teaching staff easy to aware such as slow pace student
  • Provide online interaction tools to be the bridge in communication
  • Offer the automatically respond to share the workload and increase the respond speed
Responsive image Institute Management
Until the final result submission to understand the real teaching and learning performance

As per the existing practice, the management needs to wait for the report passively, so they cannot arrange the agile command during the semester when they are aware of or foresee any insight.

How might we...
  • Provide timely self-direct check access for teaching and learning
  • Set up the auto-alert anytime during the academy year
  • Build the bird view dashboard to monitor different teaching pathways and study performance

Research & Design

Based on difference process to understand the point of view, pain point, challenge and expectation of several stakeholders.

Note of the interview
Note of the interview

Stakeholder Interview

Understand the teaching planning, the method is conducted in existing. At the same time, meet the student to discover the learning pain point now; Meanwhile, the meeting with management to know their expectation.

Scoping of the tool's expectation

Digital Tools' Feature Exploration

Comparing with the market tools on design thinking, conduct the workshop to understand the critical feature from the user and observe the teaching and learning to design the features.

Character Design proposal

Character Design

Based on the image and brand style of the institute and the teaching method to set up the meaningful character for teaching materials.

Screen cap of a part of the lesson video

Education Video Storyboard

Based on the teaching plan and method of the lessons, the content visualization of the abstract concept. The storyboard showcases the storytelling for the digital self-learning materials approach.

1st demo walk through with institute user

Clickable Prototype

The clickable prototype provides an immersive way for testing and getting feedback before the development process. Focus on the perception observation to understand the potential amendment items.

Screen cap of the User Manual

User Manual Documentation

Before launching the platform, we offered training sessions for the institute staff. For more efficiency and easily share the use of the platform, I wrote the user manual in the step by step way to help user master the control of the platform.

Highlighted comment from the user

Pilot Run Testing & Refinement

After two rounds of internal UAT sections, the pilot run testing was conducted. Recruited 15 academy staff and 21 students to join 1 hr lesson with 2 flipping unit in short period.


VTC Student View
Student View

Personal Dashboard with the mission list, the reward system to award the equipment for student avatar, which able students to change the avatar's equipment to show on the platform. The student study with the character in the platform, which like the RPC stay in the same world and assist them when self-learning outside the campus.

VTC Featured Tools
Featured Tools

Combining several purpose tech tools, the student can conduct the auto-grading task with the feedback of the system to achieve self-monitoring. But also the co-work tools to engage the student participant and communicate outside of the classroom, the teaching staff can join with students and respond timely in the platform.

VTC Staff Dashboard
Staff Dashboard

Monitor Dashboard to help to teach staff and management to oversee the study performance. Modularizing the activities makes teaching staff easier and more centralized to create, which comes with the auto-grading feature to reduce the review time.


After the validation of the second design concept with a dry-run session, we developed the design into high-fidelity prototypes in video and digital prototyping format. We organized another user validation session to collect potential users’ feedback and analyze whether the design meets our vision and design criteria.

Click to the platform

Benefits to the client

  • Enables peer learning with a virtual reward system to engage student participation rate
  • Increase the learning outcome deliverable through the centralized teaching tools
  • Reduced the time of review assignment using automatic rating features
  • Support class scaling in online activity
  • Reduced the resources of assignment submission arrangement
  • Saved a week of time to collect teaching data and generate reports manually