Essential UX-UI Design Tips for 2022 | SaaS District

What is the difference between, you know, UX and UI design?

Yeah, absolutely. So UX stands for user experience, and it can be broadly defined as the overall experience a user, a customer has with a product or service. So this can encompass everything from their emotional experience with the product. Also, the discipline of UX, the field of UX design is how elements, information is laid out, is arranged, the order of pages and things. That's UX.

UI—

Yeah, that's the difference between UX and UI. UI stands for user interface. Then the user interface is typically the visual treatment of an application. So this can cover everything from the font, the colors, the typography, the icons, the imagery. So, so some of that kind of overlaps with branding, you know, kind of like the brand design. So in that sense, UI is more like, you know, if, if the UX is kind of how the architect chooses to lay out things, The UI could be like the choice of paint, you know, the interior design, kind of the finishings, right? You can have this same exact home, right, built exactly the same way, the exact same UX, if you will.

Yeah.

But, um, you can have, you know, the kitchen countertops can be different, the colors can be different, right? The furnishings can be slightly different. So like the choice of paint, the choice of wood, for example, kind of in my mind is the analogy of UI.

Looks good, you know, nice UI, seems like good UX, but then it may not be, you know, right for the end user. How do you bridge that gap?

Yeah, so the relation between UI and UX and product design, the way I think of that is UI and UX describes the interface and experience design that can be largely attributed to web design in general, okay? It can be even broader than web design, like machine interfaces, anything with a screen, right? And you can get designers that might categorize themselves as UI and UX designers, but they might just focus on things like websites and landing pages, these kind of elements. And I see product design as a broader discipline, which is largely associated with problem solving in the context of of meeting a market need. So you're coming to the market with— you're observing problems, you're seeing problems, and thinking about how you might solve them, and what that product might be like, how it might come to life. And that's quite a big process that actually has quite a few more disciplines involved in it. So, I'd kind of see any good product designer, digital product designer, will have UI and UX skills, but I think they'll also have some other skills in their kind of, you know, how would you describe that, in their toolbox, right?

Mm-hmm.

And they would be around understanding how to deliver value to a user of a product. You know, what are the tasks these users need? need to perform, what's the best way to enable them to perform them, how to deliver value, whether that's saving time, reducing cost, making it easier to complete work. So I see that that's maybe the, where, you know, how the disciplines relate.

Mm-hmm.

But then you also mentioned bridging the gap when building for the end user, right?

Yeah.

And I think what you're— yeah, that's the part where you're really understanding the value that you're delivering and then shaping an experience that delivers that value. It can be hard to articulate, but I guess it's more of a functional, kind of functional design process.

Any career advice or tips for many professionals looking to develop their career and get into this area of work? Is there any software skills, hard skills, soft skills in today's world, I guess, would be different than when you first started?

Yeah, I think this is really important because there's a lot of people who started off in one career and are transitioning to UX/UI or product design. And I'm really interested in helping those people because that was me. I was a graphic designer and those people who did products saw that as completely the opposite of what they did. So I I had to teach myself a lot and kind of force my way into the UX field, I guess. So I would say practice designing. You have to— the number one thing you could do is just find projects and work on them.

Okay.

That's what I did. It was like, I'm gonna redesign this. I designed— I remember I had no idea what I was doing because I was a graphic designer, so think marketing type stuff. And I designed like 3 iPad apps that were not very good, but It was like I would show someone who worked in UX and they would offer me advice and say, like, take a look at this, take a look at that. So something I talked about in the beginning is this idea of copy to learn. And I teach anyone who wants to be an interface designer or a product designer to open up software that you've never used and just start trying to figure it out and start copying existing software, because that's the best way to really understand how the tool works, how to make it work for yourself. We all use these design tools differently, so Find your way of working and then also really understand how designs are built. Once you start copying, you're like, oh, I didn't notice that there's like 3 shades of gray on this page to sort of show the hierarchy of content. You know, the lighter the gray, I don't notice it as much. That's intentional. So sort of build that, you know, knowledge slowly, I think, through that process.

Is there any things that you look for for finding that best person? Like, do you ask them these specific technical features or experiences or You know, maybe from your side, how do you hire them who, who, A, you know, you can look at their portfolio and say, hey, they have stunning design, but maybe they don't have that, you know, like the empathetic, you know, customer experience, which is, you know, part of the UX, you'd say?

Yeah. Well, having good hard skills of being able to design a— produce a good design, I think is table stakes. And you can judge that via portfolio pretty easily. I think really is understanding what, you know, their process, their design process, asking questions like, okay, what problem did you solve here? What was the problem that this design was going to solve? How did you arrive at this solution? Did they— what were the results that they achieved? Right. Like, design is not just about pretty pixels, right? You know, if I added something, you know, did that improve or reduce kind of the goal I was trying to achieve, right? Like, like by adding that, that guest checkout, you know, Jared Spool was able to add a lot of enterprise value to that e-commerce. So really, it's, you know, what, what are you trying to solve with this, with this design? And did that design achieve its goal? So design is in this context, again, it's not kind of art where, where, yeah, some of the visuals is very subjective. This looks pretty, this is not. But I think really understanding what stuff they were trying to solve and how they went about it. Maybe looking at their design files and kind of like their UX with you, right? What is their product like? What are their communication skills? Especially in this remote world, I think communication is much more important than just being able to produce great designs. So I would say communication skills, their output, meaning You know, I actually helped some startups recruit a designer and they showed me, you know, the work of this one designer and they didn't even bother to change the layer names. So like everything was disorganized, everything was like layer 1, layer 2, layer 3. So if I had to look for something, it'd be impossible, right? So if I was— imagine if I was a developer being handed off this file, it'd be a nightmare to work with. So that speaks to the the maturity. And then in terms of hiring, I think you have to be aware of whether— first you have to determine what your needs are. If they're specific, maybe a freelancer would do. If they're large, where you need a lot of services in terms of design, it may not be just one person. Are you looking to move fast? So depending on your stage of the company, a freelancer might be best, and at another stage, a design agency might be best. You know, how do you pick a design agency? You know, what's the best design agency? Well, there's— when people ask for that, say stuff like that, it's like, well, there's no best because it's highly contextual. I think there's domain expertise is very important. For example, like Impeccable works a lot with kind of enterprise B2B. You know, we've had clients, uh, like, uh, in, in networking and wireless, so we know kind of that domain very well. We've created dashboards around that, SaaS products around that. Um, so, uh, you know, in terms of like, if, uh, if a design agency is focused on consumer applications, like, like, you know, apps similar to Instagram or dating apps, but you have a very enterprise B2B product, they might not be the best for you, even though they might be They've won some design awards, but they lack some of the context.

Where do you think, uh, kind of going forward into the near future, you know, looking forward, what do you think will be some big areas of changes in UX design? And, you know, I don't know if it's AI or maybe what are some more important skills that designers should be learning now to be ready for the future?

Yeah. Now, um, design systems are like the hot topic in product design. And I think they'll become more sophisticated, but learning how to use them. So I work with a lot of designers and see a variety of methods of working. We exclusively use Figma now, and Figma's pretty hot as well in the industry. So most designers are using Figma or thinking about moving over to it. And just getting really good with using components and design systems, systems that also have layouts that are defined. So when you start moving your Figma components around, elements within a layout, it rearranges and adjusts. So you kind of have this fluid design system. So we're starting to do that, and it really helps to keep things consistent, and it definitely helps when you're handing off to developers. Um, and I, I just think design systems will get more and more sophisticated. They'll potentially have more, um, code behind them, more front-end code. They might be integrated a bit more with JavaScript libraries. And I think, you know, we're seeing in the industry the gap between design and development closing a bit, right? We're seeing a lot of no-code apps.

Right.

And just from observing my Facebook group, the SaaS Founders Group, there's like no-code apps launching every day. I've seen just hundreds this year. So I think that's gonna become quite sophisticated to the point where the crossover will get wider and wider, and you'll be working with design and code a bit more integrated. But definitely, I think things that excite me or seem quite futuristic are how interface design will relate to virtual reality. As we get more kind of virtual spaces, how elements will be designed for, for those kind of experiences.

Right.

Um, branding, branded experiences too in those spaces. So that'll be interesting.

And then there's this concept which you, you, you bring up, and I think you're more known for it, which is called the content-first design. Can you speak a little bit more about that and what that is?

Yeah, sure. I'm a big proponent of this, um, from having been a designer for so long and just diving into you know, back then it was Photoshop files or Sketch files, and then coming back and having to make lots of changes because I forgot something, or after the team reviewed it, they had another section they wanted to add. So content-first design is really focusing on what you want to say before you decide on how you want to say it. So that would mean like you could do a lot of work just in Google Docs or Microsoft Word And come up with, okay, on this page I want to talk about this, and you can even have a little image next to it. But really think of everything you want to say before you decide how you want to present that visually. So the interesting thing is I've been really focused on this, I guess, outwardly with webinars and stuff, but it's an interesting way because you— we all have run into the situation where we're working on a project, it gets pretty far along, and then Someone says, like, oh, we need to add something, or we missed something, or we weren't really talking with the marketing team or whoever's writing the content that's going to go on our product.

Right.

And then they have changes, and that changes affect the design. The design's halfway built so that it costs a lot of money. So if you do it this way, you're involving a lot of people before you even start sketching an idea or visualizing it in any way.

Okay. So if I'm a SaaS company, I'm looking to use this approach. Can you give an example? Just walk us through how this would work.

Yeah, sure. So there's a few different ways. So if you're a SaaS company and maybe your product is something like Zoom, you don't really have a lot of content to write for the actual product like we're staring at now. There's some UX copy that's important but not necessary. But the things that you can really talk through would be the marketing site that you need to sell the product. The onboarding experience is really important. So if you have a new product, you can work with a writer talking about how you want them to be introduced and what's important for them to know. All of those things help a new person using it become more engaged and understand how to use the product better. So you're actually focusing on— it's interesting, you're focusing on the UX of the product before you're even visualizing it. Because you're thinking about it, you're talking about it, and you're writing about it.

And do you have any tips on how we can get or encourage people on the team to actually participate in the design process? Because I feel like that's just like, hey, designer, figure it out, and then I'll look at it after. If I like it, I may ask you to make some changes after. But at those initial stages, I think it's a little harder, right?

Yeah, that's actually one of the biggest challenges that I think a lot of designers run into. A big part of design, I feel like, especially as you get to be like a more senior designer, is the education part of like what we actually do as a designer. I wasn't expecting that, I guess, when I became more of like a design manager or director, but you need to explain what the actual role of a designer is so that then you can invite them to participate because there's the visual aspect, which we are known for, but then there's the user aspect, which I think people tend to overlook. I would say outside of design, I feel like product people get this a little bit, but the design is not focused on the customer and acquisition and all that. It's focused on how the user feels when they're using it, how simple it is to use, what could get in their way from accomplishing what you want them to do.

Mm-hmm.

It's really, really focused on empathy, on making things easy. And I think what's interesting is, and you need to explain this as a design leader, is that designers have a different lens into products because they understand how they're constructed. So we understand what makes a good form or why you need a primary action button, only one primary button on the page.

Mm-hmm.

Because it confuses the user if you change these things. We know a lot of these principles of design, like visual design, but we also understand how they work with a user, how they work in the user's mind. And that's stuff that you need to kind of educate non-designers and non-design leaders at your company. It's kind of difficult, though.

Thank you all for listening in to this episode and joining SaaS District today. Don't forget to leave a review and subscribe. Subscribe for future episodes where we interview top leaders in the SaaS industry. If you're a SaaS company looking to grow and unlock the true value of your business, get in touch with us at horizoncapital.com, and myself or one of our consultants will provide a free assessment to help you get there and hit your goals. If you have any feedback or suggestions for this podcast, please DM us on Instagram or LinkedIn @HorizonCapital and help us improve our content for you all. Thanks again, and hope to see you on the next one.