Redesigning an Online Course Website
OVERVIEW
Student Learning Space (SLS) is an online learning portal developed for schools in Singapore nation-wide. Its goal is to extend and enrich teaching and learning experiences beyond the traditional classroom setting.
Since its introduction in 2018, the platform has encountered several usability challenges. Integrating conventional teaching methods into an online environment presents numerous complexities.
TASK
1. Redesign a workflow to create and consume a lesson
2. Create new branding to replace outdated UI
3. Create a mobile responsive Design System
2. Create new branding to replace outdated UI
3. Create a mobile responsive Design System
CLIENT
Ministry of Education, Singapore
ROLE
UX / UI Designer
TIME
5 months (5 design sprints)
Year: 2020
PROBLEM
Feedback From the Ground
From the previous design:
Tangled Navigations
Although the platform already offers extensive functionality for creating, editing, and rearranging sections within a lesson, a growing list of additional features has been added on top of this existing capability. As a result, the lesson navigation panel has become an unattractive and poorly considered element.
High Cognitive Load
Developing teaching materials in the real world is already a tedious and time-consuming process, and transitioning this task online adds another layer of complexity.
We discovered that creating courses requires teachers to input numerous details simultaneously. This significantly increases their cognitive load, leading to mental fatigue.
Spacial Crisis
In online lessons, the merging of space between students and teachers is crucial for fostering collaborative experiences in a classroom setting. Unfortunately, this space fails to provide a sense of psychological safety due to a lack of spatial clarity.
We observed that users are often unaware of the environment they are entering, which increases their anxiety about learning or teaching online.
SOLUTION
Redesigning Teaching and Learning Experience
Simplified, Consistent and Expandable Navigation
Course Structure Reorganised
Space and Role Indication
Design System
One of the most time consuming tasks is to create an eco-system of the new skin. All files in Figma are connected to the master file of its patterns, components, icons etc. Additionally, we created guidelines for mobile, tablet and desktop responsiveness.
Snippets of components created:
Figma Prototype
CONCLUSION
What I’ve learned...
Understanding the Product Team
Working alongside with people from various roles such as clients, managers, designers and developers, I find that half of my work falls onto the category of developing soft skills such as empathy, people management and situational awareness. Without these skills, hours of communication could feel endless, and the proposal would easily fall through.
Designing for the future
A good design fulfil needs for the present, but a great design transcends vision for the future. I learned that it is crucial to allow appropriate amount of time for idea exploration and discussion because these processes help develop depth and future-proof the final design.
MORE
Designing a Class Performance Analytics
Designing a Class Performance Analytics