Pytch is a web app that was developed by two Trinity College Dublin professors to guide students through the transition from the block-based programming language Scratch to learning the text-based programming language Python. The developers sought UI/UX input from Interactive Digital Media students during a 24-hour hackathon.
Ben North & Glenn Strong developed Pytch as a classroom tool to teach students ages 12-15 with a background in Scratch how to write code in Python. The product is currently going through user testing and is in its infancy. The developers have noticed usability issues with the current version and were seeking UI/UX input. Below are a few of the developer's findings during preliminary user testing:
When we heard about this project, a couple of my peers and I reached out to Glenn and Ben to propose a hackathon, where students interested in UI/UX could individually develop and present their own solutions to Pytch’s problems.
There are platforms like Scratch, geared towards children, and platforms like CodeAcademy, geared towards adults. I wanted to learn best practices when designing for a younger teenage audience so I could know which elements of child and adult-geared platforms to incorporate into my own design.
My findings:
During the hackathon, I was able to get in contact with two teenage students learning how to code and one STEM educator. I conducted user interviews, which gave me valuable insights on how they would use Pytch.
My findings:
Due to the limited timeframe of the hackathon, I decided to build my wireframes directly in Figma to speed up the final mockup design process.
During Ben and Glenn’s user testing, they noticed issues with how the tutorial screens were displayed on devices with smaller screens, like Chromebooks, which are common in classroom settings. The tutorial instruction window is cropped on smaller screens, which causes text to get cut off, requiring students to scroll up and down to read the instructions.
To address this, I changed the layout of the entire integrated development environment (IDE) to a 3-column setup. The tutorial takes up the height of left column, so they can still see most of the text regardless of screen size. I also added a progress bar and checkboxes to create milestones for the students as they progress through the lesson, based on suggestions from the secondary research.
In IDEs designed for adults, the console is a separate window that displays error messages when you run a program with bugs. Understanding those messages is crucial when debugging code. Learning to debug at an early age has been very beneficial to the students I interviewed, so I decided to dedicate the bottom half of the right column to the console alone.
Because of the limited time and ability to collect user insights during of the hackathon, I had to rely on Jakob’s Law to inform many of my design decisions.
Jakob's Law: “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”
For the IDE layout, I took inspiration from Scratch, because it is a platform most of Pytch’s users are familiar with, to move the “images and sounds” tab and previously hidden code block menu to the left column on separate tabs. Similarly, I used middle column of the screen for the code itself and the top of the right column for the visual output of the program.
When we were told about the teachers’ frustrations with managing projects on the My Projects page, my mind immediately went to my experience with Gmail. After forgetting to unsubscribe to many mailing lists, I have become very familiar with select + delete functionality of Gmail. I thought that that a similar approach could be a good solution to Pytch’s project management system. During user interviews, I confirmed that Pytch’s potential users are also familiar with Gmail and its functionality.
Early on, I identified a few contrast issues with Pytch’s original website. The developers were not committed to their current UI, so I decided to choose new colors and typography.
Since this program is meant to be a combination of Scratch and Python, I decided to take inspiration from both to redevelop the branding for Pytch. Both Scratch and Python use a yellow accent color throughout their websites, so I brought that into Pytch’s color palette. I used a light lilac similar to the light blue in Scratch and a dark navy blue similar to Python.
For the font, I used Inter for the main text as it is known for its legibility. I used Roboto Mono for the code editor, as it is a monospace font and these fonts are the standard for programming.
Homepage:
I reorganized the homepage in order to include a call to action. Additionally, I created and added gifs to the Popular Projects and Tutorials section to give users a better preview of each project.
Exposing hidden features:
By using tabbed windows, similar to Scratch's interface, the users can more easily discover the tutorial, blocks, and assets. I added tabs for the console to help users new to debugging better understand the program’s output.
Providing milestones during tutorials:
For each step completed, the program will give the user feedback. Hints will be provided when steps are not completed correctly. These changes were based on suggestions from secondary research.
My Projects:
Here is the final design for the My Projects Page. Action buttons appear when projects are selected, as done in Gmail.
