pictoblox

Designing an Engaging Python Coding Experience

COMPANY

STEMpedia

ROLE

UI/UX Designer

EXPERTISE

UI/UX Design

Duration

4 weeks

Product Workshop
Design System
Desktop App
Web App
User Testing
User Testing
UX Research
Market Research

Project Overview

In this project, I focused on transforming the Python Coding environment within PictoBlox, a platform designed to introduce children and beginners to coding. As the UI/UX Designer on the team, I collaborated with Full Stack and Android Developers, a Graphic Designer for icons and illustrations, and the Marketing and Business Development teams. Our collective goal was to make Python programming more accessible and engaging for young users, ultimately driving adoption and enhancing their learning experience.

Key Features

Integrated debugger for real-time error tracking.
PIP package manager for easy installation of Python libraries.
User-friendly interface to promote seamless coding experiences.-

Check it out

Awareness: Identifying the Need

Despite having a Python Coding environment, user engagement was alarmingly low at just 2%. Feedback indicated that the lack of a debugger and cumbersome library installation processes were significant barriers preventing users from utilizing this feature. This gap highlighted the need for a more robust and user-friendly solution to encourage young learners to explore Python coding.

Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.

Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.

Interest: Researching User Needs

To understand the user experience better, I conducted surveys and interviews with students and educators.

Key Insights from User Research:

Need for Error Resolution

Users expressed frustration with not having a debugger, making it challenging to troubleshoot their code.

Simplified Library Management

Users desired a more straightforward method to install Python libraries without manual steps.

Desire for Engagement

Users wanted interactive features that would make coding more enjoyable and less intimidating.

These insights informed our design strategy, ensuring that the enhancements directly addressed user pain points.

Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.

Consideration: Designing the Solution

With user feedback in hand, I designed an intuitive interface that allows users to:

An intuitive debugger that allows users to track errors in real-time, enhancing the learning process.
A user-friendly tool for searching and installing Python libraries directly within the platform.
A user-friendly tool for searching and installing Python libraries directly within the platform.

Throughout this process, I worked closely with developers to ensure that the design was technically feasible and aligned with the platform’s overall functionality. The Graphic Designer collaborated with me to create icons and illustrations that would enhance the user interface.

Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Highlight 3
Manage your bookings easily with built-in booking widget.
Highlight 4
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Highlight 3
Manage your bookings easily with built-in booking widget.
Highlight 4
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Highlight 3
Manage your bookings easily with built-in booking widget.
Highlight 4
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Highlight 3
Manage your bookings easily with built-in booking widget.
Highlight 4
Show the best parts of your locations with style.

Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.

Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.

Intent: Testing and Iterating

Following the launch of the enhanced features, I facilitated user testing to gather feedback for further improvements. This phase led to significant refinements:

Icon Improvements

Several icons were redesigned for better clarity and recognition, making navigation more intuitive for students.

Improved User Guidance

Enhanced tooltips and onboarding tutorials to help users navigate new features effectively.

Streamlined Installation Process

Adjustments to the PIP package manager for faster and more reliable library installations.

Visual Feedback Mechanisms

Implemented real-time visual feedback in the debugger to keep users engaged and informed.

These updates were crucial in creating a more user-centric experience that encourages learning and creativity. Collaboration with the marketing team was vital to ensure that these updates were effectively communicated to users through promotional materials.

Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.

Conversion: Bringing Projects to Life

Students can now effortlessly write, debug, and execute Python code within PictoBlox. The addition of the debugger and PIP package manager has made coding more approachable, allowing users to bring their ideas to life with confidence.

Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.
Manage bookings
Manage your bookings easily with built-in booking widget.

Loyalty: Measuring Success

The enhancements to the Python Coding environment quickly resonated with users:

Increased Engagement

Usage of the Python feature surged from 2% to 15% in a year, demonstrating a successful adoption of the new tools.

Positive Feedback

Users reported feeling more confident in their coding abilities, leading to a more profound interest in programming.

Advocacy: Looking Forward

This project illustrates the significant impact of user-centered design in making coding accessible and engaging for young learners. As we continue to enhance the Python Coding environment, we're excited to introduce a new feature that allows students to visualize their Python code. This feature will not only deepen their understanding of coding concepts but also provide immediate feedback on how their code translates into action.

By transforming abstract coding logic into visual representations, we aim to foster a more intuitive learning experience, encouraging students to experiment and innovate. With this enhancement, we anticipate a further increase in engagement and confidence among users, inspiring a new generation of coders to embrace programming as a valuable skill for the future.