Back

Back

[Case 02]

I-VLE: Redesigning the Student Learning Hub

Education

I-VLE: Redesigning the Student Learning Hub

Reducing tool-switching by bringing projects, chat, and feedback into one platform.

[Project Overview]

I-VLE (Innovative Virtual Learning Environment) is a concept VLE designed to improve how students learn and collaborate online for the University of London Southbank. The goal was to modernise the experience and keep everything needed for coursework, projects, communication, and feedback in one place.

[Challenge]

Students often rely on external tools (WhatsApp, Discord, Teams) for group work, which creates [[ distractions and scattered information. ]] The existing LSBU VLE also feels outdated, offers limited group feedback tools, and can [[fall short on accessibility and clarity. ]]

[Industry]

Education

[My Role]

UI/UX Designer

[Platforms]

Desktop

[Timeline]

3 Months

View Live Project

View Live Project

[Persona]

Ivan Evander

Artificial Intelligence Module Leader

"As a teacher, I want clear feedback and visibility into student progress"

Age: 32

Location: London

Education: MSc in Computer Science

Gender: Male

[Goal]

Get a clear overview of student activity, grades, and attendence.

Provide structured, timely feedback without switching tools.

Communicate efficiently with students in the VLE platform.

[Frustrations]

No summarised view of student progress across modules.

Limitations in providing detailed feedback through the VLE platform.

Limited visibility into student engagement outside class hours.

[Action Taken]

Brainstorming Ideas

Brainstorming Ideas

[01] Ideation & Prioritisation

Based on interviews with both students and teachers, I generated a broad set of ideas to address key issues in the current VLE, especially around feedback clarity, collaboration, and accessibility. I then [[ clustered these ideas into themes ]] (e.g. accessibility, project management, communication, module management, and personalised experience) to help [[ evaluate impact and identify the strongest feature to take forward ]] into design.

[01] Ideation & Prioritisation

Based on interviews with both students and teachers, I generated a broad set of ideas to address key issues in the current VLE, especially around feedback clarity, collaboration, and accessibility. I then [[ clustered these ideas into themes ]] (e.g. accessibility, project management, communication, module management, and personalised experience) to help [[ evaluate impact and identify the strongest feature to take forward ]] into design.

[01] Ideation & Prioritisation

Based on interviews with both students and teachers, I generated a broad set of ideas to address key issues in the current VLE, especially around feedback clarity, collaboration, and accessibility. I then [[ clustered these ideas into themes ]] (e.g. accessibility, project management, communication, module management, and personalised experience) to help [[ evaluate impact and identify the strongest feature to take forward ]] into design.

Initial Sketches

Initial Sketches

[02] Low-Fidelity Wireframing

I translated these key ideas into low-fidelity wireframes to [[ explore structure, layout, and core interactions. ]] I created [[separate flows for teachers and students ]] to reflect their different goals and responsibilities. This helped [[ validate early assumptions]], align the design with user needs, and set solid foundation before moving into higher-fidelity design.

[02] Low-Fidelity Wireframing

I translated these key ideas into low-fidelity wireframes to [[ explore structure, layout, and core interactions. ]] I created [[separate flows for teachers and students ]] to reflect their different goals and responsibilities. This helped [[ validate early assumptions]], align the design with user needs, and set solid foundation before moving into higher-fidelity design.

[02] Low-Fidelity Wireframing

I translated these key ideas into low-fidelity wireframes to [[ explore structure, layout, and core interactions. ]] I created [[separate flows for teachers and students ]] to reflect their different goals and responsibilities. This helped [[ validate early assumptions]], align the design with user needs, and set solid foundation before moving into higher-fidelity design.

Typography scale and colour palette

Typography scale and colour palette

[03] Typography & Colour Palette

Roboto was chosen for its [[ clean, modern feels and flexible range of weights]], making it easy to create clear hierarchy across headings, body text, and UI labels. The colour pallete is based on [[ LSBU's existing brand colours]], helping the redesign feel similar to students while still supporting accessible states like success, warning, and error.

[03] Typography & Colour Palette

Roboto was chosen for its [[ clean, modern feels and flexible range of weights]], making it easy to create clear hierarchy across headings, body text, and UI labels. The colour pallete is based on [[ LSBU's existing brand colours]], helping the redesign feel similar to students while still supporting accessible states like success, warning, and error.

[03] Typography & Colour Palette

Roboto was chosen for its [[ clean, modern feels and flexible range of weights]], making it easy to create clear hierarchy across headings, body text, and UI labels. The colour pallete is based on [[ LSBU's existing brand colours]], helping the redesign feel similar to students while still supporting accessible states like success, warning, and error.

High-Fidelity Screens

High-Fidelity Screens

[04] High-Fidelity Design

The concepts were then translated into high-fidelity interface designs for both students and module leaders, focusing on [[ clarity, hierarchy, and consistency ]] across the platform. Core screens such as course, dashboards, modules, analytics, projects and reports were designed to [[ surface progress, feedback, and key actions at a glance. ]] Visual decisions around layout, colour, and components structure were made to [[ support accessibility ]] while ensuring the system could scale across different modules and academic years.

[04] High-Fidelity Design

The concepts were then translated into high-fidelity interface designs for both students and module leaders, focusing on [[ clarity, hierarchy, and consistency ]] across the platform. Core screens such as course, dashboards, modules, analytics, projects and reports were designed to [[ surface progress, feedback, and key actions at a glance. ]] Visual decisions around layout, colour, and components structure were made to [[ support accessibility ]] while ensuring the system could scale across different modules and academic years.

[04] High-Fidelity Design

The concepts were then translated into high-fidelity interface designs for both students and module leaders, focusing on [[ clarity, hierarchy, and consistency ]] across the platform. Core screens such as course, dashboards, modules, analytics, projects and reports were designed to [[ surface progress, feedback, and key actions at a glance. ]] Visual decisions around layout, colour, and components structure were made to [[ support accessibility ]] while ensuring the system could scale across different modules and academic years.

Student & Teacher Prototypes Screenshots

Student & Teacher Prototypes Screenshots

[05] Interactive Prototyping

I turned the designs into an interactive prototype by creating [[ reusable components ]] and linking the main screens. This let the users click through key student and module leader flows, like navigation, sidebar, loading screens, and progress tracking, which helped me [[ spot gaps early and refine the journey ]] before finalising the UI.

[05] Interactive Prototyping

I turned the designs into an interactive prototype by creating [[ reusable components ]] and linking the main screens. This let the users click through key student and module leader flows, like navigation, sidebar, loading screens, and progress tracking, which helped me [[ spot gaps early and refine the journey ]] before finalising the UI.

[05] Interactive Prototyping

I turned the designs into an interactive prototype by creating [[ reusable components ]] and linking the main screens. This let the users click through key student and module leader flows, like navigation, sidebar, loading screens, and progress tracking, which helped me [[ spot gaps early and refine the journey ]] before finalising the UI.

[Key Skills]

User Interviews
Feature Ideation
User Flows
Wireframing
High-Fidelity Design
Figma Components
Prototyping
Video Editing
Figma Components
Prototyping
Video Editing
Figma Components
Prototyping
Video Editing

[Outcome]

Achieved 88% for the VLE redesign coursework.
First time using components, styles, and layouts in figma.
Built interactive prototypes across student and teachers flows for testing.
Select this text to see the highlight effect

Create a free website with Framer, the website builder loved by startups, designers and agencies.