Official Blog

Redesigning Our Learning Interface

This post takes you through some of the new features we have added to make your data science learning experience better, and the rationale behind them.

As many of you might have already noticed, we have redesigned our learning interface from scratch to make your learning experience better. In this post, we will take you through some of the significant new features we have added, and the rationale behind them.

Figure 1 | Redesigned Learning Interface

1 | Toggle Editor Themes

One of the highly requested features from our users was the ability to switch to a darker theme while writing code. We listened to you and now it is possible to toggle between a dark and light theme by clicking on the settings icon on the top right panel. We might add more themes to the editor based on what we hear from you.

Figure 2 | Dark and Light Themes

2 | View Course Progress

Many of you had expressed interest in being able to view your progress in the course without having to click on the course outline. You would be happy to know that we implemented this as a part of our redesign. Now, you can see a shiny sparkling progress bar at the bottom of the learning interface to keep you abreast of your progress in the course.

Figure 3 | Course Progress Bar

3 | Run Code

DataCamp is all about learning by doing. You write code to complete an exercise and submit it to test for correctness. Often, we have heard our users express the need to be able to run code without submitting it, so that they can explore different possibilities. So, we decided to add a Run Code button to make it easier for learners to run all code in the editor, or just a selected chunk, without submitting it as an answer. Going by the initial data gathered, it seems like many of you are already taking advantage of this feature. For all you keyboard lovers out there, you can still use the keyboard shortcut, Ctrl + Enter, to run the code.

Figure 4 | Run Code

4 | Collapse Panels

Some of us prefer a more zen-like environment while writing code. You could already achieve this with the current interface by resizing the side and bottom panels. We wanted to make this a lot easier for you. So in the new interface, you can easily toggle the side and bottom panels by clicking on the arrow icons. We hope this feature will provide you with more room for writing code and help you learn better by minimizing distractions.

Figure 5 | Collapsible Panels

5 | Navigate Instructions

On each exercise, users read the instructions in the side panel and write code to complete the exercise. Given the amount of time users spend interacting with our interface, we wanted to make it a lot easier to view instructions and code side-by-side, providing a smoother learning experience. Accordingly, the instructions in the side-panel lock into position when you scroll down. Alternately, you can click on the instructions panel to align it side-by-side with the code.

Figure 6 | Align Instructions and Code

We hope these improvements to the interface make learning on DataCamp a really smooth experience. If you have not already done so, please take the new interface for a spin. We would love to hear from you on what you think about these new features. If you have any ideas or suggestions on how we could improve the interface further, please let us know by filling out this feedback form.

Want to leave a comment?