Episode Links

Abridged Transcript

Gary
It’s great to have you today. The first question I wanted to ask you is, in the paper that you co-authored, “Mo’ Pixels, Mo’ Problems: Moving Towards a Resolution Independent Web” you made the statement, “In order to accommodate a synchronous user experience in a device-shifting world, we as designers must prepare our designs in a fluid and focused manner” which is something I totally agree with and struggle to bring to my own classroom. However, throughout the paper, you discuss pixel density, CSS media queries, JavaScript, SVGs and so on, so my question to you is, how much of what you described in the paper is the designer’s responsibility, and how much is the responsibility of the front end and back end developers?
Rita
This is a great question. I’ll begin by saying I co-authored this with a front end developer, so a lot of the more technical implementation thought was described by him but on all of our projects when we work together, it was certainly something that I was thinking through, so when I’m thinking about designing an interface, trying to think about, can this page include an icon font or SVG to reduce load time and to ensure that the graphics will look great on high pixel density displays and just always trying to think about, OK, I’m going to design this interface but when it’s starting to go into production and I’m going to work with a front end developer, how can I ensure that all the assets are created in a way that is adhering to web best practices. So, it’s really a collaboration, I would say.
Gary
OK. So, when I’m teaching in the classroom, this is where I’m struggling with this idea of performance; and I believe solely 100% like the designer should be focused on performance and designing for performance, but I’m kinda curious where the line comes where…I’m teaching my students to design something and should they be burdened with saying, should this be an SVG? Should this be a jpeg? Or should they be burdened with the design and then somebody like the developer says hey, wait a minute, the best way to implement this would be an SVG or vice versa. Does that make sense?
Rita
Yeah, it totally makes sense. I would say that in my earlier web design days, I would initially send over my file, hand it off to a front end developer and say, “Here, let’s make this live.” But oftentimes he would come back to me and explain, “Hey, Rita, if we did it this way, it would work better.” And so I think part of that just working so closely with a front end developer really shifted my understanding of how best to implement things and to ensure best practices and that thereby changed my practices and workflow to ensure that I was thinking about those things while designing. And you said something in there that I can’t think of what you were saying, so…I digress.
Gary
No, that generally answered the question. So, I guess the follow-up to that would be, what should we then be discussing in the classroom that when it comes to this idea of the performance and making the right design choices. For example, how I’ve been…I keep changing each semester. Last semester, I taught them performance like, we’re doing a performance budget, and they had to get a website to perform within that budget but that was so confusing for them, being their first experience. So this semester I’m introducing, we’re going to be doing some images; there’s about fifty different ways that we could be doing images and it’s going to be the job of you and the developer to determine what’s the best solution, and I’m just trying to make them aware that there’s going to be a solution there that they have to be a part of making.
Rita
Yeah, I think that that’s a great approach. I think that part of it is, really in suggestion in this Mo’ Pixels, Mo’ Problems paper is about just always keeping your audience at the forefront, so for example, in my job currently we have a team dedicated to creating web graphics and oftentimes that includes things like banner ads and if the banner ads are being served on a platform that can easily accept assets up to 150kb, my suggestion would always be to export that two times for a retina or high pixel density display and serve that higher graphic. Now if, say the restrictions of the network in which we’re implementing is 25kb, then you’re definitely going to do at one time and go in for saving web devices in safer web devices and likely even have to make adjustments in terms of saving for high quality or medium. So, I do always think it’s really important to think you want things to look beautiful, and I think that’s really what all of us designers are striving for, but if no one can see it, it’s not going to look beautiful, so just trying to always keep that balance in mind of performance and audience and keeping things beautiful while not sacrificing the user experience.
Gary
Yeah, I think that’s a good way to approach it with just the idea of audience in mind, because in the classroom I can easily say, “This is the audience” and then just throw out that, OK, but does this specific design serve this audience? I think that’s an easy way for them to see that OK, the design changes upon the audience.
So, can you elaborate on another statement you made within the paper? And this is more for the audience and not for me, but you made the statement, “Design in a fluid and focused manner.” Can you describe what you mean by fluid?
Rita
Yeah. I would just say that we’re living in this world in which I might be viewing a website on my iPhone or my iPad or on a huge display in my workplace or possibly on my thirteen inch MacBook and I think it’s just thinking about whatever we’re designing, we’re ensuring that we’re thinking about cross-device and cross-browser compatibility and trying to make the design and user experience as fluid across those platforms as possible. So, just ensuring hey, this is going to look amazing on my external monitor but it’s also going to look amazing on my phone and this is how it can fall back across things if necessary. And the same goes for browser.
Gary
So, is there a tremendous difference, when you go from desktop to tablet to mobile to large screen? Does the design change a lot?
Rita
I think it does and one of my…it’s hard in practice on a daily basis to really shift your thinking, but it sounds trendy in the web world, but Mobile First. I think having a Mobile First approach is you are just boiling down the design to the very basics, which for me, it makes it a lot easier to then think about OK, and on desktop we can add this or have the functionality look like this, where on mobile it’s just like, I’m really going to boil this down to a potentially single column and make the user experience as fluid as possible and I think oftentimes it’s on desktop where adding, this is the hover state and these are the more fancy bells and whistles, where on mobile you’re really just dealing with touch instances of narrow screen size and you kind of have to boil things back to the basics. So I do think the approach is oftentimes different but I do think it’s just important to think about the device and where people are when they’re viewing those things. On mobile, people are generally on the go so they probably don’t want the bells and whistles of a beautiful CSS animation that they might want on desktop.
Gary
I do actually start with the Mobile First start when I’m teaching my students, but it wasn’t until recently that I was showing them how to use the picture element, HTML picture elements like this art direction, this idea of cropping, and somebody had pulled out their…one student had that seventeen inch MacBook Pro that they don’t make any more and that device blew out the entire layout; it was just…it didn’t…the cropping of the images, the layout didn’t work on that one device where it looked similar in everybody’s thirteen inch and fifteen inch laptops, but that seventeen inch one, it just broke, and it’s really…I don’t think students realize that, because you can sit there and talk about it in theory but until they see it break, it’s really hard. So, with that idea, do you have a device lab at any of the places where you work to be able to experiment with these different looks and feels?
Rita
Yeah. Basically as soon as I started at my new job at Airbnb, they got me in iPad to test but I’ll be honest, most of my work has been in the iOS realm so I really haven’t done much with Android, but at my old job, we did have an array of Android devices as well and Windows and Samsung things that I don’t even know what all they are but yeah, we really tried to ensure that the accessibility of the projects that we were making overall could be viewed by, really we would look at analytics to begin and think about who is the audience. Again, Audience First, and how can we develop this to ensure that the people in our audience are able to view this and coming from an art museum background, the majority of our users were Apple users.
Gary
Yeah, that’s the other thing that’s tough to replicate in the classroom too is analytics, because we would have to, I don’t know, I guess maybe if … I teach at UMBC, maybe if I got access to our analytics, some pages to show them examples of the analytics that come hit our site, they would help drive that kind of stuff home.
So, changing up a couple of questions. Whether it’s the Indianapolis Museum of Art’s website or the Art Institute of Chicago’s LaunchPad app, you’ve worked on some really in-depth, wide-ranging projects. It seems to me that assigning my students the task of designing a site or an app such as these doesn’t really replicate the complexity of the problem the designers face when creating these experiences. Nor does it replicate the team approach necessary to create these products. So, what should design educators be doing to help better prepare students to work on such a large scale project like those?
Rita
Oh, that’s a great question. I wish that I had had more of these types of projects in my education. I think it would only benefit. I think that maybe something that would be interesting is like a case study. When I was in school, I went to Indiana University and I was a Telecommunications student and I helped work on just a few small sections of their website, re-thinking the information on the page was laid out, and I do think that even something as minimal as, here are our main users and this is the device or browser that they use: here is what exists today and we are looking to solve X problem, and I think a lot of it is really teaching a student about systems thinking and to me, that is the main thing that helps me in my design approach on all of these sorts of projects is just learning how I can take large sets of data or information and represent them in a meaningful way and I would say both with my web projects at the IMA as well as the app that you mentioned for the Art Institute of Chicago, it was thinking about OK, the IMA, this is a visitor that’s coming, trying to get information or could be a researcher or a scholar and trying to come up with user personas and thinking about that web experience so again, audience. And then for the Art Institute of Chicago, that was someone who was at the museum who was walking around in a gallery space and they’re seeing an iPad mounted on a bench or something like that and so how does that experience differ when they’re in the space and looking around versus visiting a website in advance of a visit or maybe it’s a scholar who never is intending to visit the museum at all. And I would say in both of those cases, it’s really just taking this is the problem; we want to share this information and in both cases it might be a different sort of environment but how can we make this meaningful and so I think case studies are really, really helpful in teaching your brain how to think through: this is the scenario, this is the problem and this is the design approach that would get me to an end result that is meaningful for that audience.
Gary
All right, so that makes complete sense. I’m just throwing this how I would do this in a class. I would start off and I would have them do just like a case study of an existing project and so get as much details as they can and see how that worked. Then when it comes time to assign that, that’s where it gets tricky. Do you start by, here’s the problem and that problem is we’re trying to solve X. What are the ways that we solve that? Then we go into, now that we know what we’re going to solve X, then do we go to, I would say, content and information architecture where they start…then you start going to UI interfaces.
Rita
Yeah, I mean, that’s how I think you can totally make a beautiful user interface separate of knowing what the information and content is, certainly, but I think in the real world, or so far in my job experience, it’s been very centered around, these are our business objectives, this is who our audience is and this is what we’re trying to do by re-designing or creating this thing out of nowhere and how can we present this in a meaningful way, and I think oftentimes knowing it’ll be served mainly on an iPad or mainly on a mobile devices; that’s a great jumping off point for even having an understanding. Let’s see, I don’t know if I’m answering your question fairly enough, but I think oftentimes it’s like, what is the business objective? Because the business objective will then drive, this information should be at the top of the page and this is something that’s a little less important; it still is a priority but it should appear further down, and this is how it relates to the navigation and where we’re looking to or how we’re looking to segment our content.
Gary
I want to ask a follow-up question; you said a little bit earlier, you said learn systems analysis. Could you explain that to me, to everybody?
Rita
Sure. OK, well I’m just making this up because I’m really not sure. So, I would say to me systems thinking is just thinking about, kind of like what I said earlier: there’s a large amount of information, so I know that there’s going to be videos, there’s going to be multi-media content, there’s going to be general, say it’s label text, and there’s going to be…we’re also interested in ensuring that people can find their way around the site. So, if you think about those things then as a designer I might start thinking: OK, well there definitely needs to be navigation. Maybe if it’s interesting if there’s related content, is there a way that we can show different angles of an image or a way that we can show videos and images next to each other to create a full, holistic view of something. And then it’s like, is the call to action or whatever the main point of the page, if that’s the most important thing, maybe that gets moved up higher. And I think just once you start understanding what the content is, and then you can decide and start thinking about the order of importance, I think it just helps give meaningful order and I would consider that systems thinking; it’s just trying to flow things into a space.
Gary
OK, so I’m going to ask another question. What you just described to me sounds kind of like…oh here, I’ll just…it’s the…in your bio you talk about information architecture and wireframing. To me, that sounds like what you just kind of described to an extent, so basically until recently, I was approaching wireframing much the same way I would have students approach thumbnailing a logo or a magazine spread and it was all about showing what it would look like, and it wasn’t until recently that I realized that wireframing, it’s not about what the site’s going to look like: it’s about the relationships in the content and it I just realized it’s really hard…no, I shouldn’t say that. It’s a lot easier if students do a proper wireframe, it’s a lot easier for them to then design the UI elements within the site if they have a proper wireframe, if they know the proper system that everything’s flowing through and if they know the proper relationships of content. Does any of this make sense to you, what I just said?
Rita
I think it’s all completely…yeah, I mean basically, I would say that I use systems thinking as an overall analysis of information and then I use information architecture and wireframing to show that, or to display that in a meaningful way. So, when I say information architecture, it could be as basic as these are the five navigation items and on a landing page, it’ll be this that will take you down into sub-navigation which are these items and it’s really just giving categories to things and then I would say a wireframe is giving that category maybe a little bit of a visual look, but all it really is, is elements on a page, so I think you’re just looking back at maybe that list that you’ve made and ensuring that if you’ve shown five navigation items, that then you have five little tabs across the top of your wireframe. And I think it’s important to…I think it’s this whole: strong ideas loosely held, especially during that phase you want to ensure that you’re just getting ideas down on the paper and I think oftentimes with stakeholders, or maybe it’s your professor, you just don’t want to get too tied to, this is exactly how the end visual mock-up might look; it’s really just about this is all of the information and the way that it might appear on a page. But the navigation might in a wireframe appear at the top of a page and then in the full fleshed-out high fidelity design it might end up being on the right hand side or something; that’s just a basic example, but I just think it’s important you’re just trying to get out ideas.
Gary
Thanks, and I’m glad you noticed that the students, once I realized that the thumbnail and the wireframe are two different things, I was able to better articulate to the students that you are not visually designing anything right now with this wireframe: you are organizing the information that is provided. But they still have a real tough time not looking at that as the visual outcome.
Rita
Yeah, I think that’s hard for students really, web designers, stakeholders alike, but I think the beauty of a wireframe is that it allows you to have the conversations about basic content needs and have a discussion about those. I think of it as like in IKEA. The piece of paper that you get in an IKEA box and it comes with all of your equipment but the wireframe is that little white piece of paper that has a little diagram of how it’s all going to work, and I think it’s important during that phase is when you gain an understanding of how this is all going to function and how you can work with your team and your colleagues to ensure that it does. And then comes the visual design where it’s like, alright, we’re all on the same page here, and now my visual design doesn’t have to be as painful! It can really be about making something beautiful.
Gary
And you know, this is where the trick comes in for design educators is, especially when they’re going to Design School. We’re tasked with teaching them visually how to design something but with the web, with apps, with these kind of things, you can’t just go in and just start designing UI elements because you need to know so much about that UI element for it to be effective and we could spend an entire four years’ worth of classes just teaching about information architecture and wireframing; those are separate jobs. Again, is that a fair assessment on my part, because I’m just one person, this is just my observations?
Rita
Yeah, I think that it is. I think the skillset that I have currently, I think that my education certainly laid the groundwork for it, problem solving and approaching projects but I graduated five years ago and my first summer internship after graduation, or the internship that I had right after graduating, my intern supervisor had an iPad and iPads were new at that point and within two years later, I was designing iPad apps and I just think that in this realm working on digital projects, things are moving so quickly that no matter what you learn in your education, I do think your internships and your hands-on experiences and those case study opportunities are what really allow you to get and fully grasp what your professor has been telling you the whole time. I think a lot of this is something that, once you’re in action it’s like, wow, finally, this all clicks!
Gary
OK, you know, that makes sense. It’s also a tremendous leap of faith on the student’s part, where teaching is going to translate because I’m thinking to myself, I fall in the camp that they need to learn the information architecture; they need to learn some HTML and CSS; they need to be cognizant of all these ancillary skills that either they’re going to be asked to do or they’re going to be asked to work with somebody who’s doing it. But I can’t overlook the fact that they need to be sitting down and they need to be cranking out a ton of UI element so they build their visual skillsets too.
Rita
Yeah, and I think learning the software and building your UI skillset is equally, if not more important because at the end of the day, you still have to give all of these ideas some kind of look in the world and I think it’s important to, I don’t know, we live in this world for the Pinterest and the Dribbble etc, and I think it’s really easy to just at the beginning of every project, go onto a site like that and I actually try really hard to block that stuff out and just think, what would this…what is the client, what is the project? Do they exude some kind of energy and how can I reflect that in this digital space? And I think a lot of it is working within, oftentimes you’re working within an existing working feel with a brand or with a campaign or whatever it might be and so also giving a nod to that without being too confined by that as well.
Gary
You know, that’s actually a perfect lead into my next question and that is in regards to your job at Airbnb. Since Airbnb already has an existing product that they aren’t creating from scratch, how does the design process differ from working on projects like the IMA website or the AIC app where you started from scratch?
Rita
Yeah, that is a great question. So, I should preface: I am actually, I work as a digital designer on the brand team, so I am working more under the marketing realm but I can speak to both so we also have designers that are experienced designers and they work on the product, which is the platform for booking and listing your home and signing up as a guest and searching and booking your travel, etc. And so I would say, if you are, I’ll start with product design, I would say that working as a product experience designer, you’re always working within an existing framework, so I think that is honestly where your UI skills are incredibly important but that systems thinking is incredibly important because really you’re trying to think, how does the user get from A to B in the most simple, elegant way that is working within the existing design language of this platform. And when I say design language, I just mean it’s the existing look and feel and you really aren’t deviating from that. So that’s my understanding of experience design on the product. And then for someone like me, working on that with branding and marketing type projects, I too am working within an existing brand but my work is much more campaign-centric; since I’ve started I just worked on a website for our partnership with the New York Marathon and so that specific campaign had its own look and feel and I needed to implement that on the page and ensure that it was matching our existing branding and then also ensuring that all of the content that we were creating surrounding the campaign and all of the social media posting and all the events and all of that sort of stuff had a place to live online.
Gary
Did you start at Airbnb before or after their most recently re-brand?
Rita
I started after the re-brand but…it’s been fun.
Gary
The reason I ask is, I think students right now, I don’t know what their expectations are, but I think they’re thinking that they’re going to be going into Airbnb or something else and I’m going to redesign the brand; it’s like this pie in the sky and that’s just not the reality. The reality is a strong existing brand is not going to change, so you have to be the steward of it.
Rita
Exactly. We talk about that often; under our brand department we are stewards of the band and it’s like our CEO had a baby and we’re all babysitting it and you need to ensure that you’re encouraging brand consistency and just doing everything you can to not weaken the brand.
Gary
Yeah, and you know, from a pedagogy, how we operate in the classroom perspective, I’ve never taught…I’ve taught branding before, but I’ve always start from the, let’s start at the beginning; we’re going to create it. But I’ve never said, OK, here’s the existing branding and this is now go execute this campaign, but that’s closer to the reality of how people are going to be working, how students are going to be working. I never thought about that.
So, let me think. There’s a couple other questions…oh, I just realized we’re starting to get a little bit late. But a couple other questions before I let you go. In your bio, you stated that you take projects from strategy, conceptualization, information architecture and wireframing to high fidelity prototypes and user tested interfaces. So, is this something that’s unique to you, or is this what the reality of an interactive designer’s job is?
Rita
Oh, good question. I honestly do not know the answer. I just kind of landed where I am and this has been my approach and it’s something that I’m still iterating on actually, but I guess I can break it down when I think about strategy and conceptualization; that’s really like working with someone to come up with an idea of what this could be and where it could live. I’ll use an example of a project actually. I worked on a digital art catalog for the Smithsonian’s Freer and Sackler, and it was an art catalog of Japanese illustrated woodblock prints and I flew to DC and I looked at the collection in person and I thought, how can we represent this in a meaningful way on mind for scholars and researchers, so that was kind of the strategy and conceptualization process. I was working with the curators; I was working with scholars to understand why this was important and how we could put it online and then from there I started to gain an understanding of what is all of the information that you want to live on this site so I knew that there’d be long form essays; there’d be a collection search and browse and then they also wanted the ability for just like we’re able to, and it was a physical book, take notes and have bookmarks; they wanted to be able to do that online. So I knew that would be a part and all of that was kind of drawn out during the information architecture stage and then I wireframed it to put it into some sort of order and think about how all of these sections might flow together and then I began to give it a visual design, again taking from their existing color palette and riffing on that and their existing branding and I made that into static mock-ups and then I began to user-test that with their main audience so it was both the casual user and researchers and scholars and I conducted research both qualitative and quantitative and just really quantitative was working at click patterns and data and qualitative was sitting with someone and asking them questions and seeing how they went through the interface.
Gary
So, to me this is just a personal observation: I don’t know if this is unique to you or not, but I think this is why you’ve been successful, because you do think of the design very holistically; you’re not thinking of it as one little, like I said, just the one UI element. You see the big picture and I think those people are rare. But can you define a little bit or clarify what you mean by high fidelity prototypes?
Rita
Yeah, of course. Really what I mean by that is just it’s something that before I would use things like Photoshop and Fireworks and more recently I’ve been using Sketch and just to go and really try to mock up the interface as close to what I would like for it to be when I work with a front end developer so that’s thinking about, this is the user state when you hover and this is what it is after you have had a form submission and basically just thinking through the entire user experience and mocking up all states and then also all devices; trying to mock up mobile and desktop so that’s really what I mean by high fidelity is just having something that’s as close to what the end product may look like and then working with the developer to ensure that they can create that with code.
Gary
You know, this is a personal, also another realization, is that I never really did the high fidelity prototypes, like you talked about, because for me, I spent so much time doing that, that I could probably design in the browser quicker and get a prototype that way. Have you, and I’m glad you mentioned Sketch, because I think also too the tools have radically changed and it’s time for educators to re-assess that too. But have you been paying attention to Adobe and specifically Project Comet?
Rita
Yes. I know that that’s in an early phase. They’re actually interested, they’re working with some people at Airbnb to possibly test some of those early iterations of Comet which I’m excited to see. And now Sketch has a plug-in now called Zeplin for handing off a style sheet to a developer, which is fantastic. And yeah, I think a lot of it is preference with you and the front end developer that you work with; a lot of people prefer to do in-browser with code.
Gary
The preference aside, for me it’s a matter of it was kind of almost quicker than doing a high-fidelity mock-up of what it looks like on large, medium and small formats.
So that’s where it comes to. Which one can I do quicker? So that’s why I’m really interested in what’s going to happen with Comet because that to me is a game-changer for at least education because I teach code for that exact reason, because I feel it’s slightly quicker. So if Comet can reduce that time that’s spent, I think that whole dynamic changes in that argument of should designers code.
Rita
Yeah, I think that it’s super-interesting and I’m actually trying to hone my skills a bit personally.
Gary
All right, Rita; before I let you go, just realizing what time it is, is there anything you are working on that you would like to share, or something you want to promote? Maybe a final piece of advice you’d like to give design educators that we didn’t cover?
Rita
I would just say, stay curious!