Hello, I'm Pablo Noel

An interactive playground for full-stack environments. Write rich text format documents and embed live code snippets to make real examples or show ideas to readers.

With DevPad you can write technical posts with editable and runnable code snippets.  These snippets can be executed and their output can be shown in the same post, giving a deeper understanding about what the code does and what is its result.

Website: No longer available

Role: Product Design, Branding, UI, UX and Interaction Design, Frontend Engineer

Tools: Adobe Suite, Git, SASS/CSS, Ruby/Rails

Year: 2017

Devpad was born as a spin-off from Codepicnic, using the same container technology that allowed to run fully functional consoles, we simplified the format, creating widget like micro-environments where users could run bits of code instead of complex projects for this we focused on:

• Design a brand for a spin-off product that could live by itself
• Design readable posts and intuitive widgets for technical content creation
• Design a content creation flow for users to share their ideas

A tool within a toolbox

When you need to write something quick, you take your pencil and some paper and that’s it, when you need to write something more complex, maybe add some diagrams or schematics with some accuracy, you need at least a couple more things, a proper notebook, a rule, an eraser and maybe a better pencil. My approach with this project was exactly that, lets create a tool that its great to show complex information, but within a set of other tools that allows users to give a creative freedom to create a valuable context around it.

Understanding
Trough multiple interviews and research processes we were able to define a set of goals, requirements and features we were comfortable to approach. Creating user stories, empathy maps, user flows, and interaction maps.

Exploring
We were able to quickly test prototypes and multiple iterations of each interface choice, being able to code my own interfaces proves really helpful to improve the exploration process, we discovered that some micro interactions performed betted than some interface elements, allowing us to simplify the interface and focus on the background processes.

Delivering
The end product was a content creation platform that allowed the users to share rich and complex thoughtful ideas and concepts with working examples of code snippets. Even tho the project was short living, the idea and approach proved to be in the right track