News and blog posts from our students and faculty

Category Archives: Creativity

Coupling between thinking and actuation

As part of the creative problem solving process – designers research to understand a problem space, apply their own subjective point of view or intuition and create provocations to make sense of incomplete information.

In Organizing and the Process of Sensemaking, Karl Weick states, Sensemaking is not about truth and getting it right.  Instead, it is about continued refracting of an emerging story so that it becomes more comprehensive, incorporates more of the observed data, and is more resilient in the face of criticism. 

In Discovering Design Ability, Nigel Cross states, some of the relevant information [in a design problem] can be found only by generating and testing solutions; some information, or ‘missing ingredient’ has to be provided by the designers himself ... this extra ingredient is often an ‘ordering principle’. These ‘ordering principles’ give people access to new information on the whole and can take on various activities, such as the diagram below for example: 

In Theory of Interaction Design, we read 10 articles and discussed the relationship between creativity, knowledge, perception and strategy. The diagram above is an overview of each author’s summary along with my own position.

Thoughts? Make sense?  Your perception of it?  Can we design for an individual’s perception? Stavros Mahlke, in Visual Aesthetics and the User Experience, thinks we can and should by integrating ‘non-instrumental qualites’ like aesthetic, symbolic aspects and emotional user reactions with traditional user experience interaction design.   

In summary, it is in our thinking and activity where solutions are created and make sense.

Posted in Classes, Creativity, Design Research, Interaction Design, Methods, Strategy | Leave a comment

Medium-Fidelity Storyboarding: My Process

Hello, everyone!

Some folks from AC4D have been asking me how I do my storyboards for classes. I haven’t had a chance yet to sit down and go through my process in-person, so I’d like to document this on the blog for everyone. I’ll go over my ideation process, the sketching process, and then shading and inking. Keep in mind that this just the way I do it—there’s no right or wrong about this. My hope in showing you my process is that you get inspired in your own storyboarding processes as well.

Thinking in Text Boxes
I’ll start out with Post-Its of what I want the storyline to be. Each Post-It is text box where that text will live. This way, I can judge how much text there is going to be in the picture and plan for it. Ideally, each box takes up about one Post-Its’ worth of text. If I’m using three or four Post-Its to convey an idea, that means that I need to simplify it or break it up into multiple Post-Its.

When I have a better way of phrasing the text, I’ll just put it over the old text. Usually, I don’t throw out any Post-Its until the end of the process, because I might come back to them later.

Planning out Panels
Once I have all of the text mapped out, I take a different colored Post-It and start mapping out the panels. In this example, the word “text box” is where text lives, and the word “panel” is where pictures live.

Notice that it’s not a one-to-one ratio with text boxes and panels. Multiple text boxes can be on one panel, and multiple panels can be on one text box. It depends on how you want to convey the information. Is it simple, or complex? I’ve found that if I am stating an action, like, “Elaine meets Wanda at a coffee shop,” that’s a relatively straightforward action that I can draw. However, if it’s a vague action such as, “Elaine searches for friends online,” I might have to draw more to convey the information I want, like Elaine logging onto her computer, inputting information, and then seeing the result.

At this point, my pictures are still stick figures, but it is clear what they are doing. As a basic rule of thumb, I should be able to see:

  • What action the person is taking
  • (If their face is visible) How the person feels about the action
  • Any main pieces of architecture or interface that they are interacting with

Similar to the text boxes, if I don’t like the drawing, I just overlap it with another Post-It. I’ve had pictures where the first Post-It comes out great, and then I’ve had pictures where I needed ten Post-Its.

Drawing on Paper
Here’s the fun part for me! Using a Prismacolor No-Photo Blue pencil, I sketch out a more detailed version of the scenes in the Post-Its. This is probably where I’d say my materials might be different than most people, because I’m a lazy cartoonist. No-Photo Blue allows you to draw on a piece of paper and then ink right on top of it. When you scan it or copy it, the blue will disappear, because it is a shade of blue that isn’t picked up by scanners/copiers. No erasing, no multiple sheets of paper!

I start out with the basic stick figure (which looks like a capital I with a head), and then sketch out limbs and expressions. I’ve found that with the face, drawing the nose first (which is a central part of the face) helps keep me centered and not go drawing incorrect proportions.

A Note about Characters
How do I make my characters look like people? As far as characters go, I try to remember noses of people I like, or perhaps choose a face structure of someone I’ve noticed on the bus or on my scooter. Usually what I do is observe people in a public setting, and think about their features, and what makes each person special in a visual sense. The more I look at people, the easier it is for me to pick out distinguishing features (a large nose, thin lips, wide eyes, a short face) and add them to my characters.

This process is much harder to illustrate, and could take up an entire blog post, so if you want to learn more, get in touch with me personally and I’ll talk you through it.

I draw each panel on a sheet of paper (usually 8.5″ x 11″). This means I don’t have to map out the layout of the panels until I put it all in Photoshop.

Ink it Up!
Once I’m finished with the blue pencils and I have everything where I want it, I go back in and draw over the No-Photo blue pencil with a simple Sharpie for lines. I’m continually surprised by the versatility of Sharpies—they have some great line weight (how thick or thin the line is)!

My rule of thumb for line weight is the thicker the line is, the more people will pay attention to it. So, if you want the attention drawn to someone’s face (as I wanted in this picture) I outlined the side of the face once or twice more with Sharpie, and then filled in her lipstick to focus the viewer’s attention onto her smile.

This also works well in the case of mistakes—if you mess up your inking somewhere, use thicker line weights to draw the user’s attention away from your mistakes. I use this all the time with my work. Sometimes a piece can come out perfectly, but usually there are a couple of mistakes here and there. Line weights are your friend!

I’ll shade in anything that needs shading. The same rule applies with line weights as it does shading—anything I shade will draw more attention to it. I used to take the “fine arts” approach to my work and shade anything I knew had a shadow, but unless I’m working in something really detailed, it usually ended up looking like a mess of dark lines.

As a side note, I always make sure that my lines are nice and clean. Because I’m going to be scanning these in and resizing them on an 11″x 17″ piece of paper, I want to make sure nothing bleeds in with one another.

The Finished Product

This is what the one panel of the storyboard looks like when it is finished. The storyboard is now at medium-fidelity, and I have all the pieces I need (text boxes, finished panels) to scan into Photoshop and add shading and coloring.

So, that’s how I bring storyboards up to medium fidelity! I hope that was helpful for you. If you have any questions, please feel free to contact me either via email or on twitter @chostett.

Happy drawing!

Posted in Creativity, Methods | Leave a comment

Redesigning a Thermostat: Final Thoughts

In Rapid Ideation and Creative Problem Solving, we invested eight weeks of time into redesigning a Honeywell Thermostat’s Interface.  On a micro level this has been about tweaking the placement of a lot of pixels from week to week and spending entirely too much time thinking about temperature.  However, on a broader scale what we’ve been learning through practice is how to rapidly articulate ideas, produce meaningful representations of them, and coerce meaningful feedback from users.

And all of those skills mean that we can confront a problem space and apply our unique frame as designers in a creative, iterative process that leads to more meaningful interactions.  So although I don’t care much about thermostats, I thoroughly enjoyed the challenges we’ve overcome in the last quarter.  And I ended up with a design that I’m proud of:

You can also check out the Wireframes via User Flows

Although I’m happy about where the design ended up, I tend to struggle with premature judgement while I’m trying to get to that place.  So I’d like to talk a little more about the process that I’m coming to trust.

Rapid Ideation in Isolation

In order to keep moving forward in design, I’ve learning it’s crucial to articulate your thoughts in a way that can provoke feedback.

More and more I’m finding that I work best when I have a chance to sketch out a few ideas (like above) and provoke myself before I consider those ideas with other people.

 

Theory Testing

It can be tempting to spend far too long designing and refining in isolation, insulated from critical feedback because your design “isn’t done”.  In order to meaningfully test a design idea, you need to approach the process with intention.

Early on, I built a crude prototype of the physical size and feel of the thermostat to be use in conjunction with paper prototypes.  Then I gave people goals to test out and and tried to put myself in their head-space as they were interacting with the design.

In this course we employed “think aloud testing” to prompt the testers to speak what they were thinking out loud in a stream of consciousness to help facilitate our own understanding of their actions (or inactions).  I took this process and had fun with it, probably due to my background in teaching and tutoring.

After a tester completes all the paper prototype scenarios, they fill our a questionarre that is scored and turned into a System Useability Score on a scale from 0-100.

I found the SUS scores to be far less useful than the think aloud testing, but I think they do represent a meaningful verification of the progression of a design project for people that are completely outside the process.  Over the course of my 4 weeks of testing, my design improved from an average SUS score in the low 80s to an average SUS score of 92 on my final paper prototypes.

Prototyping

If you’ve been following along with me throughout this process, you know that last time, I was looking forward to building a digital prototype of my ideas.

I’m happy to report you can check out my digital prototype online now.  Although there are still a few minor issues with how the animations are timed, I’m happy with how the digital prototype conveys a much more complete vision of how each interaction should look an feel.  It’s clear to me that in a collaborative environment, it would be extremely valuable to bring design ideas toward this fidelity before handing them off to ensure the ideas are well communicated.

Lasting Takeaways

I think this project was important for my progression toward an interaction designer who can work autonomously.  Matt Franks did a masterful job of offering feedback at each stage that pushed me forward but forced me to find my own way.  As a result, I feel very confident in the process because it’s one that I helped shape myself.  Now, as a class, we can stop thinking about thermostats and apply rapid ideation and creative problem solving to problems that are worth solving.

Thoughts?

-Scott

 

Posted in Classes, Creativity, Design Education, Interaction Design, Methods | Leave a comment

IDSE201 – Revision 1 of a thermostat

When we look at the evolution of thermostats over time, we see the gradual inclusion of new technology. However, the ubiquity of smart phones allows us to reconsider the function and utility of the old wall wart.

Last week I was tasked with exploring a Honeywell thermostat and creating a visual organization of the navigation and option provided to the user.

After a thorough walkthrough of the numerous options provided, I then had to reorganize the model I created into a new model which incorporates my views on thermostat use.

http://alexwykoff.com/ac4d/idse201_assignment_1.pdf

The Honeywell model had a particular focus on giving the user every possible option imaginable. It was also particularly focused on providing a wizard flow for the installer.

In my view, this installer-based optimization does not cover the majority use case, people in their homes who wish to be comfortable.  It also does not take into account the technologies available to improve the efficiency of the system or provide the continuous comfort of the users.

I immediately thought of the incredibly frigid winters of my youth, when we had kerosene heaters and later, a coal stove. I remember how incredibly cold it was in the mornings and how I did not want to get out of bed to start a fire. Even after we installed a central heating and cooling system, I did not want to get out of bed to touch the thermostat.

Now I have a programmable thermostat, and while it is useful, there are still considerable gaps in comfort as the temperature in Austin, Texas fluctuates during the day. A programmable thermostat is still not an intelligent one.

Combining these ideas, it possible to imagine an intelligent control which is portable. In my concept model, I have separated the controls into two systems, one is a simple control on the wall, and the other is a complex control on my phone. Networking these two devices, it becomes possible for me to provide feedback into an intelligent system which takes into account local weather conditions as well as my reaction to the internal climate.

There are more refinements to be made, but this is only the first revision. I may actually build this system out for my home!

Posted in Creativity, Interaction Design | Leave a comment

The Crimson Project: Update #1

So, in our studio class on Saturday, we were presented with an idea: make $1000 in three weeks. We have until the final presentation on Saturday, October 19th to create and ideate on a business plan and then hustle up $1000 in a very short amount of time. We were encouraged to go outside our comfort zone, and urged to use the resources we had at our disposal.

I am relatively certain that the words that first ran through my head when I saw the assignment don’t belong here on the blog. However, after the initial shock, I realized that the $1000 wasn’t going to make itself, so I became determined to work through this assignment and push myself.

I took the idea to my partner in life and in crime, Matt Kaemmerer. As we talked about our skills, we decided on a constraint to narrow down our options: the object that we create must be a physical one. I am a former illustrator, and Matt is a 3D character modeler, but neither of us had worked with physical objects, so it was a new territory that both of us were excited to explore. Below are some of the things we’ve done so far into Day 4 of the project.

THE TARGET AUDIENCE

So, what was a community with which I already had connections and rapport? Who would be interested in buying our physical product? As some of you may already know (and to those who do not, I am immensely sorry) I am very interested in ball-jointed dolls, or BJD’s for short. They are made of resin, metal hooks, and elastic string, and stand about 60cm tall for the larger dolls.

Petrol, my BJD

Petrol, my ball-jointed doll (BJD).

These dolls cost around $300~$400 for the cheap ones, ending at around $2000 for very limited-edition dolls. They’re highly customizable, and owners such as myself take pride in modifying their hair, eyes, face and skin to express our creativity.

That was when we decided that BJD owners would be our target audience for this project. We felt that they’re an enthusiastic and creative audience with the desire to spend big on things they find artistic and attractive.

THE PRODUCT

I started talking to some of my BJD friends and researching online at a forum that BJD owners often frequent. There seemed to be a trend with doll users who would customize or modify their dolls—there was a sense of anxiety and fear around first-time modifications. By “modify” I mean sanding, etching, or piercing the resin. The anxiety was present because these are $500 dolls—their parts are not easily replaceable nor cheap. So, if someone wanted to modify their doll to have some kind of futuristic pattern on them, they would have to permanently etch the resin. This not only has a high probability of not being done right, it also decreases the value of the doll. A non-modified doll will sell quicker than a modified doll.

So, what if owners could swap out body parts on the doll? The new body parts would be modified, but the original doll would remain intact. If owners got tired of the modification, they could just switch back the doll’s original parts. The owners would have less anxiety and more creative freedom with their dolls.

Resolving this anxiety is how we came up with The Crimson Project: Innovative Limbs for BJD’s (My handle on BJD forums is “Pristine Crimson,” and we wanted to play on that). We would create a model of a doll’s arm, modify it to look cybernetic (we observed that many users wanted cybernetic or steampunk arms on their dolls), and print this model out in 3D. The new cybernetic-looking resin part could be swapped out for other limbs on a doll, thus making the process of customization easier for the end user.

GETTING THE RIGHT SCALE

In order to make an accurate 3D model, we needed the scale of the arms. We initially borrowed the arm pieces from one of my dolls and dropped them in a measuring cup of water to identify their volume.

Borrowing Arms from my BJD

Determining the Volume

We then measured the arms with some measuring tape and created a rough outline of the arm in Blender, a 3D modeling program while using the volume and the measurements of the arm.

Initial Render in Blender

We now have a base arm for our modifications. It’s starting to shape up nicely!

SHOPPING AROUND

So far, we have sent this model above to 3~5 different places that do 3D printing. Initially, we were thinking of doing the product in full 3D printing, but some of the price points on 3D printing resin were completely unrealistic with the profit that we hoped to achieve.

Today, we’re excited because we checked at a resin casting company, and they will cast our arms in resin for a far more affordable price than the 3D printing companies have quoted us. Not only that, but they can make metallic resin, which would achieve a great effect if we went with a cybernetic arm. It might take some sanding to remove the seam lines (when resin is casted, it produces some seam lines around where the lines of the mold were), but I have the sandpaper and the ceramic knives in my workshop, since I already modify dolls.

Our next steps in this project are to do some contextual inquiries with BJD owners, talking to them about the customization process, and how they go about doing it. We’ll be modifying our product based on these inquiries.

I’ll also start sketching out the concepts of what we want the cybernetic arms to look like. Look forward to the next blog post where I’ll be posting some sketches for the arms!

Posted in Creativity, Methods, Startups | Leave a comment

Heartline: A Lifeline to Your Loved Ones (Storyboard)

Today in studio class, we showed off the high-fidelity storyboards that we made for class – the intent behind them was to use the iterative process to tell a compelling story through a storyboard that stood on its own.

When I first started thinking about the storyboard, I wanted to design something not for myself, but for someone with whom I have an emotional connection.

I chose my mother.

My mother has chronic depression, and as a child, I remember clearly the days where she literally couldn’t get up. On her end, she felt hopeless and alone. On my end, I wasn’t sure I knew what to do, and even if I did, the depression seemed so insurmountable to one kid. So I thought about an app that might help facilitate a connection between her and other people suffering from depression and their support groups. From this, Heartline was born.

Heartline Storyboard

I’d like to talk a little about my process here. Using 8.5×11 pieces of paper, I sketched out every panel in this storyboard in pen/Sharpie, and then scanned them all into the computer. Then, using Photoshop, I adjusted the levels and set the layers to Multiply so that I could color underneath.

I did a layout of the boxes around the images and text boxes (because even without the shading, if I didn’t have the text boxes, I felt like I wouldn’t be able to communicate the full story), and then went in to shading. I initially was going to go full color, but I decided against it because gray + one color makes a lot larger impact than full color.

These two panels are my favorite in terms of interface. It was the first time that I had used my own handwriting instead of text, and I actually like the effect that it had.

I blocked out color and then erased to give it some crisper edges.

Overall, I learned a lot from this project. The first thing I learned is how much effort it takes to put into high fidelity storyboards. The second is making sure, above all else, layout, layout, layout. Sometimes I can get mired in shading details, and honestly, the way I shaded the storyboard is less important than the layout and the text boxes. Third, I’m starting to feel more confident in telling compelling stories, especially one so close to me.

I have to say that upon thinking more about this fictional app, I want to make this exist, not just for my mother, but for my grandmother, who lives alone, and for my cousins, who just survived the Colorado flooding. It’s important to check up on loved ones from time to time, and I think Heartline provides a structure for people to connect.

Posted in Creativity, Reflection | Leave a comment

Position Diagram 2: Infographic on Education

This diagram is not meant to tell a story that traditional educational systems are going away.  The purpose of the position diagram to show how innovation currently happening within education can disrupt larger institutions and get them to start thinking outside the box as well.  The opportunities come from design strategy and risk which lead to innovation.  It takes a few leaders to think outside of the traditional ecosystem in order to start to disrupt traditional systems.   In this case education had remained lecture based, top down, and within classrooms for decades.   The creative thinking which leads to innovation allows smaller educational startups with less resources the ability to disrupt the current system and create ripples of impact.

Posted in Creativity, Design Education | Leave a comment

Abductive inference and sense-making

In our latest batch of readings for our theory class, I was particular interested in deconstructing a lecture from Charles Pierce. He is considered “the father of pragmatism.” Given that he is a philosopher and logician, his lecture, “The Three Cotary Positions,” is particularly thick, and I found difficult to parse: which made it a great candidate for using diagrams to make sense of it! This brought to mind another reading, “Organizing and the Process of Sensemaking,” by Karl E. Weick, Kathleen M. Sutcliffe, and David Obstfeld. So in this diagram, I’ve woven together both concepts to describe a process and relationship between abductive inference, synthesis, hypothesis testing, and sensemaking.


Click to download a PDF version

Posted in Creativity, Inference, Methods, Reflection | Leave a comment

Genevieve Bell and my dad would be friends…

In our Theory of Interaction Design and Social Entrepreneurship course with Chris Risdon, we read several batches of readings around technology and human experience. Inspired by Jessica Hagy’s ThisIsIndexed, I made several diagrams referencing our Theory readings. Here’s my favorite, an homage to my dad and Genevieve Bell:

Posted in Classes, Creativity | Leave a comment

Venn Diagrams based on Marsden

I thought about Marsden’s article “People are People, but Technology is not Technology” and applied it to my team’s research into aging in place and elders and technology. Here is my distillation:

Posted in Classes, Creativity, Design Research, Reflection | Leave a comment