What is UI/UX Design? ft. Tracey Krusi & Kacey Diehl

VO: Let's get geared up for startup success. Join Josh's. He interviews knowledgeable guests from all corners of the entrepreneurial world and gets the answers to the questions you've been asking. Get ready to learn something new on this episode of From Idea To Done.

Josh: Hey everyone on this episode, we're gonna be talking wireframing today with us. Here are two of our wonderful designers. Ladies, would you like to introduce yourselves?

Tracey: Hey. Hi Josh.

Kacey: Hi, I'm Kacey. I am a UI UX designer here at Codelation. I am a recent graduate. I graduated in 2020, so I got my start in the UI UX world back in college. I've been doing graphic design since I was in high school, but I really met this professor that I really liked in college and he was like, Hey, you should check out the web cuz that's the future. And I was like, Oh. I ended up really actually liking it and got into coding and here I am, loving it. .

Tracey: Yeah, and I'm Tracey. I like to say that I had a previous life, so my background is actually in medical technology and I wanted to work, but it wasn't a thing back then. And so I went back to college to do a hobby, which I was always interested in, which was graphic design. I ended up graduating that and worked graphic design for over 20 years. And when I got to the level of where I thought I was topping out and couldn't go any further, I wanted to learn more about the web and I wanted to learn html, css, all that. I jumped into the world of U I UX and did a lot of really self-taught stuff at first and then worked with great people that helped me out. Developers, BAs and QAs and you learn the ropes and here we are.

Josh: So we talked a little bit about ui ux and that's explain to the listeners what UI UX stands for and the differences between them.

Kacey: Ui UX is basically user interface and user experience. So I like to think of user interface as what a client sees. When you open up a webpage or you open up a app, it's exactly what they see, what the colors are, what the fonts are, what the layout on the page is. The user experience to me is everything that goes on with that person interacting with the app or with interacting with the webpage. What are they looking for? Is it difficult to find? Is it easy for them to navigate? What do they wanna do on the page? All the experience that they have. Anything to add?
Yeah, basically your functionality of your app is your user experience too. How you're gonna get from one place to the next how your buttons work, the behaviors you're expecting. That's all kind of wrapped up in there too. And that's what we desig for, what we think about

Josh: . So kind of the customer journey and you might have multiple different personas within a web app of navigating different ways and how do they get from point A to point B?

Tracey: Absolutely. And it's funny you say customer journey because that's actually one part of what we think about when we're planning the design. It's great if it looks good, but ultimately we want it to function the best way it can. So a lot of times we'll start out with what is that customer's journey and how do they make their way through the whole thing?

Kacey: Yeah. What functionality is gonna make that person's life easier regardless of what it looks like, We have to nail down that user experience first. In order for people to wanna use your app or webpage, you gotta make them want to .

Josh: So we've gotta grasp on what user interface and user experience are kinda the flow and the look and the feel. Talk a little bit about the concept of wire framing and how do you look at wireframing. We use some terms here at ation of low fidelity, high fidelity. If I'm an entrepreneur starting out and I'm trying to figure out what it is I should be putting on the page help me understand the importance of wireframing and where should I be starting that low or the high fidelity. Lot of questions in there. So.

Tracey: Yeah

Kacey: I guess I would say where I start with wireframing. I'm gonna start low-fidelity. Low fidelity would be something like you're sketching on your notebook or on a piece of paper somewhere. Just something where you're laying out a page and you're trying to figure out where your content is gonna be on the page. That's gonna be your more low-fidelity prototyping. Even before you do that though, you're gonna wanna have that content basically what you want on the page already in your mind. So you're gonna have to do some ideating before that. Get down to your goals of what is your page about or your app about what are the necessary functions and what do those entail? And then from there you can start sketching out what the webpage looks like, where your navigation's gonna be, stuff like that. Low-fidelity's good if you're not really sure which direction you wanna go yet, but you kind of have an idea in mind.
It gives you room to just try out a bunch of different ideas and see which one works the best. And that's the ultimate goal of user experiences, finding that flow that works the best.

Tracey: I like to think of low-fidelity as kind of they say back of the napkin kind of thing. They draw out a little sketch. I like to do it on a whiteboard so you can wipe and erase, wiping, erase, wiping, erase. Everybody does it a little differently. There's no right way to do it. low fidelity, like she said, helps to get a ton of ideas out there, what might work, not work because it's always not one right answer.

Kacey: Yeah. User experience or UI and UX design is an iterative design process is what we like to call it. So you're gonna have to find out what doesn't work first until you find out the solution that works the right way.
You're never gonna find out the right solution the first try.

Tracey: No, you never get it right on the first try.

Kacey: No, definitely, definitely not.

Tracey: Oh no. I always say fail fast, Fail up.

Kacey: Yep.

Tracey: Do it fast and get it going. The more you fail quickly, the more you can get to that right space where you wanna be.

Kacey: And those failures are great for other ideas for other clients that come around. You're like, Oh, I remember I tried this layout or I tried this idea on something else that didn't work, but I think it could work here. That's why I'm a firm believer in a notebook. I like to have 'em in pencil or pen and so I can look back on my ideas. I'm like, gotta leave that stuff out there. Leave your ideas out there. It might be useful later. . And then high fidelity.

Tracey: High-fidelity wireframes make it more alive. I'll say. You can add color, you can add personality, you can add texture and feeling. And this way let's say a client comes in and they say, I have a great idea for this app. I kind of want it to do these things. A, B, C, and D. I'm not quite sure how that would look. Or they bring in a similar one that say, Hey, these guys do it great, but I wanna make it a little different. A lot of times the client doesn't know until they see it . And so even if we would do some low-fidelity sketches or ideation sessions with them, it still doesn't hammer it home until they see it high-fidelity. And that really helps to, they're either right away or nope or can we tweak this or can we change that?
And that just helps them see what it's gonna look like in real life.

Kacey: Yeah, most of the time I'm not showing any of my clients my low-fidelity sketches or anything. The high-fidelity is where it actually looks like the internet or looks like the app. And you can actually use Adobe XD or Figma or any of those programs to make it function like that as well. So it's kind of fun. You can hand off links to clients or little prototypes is what they're called , where you actually click through and it's more of an exciting come-to-life moment for the client, which I think really brings the whole wraps, the whole circle around. So if you're looking to do high, so when I would say after you have an idea and what you want in functionality, then you can go after your high-fidelity prototypes and start getting those ideas out there. Not functionality.

Josh: I like using the concept of small whiteboard, big marker for the low-fidelity of, we're gonna have a button here, I'm gonna click on it, it's gonna go over here. I don't care what color it is, I don't care what the words are. We're gonna some text here. And I've even worked with entrepreneurs of don't write the text yet. Write two bullet points of what you want the text to say,

Kacey: Right.

Josh: Because so many times they'll go to a copywriter and get stuff written and it's like, well that doesn't fit the design, so what are we gonna strip out? Or the design first it's like how do we write to it ? And it's can get circular sometimes when you're trying to do all the stuff at once.

Tracey: And I think at the beginning too, it's important to remember that they don't have to get wrapped up in the details , because that's great about the process and the process that we use at Codelation because you can change it at any point. Back when I was a graphic designer I did print design and you had to double check, triple check, quadruple check that because once it's printed, it's done. Y'know? where the web is great because if you find an typo or you find a mistake or something's not working quite right, you can fix that. And a lot of times it's can be an easy fix and it's done quickly. Sometimes if it's changing functionality it might take a little longer. But that's great about,

Kacey: Yeah the web, there's always an escape route. It may not be the easiest, but you can definitely escape there's a way out if you need to go back.

Tracey: Yep.

Josh: I always hated that my graphic design days of the department would spend $20,000 on printable things. Everyone's proofread it and as soon as they get it, it's like, Oh, there's a typo.

Kacey: Yeah

Josh: this, it's like how does that translate so poorly from digital to print. But

Tracey: Yes, I like to play a game of trying to find typos in print pieces.

Josh: Talk a little bit about the wireframing process and how collation approaches the wireframing process. Cause I know a lot of entrepreneurs are, gosh, that that's expensive to bring in the entire team around it. And to design first I just wanna go hire a developer, kinda talk about our process to that early-stage entrepreneur that's trying to make those decisions of should I just hire a developer and tell the developer what to do versus the wireframing and design process that we do.

Tracey: So I think one of the important things to think about is you can just hire a developer but a developer is schooled and excellent at what they do, which is a

Kacey: developing

Tracey: writing code,

Kacey: and coding

Tracey: writing code. And you can tell them and it'll come out and it might function, but what's it gonna look like where the wireframing part will, like I said, it'll give it that personality, it'll give it a life, it'll give it the color, the texture, the tone. How does a person feel when they look at that app or they look at that webpage? Do you wanna have an emotional reaction when they get it? And that's what the wireframing does when you get a designer involved. I've worked with both ways with just people that did just get coded and get it out there. And it ultimately will circle back because the client will say, Well I don't like how this looks and it doesn't look professional.
And I'm not saying that not all coders can't design, but in general it helps to get the wireframing done ahead of time. Cuz then the coders don't have to go back and do it over again. So I think it's helpful. Number one, the client gets to see what they're expecting and it's gonna look like that when it's done. And then it's helpful for the developer too because they know what colors we're gonna use, what fonts we're gonna use, where things go on the page. They're not guessing at, oh, where do they want this or how should this be? So I think overall it's helpful to get the designer and the wireframing involved early on in the process.

Kacey: Yeah, I used to say this all the time when I freelanced good design is good business for sure. I mean, you're gonna wanna have that team around you that can push your project forward.
Number one, you got your project manager, not just your developer, you got your project manager that pushes it forward. You have your ui ux designer that's gonna be there to make sure that your app is not only looking beautiful but also functioning nice too, so that you get good user feedback. Cause God forbid you put a app out there that you just coded, got out there and somebody's like, Oh, I don't even wanna use this app. I don't like the experience. It may function, but it may not be like really, I don't know, fun to use. Fun to use. Or easy. Or easy to use. So I mean, especially a team we have at Codelation, we're gonna have all of those bases covered for you so that when you come out of that first release, that mvp, it's going to function. It's gonna look pretty good the way you want it to. I mean, I would say we do some really good work and then also your users are gonna have a good experience as well. And it's also gonna function correctly too, because we have QA people in the background that are checking on our code,

Tracey: BA people on the front end that are making sure all the requirements are correct.

Kacey: Yep, yep. So I don't know if you're starting out your business, I would definitely invest in yourself and in the design and feel and experience of your product for sure.

Josh: It's almost like building the house without floor plans.

Kacey: . Exactly. Yeah, exactly.

Josh: You you're gonna put the toilet in the kitchen and no one's gonna want to use it.

Tracey: It's functional. But yeah, , it works. But

Kacey: you can put the toilet in the kitchen, but nobody's gonna wanna make food in there. that's for sure. .

Josh: Well, the development process is so open for interpretation too. And if the developer doesn't know the requirements around it, okay, let's put a search function in it. . Yep. Is it auto suggest automatically drop down? Is it a list of stuff? What are we pulling it from?

Kacey: Is it a dynamic search? Does it only do? Yeah, yeah. Just like, yeah, those are the things that user experience and user interface and the BA think about. So all of those, the user UI and UX designer, excuse me, and the business analysts work very closely together to make sure that that MVP and your product have all of those requirements and all that functionality that you know need so that you're not coming back later, spending more money fixing things that you could have gotten the first time around.

Tracey: Yeah, I agree.

Josh: So if Josh has two friends, Kacey and Tracey and Josh is trying to start up something new and I come to you and say, You know what? I wanna learn how to do this wireframing myself. I don't know what features to put in there. How do I start thinking about the concept of features into wireframe and what tools should I be looking at? We mentioned some high-fidelity stuff. Is there anything you'd recommend on the low-fidelity or is it just a notepad and a pen?

Tracey: There's a lot of high-fidelity tools out there at our shop. We use Adobe XD. There's Figma, there's Sketch. I mean some people even use Illustrator. There's a lot of different, the tool to me doesn't really matter because you're gonna get the final product out no matter what tool you use. So pick a tool, get really good at using it. As far as low-fidelity, I would say do whatever you're comfortable with. She likes to use a notebook. I like to do low-fidelity right on the computer. I'll just draw out some plain boxes. It's all black and white. It's very basic. And as far as looking for features and functionality, there are a ton of great websites out there that you can go to look for ideas. I check out Dribble a lot.

Kacey: Dribbles a really good one.

Tracey: I check out the Adobe I can't remember the name. The Adobe Creative Space. I can't remember the name of it exactly, but it's got a great stuff out there. Mean even if you just Google , what kind of business you're doing. If you're doing this app to, I don't know, find something, you Google this.

Kacey: Yeah. I often find myself Googling a lot of things just in this bus-. In our business in general in our industry. Google's a powerful machine. Why not? You might as well . I look up a lot of books online. There's a really good one. How to Get a UX Job by Lisa Murnan. If you guys wanna check that out,

Tracey: I read that.

Kacey: It gives you,

Tracey: it was really good.

Kacey: It gives you all the basics of starting to prototype and wireframe and all that stuff. Ideating from the beginning, all that.

Tracey: There's also a lot of back when I was teaching myself, I seriously look for every free kind of class there is online, there's a lot of places that will teach certificates or whatever, but they always give these little freebie classes.
At the beginning I never paid for any classes and I just did every freebie classes that I can find. There's also Udemy and .

Kacey: I think Code Academy has a few things on there.

Tracey: Code Academy has lots of free stuff. , LinkedIn has some stuff. There's a ton of resources.

Kacey: You can find classes on LinkedIn, yeah.

Tracey: And then as far as ideas, I think none of no designer has every idea. I mean, you have to get inspiration from somewhere. You'll see a cool design somewhere or you go out looking at other websites. And as far as an entrepreneur, I always say as a user, when I interact with a webpage or an app, I know immediately if I like it or not because if it frustrates me, I'm not gonna use it. If it's easy to use and it's cool to look at, I'm like, Hey, that's great.
So you know innately, even if you're new to it, what works and what doesn't , because if it frustrates you up front, yeah, it's gonna frustrate pretty much everybody.

Kacey: And a lot of the times a lot of UX designers at UI and UX designers do this. You go and look at what other people have done on the internet. You know, go look at, if you're trying to make something similar to Netflix or you're making something similar to a different app or webpage you've seen, if it's not broke, don't fix it. People are going to expect those behaviors. Maybe not the look exactly, but functionality and features, people will expect something similar to those cuz people already use it. So I think about that a lot. , what is already out there on the web. Cuz you don't wanna have to teach your users much. You want them to be able to just brainlessly, go through your app easily , and you want them to seamlessly go through the journey.

Tracey: Yeah, I like the saying too, we don't wanna reinvent the wheel because if there's something out there that functions that people are used to, just as an example, typically when you look at a webpage the logo is in the upper left hand corner and the login is usually in the upper right hand corner. There's usually always a footer with some basic information. I mean, why would you change that? Because that's what people are used to.

Kacey: People are used to it. People are gonna expect that. So when they go to your webpage and they see that they're gonna be like, Oh, this is easy. I know how to, I've done this before. So yeah, that would be my advice.

Tracey: Did we answer the questions?

Kacey: I dunno, I think we kind of just went off there on a tangent but.

Josh: No, all good. I find myself daisy chaining four or five questions together. So if I'm coming in to both of you and is it helpful for me to go on a resource like Dribble and saying, you know what, I like this element, or I like this component, or I like this color scheme.

Tracey: Absolutely.

Kacey: Yeah, definitely.

Tracey: I always like to say I don't wanna guess at what you want. I mean, you could say if you have free rain go, that's fine. But if they have a good idea of, yeah, I really don't want purple on here, or these are kind of the colors or the mood, I'm looking for , this is kind of the mood or the feeling I'm going for. That's super helpful.

Kacey: Send me all your screenshots, send me whatever inspiration you've found cuz that will help me. Will help all of us.

Tracey: Absolutely.

Kacey: I wanna make your vision come true and yeah, I don't wanna have to reiterate, I don't wanna guess. If you already have an idea in mind. Yeah, yeah, please go look at stuff .

Tracey: And on that point I like to say too, when you're talking about design as a client, don't ever be afraid to say, Oh, I don't care for that, or I don't like that.

Kacey: Yeah, please tell me.

Tracey: As designers, we have super thick skin. We've done this for a while and nothing's gonna be like, let's put it this way, we don't, don't take things personal because we know we're just working for the client. We're working for you. We wanna make it what you like and what you want.

Kacey: I don't care if you call my baby ugly, it's OK , it'll be ok. I'm not gonna get offended. I just wanna make the client happy. that's what I'm saying.

Josh: I think that might be a Midwestern thing too, of people don't wanna upset someone else, so,

Tracey: Right. Yeah. They're afraid to say if they don't like something.

Kacey: North Dakota. Nice. Right? Yeah, exactly. .

Josh: So my takeaways from this is figure out what features I need to have in there. And that's where parts of our process come in from the business analyst and other roles know what I want it to look like. So start doing some research on Dribble and across the internet or other apps that I like the experience or the look and feel of, Get it in front of a designer. Then I'm gonna know what the end product's gonna look like versus just taking it directly to a developer to where it's like, Oh, that's not, Why is it? Is the toilet in the kitchen? This makes no sense to me

Kacey: . Yeah.

Josh: And then just rinse and repeat

Kacey: . Yep, exactly. Same process over and over until you get it close to right. And even then you're gonna have version two, version three, version four.

Tracey: And that's one thing I think people don't realize that things on the web change all the time,

Kacey: every day

Tracey: all the time. You might go to a website that you think is exactly, Oh, it's been the same for the last three years. Nope. I bet they're things, they're changing things all the time. Changing functionality or tweaking things,

Kacey: tweaking little front-end things, little backend things. Yeah.

Tracey: Yeah. That's great about it.

Kacey: That's what I like like the most about ui, UX and projects is because they're just, they're long and you get to commit to something that's gonna be for there for a while and to,

Tracey: It's not like the print world where you read it one day and there's a bunch of typos, but guess what? It's in the garbage can the next day.

Kacey: Yeah, exactly. . Yeah, it's there forever on the web.

Josh: Absolutely. Well, Tracy Casey, thank you so much for coming on today. I know our listeners learned a lot. I learned a lot. So thank you again.

Tracey: You're very welcome. I enjoyed it. Thanks.

Kacey: It was super fun.

Tracey: Yep.

VO: Thanks so much for tuning in to this episode of From Idea to Done. If you're enjoying the show, please feel free to rate, subscribe, and leave a review wherever you listen to your podcasts. We really appreciate it and we'll catch you in the next episode.