A few months back I had the opportunity to hear Tom Chi of Google X design speak. I was deeply inspired by his idea of doing to learn rather than talking and brainstorming. Feeling uninspired and rather lost in my own process and career I decided to perform an experiment of my own - by implementing a practice of daily prototyping. Could I prototype my way into relearning to prototype - or more to the point - back to creating and physically building to learn?
Complex Visual Storytelling
In 2011 I began creating a series of case study PDFs that allowed me to tell a story of my work with an individual client. After prototyping for many months - I'd finally created 3 solid stories that showed my work across a broad generalist skillset and most importantly to me - showed that I worked in physical products, software and cross platform implementations.
Now I was ready to start telling more stories of process and ways that I want to work across my skills and beyond. To do that - I needed a stronger design - visually and informationally.
With that in mind, and to avoid the "planning as doing" habit I've been reinforcing in my daily life the past few years, I dove into a project to prototype the presentation of my portfolio in static form.
I had some basic guidelines:
- Present a wide variety of information - photos, outlines, wireframes
- Create a visual language (color, style and organizational graphic elements) that lets me communicate process and complexity
- Keep evolving my quietAction branding and also bring my name higher up into the communication structure
Since I don't do visual design day-to-day an additional quest was to wake up my skills and explore some different styles of design. This required some time looking at different inspirations I'd been collecting over the past year. I quickly realized that the first part of this prototyping push was to prep materials for my prototyping. So I collected links from portfolios, sites and apps that had visual, information or styles that I found appealing. I also collected text, screenshots and vector art for some basic elements that I could throw into the prototypes.
I began with the brand and visual design from my case study PDFs and attempted to start iterating in new directions.
I was really rusty when I started so I began by trying match some of my inspirational designs. Could I make it dimensional? Could I flatten it out? Could I go for full whitespace design?
What happens when I add increasingly complex information? How can I show the breakout of one part of a product flow so it's clear what is being shown? How about an outline with wireframes? Could my basic architecture and visual hierarchy hold up?
While I was pleased with the informational communication of the day's prototypes, I was left with an overall dissatisfaction with how "stick-ish" it all was. I found the flat, outline quality of all of the elements - text, brand and information - didn't allow any of them to shine. It ended up looking just as complex as it was.
The next day I took this underlying dissatisfaction into the process and continued to attempt to organize the information and iterate on layout and adding more whitespace.
Discriminate and reset
Eventually, it was clear I was rearranging deck chairs (i.e. on the Titanic) and I stopped to chat with my brilliant design friend, Cliff Jew. Over the years I've come to value Cliff's ability to talk through design issues with me and to help me see what I'm missing so I can keep iterating in a new direction. This process of "discriminating" is critical in a prototyping process. You have to know when you've stopped heading in a direction that is fruitful - reset - and then be able to move nimbly in a different direction.
When I explained my irritation with so many flat elements on the page hindering my ability to distinguish between levels of information or even visual flow around a page - Cliff immediately jumped to the idea of "traveling through" the information rather than simply laying it out to be read. Traveling and storytelling both have a time component. What could I add to the visual design that allowed us to make the information special and also allow us to move through it in an organized way. Cliff remembered an old project he designed that used 2.5d graphics to lead a person through a setup of a physical product. By adding a spatial component he was able to separate out textual and design elements from the most important data.
Taking a one of my designs he quickly overlaid a couple of examples of dimensional objects into the page to see if they would fight. Rather than fighting, the additional of a spatial quality to the data made it into a "secret garden" that a person could engage with separately from the text and brand container.
After I got off the phone with Cliff, several things started to happen. I let go of my original brand container and moved toward a stronger whitespace design that focused on my name and that this is my experience exploration (portfolio). I learned how to orient my vectors spatially in Illustrator (be very, very frightened :D). I suddenly got much braver. You can even see the happy accident moment - "Look what happens when I go FULL whitespace" in my Evernote documentation.
2 days later I finally got back to this project and was very pleased with where I had landed. I decided to try laying in some of the material that I had from my case studies to see how things held together when I added even more complexity. I think it turned out pretty well with a lot of room for improvement and continued prototyping. And it's a huge leap from where I started. Definitely well worth the time and effort.
THE REAL LEARNING
So, in this 3-day sprint I learned quite a few things.
- It's good to have some prep time to gather some base materials to prototype with. While it's cool to have placeholders, it's tough to keep a flow going if you don't have any raw materials handy.
- Discriminate. Know when you've run into a wall. Phone a friend or simply leave that direction alone and try and jump to something completely different.
- Keep yourself moving and be brave.
One of the principles of Lean UX is that you want to engage in process that is self-documenting. In this case, I quickly created screenshots, threw them into Evernote and added some discussion of how the day went. Because I did this each time I took a break - the result was that I had a living document that helped me tell a story far more powerfully than any single static document could ever achieve. I consider this one more portfolio prototype in these days because it - more than the static elements - will become my FUTURE story.
I can't encourage you enough to begin incorporate this hands-on style of moving through so many of your life challenges. For me there is very little that you can't apply this to in my life. Stay tuned as I'll share some other prototyping I'm doing as I get further along in the process.