1. Coming to all courses August 31st
Changes to Coding IDE
Coming to all courses August 31st

2. Current User Pain Points
“Learning” and “doing” areas are cluttered together
The disconnect between “Requirements” and “Tests” leaves students asking, “Why did I get this grade?”
Students have a poor user-experience when trying to review their grades
Settings, Help, and Tools are spread across the IDE, often hidden and not easily accessible.
New features result in additional interface complexity

3. Learning vs. Doing

4. Currently, the learning process and the doing process are mixed together, resulting in a cluttered interface and experience.

5. Now, the “learning” environment is displayed only on the left, while the workspace (“doing”) is displayed only on the right.

6. The student can also quickly jump to “Workspace” mode to fullscreen their work environment.

7. Tasks and Checks

8. Step 2
Step 1
Currently, to check their work, the student must first click the Test button to start a test run.

9. Then, they need to click Codey to open the list of messages
Then, they need to click Codey to open the list of messages. They’re often confused as to which message they should click next.

10. After clicking into the test result message they are shown a list of the test results.

11. They can then click the test result
They can then click the test result. To exit, they need to click Back, then the red X.

12. Now, the student can view a list of all the goals for their lab from the Tasks list.

13. They can then click Check Tasks to verify their work and view the results in real time without additional navigation.

14. Grading and Submission

15. Step1
Currently, when a student wants to submit their project for a grade, they first have to click the Grade button.

16. Step 2
Then they need to click Review, but aren’t shown why their current “Requirements” are receiving a specific grade.

17. Completed task Incomplete task Score
Now, the student always sees the score they can submit for a grade in their Task list. The checks being used to validate their work are clearly displayed on each task.

18. At any time a student can instantly view their previous submissions and get useful project insights using the Review mode.

19. Settings and Help

20. In the current interface, when first loading a lab, the student is given no indication as to where to look for help.

21. Step1
Step 2
Help is buried under the Settings, along with Review Mode, Share, and Download.

22. In some cases (like a terminal-only lab), they might not be able to see the Settings icon at all.

23. Now, the Help icon is always accessible at the bottom left of the screen.

24. As are the settings.

25. Working with Files

26. The directory sidebar is still there, too.

27. And files in “Lite” beginner projects still behave exactly the same.

28. Codey

29. If Codey is enabled (the default), he’ll still provide the students feedback when they complete a task.

30. What is staying the same
Lite vs. Full interface
Code editor
Terminal
Web Browser
Full GUI
Python GUI
Installed software
Directory sidebar
All test logic
Instructional content/colors
Debugging and linting functionality
Embeds/URLs

31. There’s more… Professional, “Material” design (standardized by Google)
Full ADA compliance
Customizable
Scalable for new features

32. Summary of Changes

33. Result “Learning” and “doing” areas are clearly separated
“Tasks” and “checks” framework increases transparency of lesson expectations
Grade submission and review processes are seamless
Settings, help, and tools are accessible at all times