scafFold

The Challenge

With this redesign, scafFold wanted to bring more focus and attention to the guided steps in place that hold the hand of a novice programmer, as well as making typically mundane learning exercises engaging.

The redesign builds upon previous work that aimed to support the learning of programming in resource constrained environments.

User Research

In order to understand the bigger picture, we wanted to dive fresh into the problem by getting to know what current and former learners think of and have gone through while learning programming at university. 

To do this, we put out a questionnaire. This sought to learn more about the learners:

• level & fields of study.
• programming languages learnt in the classroom.
• challenges experienced in the learning.
• their mobile phone ownership.
• their willingness and/or experience learning programming on mobile phones.

Based on responses from 383 current and former learners, I led the assembly of our findings into personas and user stories to better visualize the learners we were designing for.

To understand the landscape of solutions crucial to the foundation of scafFold, I did a comparative analysis of the features, functions and flows evoked by the design solutions of leading mobile learning apps, some of which were mentioned by learners on their questionnaire responses. Together with listing out the strengths and weaknesses associated with each app’s approach to learning, I also evaluated the features associated with these user experiences:

• Sign Up & Login.
• Ease of account creation.
• Initiating the main task.
• Performing the main task.
• Completion of the main task. 

• 

• 

• 

These findings lead us to gain a further understanding of what users might expect and how scafFold could improve that experience.

From our analysis, it is evident how users are:

• allowed to learn visually.
• encouraged to set goals to encourage their return.
• guided contextually through the interface.
• given real time feedback as they perform tasks.
• allowed to export their work for sharing or continuation elsewhere.

These approaches were put into consideration during ideation and for our re-design concepts.

Ideation

Brainstorm

I conducted a semi-structured virtual brainstorm with 7 current and former students in computing to further understand the problem space and their overall experience of learning programming with mobile apps.

The brainstorm further explored the problems revealed by the questionnaire respondents, created more empathy with the personas & went deeper into the kinds of solutions the students think would work.

Design

User Flow

To inform the redesign process, we took on a task-oriented approach to analyse the current interface and how a learner goes about creating a program.

What is the learner trying to accomplish?
An assignment that requires them to create a Java program called Testing that outputs “This Works!”

What information does the learner need to do it?

• Which parts of the program to write.
• In what order to write those parts.
• The syntax to adhere to while writing the code.
• If they get stuck, hints of how to continue or an example of how the final part should look like.
• Once done with a part, whether their code is correctly written.

The key to designing great user flow is to present the right information at the right time while minimizing friction along the way. Learners will be more likely to convert if the product provides the information they need at the moment they need it. 

Redesigned User Flow

The central task in redesigning scafFold involved looking for ways to present, at first hand, the minimum amount of information needed for the learner to correctly create a program part.

After iterating through preliminary sketches, I listed features I would keep as well as others I would add to address the identified problems and incorporate findings from the research phase.

Redesigned Screens

The Main screen is comprised of Chunks, Full Program, Run, Saved programs, Leaderboard, Profile.

Chunks – loads up on first login. At this point, all program parts save the main class are inactive. Progressive dismissable pop-up instructions will appear as the learner creates a program.

• 

• 

Next Steps

This project is by no means finished, we are currently building on our concept after the initial paper prototypes into a high-fidelity prototype that can undergo user testing. 

We intend to recruit two sets of three-five learners to test out the high fidelity prototype. The task for them will be a programming problem that utilizes primary features of the app. An emphasis will be made on thinking aloud the experience while trying to complete the task on the prototype.

Reflections

From this project, I had a valuable experience gathering data and ideating with users who exist in the actual environment this application is designed to be used.

Although I was quite anxious at first to ask someone I did not know for a participation, at the end of the day, I learned that people were quite willing to help.

Lessons Learned

1. Don’t design things in isolation – always place components in the context of the user to reveal more information about how they interact within the product.
2. Peers are important – I wouldn’t have been able to iterate so many times on this design without my friends telling me it could be better. Learners (some who are my peers) will also provide a base for user testing of the high fidelity prototypes.