What is UI/UX Design? ft. Tracey Krusi & Kacey Diehl
Things on the internet change every day, is your website or app keeping up with design trends and technology developments? We welcomed Tracey and Kacey, Codelation’s resident design experts, on for this episode about UI and UX design. They chat about everything that goes into initial web and app design, explain the difference between low fidelity and high fidelity design, and more.
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
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.
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.
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.
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.
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 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
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,
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
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
Kacey: Yeah the web, there's always an escape route. It may not be the easiest, but you can definitely escape
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.
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
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
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.
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,
Kacey: you can put the toilet in the kitchen, but nobody's gonna wanna make food in there.
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.
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
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
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.
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
So you know innately, even if you're new to it, what works and what doesn't
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.
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
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
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
Kacey: Send me all your screenshots, send me whatever inspiration you've found cuz that will help me. Will help all of us.
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
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
Josh: And then just rinse and repeat
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.
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.
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.
Sign up to receive email updates
Enter your name and email address below and I'll send you periodic updates about the podcast.
Capturing Your Brand Message With Video ft. Joe Tjosvold & Emma McIntyre
Listen to a new episode as we talk to industry movers and shakers about big ideas
Co-founder of Neil Patel Digital. New York Times bestselling author, top 100 entrepreneur under 30 by Obama, and top 10 marketer by Forbes.
Coach to high-performing Digital Agency Owners. Grown two marketing agencies from nothing to 8 figures.
Helping App Business Owners Reach Millions Of Downloads & Sales Through ROI Driven Marketing Campaigns.
About the Show
Erick and Josh talk about big ideas, companies that are winning and those that aren’t, and current events in the crazy world of software startups.
Director of People
and Nerd Culture
Sign up below to recieve bi-weekly updates and insights from our office.