[111] How to Audit Your Design, UI & UX w/ Jane Portman
Hello, everybody. Welcome back to another episode of Bootstrap Web. This is number 110. And as always, I'm Jordan.
Brian Casel:And I'm Brian. And, you know, today, we we are excited to invite a guest on today. We've got Jane Portman, designer extraordinaire, UI UX consultant, and and well, I don't know. I don't think that she's doing consulting these days. She's mostly teaching and writing about this stuff, UI and UX, specifically for SaaS and software companies and founders.
Brian Casel:That's been Jane's thing for a while and she has a new book out called The UI Audit, which I I very much recommend you guys check this out, especially founders who don't come from a design background. It really helps you kinda get get an idea how to think about this stuff, how to work with designers, how to make business decisions with with design. And this is the kinda these are the kinds of things that we're gonna, you know, really do a deep dive into on today's episode. So, Jane, welcome.
Speaker 3:I'm thrilled to be here. Hello, guys.
Brian Casel:Good to have you. You know, I I think design and and user experience is one of those things that I think to to some folks, it it it's kind of an afterthought when really it's so important and it's way more important today than it used to be. I think it was okay for it to be an afterthought a few years back. And now today in 2016, it's so important because it gives not only your marketing site and your brand the credibility, but the user experience is so crucial, especially in the onboarding stage because if anybody just gets confused once, they're gone and they're probably not coming back. And so this stuff is so important.
Speaker 3:I can hear a designer talking about it because not all authors think like that.
Jordan Gal:Yeah. I don't think like that. Right?
Speaker 3:I've grown to to accept any kind of opinion on the topic. So and actually, I think that you don't need to have like perfect UI, UX good enough and not ugly, as they say is totally doing the thing. But you really need to make sure that the UX part really is nailed down well and the user just gets the idea how the product works. However, there is like a ton of, examples online while even products with poor UX did well just because there was a very nice product market fit and a very big pain that the customers were eager to solve, scrambling for any kind of bad UX.
Jordan Gal:Yeah, that's funny you mentioned that, right? So CardHook has two products and one, card abandonment one that's been around for a while, we we did a lot of work on the onboarding and on on the UI UX in general and we saw how much it improved things and and now with our new product, it's brand new so it's super fugly and there's no onboarding and people just barrel right through it anyway because because they want the results.
Brian Casel:It solves such a important pain point. Right?
Jordan Gal:Right. So it's it's funny to see those two and like where design fits into the the priority scale in each situation. If you have something that users can easily go somewhere else and get a competing product because they got frustrated with you, you got to get it right. But if if you have something that's that's super valuable that people really want, a lot of desire, it's it it not that it's not important, it just makes less of a difference.
Brian Casel:Yeah. That that's that's right on. I think there is that balance between like how competitive is your space. You know, if it's very competitive, then I think you do need to take UI and UX very seriously because a lot of times that's gonna be the deciding factor. Like how easy is this for me to use?
Brian Casel:How easy is it for my team to use? How fast do I understand it? You know? And then getting onboarded, so
Speaker 3:My favorite example here is Calendly, which is a scheduling app, and there is a ton of those, but their only competitive advantage was just great design and transparent user experience. And I had an interview with their founder, Tope Awatonna, and he reviewed, I think, 30 other legacy apps before designing his one. And it definitely means that it's a very crowded space. So that was an example.
Brian Casel:That's a perfect example. I before I and I, like, live and die by Calendly these days. But before I started using that, I was using Schedule once for a while and I was trying out Time Trade for a little while, and great products, but the clunkiness just kills me. And and maybe I'm a little bit more picky than most, but
Speaker 3:I know. And we're kind of design conscious more about the products that are facing our clients as opposed to products that are just merely facing ourselves. And Calendly is facing our clients, like, every day. So it needs to be perfectly clean and legit in terms of trust, you know, for everyone.
Jordan Gal:Yeah. That's such an interesting dilemma. When you have an app that only faces your user, you just have to go about it a certain way. But the second you're sending out an invoice, you're sending out an email, there's a dashboard, anything that your customer's customer sees, you have to treat it completely differently.
Speaker 3:Absolutely. One of my favorite stories to prove another one to prove the value of design, I had like a call for stories among my mailing list and one story was brought in. There was a designer who designed a college application process, and the value at stake was like multi thousand dollar education program. And the competitor student churned and quit the competitor and returned to this school just because they couldn't find a way to upload, like, a diploma scan file or something like that. And they tried and they failed and they came to to to the one that belonged to my reader.
Speaker 3:Wow. This is a really great story.
Brian Casel:Yeah. Like actually changed their entire future, basically. The question that I have for you right now is what if the founder or the business is outsourcing design, hiring a designer, hiring a freelancer, or hiring an agency to to take care of the of the design? Like, is that the kind of thing that that the founding team can just be hands off with and and just let somebody else handle it? Like, are the are the
Brennan Dunn:ins and outs of that?
Speaker 3:I don't have, like, a silver bullet solution to that. But I think if it's a bootstrapped founder, then definitely stage one is maybe hiring someone to get give a hand in terms of UX and just use a theme when it comes to visual design because it saves so much time, energy, and, you know, sweat just using someone else's good styling as opposed to inventing everything from scratch. So that would probably be, like, the cheapest, but at the same time viable solution for a bootstrapped founder. And I think the whole big, you know, sign of today's design industry is that we have so many talents and so many people with a various skill set ranging from, you know, UX research, wireframing, visual design, coding it all up in different kinds of media. And really, is no single designer with a similar skill set.
Speaker 3:So, probably it's about finding the right person who would kind of complement your own skills. If you're good at front end, You can find someone with good UX expertise and so so on and so forth. The combinations are endless possibilities are too.
Brian Casel:You know, that's a good point about using off the shelf templates. I've I've seen bootstrappers who maybe they're they're developers by trade. And for whatever reason, they they didn't consider or they didn't or they're turned off by the idea of buying an off the shelf template. And instead, they they go ahead and build their own marketing site or their own UI for their app. And that's the kind of thing that that you just need to, you know, work on the low hanging fruit and get use a basic off the shelf UI just to get something looking good because it's it's kind of to the detriment of of your app.
Brian Casel:I've I've seen this happen so many times where you you could just get so much further using an off the shelf template. Of course, at a certain point, you do need a more hands on approach, more thoughtful, well well thought out, step by step approach to design. And I guess that's where it comes to hiring a professional designer. So in terms of working with a professional designer, what does the founder need to be thinking about in terms of the design decisions that go into that?
Speaker 3:Alright. So, it comes to hiring decisions in design, it's never safe to go with a cheap option. So, you're always better off hiring someone who knows what exactly they're doing, because it might take like a couple days of a professional's time to, you know, hammer all the nails and just do it, while you'll take someone from Upwork as it is these days and try to manage them and micromanage them. And you'll spend like a month of your own time and have a nosy result. And by the way, the budget is gonna be the same.
Speaker 3:So
Brian Casel:Right. Even if they're they have a lower hourly rate, you're gonna spend way more hours working with them.
Speaker 3:Absolutely. It's gonna be them endlessly iterating. It's gonna be yourself managing them. It's gonna be a huge waste of energy as a result. And I've seen that way too many times.
Speaker 3:I think it applies to all kinds of professions. But maybe it's not so obvious when you're hiring copywriters, for example, as you are, because the, you know, the kind of borders are a little bit more vague between professional and nonprofessional and, you know, just common sense. But in design, it's pretty obvious when someone's been doing that for a while and someone's who's an amateur.
Brian Casel:So how how would someone without a design background or experience or even somebody who has not hired designers in the past, how evaluate do designers? How do you figure out who's good and who's bad? And, you know, just from my experience, I know that there are so many people who call themselves designers and they're not. They maybe they themselves are using off the shelf templates and and things like that. So how do you how do you like figure that out?
Speaker 3:I wish I had a big, like, recipe for you, but really referrals are a very good way to hire reliable people. If the person has, like, a website with long form sales copy, which talks about your business, that means that they have an insight in your universe and are much more self aware than just someone who's merely showing like a few portfolio screenshots. I mean, that's a sign that the person knows something about the business side of things. And also, portfolio is, of course, important, but you need to ask the person what was their role in that project, because there can be a huge variety of situations when there was like a strong creative director, or, you know, the role was not so important and someone else did the job and they're just signing off fancy screenshots. So that's more about the warning sign, not the big recipe here.
Brian Casel:That's a really good point. I come from a background of working in couple of agencies years ago. And I mean I did this certainly when I was a freelance web designer. Took I used some of the big name national brands in my portfolio because I was involved in working on those websites. You know, and then later on I was hiring designers and talking to them and seeing how even though they are talented designers, you know, the fact that they worked on like Visa or Coke or Pepsi or, you know, if they have these massive brands in their portfolio and they're freelance and they're charging 30 or $40 an hour, you know, that's not the designer designing the Pepsi website.
Brian Casel:That's probably the designer working at an agency with a 100 other designers and they, you know, worked on some small piece of that under the direction of a creative director.
Speaker 3:Exactly. And even if they worked on that personally, I mean, I've been that creative director for a couple years in a big agency, and I know how tight you can, you know, guide someone into a certain design path, and they would never be able to undertake that path of their own While, you know, while being left one on one with their client, they're suddenly all of a sudden, you know, swimming without help and achieving no result after all. That's really disappointing. So, guess recipe number one is trial and error. If you try to do like a smaller project with them and then maybe you will hit the mark with someone.
Brian Casel:Yeah. I, you know, I tend to look for folks who who've done specific work that's on on similar projects and similar and working with similar companies. You know, if you're if you're a SaaS app, go for someone, I mean, like yourself, Jane, who you you've kind of specialized in working with SaaS startups. That's a good sign. Rather than looking for someone who maybe has done a few brochure websites for local businesses, they're not gonna have the same experience and set of decisions, you know, design decisions around what will make for a good website or application for for a b to b SaaS business.
Speaker 3:Absolutely. By the way, I am taking on consulting work these I've just returned from the break. That's right. You mentioned that correctly.
Brian Casel:Okay. Very cool.
Speaker 3:And I have, like, a few interesting projects under the belt. I'm really excited about making things happen, like, hands on. So that's exciting too. I had, like, a burnout last year, so I spent some time off working on the book.
Brian Casel:Alright. So you listeners out there need to hire Jane while she's still available because she goes in and out of of the consulting work.
Speaker 3:Right. Right. And if you've been in consulting, you know, every time you come back, your rates kind of raise twice. Twice. You become wiser and more, you know, weathered and seasoned.
Speaker 3:Yep.
Brian Casel:You know, I I I was reading the the page for your for your new book, the UI audit, and there was a section here that really made a lot of sense. Where was it? It's your job as founder to make important design decisions because even when you splurge on a good designer, it sometimes it's not in their best interest to to make the hard decisions when it comes to your UI. You know, because they don't like like you're right here, like they they don't wanna jeopardize relationship, the the freelancer client relationship. They they kinda just wanna do a good enough job and and get paid for that project.
Brian Casel:And that's not necessarily a bad thing. I mean, that's kind of what what all parties know going into this thing. But at the end of the day, the founders also need to be aware of the key UI design decisions and redesign decisions over time. So can you talk a little bit about that? Like how do the founders kind of navigate that?
Speaker 3:Absolutely. That's, like, my favorite topic, and we really rarely discuss that. Usually, people like to hear about, like, hands on problems that I see every day, but this is, a strategic problem of client designer relationship, like founder designer relationship, because I've been that designer for years. And even though, like, as you charge more and you become more confident, you kind of become more confident about your, like, radically different decisions, decisions that differ from the founder's decisions. However, it's still, you know, the king in the kingdom is still the founder, and it's always very tough to argue with them if they have some understanding of field.
Speaker 3:Plus, founders do know the client, the potential customer, way better than the designer. And it's really, you know, arguing hard for something, it's a very risky undertaking because you first, you risk your relationship with the client. And second, risk to become and look like a fool because the founder might have been right after all. And there is no way to shed off that responsibility for our design decisions towards just the designer because they're always more loyal to hear your opinion first. Just approaching everything from high level standpoint of, you know, strategy that you have in mind, that's really necessary for the founder to do.
Jordan Gal:Yeah. And I have a question about that where it's more like a process question. So when trying to put together the right UX for a product, is it better to try to get it right from the beginning or should you kind of just throw out what you think makes sense and then learn how people use your app and how they want it to work and then make adjustments?
Speaker 3:I think it's both. Ideally, you want to do like a good beginning using your own understanding and best practices and like to apply good expert judgment for the initial version. And then iteration is, of course, very important, and research and user interviews, user, you know, testing sessions are extremely important. But if you start with something poor, if you just, you know, throw something together, as you said, just testing everything is not gonna take you anywhere because it wasn't good to begin with. So I think both are absolutely necessary in the process.
Speaker 3:So it's a combination.
Jordan Gal:So the next question that comes up is once you have something out there that users are using, how do you know if you have a problem? Is it like so obvious or should you really talk to people and see if they're having a problem and look at your numbers? Like how do you know if you should stop what you're doing and focus on redesigning the experience, the onboarding? Is it something that you should always be improving on or is it when a certain point in time that you reach, hey, the conversion rate just doesn't make sense, maybe it's the it's the UX?
Speaker 3:I have two kinds of clients. Once think that everything is kind of alright, they want to to see if anything, like, is bad, then they hire me and I kind of come in and look with my expert eye and see some problems or inconsistencies, judging by my best practices and experience. But the other side of people is those who really see the problem in their app. And the three big warning signs here, the most objective ones, as I learned for years, is the increased churn rate that it can really make sense of, low trial to paid conversions, and high support volumes. And I think high support volumes are specifically precious in terms of information because you can see what exactly, people are having problems with, what features they cannot find, for example, or what they cannot do, fail accomplishing.
Brian Casel:Yeah. That's really interesting. You know, you mentioned like churn rate that you that you can't really pinpoint where it's coming from. I mean, obviously, a lot of people rely on surveys or or exit questions, you know, why are you canceling and and things like that. And And through those, can usually uncover, okay, there's a key feature that a competitor is just beating us on or something like that.
Brian Casel:But a lot of times, you you don't have something that clear cut. And again, in in that competitive space, and, you know, it's hard to see why people are leaving. And I think even the people leaving from one app to another, they they may not be able to pinpoint themselves like, well, it's actually a a UX issue that's causing me to change. I maybe in their minds, you know, they're just thinking like, I don't know. I just like this other thing better.
Brian Casel:It's for some reason.
Speaker 3:Exactly. It's such a fluid space. You never know. And it it really causes us a lot of trouble as consultants because it's hard to really pinpoint down those stats and improvements or decreases directly related to design because they're never directly related. There is always a matter of product market fit, copy, other aspects, pricing, whatsoever.
Speaker 3:You know?
Brian Casel:Yeah. So you're so again, your, you know, your book, the UI Audit is about auditing an existing app. What are some, like, low hanging fruit that founders should be focused on or things that they can look at to just to just see, okay, maybe there are a few areas of improvements here that that I can make.
Speaker 3:Mhmm. So the key point where we get started is the founding pillar of everything is product strategy, which consists of four things. It is the audience that you're serving, the big goal that they're trying to accomplish with your app, everyday tasks that they do when they log in into your app, and the objects or items that they manage. If you just take some time and list those, like on a sheet of paper, Everything else a little bit falls in place in terms of priorities, because sometimes, it's hard for us to take decisions because we don't know where to lean towards. But now, when you're evaluating each screen of your app, you're going to have that, you know, clean strategy in mind.
Speaker 3:What exactly is the most important action that we should facilitate here, for example. And using those four pillars of strategy, we are then going over our app screens and making sure they're simple, and we are making sure that they're aligned with those, strategy points.
Brian Casel:You know, Jordan, I'm actually curious about you. Like, did you recently work with a designer on on Cardhook or or was that early on?
Jordan Gal:Yeah. I'm happy to give my ignorant non designer business guy point of view on these things. I've had to do it without any of the education so I've stumbled through a bunch of it. One thing before I forget it, one tip that someone gave me once that I try to follow is that I sign up for our product at least once a week.
Brian Casel:Oh, was a good tip I heard at microconfidence.
Jordan Gal:Right. Just signing up for it, you end up embarrassed about these things, and if you do it enough, you get embarrassed enough to actually change them. Like, oh, this is just like, you know, from something six months ago, and it's just not that relevant anymore. That just should not be on the screen. And and if you don't sign up, you'll never see that screen ever again, and you won't fix the onboarding and you won't fix the screens that happen when someone signs up and what they encounter first.
Jordan Gal:So that's a good tip for someone who's like non technical. I mean, it's good for anyone.
Speaker 3:So That's amazing. I'm gonna quote you on this. This is great.
Jordan Gal:Cool. Yeah. Just sign up for your product, and that's not a Jordan Gaul original right there. That's me copying as usual, but it's good advice.
Speaker 3:Great advice is to be using your product consistently if you if that's applicable to your business.
Pippin Williamson:But Yeah.
Speaker 3:The sign up flow idea is really gold.
Jordan Gal:What we do on our end is we have like we have we play roles. So the role that I play is Jordan is the ecommerce merchant. You are the user. And and so where I can help is to pretend like I'm the I'm the target audience. Jordan, pretend you're still running your ecommerce business, how would you want this done?
Jordan Gal:And so instead of trying to give my opinion, which ends up hurting more than helping on on the product and design, I state this is what I'm trying to do. So I'm filling out a few of those pillars of strategy, the audience, what my main goal is, what I want to see every day in the dashboard, that sort of thing. And then I let that trickle up to the product and technical guys, and then they come back with stuff and then I apply my market opinion again. I say, no, no, no, why would I want this number isn't as important as this one? I would want this on the dashboard.
Jordan Gal:Or why would I ever want to connect PayPal before I connect my payment processor? So we have like a back and forth feedback from different points of view which helps us get to the right place.
Brian Casel:You know, just thinking about like productized services, obviously I know some segment of our audience is in that boat. Obviously, I run a productized service. You know, I I think that design or really more like user experience or customer experience comes into play here. It's there there's not a whole lot of visual work. Although there's some, like, we provide reports and and things that that have been styled in a certain way and branded and and to to stay consistent and whatnot.
Brian Casel:But to go along with with Jordan's advice here about the founder experiencing the service, obviously, Audience Ops, we do content marketing for ourselves using the same systems that we do for our clients. For example, all of our clients get a weekly email from their manager that that says like, hey, here's your upcoming article in in draft. Take a look. All clients get a monthly report. You know, I get the same things for audience ops from from my team.
Brian Casel:First, because I actually wanna see them on a on a weekly basis and and stuff, but also just to kind of experience that rhythm of what it's like to work with audience ops, and and I think it's really helpful.
Speaker 3:So how does it make you feel looking at those reports? Are you satisfied with the quality now?
Brian Casel:Ups ups and downs. But, you know, I'm I'm always looking for ways to improve. Actually actually, you know, it's actually a good point because we right now this month, we're going through and kind of changing how we structure our monthly reports and also changing how we structure our year long service making the service change and improve over time the longer that you remain subscribed with Audience Ops. And so we're working through these things. And, you know, I probably wouldn't have pinpointed a lot of these changes if if we weren't tracking it for for our own results as well.
Brian Casel:So I I guess that kinda brings up a question. Like, aside from you know, when you think about design and UI and and UX, I mean, obviously so much of it is visual, but how much goes into copywriting and messaging and, you know, the the vague quote unquote branding that that people always talk about? Like, how much of that plays into the work that you do and and the stuff that you educate SaaS founders on?
Speaker 3:Alright. So writing copy is, of course, more crucial when it comes to, you know, sales page copy. And I don't do websites as a primary, you know, subject of my work. I'm focusing on web app internals. But there, language is also extremely important.
Speaker 3:And we focus a ton on nailing the language for the key, you know, objects and tasks that users are performing. And my favorite technique that I highly recommend is the version of EmiHoY Sales Safari. So, Sales Safari is where you go and explore the forums where your customers hang out for certain pains that they're experiencing, that's Sales Safari for building a product. And I recommend another type of Sales Safari for hunting down the language that the customers use to describe their knowledge domain. Because they do have their own words for the things that they manage and the things that they do.
Speaker 3:And you really want to use the same words in your app. And also, we've been kind of taught to rely on icons and pictograms that they were called a few years ago, but they don't really relate so much meaning as words do. And it's extremely important to make sure that all your text labels inside the app mean exactly what they mean, and what they what will happen after you click that. So, these kind of things called microcopy or whatsoever, or just generally, you know, app language, it's extremely important.
Brian Casel:Yeah. I like it. Whenever I'm approaching something new, whether it's, designing a new marketing site or or even designing an interface for for one of our tools or something, I tend to start with text. And whether that's copy or or just writing notes, I like, it all starts there for me. And, you know, if I'm writing if I'm doing a marketing site, for instance, I'll usually start with just a Google Doc and actually write all the copy in there with a couple headlines and the body copy.
Brian Casel:And it just looks like a text document. And then that informs what the hierarchy is supposed to be. Right? Like the headlines should pop out of the page first, and then and then you start to you know, like, it starts from the text and then into a wireframe and then usually right into the browser. If it's an if it's an interface for for a tool, I might start with a bullet list in in a notepad document or something of the the key features that each screen is supposed to have.
Brian Casel:And again, that's given me the hierarchy of this is the number one most important thing and these things are secondary and these things should be somewhere but in the background. And you know, I I think it I think it helps to just think about it in in text terms and and start to think about that that hierarchy one, two, and three. And then how is that supposed to lay out on the page so that the the user can digest it in a a in a certain sequence?
Speaker 3:Absolutely. It took me years of work to realize that, that the copy is actually more important than design, and that you need to start copy first. Because I spent like eight years working in an agency, but our agency wasn't making any, you know, our own products. We were primarily building stuff for people, so we weren't involved in the sales process. And I never got the chance to really experience the power of sales copy and conversion rate optimization and stuff like that.
Speaker 3:And only then I became consulting independently for clients that I realized that it's really critical. And when I try to apply the same things for my business as well.
Brian Casel:You know, as we start to wrap up here, just talking about the UI audit, your your book, which is you know, you guys can check that out at uibreakfast.com/audit. Jane, I mean, why don't you give us like a a brief rundown of of what the book is about? Like, why why did you decide to write this book and and what can readers expect to get out of it?
Speaker 3:Great. I decided to write this book, last year when I realized that my own time is limited and I cannot help old people in the world. So I set out to write a self sufficient, you know, do it yourself manual for founders that would really help them get like that necessary mindset to approach that big design problem that they're facing with their product. So, it's a big book of advice for founders, and it's an exercise that you kind of perform over your own existing app. And it doesn't have a single picture, and that was my own strategic decision.
Speaker 3:And it doesn't really make it boring because whenever you're reading something, you should have that your own app in mind and thinking like, are we doing that or are we not? So I've got really good reviews about the book. Some people say that it's like a special design co founder now sitting in my head talking something, you know, which is a really great thing to hear. And I really recommend it to anyone who is struggling just and intimidated by tackling the design problem because it's really not a huge problem. You can always get help and, do a lot of stuff yourself.
Brian Casel:Very cool. And it looks like you you've got a couple of, packages, you know, the the basic package, advanced, premium. It's not just the book, but you're also offering, you know, audio interviews and worksheets. And one of the options includes a strategy call with you. So again, folks, while while Jane is available, it's a good time to to pick her brain about this stuff and and really get your UI and UX straightened out.
Speaker 3:And thank you. And I also have a special promo code for our listeners today. It is Bootstrap Web 20, and you can use it to get $20 off any book package out there.
Brian Casel:Awesome. Appreciate that. And again, folks, check that out at uibreakfast.com. That's that's Jane's website, and slash audit is is where you can find the book. Jane, where else can can folks connect with you?
Speaker 3:My big hub is uibreakfast.com, and there is tons of interesting things from there. You can get some free courses. You can download free book chapters and listen to the podcast. So everything is there.
Jordan Gal:Nice. Awesome. Thank you very much, Jane.
Brian Casel:Appreciate
Speaker 3:it. I was really thrilled to share something with your audience. It's great.
Brian Casel:Cool. Thanks, Jane. And, maybe we'll catch up with you at the next MicroCon.
Speaker 3:I would love to. Thank you.
Brian Casel:Alright.
![[111] How to Audit Your Design, UI & UX w/ Jane Portman](https://img.transistorcdn.com/LDB_Cv9bHAA2vtoSPkZCpkdHPF6fAqfl7PL-PG7_c-M/rs:fill:0:0:1/w:800/h:800/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9jMjkw/MDYxZDQ0MWIxYTUw/NTMzMGI2NTExZWMx/MWQ1Yi5qcGc.webp)