Insider
E-Learning Web App for Steinbeis University.
Dual screen: task info and editor on the left, resources list on the right.
Project
E-LEARNING Web AppLICATION
Client
Schools of Next Practices
Steinbeis University
Insider has been the university’s platform for student evaluation, offering a centralized space where students access course materials like videos and PDFs uploaded by professors, complete assignments, submit essays, track progress and get their grades, all in one place. But over time, the design started to feel outdated and disorganized, making it harder to use.
Main Needs Behind the Redesign
The primary need was to improve the UX and ensure the app remains competitive. Through workshops with students I identified areas for improvement. I explored their study routines, their interaction with the resources and their general preferences.
The value of this redesign also focused on making the platform adaptable for external users. For this, I created a simple and clean design system where the main styles like fonts or colors can be easily modified.
Student Journey: Navigating from Course Overview to Task Editor
USABILITY AUDIT AND workshop with Students
During the usability audit, I identified several pain points in the existing design. As I reviewed the platform, I considered questions like:
Wouldn’t it be useful to combine everything on one screen?
Could a dual screen be more effective?
I also discovered a major issue: resources uploaded by professors were placed in two different areas of the platform, allowing students to access the same files through separate flows. This redundancy led to confusion and was a key factor in restructuring the platform for a clearer journey.
During workshops with students, I identified their main frustrations. They often had to keep multiple windows or tabs open simultaneously to work with the editor and access resources. I also learned they prioritize quick access to materials, especially when traveling. Many rely on their mobile devices to study, but the old design was not user-friendly for this purpose.
This is how the previous design looked like with some questions I began to consider.
"When I'm on the bus, I'd like to quickly check the resources and, ideally, start preparing my essay or save important sections of the texts." — Quote from a student
Design Solutions: Promoting Quick Interaction Between screens
The user needs were very clear, which helped shape the design. I began with low-fidelity wireframes, focusing on an intuitive desktop journey and easy mobile access to study materials. A navigation bar was added to mobile for better interaction between the learning materials and text editor (Fig. 1).
(Fig. 1) Initial drafts for the mobile flow: selecting a module, choosing a task, and accessing resources.
To address the need for multiple tabs when writing essays, I designed a dual-screen solution with one panel for task details and the editor, and another for the resource list (Fig. 2). This streamlined everything into one view, making it easy to copy and paste quotes directly into the editor.
(Fig. 2) Dual screen interface with the text editor and resources integrated into one view for easy interaction.
At the heart of the platform is the Module Workspace
This screen is about helping students easily pick up where they left off. Clicking on a task opens the right panel, showing detailed information and progress tracking for that specific task. They can track word count, view objectives, and understand the grading system.
This design ensures that students on desktop can gather everything they need from the dashboard before entering the editor and engaging with the resources (Fig. 3).
(Fig. 3) On desktop, the dashboard presents an overview of the selected task, displaying student progress to help them prepare before accessing the editor.
Based on users feedback, I adapted the user flow for desktop and mobile, making a key adjustment to fit user needs on each platform. The desktop version includes the dashboard, while the mobile version (Fig. 4) simplifies the experience, prioritizing quick access to resources for students on the go.
This approach allows desktop users to gather all the information they need from the dashboard before moving to the editor, while mobile users can immediately focus on what matters most.
(Fig. 4) Screens to interact between the task description and goals, the list of resources, and the essay editor.
MOVING FORWARD
We successfully completed the redesign of Insider, meeting all our deadlines and milestones. The next steps involve using analytics to measure the effectiveness of the new features. We also plan to introduce AI-powered tools that will give students feedback on their essays before submitting them. For professors, we want to improve features like the grading system, providing better tools to offer insights into student progress.
Insider
E-Learning Web App for Steinbeis University.
Dual screen: task info and editor on the left, resources list on the right.
Project
e-learning web app
Client
Schools of Next Practices
Steinbeis University
Insider has been the university’s platform for student evaluation, offering a centralized space where students access course materials like videos and PDFs uploaded by professors, complete assignments, submit essays, track progress and get their grades, all in one place. But over time, the design started to feel outdated and disorganized, making it harder to use.
Main Needs Behind the Redesign
The primary need was to improve the UX and ensure the app remains competitive. Through workshops with students I identified areas for improvement. I explored their study routines, their interaction with the resources and their general preferences.
The value of this redesign also focused on making the platform adaptable for external users. For this, I created a simple and clean design system where the main styles like fonts or colors can be easily modified.
Student Journey: Navigating from Course Overview to Task Editor
USABILITY AUDIT AND workshop with Students
During the usability audit, I identified several pain points in the existing design. As I reviewed the platform, I considered questions like:
Wouldn’t it be useful to combine everything on one screen?
Could a dual screen be more effective?
I also discovered a major issue: resources uploaded by professors were placed in two different areas of the platform, allowing students to access the same files through separate flows. This redundancy led to confusion and was a key factor in restructuring the platform for a clearer journey.
During workshops with students, I identified their main frustrations. They often had to keep multiple windows or tabs open simultaneously to work with the editor and access resources. I also learned they prioritize quick access to materials, especially when traveling. Many rely on their mobile devices to study, but the old design was not user-friendly for this purpose.
This is how the previous design looked like with some questions I began to consider.
"When I'm on the bus, I'd like to quickly check the resources and, ideally, start preparing my essay or save important sections of the texts." — Quote from a student
Design Solutions: Promoting Quick Interaction Between screens
The user needs were very clear, which helped shape the design. I began with low-fidelity wireframes, focusing on an intuitive desktop journey and easy mobile access to study materials. A navigation bar was added to mobile for better interaction between the learning materials and text editor (Fig. 1).
(Fig. 1) Initial drafts for the mobile flow: selecting a module, choosing a task, and accessing resources.
To address the need for multiple tabs when writing essays, I designed a dual-screen solution with one panel for task details and the editor, and another for the resource list (Fig. 2). This streamlined everything into one view, making it easy to copy and paste quotes directly into the editor.
(Fig. 2) Dual screen interface with the text editor and resources integrated into one view for easy interaction.
At the heart of the platform is the Module Workspace
This screen is about helping students easily pick up where they left off. Clicking on a task opens the right panel, showing detailed information and progress tracking for that specific task. They can track word count, view objectives, and understand the grading system.
This design ensures that students on desktop can gather everything they need from the dashboard before entering the editor and engaging with the resources (Fig. 3).
(Fig. 3) On desktop, the dashboard presents an overview of the selected task, displaying student progress to help them prepare before accessing the editor.
Based on users feedback, I adapted the user flow for desktop and mobile, making a key adjustment to fit user needs on each platform. The desktop version includes the dashboard, while the mobile version (Fig. 4) simplifies the experience, prioritizing quick access to resources for students on the go.
This approach allows desktop users to gather all the information they need from the dashboard before moving to the editor, while mobile users can immediately focus on what matters most.
(Fig. 4) Screens to interact between the task description and goals, the list of resources, and the essay editor.
MOVING FORWARD
We successfully completed the redesign of Insider, meeting all our deadlines and milestones. The next steps involve using analytics to measure the effectiveness of the new features. We also plan to introduce AI-powered tools that will give students feedback on their essays before submitting them. For professors, we want to improve features like the grading system, providing better tools to offer insights into student progress.