Join the Queens Podcast Lab‘s Learning Seminar for a discussion with Queens College Art faculty Danne Woo, a professional graphic designer, interaction designer, and developer. In this meeting, Professor Woo will introduce us to the world of user experience design in web development. UX is an important part of web and app development, and a field with great promise to those with skills in visual design.

all right it looks like we are live hello everybody welcome to the queen’s podcast learning sir sorry welcome to the queen’s podcast lab learning series uh the spring 2022 season i’m joseph cohen i’m a professor in the sociology department at queen’s college and my research specialty is content creation entrepreneurship and how people make businesses or non-profits that create content for the internet and i’m co-director of the queen’s podcast lab here at queen’s college and today i’m joined by my colleague danny wu an art professor here at queen’s college welcome danny thank you it’s good to be here so first of all you have a very interesting name your parents named you after a famous designer is that yes yes what’s the back story with that yeah so uh both my parents are graphic designers um my my dad had a design agency in san diego for about 40 years before retiring and my mom was a design professor at san diego state for probably about like 35 40 years um so yeah design is just kind of part of my blood um and we have a family friend richard daney who had a design agency in new york in the 80s um pretty well-known it’s called danny and blackburn um and their his claim to fame which is a pretty big claim to fame is uh he designed the nasa logo and all the branding around it uh not the current one but the worm one that you see on like all the street wear these days um so yeah he’s uh just family friends they liked his name and they just gave it to me when i was born so i’m grateful for it i think he’s a great guy and uh it is a unique name so i do have to repeat it multiple times uh when i meet someone but it doesn’t bother me nah that’s so it’s the so visual design is the family business yeah yeah yeah so i really had no no other option when i was born uh into this uh design family so yeah growing up i i was the youngest to be inducted into the aiga um which is um american institute for graphic arts um and went to i think i was like eight or nine when i was inducted as a member wow so i went to all these design lectures and events uh met like all these amazing designers they’re just like you know people to me but they’re like world-renowned designers growing up um yeah so it has just always been a part of my family a part of my upbring got my first paying design job when i was 10 years old i got 50 bucks to pay to design a a typeface for a software company called a splash media which is like flash media is now a dopey anime okay so you got our legitimate vita line at 10 years old yeah yeah i’m sure that that typeface is you know floating around somewhere on a floppy disk in like my parents garage or something but it was my first paying job as a designer at 10 years old that’s incredible well so so as i said danny is a professor in the art department here at queen’s college and one of his expertises one of his areas of expertise is user experience or ux design and i i you just visual design in general is one of those things where you don’t you don’t think about it even if you’re working on a non-visual medium like podcasting you just assume you’re never going to come into contact with design but it turns out when you run one of these things design choices face you at every turn and you realize what you don’t know like even stealing design is hard when you when you don’t know what you’re doing right because you don’t even know what to steal yeah so i you know and as somebody who you know i i have no aesthetic ability you know my wardrobe is entirely costco i just don’t know about that world so i was really happy that danny came on to you know explain this whole world and so that’s what we’re talking about today the world of user experience or ux design so we’ll get an introduction on the topic and if it’s something that you’re interested in and you want to learn more about well you know talk to danny or go visit queen’s college’s art department and see what they got going on so let’s get started can you start us off what is user experience so um so user experience uh i think people can define it different ways but to me user experience is really understanding how an individual is using a designed product whether that’s a website or an app or a physical handheld product it’s really doing the due diligence initially to understand who the audience is the demographic of the people that are coming to your website or using your app um understanding the market that you’re getting into your competitors doing like competitive audit and seeing like what their sites look like how yours can stand out from the from the rest and just asking the right questions really to better understand the people that are coming to your website to your app using your products um so those questions have to be asked initially before you do any sort of design any sort of visual design to really understand hey who are you building this for who are you designing it for b is this really something that isn’t necessary is this already out there has it already been created um and uh really just getting those answers uh to those questions before you put a pen to paper and start like figuring out like color systems and typography and layout um because you if you don’t know who you’re designing for or like what you’re designing then you’re just kind of aimlessly putting colors and and letters and content on a website or app um without any sort of like base to start from yeah it sounds like how i’ve been doing it more or less yeah you know it’s interesting we were talking about it uh before we met today and i always imagined you artistic types to you know be staring at a cloud looking for divine inspiration you know what it strikes you you just throw some digital paint at a digital palette but there’s a lot more science that goes into it there’s a lot more research and development for these projects than i realized yeah yeah it’s um i mean as a user research a user experience researcher designer um you you’re kind of the first line of defense uh to really understand like who you’re building this for and what they’re what they’re gonna how they’re gonna interact with it um but but yeah it it’s it’s anything that any you know designer worth a grain of salt is putting together is based off of um questions that that were asked before beforehand and research that was done beforehand um like if you’re designing a website for like a a social justice non-profit or something it would be completely different than designing something for like coca-cola or like a corporation like that um and the audience would be completely different and the mood behind what you’re designing would be completely different so you have to take all that into account um when you actually start thinking of colors and and thinking of layout and typography and and visual imagery and stuff like that i want to delve into the how-to in a moment but before we do i just maybe wanted you to comment on the importance of design because it’s something that i did not appreciate before i got into content creation like design goes a long way into crafting the overall user experience and the identity of an outlet it does and even if you’re a podcaster even if you’re not working in a visual medium somehow i feel like design aspects still shape the overall character of the franchise and i was hoping you could start us off by just talking about why ux is important or why design in general is important even if you’re not selling an aesthetic product yeah so it really comes down to at least like visual design for a website or app um telling telling a story uh so you’re telling the visual story of the product uh or um tool that you’re you’re putting together um it’s as humans it’s a lot easier for us to look at a visual and get um some sort of emotion from the visual um much more quickly than you know reading text and kind of reading a description of what the um the company or or website or topic’s all about um we’re just born visual people so uh it’s a lot easier and quicker for us to get something out of something that’s uh more visually appealing uh than something basic basically we learn how to read we learn mathematics so that’s not a born um uh an instinct that was born with us um so yeah so it’s really important for us to tell the story in a visual format and visual way um to represent that brand represent that company represent that podcast um based off of uh the the theme or the topics that that um they’re covering um so yeah so i think the visual component is uh just as important as the contextual components um on any website um i’m a little biased so i i think it’s probably a little bit more important um but but yeah it’s definitely something that you uh you really have to put some thought into um when putting something out there that’s going to be seen by even one person 10 people 20 people 100 100 000 people um so yeah the visual side of uh whatever you’re putting out there is super important when telling telling your story so walk us through the steps of a ux job as a professional when you get a ux job what do you do to uh you know make sure that your design is as good as it can be yeah so i i could i could talk about uh some of my own experiences so i’m also a founder so i created a company called data visual which is a data visual design software company which is basically just a website it’s a web app and it’s essentially a mashup between like adobe illustrator meets excel to create like beautiful visualizations um so when i was putting this together uh first i just i i went out there and talked to people um talked to people in the industry you talked to people that build charts and graphs talk to people that use illustrator talk to people that use excel and hear them out and hear where some of the existing platforms like are working already um and where there could be improvements um so the first thing to do is really just ask questions meet people that are kind of in the in the area um that you’re focusing on get feedback from them and then based off of that feedback you know that you should design or build the website in this way add these different features add these different tools so that that’s the the first stage just asking questions understanding the audience yeah i have a question about that stage how do you ask questions to get information on people’s like aesthetic preferences you know what i mean like how do you talk to somebody to know if you got to put like a a racing stripe down the middle of the website or something like that yeah so or when you’re asking these questions you’re not really asking about like do you like red or orange yeah that’s not i’m imagining it yeah you’re not getting into the details of like the visual elements and the the style you’re um you’re really trying to understand uh like high level um what this world’s all about and who these people are in it um so one good thing to do is to um put together a user archetype uh a user archetype is basically saying um making up a um a person that kind of fits a number of different demographics that are specifically focused on people who are going to your site or app so i could be like uh uh this is john smith he’s 25 years old he’s a college graduate really interested in skateboarding really loves listening to podcasts um so you’re building this this user archetype to understand um that kind of encompasses the majority of the demographic that um you’re designing this for and then you can kind of be a little bit more specific about um you know john’s like really into uh you know um skateboarding so maybe it should be like edgy and use like brighter colors or like gritty patterns stuff stuff like that um or uh if john is really interested in um i don’t know murder mysteries or something then right it should be like uh dark colors with like splashes of red or um something like that so as a designer you’re taking this information taking what you’re learning from these people and then that’s when you get to get creative with it and kind of you know like you were saying like look up in the sky look at um the uh passing by get inspired by um the different things that you see um but it’s all it’s all based off of the research that you’re doing as a user experience design researcher and the answers that you’re getting to those questions so i think i get it what you’re probing for at the beginning is you’re sort of trying to get the zeitgeist of the audience or of of the consumer group or of the client or whatever you’re just trying to get a sense of who their character is and then you design to the character so if your podcast is like a badass podcast then you’d i don’t put like a motorcycle and a knife or so i don’t know you know like something something good like that though right yeah all right yeah you’re designing for an audience a specific audience and that’s when you get to determine like um that’s when as a designer as a visual designer you can say that different colors enact different moods like black is more serious grey is more sophisticated red is like represents love and more emotions like that so that’s when you start to play around with the visual elements and the visual tools as a designer to design for that specific audience based off of the the information that you’ve been researching do you systematically study like the like the symbols i guess like the symbolism to what would be symbolic to one audience like the symbolism that they see in an object or color might be different from audience to audience do you sort of develop like an expertise in a particular demographic and you just get an aesthetic sense of what they like and that’s your wheelhouse or are there some general principles like young people like yellow and you know how does that work yeah but when it comes to color it’s very subjective so it’s hard to specifically say like this color really represents this demographic um historically there’s been some research on like colors represent different things and different um cultures um so like uh in uh western culture black is represented by like death but then um you know more asian cultures or native american cultures white is represented by death so yeah so you have to know your audience you have to know the demographic uh and you have to know like who you’re designing for um but yeah that that can change uh tastes can change over time too cultures can change especially in this you know connected world we live in today um so uh understanding the demographic um based off of that you can like uh do mood boards to to determine like um like do they read like um vanity fair vanity fair versus do they read like uh i don’t know uh trans world media skateboarding or something like that right and then you can like do clippings and look at some of these other um other interests of theirs and see what what colors are popping out when you like do a complete complete complete mood board what imagery is popping out um uh so that’s that’s kind of like a mix between user experience and like a user interface designer um there’s definitely some overlap there but yeah doing mood boards around the demographic is really helpful to see like what they’re interested in what they’re seeing on the on a regular basis and based off of that you can determine um like visual palette and uh visual look and feel nice and then what’s the next step after that so you get a sense of the audience and you you know get some mood boards going and you get some basic concepts and what yeah so um i i follow the four d’s which is discovery define design and develop when i design really anything so discovery is really the the initial user experience research to understand just the demographic that basically what we were just talking about define is um so at least in the sense of like building a website or app define is taking that information that you’ve um received through that research uh and coming up with like a site map wireframes for for the website that you’re gonna build [Music] um and which is basically just like boxes for content boxes for a button here a simple box for imagery here and like squiggly lines for text that’s that’s basically a basic wireframe um and based off of that the the user experience design continues kind of throughout this entire process based off of the wireframes and site maps you can take that back to the user have them like look at what you put together maybe do some like a b testing um maybe cde testing and you have like five different versions of the home page and see um what they’re drawn to uh like if there’s a big uh button um for a call to action on the website but maybe it’s like too low too far down and they don’t see it initially maybe you have to move it up um so during the define stage and like the site map and wire framing stage you can ask more specific questions to the user um on the layout of the the website or app that you’re building um and based on that you can make adjustments and modifications the um stage after develop define is a design which is all the the visual elements um so after like talking to the user understanding like what they do different um things that they use on a regular basis you can start coming up with a visual look and feel start putting together um like a color palette uh start figuring out if you want to use like a sans serif typeface or sarah typeface um and you’re basically kind of skinning the wireframes with the colors and the imagery and typography that you have determined is best for for this this audience and then again it’s always good to go back to the um back to the potential user get feedback on that iterate on it and improve it and then the last stage is the develop stage um so this for a website an app it’s pretty obvious that’s that’s the programming stage um so once the design is complete um the uh the developer can actually you know build this out with html css javascript or whatever um framework they’re using to build it um and then again it’s always good to go back to the user get feedback on it like if at this point since you’re dealing with a digital online environment there’s a more interactivity um so there’s hover states drop down menus uh animation that you can get feedback on from from the user uh and then at that point uh if it’s good to go you’re ready to launch and again this the user experience researcher the job continues because uh especially with websites and digital environments there’s lots of analytics that you can collect and based off of those analytics you can really determine um if someone’s like not clicking on a button that you want them to click on maybe it’s just in the wrong position um so the user researcher user experience researcher can do uh more like data science-y stuff too and looking at these these numbers looking at the analytics looking at uh how people are actually and in large numbers actually interacting with this website or app or whatever you’re putting together um and then the great thing about the internet is that nothing is ever forever on there so you always make changes um so that’s why user experience researcher user experience designer is important because it spans the entire spectrum from start to finish beyond to make improvements make adjustments um based off of um the data the information the the questions and answers that we’re getting from the user um so yeah so it’s a really important job that spans the entire spectrum so so you’re saying with a high-end website all the little details are are are not just conscientiously placed but there’s even a scientific process where like the positioning of a banner or the positioning of a button they’ll be they’ll they’ll run like research to make sure that that’s the best place to put the button oh yeah yeah yeah um and that that starts really at the wireframing stage looking at uh and doing um focus groups essentially with just printed versions of the wireframes with different locations of where these buttons could potentially be especially for like if it’s a non-profit or something um the donate button the um membership button are like hugely important for for a organization like that so the the ultimate goal um is to get people to donate send money or join the cause um so those buttons have to be obvious prevalent like first thing you see and if it’s not then you’re losing probably hundreds of thousands of dollars so the placement of these elements really matter and could cost a company or organization lots of money if if it’s in the wrong location people aren’t seeing it because like below the fold and you have to scroll down to get to it um so a lot of consideration is put into uh the hierarchy of some of these elements on on a website or app um and how obvious they are for for the user to and easy for the user to engage with it so yeah it’s hugely important are there any websites that you love like i remember i was friends with a product designer who is like oh everybody talks about apple like the first thing people talk about in product design is apple apple apple yeah in your spaces who’s the apple who’s the design who are the companies whose design everybody talks about um i mean apple’s the apple so right i mean that alone is a good example um their web experience is really really solid um is it worth calling up their their site just to look at it while we talk about it or yeah if you want to that’s fine all right yeah let’s do it let’s just call it just for fun okay all right so here’s the apple site that i got going so go ahead tell us like what not about this site i’m not gonna put you on the spot for this but like tell us about apple in general like what you know yeah so apple’s uh site is i mean and apple in general their design philosophy is very clean straightforward there’s not a lot to distract you from you know the the main content or what they want the user to focus on um it’s really easy to navigate you know the the navigation is at the top and then on the home page are the products and that’s what they want you to focus on um the iphone is obviously their best seller and probably making the most money so that’s why they put it at the top they want you to continue to buy that and it’s something that you buy you know every couple years and upgrade um versus like a a laptop or something which maybe you upgrade every like five six seven years um so yeah so i think they’re they’re they’re very smart and as it’s not um you know uh it’s really well thought out when it comes to what they put on their site the hierarchy of the sites um how you interact with it the flow of going from one page to the next um everything is considered um when it comes to like an apple or something like on that level uh they have like massive teams of user experience designers and researchers you know data scientists looking at the analytics on a regular basis so um yeah everything is considered and it pays off for them strategically placed they just say oh they’re always shoving that iphone 13 in your face like always every chance they get i feel like i need to upgrade like weekly whenever i go to the website yeah right mine is so old already and i got it like a month ago well it’s working on my kids i’ll tell you that so let’s let’s let’s take a look at maybe some uh less artful design some amateur work as it were uh we’ll take a look at mine which like i didn’t really come up with anything i just stole different things i guess inspired would be the more legally defensible description of uh but like while you’re here maybe i’ll hit you up for some free criticism uh here’s the queen’s podcast uh website yeah tell us tell us what do we what are we doing here did i steal from the right people uh what should i be changing so i mean i i guess um uh it’s it’s a good idea to ask like the right questions like who’s your audience um what are some of the other uh websites for podcasts that are kind of similar to yours what kind of stuff are they doing so you can stand out from the crowd um i mean i i think it visually it looks um it looks pretty good uh there’s definitely room for improvement um no offense not taking that oh i know i’m not talented it’s not a sense of not a point of sense but uh i mean i i think for for your audience um which is probably going to be more academics i’m guessing um i i don’t know uh correct me if i’m wrong but that’s that’s my yeah we’re not known for our style okay we’re not like a high style crowd yeah but i i i think it’s i think it looks good um i like i i helped i consult with an organization called color change it’s a social justice organization and they have a podcast too um but you know their focus is on um helping black people in america succeed essentially uh and the name of the podcast is tell black stories so i help them with their website for that podcast um and because of the topic you know it’s it’s it’s uh uses a lot of darker colors um but because it’s a hopeful podcast we we have red and splashes of cyan um so it was specifically designed for for the audience so that’s really that’s really the important thing is that you’re designing something building something for your specific audience um oh wow can i play can i show this because this is very impressive all right here we go here wait first we’ll do a comparison all right here’s my work this is just i stole the new york times just a blank thing there’s not much design here’s here’s my work the queen’s and now take a look take a look at what danny does holy jeez look at this holy geez so yeah it’s like you know big beautiful image or video at the top um like bold text uh the like background is like dark um but there’s splashes of color like the cyan and the the orange um this are really like hopeful colors um so yeah wow even subtle things like how as you scroll for the first time the text just bounced just lifts ever so gently yeah that’s something called parallax scrolling which is really kind of fun fun to play with um so yeah with websites you can do all sorts of like animations and like on scroll you can animate things in so and that that also you know draws the eye draws attention to that specific area um so that’s another another way that you can get people engaged with a specific element on the website is like having it pop or like jump or animate or something like that wow that’s very impressive okay so definitely you know you you have to there’s a it’s like a dunning-kruger thing right you don’t know what you don’t know until you come into contact with someone who does know you’re like wow i really don’t know much so let me ask you this like if someone is interested in getting into design and maybe you know a career where they make something like this where do you start what’s the what’s the path what’s the recommended sort of path for you yeah so um so i think it depends like if you’re interested in like just the core user experience um research aspect of it then i i think it’s probably a good idea to take some classes in like psychology and um classes on how to better understand people and interpret like what they tell you um if you’re interested in uh like actually designing like interaction design um path then you definitely need to go down the more traditional like design um pathway so i’m taking classes and um you know just basic design principles like color theory and typography and layout design um and like i teach web design one at queen’s college so if anyone’s interested in that that’s a good class for this um which basically covers the entire spectrum of the 4ds the discovery defined the design and develop so you kind of get a taste of everything software do you teach what software do you teach in your intro class so for um there’s a number of different things um but for like visual design historically we we teach adobe photoshop to like create the visual designs of your website um the more popular uh software that we’re going to start being start using in the class classes figma or sketchup are two really popular ones that are being used in the industry these days and sigma and sketchup are really great for the user experience side so creating wireframes too um yeah so those are the those are kind of the main ones and then when we get into development too for that class is just html and css which are like the the basic building blocks of designing and building a website um there’s like some platforms that you can do like plug and play and drag and drop but i think it’s better that uh you have an understanding of the uh the the programming aspect of it uh as well um so that’s why we don’t use any of those platforms um but yeah so that’s essentially the main tools that we use in that class um and uh my syllabus is online all my lecture videos are online too so if you go to webdesign.daniwoo.com you can you can view all that content wow what goes to show there so one last question for students who go through like what types of career options are available to you if you learn web or user experience design where do you where do students get yeah um yeah so a lot of them go to agencies creative agencies um ad agencies uh and they’re working on lots of different brands and have having lots of different clients um some of them go to like tech companies like facebook and twitter and and basically work on their platforms um some of them uh go to other companies other corporations because everyone everyone has a digital presence these days um and they need either uh like a consultancy to help them with it um but most of the time for bigger companies like coca-cola um apple um they have an in-house team so you can go there too so there’s there’s lots of different possibilities especially user experience researchers that’s a really hot title these days um and it’s becoming a very important much more important uh uh role uh through this entire process so there’s there’s more opportunities than there were like a decade ago um for someone who’s interested in that he’s really interested in like the research side of things understanding the user understanding the demographic um and looking at like analytics and numbers um on on uh how people are interacting with the site um so there’s lots of opportunities um i think it’s a great time to be in the industry great time to be in the field so yeah it’s it’s uh it’s definitely a good time so i’m happy to like answer any specific questions so if anyone like wants to reach out to me directly you’re welcome to as well all right danny wu is a professor in the art department at queen’s college and an expert on user experience development or ux thank you very much danny it was really great to meet you yeah i know i had fun thanks for having me appreciate it