<aside>
💡 * The intended goal of this Project is to let students internalise the fundamental skills from designing to developing the pages, workflow, permission control based on the pre-defined context.
</aside>
<aside>
☝🏼 * This Design Project is designed for students who have completed the Tutorial from 3.2 to 3.6
</aside>
<aside>
🤩 * Students are expected to solve the complex and special case handlings by themselves by iterative design cycle:
- Problem Identification
- Requirements Consolidation
- Roles Design and Assignment
- Workflow Draft
- Pages & Workflow Development
- MVP Testing (in Developing)
</aside>
Concepts & Knowledge
Standard Procedures

Product Initiation
<aside>
🧐 Background
*Briefly describe the following:
- Which business sector are you making this system for? (Target Clients) What is their business nature in specific
- What are the problems that these target clients are facing in general
- Why digitalisation with DragOnce can help solve these problems?
e.g.* INSPIRE Education is a company that hires instructors from universities to deliver STEM Education services. Each instructor has different salary rates per hour, and the company needs a system to keep track of their working hours and calculate their pay.
</aside>
<aside>
🔍 Business Process Analysis
2.1 Key Stakeholders Involved
By studying or formulating the organisation units, departments, teams to individuals, we can group and map the corresponding roles and responsibilities of each individual as potential system users.
2.2 Current Business Processes
*By using whimsical, the overall flow chart of different processes should be clearly structured and outlined.
(Example shown at the bottom)*
2.3 Process Details and Identified Opportunities
This section is to outline the key identified rooms of improvements in relevant processes.
2.4 Use Cases with Real-Life Examples
This section is to apply real-life examples to explain the key processes listed in 2.3, to further illustrate how does it look like

</aside>
<aside>
✅ Solutions
*Briefly describe the following:
- What are the expected objectives of making this system
e.g.* The objective of this project is to design and develop a salary counting system for INSPIRE Education that will:
- Allow staff to create new services details including dates, time, location, number of lessons, lessons content and assignees of these classes.
- Allow instructors to see a list of their assigned classes to teach.
- Allow instructors to access the teaching record page to check-in and check-out every time for their lesson in order to count the number of working hours.
- Allow staff to see the records, generate monthly report, and to generate payroll for instructors.
</aside>
<aside>
🉑 Scope
*Briefly describe the following:
- The high-level deliverables with the system in this project*
The scope of this project includes the following:
- Designing and developing an Admin Panel for staff to configure salary rates for each instructor.
- Designing and developing a system for staff to create new services details including dates, time, location, number of lessons, lessons content and assignees of these classes.
- Designing and developing a system for instructors to see a list of their assigned classes to teach.
- Designing and developing a teaching record page for instructors to check-in and check-out every time for their lesson in order to count the number of working hours.
- Designing and developing a system for staff to see the records, generate monthly report, and to generate payroll for instructors.
</aside>
<aside>
📖
Product Requirements
*Briefly formulate the components and requirements of the system
e.g.*
ID |
Component |
Requirements |
A_01 |
Form for creating new courses (Service details) |
• include fields for course name, course description, course duration, course materials, course level, and course fee (per hour to client). |
• allow the manager to upload course materials share-drive link, such as handouts, videos, or slides. (such that tutors can check the reference materials) |
|
|
• include validation to ensure that all required fields are filled out correctly. |
|
|
• have the ability to save the course information for later editing and updating. |
|
|
A_02 |
Form for school profiles |
• include fields for school name, school address, school contact information, and school logo. |
• allow the user to upload the school logo and other relevant images. |
|
|
• include validation to ensure that all required fields are filled out correctly. |
|
|
*** counts the total number of scheduled courses that the school involves (Optional to have) |
|
|
• have the ability to save the school information for later editing and updating. |
|
|
A_03 |
Form for Tutor Profile |
• include fields for tutor name, HKID Number, DOB, tutor contact information (Mobile Number, Email), tutor bio, CV attachment, SCR attachment and tutor photo. |
• allow the user to upload the tutor photo and other relevant images. |
|
|
- able to input the salary rate per hour and would be used to calculate the salary for the courses delivered at the end of the month
• include validation to ensure that all required fields are filled out correctly.
- Able to generate contract (with employment type of full-time or part-time or freelance, with range of employment period etc.)
- Able to attach signed contract
- Tutor should have a status of (Recruited, Employed, Expired, Blacklisted)
*** The status of the tutors should automatically expire after the end of the employment date. Also, a reminder should be sent to manager 4 weeks prior to the end date (Optional to have)
• have the ability to save the tutor information for later editing and updating. |
| A_04 | Form for scheduling | • This form should have unique schedule ID
- allow the user to select which course, provided to which school, assigned to which tutor(s), and include a table of scheduled dates and times with independent configuration ability
- allow the user to have a remark box for special request
- allow the user to check the boxes of equipment needed to bring (e.g. Apple TV, Projector, Drones, Laptops, iPads, Mobile Phones etc.) and with quantity remarks respectively
- once the schedule is created or saved, system message would be sent to assigned tutors
*** confirm the schedule availability with assigned tutors (Optional to have)
• should include validation to ensure that all required fields are filled out correctly.
• should have the ability to save the scheduling information for later editing and updating. |
| A_05 | Check-in Check-out form for Tutors | * It exists as a saved lesson page for assigned tutors to open. A button of “Check-in” and then “Check-out” would appear
- Its records would be used to calculate the salary of each tutor monthly |
| A_06 | Record Page for courses | • display all the courses that have been created, along with their details.
• allow the user to filter and sort the courses by various criteria, such as course name, course level, and course fee.
• have the ability to edit and delete courses. |
| A_07 | Record page for school profiles | • display all the school profiles that have been created, along with their details.
• allow the user to filter and sort the school profiles by various criteria, such as school name and date of creation
• have the ability to edit and delete school profiles. |
| A_08 | Record page for scheduling | • display all the scheduled courses, along with their details.
• allow the user to search and sort the scheduled courses by various criteria, such as course name and tutor name.
• should have the ability to edit and delete scheduled courses. |
| A_09 | Record page for Tutor Profile | • display all the tutor profiles that have been created, along with their details.
• allow the user to filter and sort the tutor profiles by various criteria, such as tutor name and tutor contact information.
• have the ability to edit and delete tutor profiles. |
| A_10 | Dashboard for all upcoming courses | • display all the upcoming courses in a calendar format, with each course represented as a separate event.
• allow the user to filter and sort the courses by various criteria, such as course name and start date.
• allow the user to click on a course to view its details. |
| A_11 | Payroll Generator for Tutors | • calculate the amount owed to each tutor based on their check-in and check-out times and the course fee.
• allow the user to select a date range for the payroll period.
• have the ability to generate and export a payroll report in a specified format, such as a PDF file. |
</aside>
Documentation (After POC has been developed)
<aside>
<img src="/icons/user-circle_gray.svg" alt="/icons/user-circle_gray.svg" width="40px" /> User Stories
In this section, you should write explicitly the UX of the specified user in each function. The following table is a template for reference. Please duplicate the template yourself for each story.
(Example)
Role |
GIVEN I am the general staff in the organisation, |
Story |
I SHOULD be able to see a centralized dashboard after I logged in with my credentials, |
And I SHOULD see a button named “Create Submission” on the top right corner. |
|
AFTER I click the button, |
|
I SHOULD see a pop-up window that is the form (entering 5.2) |
|
Calculation / Logic Remarks |
• The button should not be clickable if this feature is toggled off |
• If I have used up all my monthly credit amount, the button should be invisible |
|
Suggested UI |
(UI from client) |
Accepting Criteria |
• … |
• … |
|
Priority |
P0 - MUST DO |
Implementation Status |
Not Started |
</aside> |
|
<aside>
<img src="/icons/pregnancy-test_gray.svg" alt="/icons/pregnancy-test_gray.svg" width="40px" /> User Acceptance Testing (UAT) Planning
6.1 UAT Objectives
**6.2 Test Participants
6.3 Test Results & Follow-up Plans
This section is to outline the key identified rooms of improvements in relevant processes.
</aside>