Early on meeting with the founder, Jill Barletti, I knew I had discovered a rare gem of a project. She wanted to (re)define a new segment of children’s books. Her product would allow the customization of the characters of the stories to resemble your child and their family.
At first they had concepts of a huge form with a bunch of drop-down select boxes. It was huge and super complicated. My thoughts were that we could push this further and make the experience simple and as fun.
I wanted to put away my “designer hat” and use a different approach. I wanted to start with basic sketches and then promptly move to working in code. This technique was inspired by Peepcode Screencast of Ryan Singer from 37 Signals. In the video Singer started by talking out the problem. Then he drew basic sketches (like wireframes). Once he got past the big idea of the interface, he jumped straight away into code.
But why jump right into code?
I believe in most cases it can be a faster medium.
Working analog with paper and sharpies can often be faster for big ideas. But, as you drill down for more detailed nuances you need another approach.
When painting, you start with a large brush laying in the background and rough tones. After that you you start to refine your image by using smaller and smaller brushes as you go.
This allowed us to work in iteration. We could play with ideas without a lot of time invested up front. We didn’t get caught up on the details and quickly refined the user experience of the site.
We used the right size brush for that part of the project.
Front-end code and prototypes are only two tools in the arsenal of Design Systems Engineering. In the right hands they can help you to expedite your project and avoid making bad decisions. By failing fast, pivoting and iterating on what you find at each stage.