Introducing Collaboration and Coding Concepts Early on to Interactive Design Students with MiHyun Kim

Abridged Transcript

Gary

So, before we start, I want to let the listeners know that I approached the questions in this episode a lot differently than I did in the past, so, following your suggestion, I’m using questions that were important to you and your teaching practice. So, I’m hoping this approach will steer the conversation away from the previous episodes where it’s been like what I think is relevant to interactive design education and makes this more kind of what all of you listeners think is relevant to your teaching practice.

So, with that said, the one thing I wanted to preface is, in many of these questions, the word “coding” comes up, and I just wanted to ask you if you can personally define what you mean by “coding”, so when we get into the context of the questions, everybody will know, oh, OK, she means all kinds of programming languages, or she’s only talking about HTML and CSS, or whatever it is.

MiHyun

Yeah. What I mean by coding is any computer software language, whether it’s HTML CSS or processing Java language or JavaScripts. it doesn’t matter what language that is; the coding, I define that as all computer software language.

Gary

OK, perfect. So then, to jump into the questions, what would be the most effective way to introduce design students, which are all largely contained within art programs to this computational concept; or to put it another way, how do we begin to bridge the gap between coding and design in a more intuitive way for students?

MiHyun

[4:57] Well, I often think about that question and how can we balance computational thinking and design thinking which lead to a left-brain thinking and right-brain thinking and of course, somebody could really argue, is coding truly left-brain thinking? And that’s also really good questions. And of course, our brain doesn’t function like one brain goes on vacation and the other one works and they both work simultaneously on any task we do. It’s a matter of which brain is more dominant than the other when we are involved with certain tasks and I read a book a while ago called A Whole New Mind by Daniel Pink and he also emphasizes that left hemisphere handles logic, sequence detail and analysis and the right hemisphere takes care of emotional expressions, context and the big picture.

So, definitely there is a truth to that; the left hemisphere contribute computational thinking and it can best be related to writing software or instructions. On the other hand, the right hemisphere contribute design thinking and it attempts to understand the intents or problem before looking at any solutions, so for instance, let’s say we have to move ten boxes from one place to the other and computational thinkers think about how big each box is and how heavy they are and what’s the best routes to move those boxes, but the design thinkers would think, why do we need to do that in the first place?

So I often tell my students when they have to design and code at the same time, design brain has to lead the coding brain and they need to see the intents of the design and the big picture first.

So, let me go back to your original questions. How can we bridge the gap? I have found people who play video games seem to be better at understanding how computers think; well, more accurately, operates and as much as I don’t want to necessarily agree with that, video games seems to contribute to develop skills like computations, problem-solving and visual perceptions and also there is another exercise called conditional drawings; you can find it on conditionaldesign.org and it’s basically analogue way of playing a game with a pen and paper based on role as constrained. So, we have to use only logic as a tool and use rule as constraint and avoid arbitrary randomness. And this kind of exercise help teaching sequence, logic and the following deductions, which lead to computational thinking.

Gary

That’s…all right, so, that is interesting because I’ve never, ever, ever thought of…this idea of coding and design in a level like that, so to give you an example: when I think of design and coding, I think of the coding is the medium as in the coding is literally like paper and ink and the design students need to understand how the coding works in order to be able to produce their designs. But you’re thinking of it in a much more in-depth way; how did you come about thinking about that?

MiHyun

It’s from my experiences. When I teach students, I certainly witness their struggles; it’s awkward traditions after design, OK, it’s time to code and a lot of students, it doesn’t come naturally for them; it’s definitely I see the shift between from right brain to left brain. It’s not as intuitive to some students and I definitely see the struggles and trying to help to…I try to help them and I’m also trying to see how we can change or improve the course structure so it’s more adaptable for students.

Gary

[10:20] No, and that’s a really good and unique way to view that that whole thing because we all struggle with teaching students coding, whatever kind of coding it is. Design students coding. So my approach is to just, oh well, suck it up; you have to learn it and this is going to be hard and you have to work through it but you’re going at a foundational level saying no, let’s make this easier for them to learn by going all the way down to video game logic is similar to…

MiHyun

It actually is. Sometimes I tell students hey, I almost have to require students to play video games for my interactive classes because it helps them to think computation thinking.

Gary

And that’s why I’m so glad that you submitted these questions because this is something that I never would have…a line of questioning I never would have thought of on my own because that’s just not what I’ve ever…that’s not how I’ve approached that problem, but I love that idea of the foundational level thinking of just making it easier for everybody.

MiHyun

Yeah; the conditional drawing, you should check it out, it really helps too; I will send you the link.

Gary

Right, perfect. So, the next question is: how might we create the balance between produce a strong visual designer with competent feasibility skills with coding? What is…what’s your personal balance?

MiHyun

I think introducing computational concept earlier in design program would be very helpful. I think it should start from the foundation level and also there is weekend event called Hackathon at Texas State and my colleague, Grayson Lawrence, organizes the event every spring with the design students and computer science students to solve real-life problems together and I think events like that can easily be a class that’s inter-disciplinary and these kind of collaborations should happen more in our field.

Gary

OK, so, have you personally, I don’t remember how long you’ve been at Texas State, but have you actually participated in one of those?

MiHyun

Yeah, I did participate this spring and I always wanted to try and how a design student could work with a computer science student and they really work very well and they approach the same problem from different perspectives and they create…they come up with these great solutions with pretty feasible outcomes and that’s really amazing process to see. It only is weekend, two day event but I totally see that as a class.

Gary

Can you briefly described…well, not briefly: you can take all afternoon if you want! But can you describe what their prompt is: make this and then just kind of describe what they go…give us an overview of how it works over those couple of days?

MiHyun

This past spring, their problem they had to solve was, how we can make Austin to be more desirable city, so we came up with all kinds of problems in Austin. So, some of the City of Austin people to School to explain what their current problems are and a lot of course relate to traffic, so we came up with two design students and two computer science students and they came up together and they come up with…they narrow it down, all the design, city problems they have and they come up with, what’s their challenge and what’s their goal?

And what we can do about it and there are some sprint questions involved and they have to create a map, a user-flows and they also create empathy maps and scenario maps and also come up with all the big idea that’s not visible at all and then they go through the designers think about the design process and how they come up with the wireframes and digital sketches and the last day the computer science actually make the digital mock-ups, but it’s…so it’s a two-day event so it’s pretty quick but by working between design students and computer science students, they really learn how to collaborate and how to create a team to solve one same problems and I think it’s really good collaborations. They have very different ways of thinking, I’ve found.

Gary

[16:05] And I think that’s an elegant way to get over the one problem; how do you…there is that natural symbiotic relationship between design and development or design and coding, however you want to say the words, in Computer Science departments but how do you get a class to happen at the same time and so this is just the weekend Hackathon is a perfect way to get rid of…get over all the logistical hurdles about getting everybody together at the same time.

MiHyun

Right, it’s…I see this could be a class.

Gary

What is the structure of your interactive courses at Texas State University? From what I tell, you’ve got an Interactive 1 and 2…

MiHyun

1 and 2 and…

Gary

And then you’ve got Web Design and Interactive 3…wait: I’ll let you go ahead and explain it all.

MiHyun

At Texas State, Interactive 1 and 2 are like Web Design 1 and 2 and Web Interactive 3 is a mobile app design, so Interactive 1 and 2, in both classes there are three phases: User Research and Design and Coding. I believe that each phase can easily be its own class. The ratio per each phase I think it’s probably like 3:3:4 ratio currently, but I would like to see 3:4:3 ratio, give more focus on Design portion, but at the same time, I understand sometimes teaching and learning code is an all or none situation, so for instance, we cannot teach only one thing to make a responsive website; there are a lot of coding and design that needs to be taught in order to make a responsive site, but I think in Design program, 3:4:3 ratio would be ideal between those three phases, so, Interactive 1 we teach HTML CSS but not Media Query and no JavaScript and Interactive 2 we teach Media Query to make a responsive website but no JavaScript. So, if a student wants to add JavaScript, they can, but we don’t have time to go that far. And Interactive 3 is mobile app design class for Senior, so we don’t code; it’s all about user research, user experience and user interface design course.

Gary

So then, in Interactive 1 and 2, where do they learn the visual design; they talk about usability and visual design?

MiHyun

Yeah, that’s why I am saying I would like to keep more design to be more focused; we do teach design in their class but not as much as I would like it to be and some of type classes actually have adopted…how to design for web and students who take Interactive 1 and 2, they already should have that class before they come to Interactive 1 and 2 so they learn design part from other class and also we do teach design portion as well; it’s just so busy and very, very full class. I would like to incorporate more; we should focus more on design, that’s for sure.

Gary

[20:06] Yeah, and I think that’s the problem that every design program is facing, but we only have a Web Design 1 and then we have our App Design, so, I’ve pretty much done away with most…I’ve done away with the idea of students being able to effectively produce with HTML and CSS, a really good design, so instead I just teach them, OK, this is…I give them a bunch of exercises: here is your introduction to HTML and CSS and then we focus on visual design but using prototyping tools like InVision or Adobe XD. So, why have you chosen to do the opposite? You’ve chosen to go into the HTML and CSS and that’s more important than…not more important, but why do you pick the balance that you did?

MiHyun

Well, definitely the structure of interactive design current one, I like to definitely see more design aspects. This HTML CSS, we do teach them, but we also, the School has this free…well, probably not free…but Lynda.com access to all Faculty and Students, so we also encourage them to learn a lot from their part, so some of the exercises are coming from Lynda.com, you have to watch this, this, this, and you have to do these exercises, so that we have more time talking about design in classroom, but of course to build a website ground-up, everybody has to understand very, very basic things and not everyone understands exactly the same way from just learning from Lynda.com, so we have to go over a lot in classroom to make sure that everyone is on the same page, so design portion definitely I see needs to be more emphasized, but coding takes a lot; it takes over a lot of design parts, which probably needs to be addressed.

Gary

Yeah, and so I guess the better way to ask the question is, so why is it more important…maybe not more important, that’s not the right way to say it, but OK, point blank, why is it so important that the design students learn the coding instead of just hopping in an designing static mock-ups?

MiHyun

Now the designer should…I mean, let’s say they’re going to…probably not everyone is going to be a web developer and probably a lot of them are going to be web designer, but they still need to use the same language as a developer; they should be able to know what’s going on behind the scene, so when they produce it’s in their head, so they know how Media Query works and they know how HTML CSS works; that way, when they design, it’s not just very arbitrary thing. So, visual markup is important but they need to know what’s going on behind the scene.

Gary

So, can you talk a little bit about how you structure the Mobile App Design course?

MiHyun

Mobile App is purely user research, user experience and user interface design class and I’ll be teaching that with one of my grant projects I’ll be working on, so it’s creating an app, so we don’t code; it’s all about research and then they design and after they finish design they do testing through InVision and we go back, usually, of course, iteration is necessary. After user testing they go back and they fix their design and then update their InVisions and then go back user testing again, so basically it’s mobile app design is user research and user testing and UX/UI.

Gary

[25:06] All right, so the reason I wanted to ask that question is because I teach a class very similar, where it’s predominantly user research; they do some user testing and they do a case study at the end about the whole process. The design is not the focus of that course; it’s the research and the user testing and so I was thinking about, at least for us, and I’m assuming it’s going to be similar to you, is that that is a senior level class.

MiHyun

Right.

Gary

To me, just thinking about it rationally, that course should almost be first because the user research, the user testing can be applied to basically anything and everything that they do within design. Does that make sense when you stop and think about it?

MiHyun

Yeah, actually it does! It does make sense. Never thought about that way though.

Gary

No, and I didn’t do it until very recently when I was just looking at it; I wish my students had approached their Beginning Typography courses with this information because you know, it maybe would mean for more meaningful, more contextual approach to their design choices.

MiHyun

Yeah, it’s something that…yeah, I can definitely bring that up in our curriculum meeting; yeah, that’s very good suggestions.

Gary

Yeah, and it’s just something that occurred to me…those are fundamentals.

Some other of the questions that you, getting back to the ones that you submitted, or suggested I mean. What are some limitations or drawbacks when teaching interactive design and coding to a class full of students, and how many students do you have? I could have anywhere from…I usually average around sixteen but I could have as many as eighteen.

MiHyun

Yeah, I think it’s Interactive 1 and 2 is about sixteen but this semester Interactive 2 I have a twelve, so it’s any number in between. I found Interactive Design classes, I mean, it’s full of information so it has to be very structured and I always make announcement in class like, OK, we are going to spend next two weeks to do our user testing…user research and we are going to do next three weeks to design, so we have to make…I have to make sure that everybody is on track and on right timeline and limitation or drawback, I think solid wireframes, honestly. I mean, we use wireframes for user testing purposes and everyone starts with low fidelity wireframe with boxes for images and lines for text on grid paper and after user testing, everybody replace the boxes with images in line with the content.

And then I often find everybody’s design looks the same, regardless; they all have a different personas, so to solve this problem, I think iterations probably is the way, after first user testing with low fidelity wireframe, student has to make change on their design; after second user testing with high fidelity wireframe, they make another round of change and after the third testing with the actual design-design, they make changes again but in classroom, we often don’t have time to go back again and again; it’s ideal scenario and also students seem to be really, really stick to grid and they never think that they can’t break the grid in some way, so I think that also limits what they can do and keep most of design student work look the same; their design work kind of looked the same at the end.

Gary

Yeah. I have to follow up with this one, then. How…OK, because I have the polar opposite program; I have the most polar opposite problem with my students with the grid: they don’t understand it or follow it at all and so I’m literally looking at some of their designs and I’m like, this is going to…this is just literally not going to work. I’m watching them work in XD or Sketch and they’re not using a grid and then…and I’m looking like…so how do you get them to adhere to a grid? Because I’d rather have that problem!

MiHyun

[30:16] Oh, well I usually give them grid, like sixteen column grid and I introduce them how to create grid in Illustrator, so they can change if they need to, but I encourage them to actually not, I don’t know, it might be wrong, but I encourage them to come up with two different layouts with the same grid. That way, not every page is exactly the same, just replacing the content and images. I encourage them to be…first…first wireframe of course they keep the grid but once they’ve developed their designs gets to be more advanced, I encourage them to take out the grid and see the design with their eyes and see what’s the optical balance for their eyes and how they can introduce more design elements, not so limited within those grids. I think that’s from my experience that was the only way that keeps everybody’s work somewhat different.

Gary

OK. And you know, that’s just so frustrating; so you mentioned like you have them design two different layouts; one, and then they have to do something like using the same grid but then do two totally different layouts but using the same grid and that is just so frustrating because when it comes to print design, we do that all throughout the program, it’s just that it’s like iteration upon iteration upon iteration over four years but you’ve got two classes; you’ve got three to teach interactive design and there’s no time for that iteration where I think the true learning happens is when you do that iteration, whereas now we’re just scrambling to teach the basics and we hope they figure out the rest on their own. So that’s totally…I wish we had more time to do that, those little projects.

MiHyun

Yeah, I mean, they lean…they learn before they get to Interactive 1 and 2 and 3 classes, from all the print design classes. They learn about how to use a grid, how to use type, but when they have to design for screen, all of a sudden they forget everything about it!

Gary

Yeah, they forget and even bigger than the grid is their typography; I mean, I don’t know if you’ve noticed that but they do not transfer their print design typography principles to screen design. It’s just totally thrown out the window and I’m like, why are you centering a body copy?

MiHyun

Yeah, so we definitely need…I tried to; I used to teach Web Typography; I think Web Typography should be more emphasized, for sure.

Gary

Yeah, I don’t get it! Well, this is a good segue into your next question is, what is the future of design programs as they relate to teaching interactive and coded media? How do you see departments and programs evolving?

MiHyun

Well, of course I see technology plays a large role in design program. I think more and more design program is going to be interdisciplinary because design affects every aspect of life and it’s already happening and I think interdisciplinary courses within design program could be on degree so design students learn coding but at the same time they get to work with, for instance, computer science students, so computer science students take heavy coding but they also learn some aspects of design, so let’s say this ideal center for interdisciplinary program I’m talking about, this will be a place where any scholars or expert can find every possible resources we need in order to create any products or service. I think probably…since in the future, there will be technology’s going to be a big portion in our future, more and more programs should be more interdisciplinary; it cannot be it’s just separate identity.

Gary

[35:18] No, and so just to follow up, I’m actually…I have thought that for a while too. I just can’t believe that a university hasn’t offered a degree where students spend…depending on what kind of balance you want to give it between design and development, but how come Computer Science departments and Design departments haven’t paired up together? You’re going to get a degree that’s…produces the front end designer that either it’s development heavy or it’s design heavy, depending on what track…I just can’t believe nobody’s done it.

MiHyun

Yeah, I think…I see a couple of universities have started this interdisciplinary program. There is one, Arizona State, I think there is another one somewhere in New England, I’ve heard, but so I have looked into their program and their program is more like they are crossing the discipline between the Arts, so not necessarily between Design and Computer Science; it was more about let’s say, Design and Sculpture kind of thing. But I think…I have been doing a lot of interdisciplinary projects and I’m always looking for a good team and it’s not easy as you think.

Gary

No, it’s really hard and that’s surprising.

MiHyun

It is really hard. And it’s very important; it’s most important and probably crucial steps to make a good team with various experts and in order to create any products or service, bunch of designers are not going to make it far; I need different experts.

Gary

Yeah, you need diversity!

MiHyun

Yeah, I definitely feel that, yeah.

Gary

And that’s the one thing I can say from all these episodes of the podcast where I’ve, especially with interactive, with the professionals; they’ve all…there’s not a single one of them that I’ve interviewed that hasn’t worked in a team capacity, even if they were freelance, they were freelancing working in concert with a bunch of other disciplines.

And we don’t do anything to replicate that, which is a shame. So, going back, just talking a little bit about yourself and your own personal research. You’re kind of approaching interactive design as storytelling and so how does your interactive storytelling lead to teaching the way you teach interactive design?

MiHyun

My current project starts in Spring 2018 with Interactive 3, the Mobile App Design students. I’ve got a grant for this interdisciplinary project called Mermaid Tales. It’s a Mobile App project using augmented reality to preserve history of San Marcos in Texas. I’ve learned San Marcos, Texas has a very quirky history, such as Ralph the swimming pigs; mermaid performers in submarine underwater theatre, underwater clowns, theme parks; from early 1950s to 80s and those histories are all gone. The Texas State purchased the park and made it to be an education center, so this project will explore how best to incorporate site specific augmented reality technology to create augmented layer over the physical landscape and architecture of San Marcos, so we are going to create this visual mockups App in the classroom.

Gary

OK. Can you describe what…I know you haven’t taught it yet, you’re going to, but what do you envision the deliverables to be?

MiHyun

[39:53] I really want to incorporate what augmented reality can be in the future, rather than what it has been. I mean, my…of course, I always have a really good vision; my problem is always execution; how is it going to really work. I have to talk about city a little bit. There will be ten mermaid statues that are going to be installed this winter, so what I’m envisioning is, when visitor use this App, they visit these ten different mermaids statues like scavenger hunt, so when they go these mermaid statues with their phone or mobile devices, they get to see things that are not there; it could be information about the cities, it could be information about the histories; I haven’t come up with all the content yet, but…

…actually the contents part is going to be done by the History department, so in the Spring, our plan is to finish the visual mock-ups and then we are going to user testing with the community and then in the Fall we are going to make some changes in design and go around another community service, another user testing with the community and then the History department is going to add contents.

Gary

OK, so that makes…that sounds like it’ll be a fun project.

MiHyun

It’s actually a two, three year project; it’s going to take a while but it’s going to be…yeah, it’s going to be real life projects.

Gary

What level of students are working on it now? Since if it takes two to three years, are the students going to be able to see it through, through the two to three years, or are they going to unfortunately graduate….

MiHyun

Well, I plan to give them all credit for their part; they’re Seniors, so they’re not going to see it but hopefully they download the App and come back to the city and use their design with their phone.

Gary

Yeah, that’s the other thing that’s so frustrating about teaching interactive design is it doesn’t fit neatly into semesters.

MiHyun

Right, right, because it’s large, the scale is large.

Gary

Yeah, while the design portion of it may be small, like the initial push to create the visual may be small, that again, iteration, revision, that thing gets revised over and over again, as content gets added, as it goes into development, as it goes into user testing, so there’s just all that that the students are missing out on just because, again, interactive design doesn’t fit neatly into a semester, unfortunately.

MiHyun

Right, yeah. So my plan to actually, because they are not going to see the end result, I’m trying to see if we can present the projects at South by Southwest. So, it’s going to be 2019 Spring, in March.

Gary

Just a suggestion that popped into my head that I was…Episode, I was talking to, I’m blanking on her name right now, but she worked at Airbnb and the project…and so I was asking her…she didn’t do the designs of Airbnb; she came in after they did their rebrand and so her job was to enforce and revise as needed, the designs as they would go further along in the process; that would be interesting to see, OK, the Seniors kicked it off, they did a lot of the work but then when it comes time to do user testing and the project has to come back, there’s another class that could then, their job is to work with the existing brand identity, the existing screens and then make revisions based on whatever comes back from the user testing.

MiHyun

Yes, yes, that’s exactly the way to go.

Gary

So it’d be really neat to see these different pockets of students getting to work on this on the course of this entire two year, three year project.

MiHyun

Yes, yes. I mean, the design probably is going to be about a year.

Gary

One other question, and it’s…in some of your questions you mentioned data visualization and you said you had your students to data visualizations and so when I think of data visualizations in the print term, I think of information graphics, but in the web, in interactive design, it’s not static.

MiHyun

[45:13] OK, my past previous experience…my experience in the past with Interactive Data Viz I have dealt with processing before and it’s just too much task; they have to learn software and they have to understand that the data and they have to visualize; it’s just too much task, so as far as the software goes, I’m probably going to have them to use either Tableau or Story Maps, so no coding is required. In order to use Tableau, you need to be able to use Excel, Microsoft Excel quite well, but that’s pretty much it and Story Maps, I actually haven’t used Story Map yet but I see this is a website called Story Maps and I see this could be another approach to introduce data viz but I think there are some limitations, so I’m still debating what software would be a better fit. So as far as software goes, that’s my answer! Data is…teaching Data Visualization to design students is tricky; it definitely has to be collaborative projects with data scientist, data analyst and data engineers, so it’s probably a somewhat awkward fit in design program, because I’ve seen Data Visualization class in Science department, Business department and Geography department and sometimes I think we should all combine them all as one; it’s completely interdisciplinary subjects.

Gary

Yeah, you need every single…I mean, I think that’s a problem with just design in general is that we’re…you can’t just be handed the content and expect to do it because to produce and design around it because data visualization, you really have to have an understanding of the data before you can organize it, before you can present it…yeah, it’s just you have to understand it.

MiHyun

Yeah, I really have…I really emphasize that students have to understand the story, the data, and be able to create their own story, so what do you want to say through this data? You have to create this visual narrative so they can talk about…through the data, which is the fact; they have to talk about the past and what it is now and ideally they should be able to predict what they predict and how they can solve their problems and I’ve been working with the City of Austin for affordable housing so the topic of this class would be how to make Austin affordable and desirable at the same time, which is tricky and I’ve been looking at some open-source data about the City and I’ve been getting some data from the City as well, but there was thousands and thousands of datas and you have to, you know, student has to understand the City first, the City planning, so it’s tricky.

Gary

And this is one of your questions that you kind of said…Data Visualization, it seems like it would be more appropriate for a graduate student level?

MiHyun

Yes, it is for graduate class; it is more appropriate, yes.

Gary

OK, so then, with that said, what could we do on undergraduate level to just make them aware of…so that when it comes time to go on, they’re not…do you know what I mean?

MiHyun

Yes. I actually am doing independent study with one of my students for this Data Viz and she’s Senior and we did, with a print first, with this data and whilst she’s working on this Data Visualization on print, she understands about the data very clearly and she’s already very familiar with what you were trying to say, why she’s doing project for prints. And second project was interactive with Tableau and since she has really good understanding while she was doing the first project, the second project it’s more about learning the tool and she knows exactly what she wants to say, so it’s a smoother transition from print medium to interactive, with the same topic.

Gary

[50:27] So, I just kind of noticed where we are with time; so, before I let you go, is there anything that you are working on personally that you would like to share or anything you want to promote or…

MiHyun

Yeah, the most immediate event will be…I’ll be doing Spatial Augmented Reality installation with a digital media artist, Joy Obiera from UT Austin in September 2018 during the Mermaid Festival in San Marcos, Texas; it’s a night event with large scale interactive projections that merge a real and virtual world while allowing the viewer to interact with a 3-D object using sensor, so I’m sure there’ll be some noises on media about the event, so if anyone listening to this podcast happens to be in Texas, please come by and check it out. </dl>