EDUCATION APP
UX DESIGN
With Hackworth
GOAL
Design intuitive learning platform from concept to delivery.
MY ROLE
Product Design Lead
TOOLS
For design, prototyping and front-end coding
I was the product design lead in a software development company to make programming relevant and exciting to children of all backgrounds. Focusing on functional programming, we are bringing programming to domains with wide appeal instead of just the usual computing applications. This is an exciting opportunity to design a complex product from concept to launch.
We design for learning
Most programming languages are designed for industrial use. Those languages are optimised to solve problems that have nothing to do with the difficulties of learning to program, and their complexity is often at odds with pedagogy. Aware of the challenge, our tools are designed for learners, so we optimise for pedagogy and suitability to task.
Code Visualisation
Code visualisation is the core feature of the product. We believe visualising code can help students recognise patterns and code structures better. To design the best possible experience, I learnt the basics of functional programming.
Here is an example of an expression we are visualising:
After pedagogy research, we decided to adopt a tree graph approach. Our original plan below:
However, in our user research, we realise that even though the visualised code helps students from 13 to 18 learn quicker, it is still too "text-boxy" according to some students, and that causes confusion. To make the trees more readable/understandable, I focused on data visualisation and started with 3 solutions:
Traditional
Rules
The Child node does not appear directly above or below the node of a subtree of the next or previous level unless there's only one node in the next/previous level.
Grows Left & Right.
Underground
Rules
The Child node does not appear directly above or below the node of a subtree of the next or previous level unless there's only one node in the next/previous level.
Grows Right.
Hybrid
After discussion, we decided a hybrid style is the best solution. This has proved to be right in usability testings. Students can read the code and identify how it works much quicker and accurately looking at the new design.
Rules
The Child node can appear directly above or below the node of a subtree, but not overlaying it.
Grows Right.
Usability Research and Design
I have led and designed all the usability tests for the product, including designing programming curriculums with the team. Teaching how to define types and functions that takes one or multiple inputs, function application and program evaluation.
Testing with students aged 11 to 18, instead of solely using the more traditional function examples (and, or, etc.), I embed novelty and more relevant examples like programs that can predict the results in penalty shoot-outs (also a great example for recursion), the rock paper scissors game, and a model of Mendel's peas reflecting genetics biology.
Some quotes from the testing sessions:
Labels make it easier to read the code. I like using football as an example and making my team win!
I like how the software helps me visualise the code and save me time typing. The new structure makes more sense. I can work on it longer with the new colours... It's easier to read at a glance.
We have also conducted usability testing sessions regarding how students interact with the UI. We have explored better UX solutions and optimised the product with the results.
Before
After
Visioning Workshops
Knowing the importance of reviewing the goals and feature list of the product regularly. I also run workshops to help the team define visions and features. Looking at the bigger picture of the product.
Design system
& Front-end coding
I have also supported front end development and created our design system.
