top of page
Learning App for SEN students
Client project with Bridge and ASTRI
Duration
2 weeks
Team
Agatha Leung
Leona Chan
Melody Hung
Sampson Poon
Role
UX/UI designer
Work
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
(Before therapy)
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
(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.
Painpoints
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
Solutions
-
Data visualisation for better understanding
-
Better categorization with filters
-
Immediate SOS function
-
Clean and clear style of reports
-
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
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
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.
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
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.
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
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
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.
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
Design Process
Wireframing
Student profile page
Domain performance
Task performance
Mood and IOT report
Session arrangement
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.
Moodboard
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.
Brief
Current Design
Our Design
Development
Results
bottom of page