In this passion project, we approach the question, how might we design a tutorial experience for users to learn how to use BlockStudio and encourage them to continue growing their computational literacy? I chose to focus on delivering a tutorial experience that focuses on teaching practical programming, and the user’s learning journey instead of measuring their competence. My team and I hope this will encourage long-term learning for BlockStudio users to continuously grow their computational literacy.
During my studies at the University of Washington (UW), I investigated and co-authored a study that suggests English Language Learner (ELL) families can develop computational literacy through jointly using text-free coding environments, such as BlockStudio. Researching BlockStudio evoked my personal experience with ELL challenges. As the oldest child of an ELL parent, I often took the responsibility of translating anything from school material to medical systems. My research and personal experiences with ELL families reaffirmed my interest in user-centered design to help overcome language and accessibility barriers.
BlockStudio is a text-free visually concrete programming tool for empowering novices and English Language Learner (ELL) families to jointly engage in introductory coding.
Users, primarily children 7-12, can create stories, animations, and games.
A few games that users have programmed using BlockStudio.
In this project, we focus on broadening access to introductory programming from marginalized communities for the following reasons:
In this way, people of ELL backgrounds can be disadvantaged due to 1. English and 2. Technical requirements needed for building computational literacy.
Despite the potential of BlockStudio bridging digital divides for ELL families, a major roadblock for a BlockStudio user’s learning journey is the lack of a robust tutorial experience (how people learn to use BlockStudio).
How might we design a tutorial experience for users to learn programming using BlockStudio and encourage them to continue growing their computational literacy?
My design process thus far consists of six main phases of research and design.
At the beginning of our design process, I analyzed the currently offered tutorial experience.
The user could learn how to use BlockStudio to program in two ways:
While these two features provided different methods of learning, its main shortcoming was the lack of connection between the two siloed learning methods.
When synthesizing the user journey, we assumed users would experience little satisfaction in certain areas based on field expert insights.
As mentioned previously, the goal of the project was to design how we might create an encouraging tutorial experience for BlockStudio users to learn programming skills. We specifically defined two goals, application and emphasizing the learning journey.
Application - grow users' abilities to apply concepts to reify their ideas and share with the community.
Learning journey - encourage and support users to continue learning how to program.
To understand which game patterns are most applied to games, I conducted a qualitative analysis to characterize game patterns across 60+ published BlockStudio games. Among the 50+ coded themes, we decided to add the most common game patterns to the tutorial structure.
Inspect games...
...characterize patterns...
...and structure lessons.
Before diving into design, I conducted competitive analysis on online tutorials such as Origami Prototyping, Khan Academy, and Framer. Breaking down the structure of each of these examples helped me understand what components were needed in an effective tutorial.
Origami and Framer’s menu for lessons had high-transparency that allows users to see their whole learning journey.
Framer and Khan Academy’s two-step learning experience demonstrates its appropriateness for process-based material, which applies to BlockStudio.
After brainstorming design ideas based on the competitive analysis, I converged the most appropriate design ideas to create a high-level user flow for the tutorial experience.
The proposed user flow has four steps: select a tutorial from the menu, watch the video, try it yourself, and record learning progress.
Next, I defined the information and features to be included in the tutorial. I proposed a lesson structure for the user to first watch a video to learn how to apply the game pattern, then practice applying the material to sample games. This two-step learning experience helps users by watching, listening, and experimenting.
The proposed tutorial lesson has both video and experimental learning components.
Finally, I dived deeper into the components to flesh out feature designs. One such example is the self-assessment feature.
This feature had to accomplish two tasks:
The first iteration proposed was a yes-or-no checkbox. Though this design made tracking progress simple, it unfortunately neglected reflecting the user’s learning journey.
For the second iteration, instead of the prior yes-or-no design, I proposed a rating interaction for the user to record their learning progress. This improved the clarity of their learning journey and the general recommendations algorithm. However, a shortcoming that remained was the lack of salience in the tutorial lesson page.
Each option in the self-assessment feature curates a tailored tutorial recommendation.
In the next iteration, I fleshed out some interaction design improvements that helped boost the feature's salience. As ideas diverged and converged, my team decided to move forward with this design.
We are reviewing the designs on a weekly basis to continue refining the user experience and defining the visual vocabulary.
Here’s a sneak peek into what we’ve come up with so far for the visual designs. We still have a lot to get to before BlockStudio 3 goes live, so stay tuned!
One limitation in this project is the lack of access to BlockStudio users. Fortunately, I was able to gain insights from Rahul, the creator and my project partner, who has in-depth knowledge of BlockStudio users. Moving forward, I would like to reach out to users to understand their experiences with the current tutorial designs and their feedback on our proposed design ideas.
