A year has passed since I started using the Design Studio method within our company.  What started as an experiment is now an assumed part of our product development process for three products and development teams. As the use of this technique has grown, and its value recognised, I have begun to see some challenges that come with increased scale. I also became aware of what Design Studio was not.

A Final Solution 

Problem + Design Studio ≠ Final Solution

As the Design Studio was integrated into the development process for each User story we conducted at least one session. The output of this session was generally enough for a design to be refined and a set of wireframes or prototype to be created. After some time, I noticed that some of the teams develop a bit of

 ‘ Lets do a Design Studio so I can get my wireframes’

type of sentiment. A bit of the ‘check box’ mentalliy was slipping in. When this wasnt the case or we had to conduct more then one session, the teams became impatient. This is still an ongoing struggle, but I usually start every session with the following:

Warning: Design studio will not result in the final design.

Then repeat this.

Wrong Mindset -

Over time I began noticing a large amount of idea ownership. Persons or groups that developed ideas seem to have difficult letting them go. They presented them enthusiastically and did not accept critique. In some extreme cases, there was ‘competitions’ between ideas to see which ones that made it through the convergence stage –  I think competition can be healthy and I found this encouraged a good exchange of ideas, but only as long people were willing to let their ideas go. Ideas are very personal things and people develop intense pride and ownership of them. However, it isnt until we let the ideas go and see if they fly do they have any long term value.

Is not a verb, but a Culture

When I first encountered Design Studio in Architecture School the term was not used as a verb, a method, but more of a place. A Design Studio was a messy place, with half finished models, empty soda cans and pens and paper everywhere.  It was a place of collaboration, exploration and experimentation. The space facilitates brainstorming, critiquing, presenting, prototyping, sketching, researching, synthesizing, and many other activities that figure within the design process. Sometimes it smelled like pizza.

After one year I can see we have a bit to go to develop this type of culture. It is my hope that over time, and by making some incremental changes, we can approach this.

A fixed formula – mix it up

After a few months of having at least one Dersign Studio session per week, many of the developers became very familiar with the process. So much so, that they pretty much began sketching when they entered the conference room. This want ideal since I really wanted people to approach solving the design problem with a fresh (somewhat) perspective. I learned through this that people are creatures of habit and take comfort in these habits. It is at this point that I began to mix things up.

Slightly different methods – since this point I have been on the look-out for some slightly different sketching methods. I decided to use the Brainsketching method and found this to be very interesting and greatly appreciated by the team. I cannot comment on the quality of the ideas, but there is definitely a higher sense of collaboration around the resulting ideas produced

Environmental changes – during this time I began to concentrate of the physical environment. I was a bit limited since the sessions where held in a conference room. I usually waited for everyone to come in and sit down, then I invited everyone to stand and then exchange seats with the person directly across from themselves. I had experimented with music a bit, but made a point to always have music playing when people came in and during the sketching sessions. I am a big jazz and low-fi fan so played a mixture Jan Johansson, French FIP radio, the Dining Rooms, Philip Glass and Mike Oldman

A full week since the Lean UX 14 conference and I finally have the time to reflect a bit.

It only took a few sleep-ins, Easter holiday food and some red wine for my brain to contract back to its normal state after the stretching during the conference.

All of the keynotes were excellent and I found myself making notes of some new books referenced to add to my reading list.

Here are some of the books I noted, either directly from the presentations themselves or from the conversations between sessions.

1. Teaching Smart People How to Learn New Things, Chris Argyris

2. Idealized Design: How to Dissolve Tomorrow’s Crisis…Today, Russell L. Ackoff

3. If Russ Ackoff had given a TED Talk (Ok not a book, but an excellent video)

4. The Principles of Product Development Flow: Second Generation Lean Product Development, Donald G. Reinertsen

5. Creativity, Inc.: Overcoming the Unseen Forces That Stand in the Way of True Inspiration, Ed Catmull

6. The Art of Action: How Leaders Close the Gaps between Plans, Actions, and Results, Stephen Bungay

7. Training From the Back of the Room!: 65 Ways to Step Aside and Let Them Learn,  Sharon L. Bowman

This book was discussed in one of our breaks when discussing workshop facilitation methods

8. Designerly Ways of Knowing, Nigel Cross

I am sure there were many more from the different workhops that I did not attend, so let me know of any recommendations you have.

For now, this will add to my never ending reading list. Thats a good thing, right ?

If I have a thousand ideas and only one turns out to be good, I am satisfied.

Alfred Nobel

A year and half ago I left the consulting world and began working at a product company.

It was an exciting move, and I was very quickly thrown into the world of software development, a world very different from the one I had left.

I was given a word of advice from another UX designer already working in the company early on.

‘Just keep ahead of the developers, if you get behind with the wireframes you are dead’

The products were very technically complex and the interaction challenges considerable. I started creating some fairly hi-fidelity wireframes, presented them to the dev team then spent the next day having them explain to me why the technology would not allow me to do what I wanted.

It was at this point I realised this was never going to work. I needed something else.

As a person, I have always been someone that needs to talk and draw through ideas for them to make any sense to me.

Creativity and new ideas came from the the connections I made when I sketched or discussed the issue.

I went back to my colleague and asked about trying to work visually together with the developers.

I was quickly warned:

‘Developers will never draw – they just want to code’.

Deep down, I didn’t believe this, more over I didn’t want to believe this. This did not remind me of the developers I had worked with previously.  I was determined to give this a try.

So I took baby steps. Things were rocky in the beginning, but once I started, enthusiasm grew very quickly. Now, developers come to me and ask when we are going to ‘sketch and stuff’

Enter Design Studio

I first encountered a form of the Design Studio methodology in Architecture School.

The premise was we were given a design challenge, produced a set design alternatives, got feedback (sometimes harsh – it was called ‘crit’ a shortening of critique), then modified the design and repeating the process.

Using my Architecture School experience as a base, the method I use today has been inspired from the works of  Will Evans, Todd Zaki Warfel and Jeff Gothelf . I could never have succeeded with out reading their ideas on this subject. Standing on the shoulders of giants.

I have used Design Studio method in any situation were I want to generate a number of ideas, get feedback, prioritise alternatives then converge on one solution (s).

I have found this method very effective within the Agile process when User Stories are employed to manage development work. User stories establish good boundaries that complements the Design Studio process well.

User Story -

All development work for product development is done using creating a backlog of User Stories, prioritising this backlog then working on each User Story using Kanban principles. Product releases occurred every month

Since I view the creation of the user stories as the first part of the design process, it is important that these are well developed and appropriately granular.

At the beginning of each User story I facility a Design Studio with the development team, Development Lead and Product Manager (not always possible) to kick the User Story off. This is the ideal group since Design, Product Management and Development are all represented.

From my experience this method as a number of key advantages:

Improved quality of ideas - by getting the technology issues up as soon as ideas are considered the overall quality of the design solutions is higher.

Communication – since the entire dev team does this together a common understanding is created through the process.

Insight into other persons processes - The points where everyone shares their work-in-progress are often inspiring. The participants see an idea spawn further ideas, which in turn, spawns additional ideas. By seeing how different people with different backgrounds attacked certain problems allows everyone to broaden their range of solutions.

Sketching

When I have done this with any new group I usually spend time talking about sketching. Sketching is not art. Sketching is getting your ideas out of your head and on to paper. Things dont have to be perfect. If you can draw some basic shapes anyone can sketch.

I usually like to have people sketch on A3 size papers divided into 6 panels. This works well for describing flows and the panels are big enough to comfortably draw most things.

I encourage people to use rather thick markers so as not to go into very many details. I have tried Sharpies, but prefer Pental Sigma pens instead as they are more common in Europe and don’t smell as much. I let people use regular pencils, highlighters and various colored Post-it notes to add the rough details they need.

Design Studio Sketching

Design Session

Total time: 2.5 hours

This is an approximate structure that has achieved the best results in the context or my organisation (your milage may vary).

1. Introduction to the user story and any related scenarios. I spend about 15 minutes setting the stage, reviewing the user story and background. I prepare the room by posting on the walls any relevant personas, user tasks maps and interaction patterns.

2. Iteration One – individual sketching. 5 min. Each person sketches as many solutions as possible in this time.

3. Critique/ Feedback – consolidation. 3 min per person. Each person posts their sketches and presents the designs. The rest of the group gives feedback.

4. Break – At this point about 90 minutes has passed. Time for some Swedish coffee and a break.

5. Iteration Two – group consolidation: at this point it is usually possible to consolidate things into ‘design themes’ that represent some major ways of thinking. Depending on how big the group is and the number of themes, I will break members up into smaller groups. Each group is tasked to work on a specific design theme. I have the group appoint one person to draw then give them a time to refine these designs into one (or as close as possible). 5 min

6. Group presentation. Each of the remaining group presents the refined design to the rest of the group. Usually after a discussion the two (rarely more then two) designs can be merged into one design

By now we have converged on one design that will address the User Story.

I find that letting things settle over night then meeting again the next allows people to reflect over things and any issues to bubble to the surface.

A proud developer reviews the task breakdown.

Task Development – 1-2 hrs

Once the design is established we meed a second time within the group. Before this meeting I have documented the design in a lo-fi format (Balsamiq/Omnigraffle or clean sketch) and then meet the entire team once more. During this meeting the team then goes through the design and breaks it down in the necessary technical tasks.

1. I begin by posting the final design wireframes, user flows and personas on a wall. I then give the team 5 min to come up as many tasks and dependancies that they can.

2. Each member then begins to post the tasks they have identified next to the relevant area of the design or user flow on the wall.

3. Once everyone has posted their tasks then these can be discussed and consolidated to what will be implemented.

4. These final set of post-it notes is then transferred directly onto the Kanban board to be planned.

At the end of this process, the team has generated ideas, developed a design for the problem and broken it into technical tasks.

Design Studio repetition -

The first few sessions with the development team where tough. It was a new way of working with methods unfamiliar to most of them. As time went on, people became more at home with the techniques and I started to see the sessions themselves begin to develop with less input from me. Certain background information was no longer needed and the later session could tackle more difficult problems at greater detail. Once people are familiar with the process, it’s fast and efficient to work through a design challenge and generate great solutions. The team was developing.

I realized I had achieved my goals when the team then started to automatically schedule multiple design studio workshops into every User Story – without me mentioning it !

I can’t imagine designing without making [physical products],

I love making prototypes. We go right from idea to prototypes. I just love making objects.

Prototypes create this dramatic shift in the conversation – suddenly it becomes tangible and the silence goes away.

- Jonathan Ive

You never change things by fighting the existing reality. To change something, build a new model that makes the existing model obsolete.

Great post The Problem With “Innovation” in which he cites the above quote from Buckminster Fuller and points out that what looks silly, superficial, inconsequential and downright distracting when they’re first proposed can “suddenly” have fundamental consequences for society as a whole. Or, as the author puts it:

New models create new markets, but they’re often misunderstood at the outset. Stupid checkins reshape how we explore and experience the real world. Prepaying for tick tock watches reshapes financial markets. Silly status updates spark revolutions. And grainy glitchy video calls cut into the commercial air travel.

Something to think about.

Over the last few years I have found myself, more the once, saying things that make me stop and think –  ’Whoa that is something my father would say’. I began to realize that much of my design and general ‘creation’ methods and philosophy comes from my father.

My father would not call himself a designer, although when asked what he did at work, he usually responded ‘making stuff’. I always found this statement a bit odd and couldn’t really relate from my childhood imagination of what fathers actually did at work (this was equal to TV dads). It wasnt until much later that I realized – together with my own desire to create something – what he meant and appreciate certain experiences.

My father exposed me and my brothers to technology at a very early age, as well as gave us ample opportunity to build things on our own (read:blow-up) – model rockets, hot air balloons (too small for people), RC airplanes, computers – you name it. When I was a bit older we were exposed to carpentry, homebuilding techniques (from reading monthly issues of Fine Homebuilding and Fine Woodworking magazines) and architecture. My father also exposed me to all things Japanese. It started with a few bonsai trees and progressed to a full scale Japanese garden in our backyard. This combination of technology and aesthetics has been a powerful combination for my future.

All of these experiences resulted in some useful lessons:

1. Read

My father read (and still does) constantly. I have many fond memories of my Dad reading in the evenings, at the beach, in airports – everywhere. My father also read everything. No matter what book or magazine he found laying in front of him he would read. It was almost that we couldnt help himself (I have the same habit). This resulted in him having a rather wide area of knowledge, that really is an asset when designing solutions. Some of my truly best design solutions are ones that I developed while reading magazines about subjects I wouldn’t normally be interested in.  True innovation occurs in the combination of previously unrelated ideas and reading is a good way of exposing yourself to these ideas.

2. Measure twice cut once – Prototypes

My father is now, after retirement, a full time carpenter. I have watched him through the years build furniture that has become more and more complex and elegant. Each project demands planning and due to the work and cost involved, a good way of minimizing risks and avoiding mistakes. Enter prototypes. If my father was making a large piece that involved new techniques he would often make a prototype with less expensive wood. This allowed my father to learned from the process, modify techniques or change the design  without breaking the bank.

In the digital world, I have found prototypes an excellent way of testing to see if a solution is effective in a low(er) cost format.

3. Try it yourself

If my father wanted to learn how do something, he read about, then gave it a try. He wasn’t very big on calling in an ‘expert’ to do certain projects if he was confident he could do it himself. He succeeded many times, and seeing this has given me the ability to try things myself I may not have considered otherwise.

One of the things about designing things digitally is that many of the technologies you can try yourself. There is usually a blog post or tutorial that can guide you through the most difficult technologies. By doing this, you learn what is involved in realizing an idea digitally and also the value of experts in these areas.

4. Tools

I remember going into by fathers shop looking at all the different tools in amazement. My brothers and I would begin to make basic wood ‘objects’ and realize we didn’t have the skills or knowledge to do what we wanted. My father would take out a strange looking tool that could perform the task easily.

‘The right tools makes things easier’ he would say.

When designing things, using the right tool, can make all the difference.

Editors Note: The opposite can also occur. I have developed some good design solutions using the completely wrong tool. It took longer, looked rather bad, but was a good solution.

Thanks to my brother Brian for inspiration and ideas for this post.

The last few months have been a very intense time as I have recently changed jobs. In my new role, Interaction Design is a critical part of the job description (yeah) but this has put my personal UI toolbox to the test .  Over a series of weeks, I tried to expose myself to as many UI design solutions as possible. During this search, I have uncovered a large collection of some really great sites that I would like to share.

In order not just to flood my senses with design solutions and improve recollection for the future, I started a notebook of highlighted UI solutions. Actually, it started a few doodles on scraps of paper, but it soon graduated to it’s own notebook.

The method of documentation is simple, for each new resource I discover, I choose at least 3 solutions that I find interesting or relevant. I study each solution, then after a few minutes, sketch the UI from memory. For me this, this works well for internalizing the UI solution in my brain for future recall. Occasionally, I have redrawn the UI slightly different, or how I remember it, transforming it into something different.

My list of top UI design resources:

UI Design Patterns for Websites and Applications

1. UI-patterns.com

UI-patterns.com is a large collection of design patterns for UI designers to gain inspiration from. The site allows users to keep sets of their own (publicly accessible to site visitors) so that you can see other UI design pattern collections.

2. Interaction Design Pattern Library

Welie.com has an interaction design pattern library maintained by Martijn van Welie, a Ph. D. graduate in Human Computer Interaction who now works as an Interaction Design Senior Consultant for Philips Design. The library features a ton of design patterns involving various site tasks such as navigating around a site, searching a site, and basic interactions such as slideshows. Each pattern follows a specific format: (1) the problem, (2) the solution, (3) when to use the pattern, (4) why you should use the design pattern, and (5) examples of the pattern in use.

3. Pattern Tap

Created and maintained by Matthew Smith and Chris Pollock, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows and breadcrumbs. Pattern Tap allows users to create their own sets, and they now have over 7,000 user sets. There’s plenty of inspiration to be gained at Pattern Tap.

4.  design|snips

This design gallery focuses on common web page components such as navigation as well as popular design trends such as Grid layouts. design|snips has over 30 categories so that you can easily find the design pattern/trend that you’re interested in. Users are allowed to rate each design featured in the gallery so that you can see what the overall consensus is with regards to the effectiveness and appeal of a design being shown.

5. The UI Pattern Factory

The UI Pattern Factory is a UI design library and gallery. The added extra from this collection  is that they sometimes share videos in each entry to improve the description of design problems and solutions. Entries are further enhanced by user-submitted examples of the pattern, which they archive in their Flickr group: UIPatternFactory.com. A very comprehensive collection.

6. Web Design Practices

Web Design Practices is a gallery of web design patterns such as breadcrumb navigation with very thoughtful and comprehensive write-ups on each design pattern, often including statistics and helpful resources about a particular website component. This information is good when explaining why design solutions have been chosen.

7. Elements of Design

Elements of Design focuses on particular components of a web design such as login forms and site navigation in the hopes of inspiring designers, as well as to highlight prevalent patterns for typical website needs and features.

8. UI Patterns

UI Patterns is a UI design library that follows a weblog format where each post is a design pattern and a showcase of it in use on a website or web application.

9. Little Big Details

A great tumblr site that gives a daily dose of UI inspiration

10.Ultimate guide to table UI patterns

A rather short, but good,overview of types of table UIs as well examples.

I will add new ones as I find them, but so far this list is my new UI design toolbox.

Flickr Collections and Groups

1. Design Patterns

This Flickr collection maintained by Chris Messina is a showcase of unique and interesting interfaces on the web. The collection is very well-organized into sub-sets such as Drag and Drop interfaces and Calendar Views.

2. Design Patterns Group

In this Flickr Group, there are over 300 items that you can browse through to see interface design solutions and trends.

3. Web Form Design: Filling In the Blanks

Maintained by Luke Wroblewski, this Flickr set is a collection of images pertaining to web form design. This is an excellent and inspirational resource to have around for times when you are designing web forms.

4. Search Patterns

Peter Morville has a Flickr collection dedicated to gathering design to for effective search. For different types of search UI inspiration this an excellent resource.

I will add more resources as I find them, but for now, this will fill my UI design toolbox quite well.