top of page

Learning App for SEN students

Client project with Bridge and ASTRI


2 weeks


Agatha Leung

Leona Chan

Melody Hung

Sampson Poon


UX/UI designer


User research

User Testing

UX Design

UI Design

Usability Testing

Client Overview

Bridge is a government-approved educational institute that provides early intervention to children with special educational needs (SEN) using Applied Behaviour Analysis.


Hong Kong Applied Science and Technology Research Institute Company Limited (ASTRI) is a technology-based company set up by the HK government. Astri would be helping with the development of this learning application.

Project Brief

Currently, Bridge offers an online learning platform which can monitor students’ performance with the analysis of a comprehensive list of environmental and physiological factors. They are now collaborating with ASTRI to further develop a better version, which would be easily managed by parents.  


We would be recreating the learning platform for their internal use, together with another version for parents to closely follow their children’s progress on the therapy.

Understanding their perspectives 

During the guided tour, we looked into how the current scoring app works. Shortly after, we conducted interviews with supervisors and therapists so as to understand their pain points while using the app.

We also did some research on how these learning apps work and how the features would usually be displayed.  

Let's first take a look at the current Design

Once logged in, they are directed to Today's session page

Therapists cannot make changes to the scheduled sessions

Screenshot 2021-01-18 at 2.36.48 PM.png
Screenshot 2021-01-18 at 3.24.12 PM.png

(Before therapy)

Screenshot 2021-01-18 at 2.17.30 PM.png

Overpacked buttons that lead to wrong data entry. 

Therapists conduct sessions without supervision

(During therapy)

Nowhere to leave a note

Once the result is submitted, there would not be a summary 

Screenshot 2021-01-18 at 3.43.56 PM.png
Screenshot 2021-01-18 at 3.41.19 PM.png

(After therapy)

"It is actually quite tiresome to draw data from the excel database when creating sessions."

                                 - Supervisor A 

"With more graphs and charts, the data would be more understandable for us to read."

                                 - Therapist A 

What are the problems that we identify?


The original requirement for us students is to create a dashboard for displaying reports, and we need to design the templates of both the session report and monthly report.

However, after conducting the interviews, we found that the currently practised version was not holistic enough and we recreate the app for our clients’ reference. 


Overwhelming and unorganised database in excel format 

Inefficient when drawing data to create therapy session (Google drive and excel)

Difficult to seek help from supervisors during therapy session

Hard to track student performance without clear report


  1. Data visualisation for better understanding

  2. Better categorization with filters

  3. Immediate SOS function

  4. Clean and clear style of reports

  5. Comment section after each session  


Introducing our design

What's the app about? 


Session Recording

Score performance and record together with behavior and mood factors


Communication between supervisors, therapists & parents

Session Management

Arrange task and manage sessions in calender


Session Report

Report on academic performances, mood changes with environmental variables


Monthly Report

A detailed version of session report with comparison between sessions

App Features 

1. Data Displayed in Charts and Graphs

Individual student page.jpg
Individual student page.jpg

We use bar graphs to show the score of every single domain. Spider chart is used for comparison between the student's and the standard performance so as to understand their process and arrange tasks accordingly. 

Monthly - Subtasks performance overview.
Monthly - Subtasks performance overview.

Data would be more accessible and understandable once they are visualised. Supervisors and therapists get to easily identify the outliers and patterns of students' performance. 

2. Better organisation

Manage Program (Supervisor).jpg
Manage Program (Supervisor).jpg

From our interviews, we found that supervisors would like to have the "mastered tasks" filtered out so they arrange the unmastered ones for students to work on. 

Session details (therapists).jpg
Session details (therapists).jpg

We did almost the same for the therapists by including "Sort By" filter to help therapists find tasks according to "AI suggestion", "least performed", "Domain" or in alphabetic order. 

We also include a "search bar" as we understand that the database might be overwhelmingly large and we hope to help shorten the searching time. 

3. S.O.S Function

Session Scoring view.png
Session Scoring view.png

Therapists might sometimes encounter situations that they need assistance from their supervisors. That's why we include a "SOS" button in red for therapists to push if they need immediate guidance. 

4. Clear Session report

The environmental and physiological variables change as the video recording goes. This helps supervisors and therapists spot out the outlying moments . An message icon will also show up as an indication if there is alert/message left by therapist during the session. 

5. Session Summary with commenting section

Session summary.png
Session summary.png

After each therapy session, there will be an overview that summarizes the student's performance. The therapist can review it first before uploading the result out  and might add a line or two to mark down some comments/jot the outlining moments for later on reporting function.  

How do we get there?

I believe it is better to refer to personas instead of raw data when generating ideas.

As the persona includes most of the relevant information of our target user in one location, we do not need to go through separate user tests and reports when brainstorming ideas throughout the project.

astri Persona - Peony (supervisor).jpg
astri Persona - Hester (therapist).jpg
astri Persona - Alice (parent).jpg

Creating a new sitemap

We created a new sitemap to display how the pages are linked and connected

Based on the finding from interviews and the guided tour, we merged the requirements of our clients with our proposed features to better serve our users. And by creating sitemaps, we are able to ensure that these new elements are in places where users would expect to find.

Brainstorming Time!


Comparison of student's performance with standard requirements

Comparison of different sessions

Add and remove tasks based on AI recommendation

Clear calendar to remind users 

sitemap bridge.jpg

Design Process


wireframe Calendar Schedule (Week).png
Student profile page
wireframe OLD Monthly Report - 3 (2).png
Domain performance
wireframe single domain performance.png
Task performance
wireframe XX Single Session Overview.png
Mood and IOT report
manage task 2.png
Session arrangement
wireframe Monthly Report.png
Single session overview

Usability testing

We conducted usability testings with Bridge's supervisors and therapists with our wireframes.

Our users could easily understand the flow and were satisfied with the page arrangement. However, they expressed their concern over the display of outlining moments during the therapy. They would like it to be highlighted as an alert for supervisors.

We understand their concerns and based on their feedback, we recreated some of our wireframes to better suit the needs of our users.  


As therapists need to constantly press different buttons during the therapy sessions, we want to include colours that are distinctive and sharp enough.


Results  and Major Takeaways

This is my very first client project and I learn how to merge users' needs into our design. During the design thinking process, we try to put ourselves into their shoes, wondering how their concerns and problems could be solved.

We have conducted a lot of secondary research on data visualization as we are aware that this is a data-heavy application, and with information transformed into charts and graphs, it would be a lot easier for our users to understand.

Current Design
Our Design

Coming Next: JobsDB 

Previous: Mazen Eyewear

bottom of page