Progate is a browser-based programming learning platform used by over 3 million users worldwide (as of May 2024). Its mission is to make programming education accessible to everyone, regardless of their background or abilities.
As part of this endeavour, we decided to develop a mobile application to further expand our user reach and provide a practical learning experience for users on-the-go.
My main role in this project was to guide the team to set the necessary features for the MVP as well as lead in the design, development, and implementation of the graphic, UI, and UX designs of the entire app (iOS & Android).
UI/UX, Edtech, Strategy, Prototyping
Lead UI/UX Designer
Aug. 2017 - May 2018
Sketch, Adobe Illustrator, Flinto, Protopie, Zeplin
Our goal for the project was to build a mobile programming learning experience that shared the full-fledged capabilities of the browser-based platform while also being accessible and user-friendly on mobile devices. This was one of the key requirements for our mobile app, as we wanted the app to help our beginner users transition into the Web version as they learned.
In addition, since we wanted our browser and mobile platform to be interconnected, allowing users to learn across platforms, we had to figure out an effective way to present learning materials that were optimised for the desktop environment on mobile devices.
In order to achieve that, we had to rethink the user experience completely.
The image of the Exercise window on the Progate Web version. Our challenge was to figure out the way to optimise the learning material and core learning format for mobile devices without undermining UX. Scaling down the widow size to fit mobile screens would only complicate usability.
Although there were existing mobile apps for learning programming on the market, most of them seem to have difficulties making appropriate trade-offs between simplicity and quality of their learning environment and learning material.
Examples of existing programming learning apps available back in 2017.
The image on the left adopted a Duolingo-like quiz style where users choose options to complete the code shown. While this approach seems intuitive and great for reviewing learning materials, it would be difficult to build coding skills based on this format.
The image on the right lets users practice typing code but lacks any guide and creates frustrations when the lines of code get longer.
Both of them do not have preview window for checking how code is executed.
At the onset of our project, we had our first functional prototype built by the CTO which only included coding exercise related views. As I felt that our initial project direction was focused too much on features and was missing discussions around UX, I organised a meeting with the CTO to clarify the following questions:
The initial design for the prototype the CTO built.
Once we answered these questions, we translated them into a shared product concept which is “an app that anyone can gain practical coding skills for fun whenever and wherever they want“ (This guided our product design & development process as we expand the app features).
Upon realising the product concept, we also identified several issues in the prototype:
Once we aligned our product concept, the next step was to agree on the features for a MVP that reflected this concept. Since there were only two people (the CTO and myself) on the team initially, we adopted the Lean UX approach, which allowed us to quickly iterate on designs and gather feedback from users.
We built our hypothesis around the following two aspects: 1) keyboard interaction and 2) gamification.
We made a hypothesis that the standard keyboard on native devices would cause frustrations if used to type code letter by letter, significantly undermining the learning experience. This meant that we needed to invent a custom keyboard.
In addition, since we knew that gamification was one of the critical elements for high user engagement based on our prior insights from the Web platform, we thought that it will also play a key role in the mobile version as well.
Based on these assumptions, I organised a user-story mapping workshop with the CTO to identify key features and functionalities for our MVP. We then divided the map into a series of iterations. The decision to use user story mapping was to help the team not lose sight of the overall product UX as well as to allow us an initial backlog creation and an easy update.
A part of user story mapping workshop process. Prior to this workshop, we discussed our user persona and their pain points to align our user understanding.
Our priority was to quickly implement the design around the core learning experience flow, which comprised of the following:
Upon designing this, how we present the information for coding exercises became the central topic of concern. For every coding exercise, there are relevant slides and instructions presented to users. Our first challenge was to restructure these elements for mobile devices.
For a faster prototyping, I used the UI components that I built for our Web version as overall UI design would be maintained the same across platforms. I also built an interactive prototype to conduct internal tests in the company.
Here are some of the early design explorations:
For a faster prototyping, I used the UI components that I built for our Web version as overall UI design would be maintained the same across platforms. I also built an interactive prototype to conduct internal tests in the company.
Here are some of the early design iterations:
Design explorations for moving between slides, instruction, editor, and preview views via toggle interaction.
As we tested the initial designs internally, we realised that being able to check how the code is implemented in real-time is integral to the intuitive learning experience. It can also be a very moving experience for those who are new to programming.
So, I devised another series of design iterations that allowed real-time preview for code edits while also ensuring that users can easily switch views according to their study needs without being overwhelmed.
As we run multiple iterations and tested the prototypes internally, it became clear that we did not want our app to be a mere scaled down version of the Web platform. We felt that while improving the usability of the mobile learning environment could be enough to attract new users considering our presence in the programming education domain, we wanted our app to be a gateway to discovering how fun learning programming can be by breaking the psychological barrier to entry.
In the next section, I will showcase the final designs that tackle usability issues as well as how our vision was reflected in those designs.
The goal of this project was to build a mobile programming learning experience that shared the full-fledged capabilities of the browser-based platform while also being accessible and user-friendly.
To achieve this, we introduced the following solutions:
Progate mobile app demo video
I restructured the exercise view to help users focus on understanding how each code snippet works by dividing the screen into the preview/console window and the editor window. This way, users can easily check any code changes side-by-side.
Also, to make sure users could easily refer back to any relevant slides and instructions for each coding exercise, I added the instruction button and slide button on the left bottom.
The final exercise view design for HTML lessons and scripting language lessons.
Although learning to type code is a crucial part of developing coding skills, typing it letter by letter on a mobile device can quickly become overwhelming for users.
That is why we devised a a block-based keyboard. The blocks on the keyboard dynamically change based on coding exercises so that the keyboard doesn't occupy too much of the space.
.gif)
Keyboard blocks dynamically change based on coding exercises
For the mobile version, we decided to put characters centre stage. These characters had the following roles: 1) to set the stage for an inviting learning experience, 2) to guide new users who are unfamiliar with programming, and 3) to enhance users engagement.
From instructions to lesson clear views. Characters are used to set the tone for the learning experience as well as to support learning.
After about 3 months of working on the mobile app and a series of internal testing, we successfully launched the iOS version in January 2018, and the Android version in April 2018.
The English version was also released in the following May.
Here are some of the positive results we saw:
We even heard great success stories from our users, like getting hired after being introduced to programming on our mobile app. Many of them expressed that our mobile app helped them ease into learning on our more advanced Web platform, which was exactly what we aimed for.
This was one of the projects that I worked on near the end of my time at Progate. The project started as an experiment to see if we can further make practical coding education accessible. I think that the success of this project derived from removing the following barriers:
The positive feedback from users and their success stories truly validated our efforts in breaking down barriers to entry into learning programming.
Also, glancing at some of the existing programming education apps available now in 2024, I was positively surprised to see most of them adopting a similar keyboard style that we pioneered in our app. Although it's difficult to say how much we inspired later products, it's rewarding to see our impact after all these years.
Through this project, I've learned the value of having a product development framework like user story mapping to maintain a balance between product quality and delivery. It helped our team find focus for each iteration without compromising on product quality, and it streamlined the overall product development cycle.
I would have liked to integrate more user research and testing for each iteration to efficiently tackle any ambiguities or bottlenecks rather than leaning heavily towards building features, so that we could have delivered a more focused and polished product for our users.
Nevertheless, this project has confirmed my belief that having a clear product vision and working with people who share similar product principles are crucial for creating values through our work, especially when faced with challenges and uncertainties. I am proud of what we accomplished together, but most of all, I am proud of our team.
.svg)
