RASPBERRY PI FOUNDATION
Context
When I first started this project in February 2022 I was ecstatic, but building a code editor felt daunting. Although I have used code editors in the past, building a code platform with limited coding experience felt like it would be a huge challenge.
Problem
At the Raspberry Pi foundation we were reliant on an open source code platform called trinket. It was a simple tool that was integrated across many services that we offer. But it had many limitations that didn’t serve our business needs or our target audience. We needed a platform that would put the power back in our hands so we decided to build our own code editor…quick.
Goal
The goal was to create a tool that would be accessible for the widest possible audience. How can we create an Editor that feels simple and un-intimidating, so we can enable our young user base and a global audience to start coding without any blockers?
My approach
1. User journey
2. Market research
3. Wireframes & stakeholder input
4. Design
5. Prototype
1. Context building
I started by mapping out the user journey: How do users currently experience this product? What contexts is it living in? How do users get to it? I understood that this product wouldn't just be a standalone editor; it had to be designed to adapt to our different platforms. This includes an embedded code display within our Project site, as well as a standalone code editor for our Astro Pi Mission Zero sense-hat module, where students can write code that will go to space.
2. Features in the horizon
When approaching market research I was exploring how other products have solved this problem? What can we learn from them and what must we do differently? This gave me common conventions to follow and examples of what not to do.
3. Wireframe mastery
I followed the basic structure of a code window and an output window. Then I got to work with many many...many wireframes of different versions of the design. This is where the bulk of the difficult work was, I had to;
- keep features minimal
- keep the hierarchy of actions clear
- keep the layout simple
- make sure it was versatile enough that features could be added in the future
- pair back the design so it could be built quickly
- consider responsiveness of the editorAnd after 6 stages of wire-framing and feedback we finally got something that felt right! I moved on to pinning down the design.
4. Give it style
I aimed to give the code editor a versatile style that would harmonize with our Raspberry Pi ecosystems while maintaining its unique identity. I explored accessibility conventions, such as type size and contrast, mindful that teachers would be displaying the editor to children on devices with various display sizes. Therefore, flexibility was crucial.
The final product enables users to dive into coding effortlessly. Additionally, I crafted a dark mode version of the editor, catering to coders' preferences while also adding a fun feature for young users to customize their editor's appearance."
5. Make it interactive
Once the editor was designed prototyped all of the interactions and features for developers and to demonstrate how the editor would work.
Conclusion
When the new editor was launched it created a lot of buzz in the programming community. Since it was first built the initial design has been developed further in the Raspberry Pi Foundation team with my brilliant colleagues. It now has a clean mobile friendly version as well as other integrations.
Read more about our goals here
