Peter Loving: UI/UX Interfaces For Fast Growth SaaS with UserActive #202

Hello, hello. This is your host, Akeel Jabbar, and welcome back to another episode. On today's podcast, we're talking today here with Peter Loving. He is a software designer, coach, and consultant who works with SaaS companies. to build better products, making UI and UX improvements that drive real growth and wow users. So Peter runs an agency called UserActive. Today we'll be talking about how to use UI/UX interfaces for fast growth with your SaaS. So welcome, Peter. Welcome back to the podcast and glad to have you on today.

Thanks, Akeel. Great to be back. Really looking forward to talking with you again. Thanks.

Yeah. And just for people listening in, just a reminder, this is one of those spotlight highlight services we're going to be highlighting, sharing. Peter will be sharing his behind the scenes of what goes on in his agency and how he drives real results for SaaS companies. So if you want to follow along, make sure you check out our YouTube channel, SaaS District. And you guys can see exactly what we're doing. He is sharing his screen here today. So he'll be walking through it. So his website is open right now, useractive.io. So just to start off, Peter, tell us a little bit, you know, about UserActive. Where are you guys based? What's the size of the company? And where are you guys? How long you guys been around for?

Yeah, so we're a product design agency, we focus on designing B2B SaaS. So all day, every day, we're looking B2B product interfaces. We're working in Figma, we're designing products either from scratch, or we're working with teams who have an existing SaaS, and we're just refining and constantly iterating, improving that product to basically deliver more value to users. So we're based in Barcelona, and I'm from London, so occasionally we're in London, and we have a hybrid team. So we have a few people here in the office, and we have a few remote designers too. And we're 7 coming up onto 8 people at the moment. And most of our team are product designers. So we've got 6 of us from a product design background, and all of our designers have experience in B2B SaaS. So we've specialized. And then we have a couple of people supporting with project management and marketing.

Awesome.

That's, yeah, that's kind of our team and what we do essentially.

Okay. I mean, your website is, you know, you have a beautiful interface, so I imagine you guys can offer great things for your users as well. So what are you, if I'm a SaaS company coming to you, how involved are you getting in terms of the design of my product, design of my website, or, you know, what do you guys typically work with? How does that project look like?

Yeah, so we really specialize in the product. We get really stuck into the product. So when we get talking with a prospect or a new customer, we're always talking about them, about their current situation, where they are with the product, what are the issues or challenges. And there's a range of challenges that SaaS companies have when they're coming to us. Either they're trying to build a new product, they have an innovative idea, or they're already delivering a service or MVP to customers, and they wanna build that out into an engaging SaaS product, one, you know, with rich features and building some more complexity that delivers value on whatever system or whatever process they're providing value to their customers with. So that's more along the kind of new product design. Or we're working with customers who've had a SaaS for some years, you know, and you have a range of issues there too. So you might have a software that's been built predominantly by a technical team. And the challenge there is that it's never really had the focus and expertise of a product design team working on it. So they've built this great product, but sometimes the usability or experience isn't what it could be. And you also get this situation where, with SaaS companies who might have been operating for 10 years, and over time, the product has consistently evolved, but it might start to feel dated.

Okay.

And with this kind of situation, you know, SaaS is a competitive space, You might have new products entering their market. Maybe they've got funding, maybe they're moving a little bit faster, and they're also launching a product with a sexier UI, a more modern look and feel. So that resonates a little bit better with the target audience or the current market. So these companies that have been operating for quite a while, you know, one of their challenges is bringing their interface up to date, making it look slick, modern, and clean so that they can, you know, continue to compete in their space.

Nice.

Yeah, so there's a range of scenarios. But yeah, fundamentally, we're working on the product. Occasionally, we will take some of those product interface designs and create assets to, you know, promote the product on the marketing website. But fundamentally, we're really focused on the product UI and UX.

Got it. And if I'm one of those, you know, fit in one of those 2 categories, so I'm maybe trying to build out my new MVP or product that I'm looking to launch, or I'm redesigning my existing product, how long am I typically working with UserActive to kind of go from start to beginning to have a working product that I can have with my dev team to start implementing and coding?

Yeah, so this ranges, the period of engagement ranges with us. Our ideal scenario is We love working on products and designing them, and the more embedded we are in the product and the team, the more value we're able to deliver over time. So we're looking for long-term engagements, but that doesn't always mean that the clients are. They might have a project in mind. They want to just design or release a new feature, or they'd like to improve an existing workflow in their product. So they might have a specific Requirement. So we're typically working with our customers for anything between 3 months and a year.

Okay.

And our engagements could go on longer than that. Quite often, our customers express the desire to work long-term. So we really become a partner. We become their product design arm of their business. And we run that process with them. And liaise with their internal operations and their developers too. So we kind of become a bolt-on.

Got it. Awesome. Okay. So I think what would be helpful, I guess, at this point, now we can get into kind of the meat and soup of the show. If you want, maybe we can start off maybe sharing some metrics or case studies of some of the clients you work with. I know you've increased ARR significantly for some clients. What have you seen kind of before and after? people listening in want to try something similar, they know what to expect as well.

Yeah, one of the things that I always try to do is to quantify ROI. So for, for product design, it's not always easy. There's not always a direct ROI, and sometimes they're quite delayed, you know, because you've designed something, then it gets released into the product after it's been built, and then you can start measuring. So it can be months, But sometimes we do get really, really nice opportunities to measure uplift, conversion increases, things like increased utilization within a product, or reduced churn. So we've got some kind of key metrics that we can focus on. And one of the best ways to make it really clear is to, you know, when we're able to demonstrate, you know, actual revenue improvement, you know, based on the product. So One case study that we were able to really make an impact in was a CRM, Prospect CRM. And what we did with them is we worked with them to— specific goal was to improve the free trial to paid conversion rate. So that they had a 14-day trial, and it was that upgrade conversion You know, during and at the end of that free trial process. So I have a case study, maybe I'll just jump onto that tab and I'll talk through it.

Yep.

So sometimes when we're focusing on goals like this, the route or the way to make it happen is not always completely obvious. We might, you know, we'll start often with a workshop and we're putting our, you know, thinking together, our brains together, and coming up with, okay, where is the opportunity in this product? Where is the thing that we can use to make an impact with? And for Prospect CRM, one of the things that was really clear is that the product dashboard was a little bit underwhelming. So, you know, there's this, you know, quite a challenging process to, like, onboard new customers, right? You've got, you might have high CAC to, you know, actually acquire customers. That cost might be fairly significant and that period of time might be. And then also sometimes with onboarding, there's quite a bit of friction, particularly in the case for Prospect CRM, because they have integrations that every user must set up. And that's a real friction point when you're getting them onboarded. So the last thing you want is for them to get through these, this friction during onboarding and then have an underwhelming experience when they land in the product for the first time.

Right.

And that was what this dashboard redesign was. So, we thought, okay, that's the first moment where we're gonna be able to give them a really strong first impression. So, let's rethink the dashboard from the ground up. What was there before was pretty much a few metrics that were just taken from the product, and they were kind of just placed on the dashboard arbitrarily. It was a fairly random It hadn't been really considered and thought in terms of what value are we giving and to who. It was just kind of like a repository of like, here's a bunch of stats about the accounts. And obviously, you know how it is when you land in a new product, there's not much data. So especially if you combine that with actually there being no stats, it's pretty underwhelming.

Right.

So we went through this process to redesign. the dashboard. Okay.

So we saw 46%. So let's quickly look at this. So CRM, 46% increase in paid conversions. So they went from converting an average of 18 free trials to 26 per month, which then led to over $337,000 net new ARR. So okay, that's—

Yeah, it was good. I mean, this was great because it's pretty significant increase. So, you know, say that they were converting 18 out of 100 free trials per month. When we redesigned the dashboards, they were able to convert 26 free trial users, which is a 46% increase in conversions.

Wow.

So when we, you know, when we looked at the lifetime value, of the increase of these new customers, it added up to $337,000 in net new ARR. So it's proved quite an impact. I mean, this is a fairly decent ACV on these customers. So a good conversion increase builds up to a fair bit of revenue. So sometimes these metric improvements can be significant in terms of revenue.

Good. So you guys changed the entire dashboard here, or what, did you just change the kind of first reporting page?

Yeah, it is, it's, yeah, we were calling it the dashboard. It's pretty much the home screen, but the home screen in this product works a bit like a dashboard of data.

Okay.

It's account activity. So maybe I'll talk you through what we did.

Yeah.

Essentially, the dashboard, you know, if you can see the screen right here, this is the old dashboard, how it looked before. Pretty bland, pretty plain, not much visual data, no graphical representations of information. And the metrics were a collection. Like I said, they hadn't been thought through completely. So what we did was we said, hang on, okay, let's take a step back. Who are the users for this product? This product is a CRM for wholesale distribution. So if you can imagine companies that are selling, say, a brewery that's selling beer and they're supplying to bars and pubs, or coffee company that sells wholesale coffee and they distribute it to offices around, say, around your city like London or New York.

Mm-hmm.

This CRM enables the wholesaler to manage everything, their stock, their customers, their orders, delivery, everything like that. So there's a lot of functionality. And core users for this product are sales reps or sales execs, account managers, and also sales managers. So it's focused on sales. And we, one of the things that we uncovered as we were looking at this is that each of those profiles actually has a very different requirement when they land in the product. So they need to see some, they need to see different information, 'cause they're actually trying to achieve different things.

Great.

So we took this one dashboard and we redesigned it for each of those profiles. So custom dashboards, we introduced widgets that are very specific to each of their roles. So for instance, a sales manager, what we did for them is that we gave them an overview of all of the sales activity in their team, how each sales rep is performing, which accounts are at risk of churning, what the pipeline looks like for the overall team, and how they perform against targets. And then for the account managers, it was more like, you know, how are you servicing your customers? Are there any orders or problems or inquiries that need some attention? And then for sales reps, that one is all about hitting their personal sales goals and KPIs.

Great.

So because we tailored these dashboards, it's a much more personalized experience. It's much more contextual. Every time they're logging in, they're seeing stats and updates of where they are. And this improvement in the first-time experience after onboarding, when a new customer lands in the product, it's a much more engaging experience. They can suddenly see, okay, they can see how this tool will enable them to reach success in the future. So they're thinking, okay, great. Hey, we can start tracking some stuff. We can set goals, we can see how we're doing. And, um, really that just— that, that was the difference between increasing the conversion rate for free to paid. So—

Got it. That's actually really smart, you know, using custom dashboards. That's— it's not something you see very often with SaaS companies. Now when somebody is— just to understand how you guys segment them, is this, you know, when somebody onboards, you know, sets up a new free trial, they're entering, you know, selecting, okay, this is my role in the company. And based off what they select, you're now giving them the dashboard.

Yeah, there's, there's a number of ways we, we do that and it all depends on the sales process of the SaaS business.

Yeah.

So how they're onboarding new customers. In this case, Prospect CRM have some customer success and some concierge onboarding. So they have a consultant that will be setting things up with the customer and they're able to set this up We have flows where the user selects, you know, if it's a more product-led approach, then the user might select the criteria, and then we'll show them their personalized dashboard when they get into the product. But if it's more sales-led, then there's a few setup things. And that's how, in this case, it was sales. That's a customer success helping them set up, helping them with the integration, helping them get up and running.

Cool. Okay. So I think for the last maybe several minutes here, this is really helpful. Maybe you can show kind of the backend of how your guys' process works. So if we start working with you, what do you guys actually do on the backend so we understand how it would be like to work with you guys?

Yeah, right. So cool. I'll show you how typically how we work and what it looks like. So we work in Figma. We're always working in Figma. We have it open all day and we share our Figma file with the client. So we've got an open environment. We're working in Figma day by day. We're communicating in Slack, so that's our area for ongoing conversations. And we're using a design backlog in Trello. So that's how we're managing our sprints. We're assembling sprints. And once we're in Figma, our workspace looks like this. We have our own system for how we work in Figma.

Mm-hmm.

You see, we've got on the left-hand side, I'm just gonna show this menu. On the left-hand side, you've got the designer sections, and this is where our team are working. And we split these up into different pages. So we've got the workspace, which is where most of the design is happening. But then we have other screens like components. You know, when we're designing a SaaS product, we're always building components. So these are reusable entities of design that enable us to design consistently across the whole interface. And every time we have— we're building a component, we're basically building that with a mind for consistency and where else this component's gonna appear in the product and how it might vary. So what I'm showing here is like a sidebar navigation for a product, and then it has all of the different states. You see, like, selected states, hover states, what happens when a menu expands or minimizes, you know, does the sidebar menu Minimize and expand, kind of like flying out to the right and then going back in to the left. So that's why you'll see, you know, a menu like this with many different variations of it, minimized variations, little notifications, and so on. So that's like a components area. We have a section for user flow. Sometimes we're creating user flows and wireframes in there. It's more of a UX approach.

Mm-hmm.

But if I just show you this workspace, we work through a product screen by screen and feature by feature. So we organize the file in terms of each of the key screens. And then what we do is we'll go through that screen and design up every single interaction. What happens if users click on certain buttons, or if they perform an action, how does that flow look? What are the dropdowns? How do they look? What are the hover states? You know, everything that happens. So, in this project, Narrato, which is a content workflow tool, it's for content publishers.

Okay.

People are creating content, and they're working in teams. This is a content production tool, but also project management. So, they're managing the workflows. So what you see here is how we get started. We usually start with the frame of the product, right? So you can see here, we've started with the frame. We've got this left-hand sidebar. We have a toolbar at the top with key functionality. And we'll start with that because this is pretty much the universal area of the product. On every screen, you're gonna be seeing this. We get that frame design first, and there's usually things to resolve. Like, for Narrato, you can see here in the navigation, the user has to select their workspaces. So we're resolving key things around the main workflow of the product, selecting workspaces. How are we presenting the features in the main navigation menu? Like, we're organizing them in terms of product value and also priority. There's hierarchy going on here. It's like, okay, which are the features that are most widely used? And we order things in terms of that. And then we'll also think about how we can promote features right within the menu, you know. So if something's been launched, we wanna highlight it. If it's a key feature, we wanna give it more prominence. So we'll start off with things like that, and we might go into, like, one of the things we'll often do is work in one of the features that delivers the most core value in a product. So this example is for writing content, you know, blog posts and articles.

Mm-hmm.

And so we jumped into designing this workflow because it's really one of the core features of the product.

Great.

And again, we're working with the frame of the feature. And as we resolve things here, we're still working on the workspace. Okay, so what happens when you're— how do you navigate in submenus? We have this flyout toolbar on the left. It changes the size and shape of the workspace. And then we're looking at things like, okay, what are all the interactions the user can do here? We're designing them up, you know, everything from tooltips to dropdown menus to, you know, functionality for adding users, sharing things, setting dates, deadlines, project management. So.

And when it comes to the workflow, you know, how much of this is, you know, you guys trying to, you know, come up with this workflow and see what works, or is it You know, they already have an existing workflow with their old dashboard and you're trying to kind of revamp the look of it more so.

Yeah. So, so for Narrato, the, the product, there is an existing product, but it's kind of an MVP. So it, it didn't have a very distinct look and feel of its own.

Okay.

So we worked together to develop a palette, give it more of a sense of A unique kind of UI look and feel that gives the product some character.

And then it publishes directly on there. You're able to— this is what you're saying here, publish the content.

That's right. So they can, you know, they can develop their blog posts and articles in here. And they also have things like scoring, word count. They can use AI, but they also get scoring for things like SEO.

Cool.

Keywords, things like that. Yeah. And then, then there's an integration and it connects directly to their website. So you can, you can launch straight to your website.

Perfect.

But yeah, to your question about how we resolve, you know, the features and functionality and workflows, well, it's an ongoing dialogue. We talk with the stakeholders in the team. Usually it's a product manager and a founder, and together we'll be discussing and planning, and they have ideas and we have suggestions too. So it's pretty much a collaborative format. But the way it— yeah, the way it works is that every 2 weeks we present on a standup our design work, and— We review with the client. So they'll, they'll say, oh hey, this is great, we also wanted to do this, or we wanted this feature to work in kind of in a slightly different way, you know. And then we kind of iterate to get to the, the result.

Of course.

Yeah. Were you— yeah.

Okay, this, this is, this is awesome. So you guys following along, you can see, uh, we got the Figma file opened up and you can see all the screens that they've built out for This client over here, Naretto. Sorry. So Peter, kind of last thoughts here. Maybe if you want to share, you know, any final advice or thoughts for anybody, you know, for our listeners and any asks that you'd like to request from them and where they can get in touch with you.

Yeah. So I guess final advice for me, it's always coming from a product perspective. So usually when we engage with a new customer, what they're looking for Initially, often, is to improve and work on the low-hanging fruit in their product. So, the things that are going to take less resource and have the most impact.

Right.

Usually, product managers and founders are usually quite aware of what that is, and quick wins. And sometimes, that is a good place to start with UI improvements. Because you get a bit of momentum, and then you can go back and rework, you know, more fundamental issues in the product. So that's a nice way to approach it. But I think if I were to offer any advice, it would be to think about how you can implement the process of iterative product design improvement on your product. Because quite often within SaaS, I know there's so many things And areas that you have to focus on. But what sometimes happens with product is you get this stop-and-start kind of motion, where there's some intensive design work, and then it stops. Oh, and then there might be development, and then there's a whole load of customer support and success. And then later on, it goes back to, okay, now we can work on this area of the product.

Hmm.

But in an ideal scenario, it's the process that enables you to continuously iterate and improve and release in your SaaS. And that builds momentum. It builds a pace of innovation that launches you ahead of competitors, how quickly you can innovate and release a new product. So I'd say focus on trying to implement a steady process for product design. And that, even if you don't have a lot of resource, Even if it's kind of lightweight in the beginning, it gets the process rolling.

Yeah.

That's one of the key things I would suggest.

Okay, great advice. And any ask from your audience? What would you like them to do from here? How can they get in touch with you?

If they wanna get in touch with us, they can go to useractive.io. So that's UserActive. That's a play on the idea of developing active users in your product. So, useractive.io, and there's a button on the website to book a call. You can book a call directly with me, take a look at challenges or issues you're having with your product. I usually provide a steer or some suggestions and advice. Yeah, and usually on that call, it's just a case of, you know, if you're looking for somebody to help and if we're a good fit, then we can explore the conversation. But otherwise, We try to, you know, help to give a steer, you know, if we're— because we're not always, you know, the ideal fit. There's a kind of certain stage where we're probably the best, best positioned to help.

Awesome. Okay. Yeah. So you guys, you guys got to see kind of a sneak peek of what, you know, Peter is doing and what he's doing for his clients. So I appreciate you jumping on, Peter. And if you guys want to learn more, make sure to check him out at useractive.io. Thank you so much again, Peter.

Thank you. Thanks for having me. I really enjoyed it. Thanks, Akeel.

Cheers. Thank you all for watching this episode and joining SaaS District today. Don't forget to like, subscribe, and hit the bell 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 Horizon Capital, 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 comment down below and help us improve our content for you all. Thanks again, and see you on the next one.

Bye.