Inside Marketing Design at Paystack

Welcome back to "Inside Marketing Design." I'm your host, Charli Marie. I'm a marketing designer and I started this show to learn from my peers in the tech industry about how they get their work done. And guess what? You get to listen in too. In today's episode, I'm speaking with Tomi Otusanya about marketing design at Paystack. Tomi is a design lead for the growth design team at Paystack, which is a platform that businesses in Africa use to accept payments both online and offline. They were the first Nigerian company to be accepted into YCombinator, which is pretty damn cool. That was back in 2015. And they are now a remote-friendly team of about 250 people with offices in Nigeria, in Ghana, and in South Africa. Tomi has been at Paystack for about five years now, so he has a lot of context, a lot of insights to share with us and I really loved learning from him about the considerations that he and the growth design team make for site speed, which is not something we've honestly delved into a lot before on this show, but it's definitely something that's becoming more and more important for designers everywhere to consider. So you're gonna learn a lot about that in this episode as well as about the design team culture at Paystack and the things that the team do to foster that. 

‍

First though, a huge thank you to WebFlow for sponsoring the season of the show. I use WebFlow for my business because it is a visual development tool that makes building a website a heck of a lot easier than coding it from scratch. When you add elements to the canvas in Webflow, it writes nice clean code for you in the background and I absolutely love how easy it is to create interactions and animations on a timeline in Webflow. That's something that I didn't have the skills or the patience to do when I was having to code my own website on WordPress. But now that my site is on Webflow, I can add these special touches really easily. Although I will say that, since we're talking about site speed in this episode, I do try not to go overboard with the animations. Anyway, check out Webflow for your next web design project at InsideMarketingDesign.com/webflow and you can explore it yourself for free. Try it out. 

‍

Now though, let's get into it and take a look inside marketing design at Paystack. Welcome to the show, Tomi. Very excited to have you here and to dig into marketing design at Paystack. Let's get started by you telling me a little bit about your role on the growth design team.

‍

Tomi:- Hey Charli. So my role at Paystack, I currently lead the growth design team at Paystack. What that means is I am responsible for I guess two outcomes, right? There's the, I would frame it as, the leadership requirement and then there's the IT contribution. So on the leadership side, I work with stakeholders to articulate their requests and then prioritize based on the available resources and timeline. On the IT part of things, because I also handle requests, I drive execution put across my task and across board.

‍

Charli:- Interesting. So it's kind of like my role as creative director at ConvertKit, like I am, yeah, leading the brand studio team, but also I'm often doing design work myself, because otherwise we would only have one marketing designer, which is not enough. How many designers on the growth design team?

‍

Tomi:- On the growth design team we have four designers.

‍

Charli:- Okay. Including you.

‍

Tomi:- And we currently have- including myself- and we have two studios at the moment. Well one, but like we have one in the retainer, and then there's the other one.

‍

Charli:- Nice. So that's sort of like some outsourced design help that you can lean on when you need to. And do you manage the designers on the growth design team as well? Like do they report to you in the company org-structure and you're doing their performance reviews and things? Or is leadership in your role more about the strategic level and the, like, strategy of things?

‍

Tomi:- The interesting about Paystack is we've kind of evolved. Now we're at the point where I don't do that. There was a world where I used to do that. So now I'm more focused. We have a design manager now.

‍

Charli:- Cool.

‍

Tomi:- The best. and now like I can focus on driving execution.

‍

Charli:- Cool. But I love that you still get to be involved in the strategy at a leadership level despite not being a manager. I think that's often like a trap we can fall into in design careers. Right? Is that the only way to progress is to become a manager and, you know, there needs to be other ways. So I love that that's what you've ended up in. Tell me more about where the team, this growth design team fits into the, like, the company structure and within the wider design team as well.

‍

Tomi:- So on the design team, the design team at Paystack is broken into four buckets. Two of those four are really new. So before, it used to be growth design and product design. We have like a system still now, there's the design systems and then the fourth one is design management.

‍

Charli:- Right. So the design management that you talked about that you have now are part of that team technically and then they manage people within those other three design teams.

‍

Tomi:- Exactly. That's how it works.

‍

Charli:- Does that mean that in the org structure you sort of, like, flow up to a director of design or something, like you sit within a design org within the company? 'Cause my team is within the growth org technically. So we're like alongside marketing and sales and our support team.

‍

Tomi:- Okay. So, for Paystack it's slightly different. Design sits within the engineering org. So I report to the director of design, we have a director of design who reports to the VP of engineering and then engineering to the whole company. That's how it scales.

‍

Charli:- See, there's just so many ways to do this, right? It's always fascinating to me. We'll get into talking more about how you collaborate across design org as a whole and, like, collaborate across these different teams. But first I wanna ask you about the Paystack brand. How would you describe it, to give people a sense?

‍

Tomi:- I would say the Paystack brand puts its user first. We are very big on quantities so there's a lot of iteration. So it's an iterative brand, it's a constantly evolving brand. We try to be as innovative as we can because we have a very ambitious goal. We're trying to power a PAR payment in the whole continent. That's a very ambitious goal.

‍

Charli:- That is a big goal. Yeah.

‍

Tomi:- Yeah. I would try our very best to be clear, I feel like if there's one thing I would say, the Paystack brand is very clear from how we think about copy, to how we think about illustrations and the, like, I'd say we are very clear.

‍

Charli:- Right. So it's like clarity is the number one priority in the things you're doing.

‍

Tomi:- Yeah.

‍

Charli:- That makes a lot of sense. And is your team- 'cause you mentioned iterating and evolving the brand- is your team the one responsible for doing that, for like owning the brand and its visual expression at least?

‍

Tomi:- I would say yes, especially in the early days. This is because a lot of the work we've done on the team has allowed us strike the brand, like expand on the existing brand. So as an example, we are more likely to work on a new vertical than versus building a different product. Because of that, like yes, we have a lot of influence on the brand direction.

‍

Charli:- And is it fair to say that the main, you know, main work you do as an IC is on the marketing site?

‍

Tomi:- I would say yes and no. Like lots of our requests actually come from the growth team, which is correct. But with time that has changed a lot. So right now I paced active growth, I would say the growth design team we service in- like I'm thinking about like my to-dos today. We have a startup programs team which is primarily responsible for engaging startups, engaging in the community. So we actively service that team. We service the people team as well, for, let's say, from things like let's say Zoom backgrounds and helping people to designing our company offsite, to when we're building our own, we're designing our office in Lagos, like design was a huge part of the expand for, oh hey this is how we should lay out the building, this is the colors we should go with, this is how this.

‍

Charli:- Oh, cool, so not just like posters on the wall,

‍

Tomi:- No.

‍

Charli:- like the whole layout building itself. I love it.

‍

Tomi:- Like the whole layout, oh we should have a pitch here, this is where it should be. This is how the science samples should look like. So yeah.

‍

Charli:- Yeah. Cool.

‍

Tomi:- Everything.

‍

Charli:- Wow. So a lot of things then.

‍

Tomi:- Yes.

‍

Charli:- Yeah. Let's go back now and talk about collaboration as a design team, because I really got a sense from you when we talked before this interview that Paystack has a really great design culture and that it is a very collaborative place and that you do try to like, you know, do things to inspire the team and things like that. So I don't know, tell me in your own words, what is the design culture like at Paystack?

‍

Tomi:- Yeah, very correct. It is very collaborative, it is also very expressive. A perfect example, I would say, is on one of the deliverables that we are currently executing this print, we are working with the product design team to improve the experience on an existing feature. This body of work requires animated icons. We collaborate across the table and like essentially we do all of those things with the goal of the team in mind. So with the product design example, now, the use case, there's a- the existing use case I'm talking about- there's a product goal, right? And we are working to drive that goal. I'm curious to know how collaboration at ConvertKit works.

‍

Charli:- Yeah, that's something that we're honestly, like, working on getting better at. Right now, we sort of work separately in the, like, growth marketing design side and in the product, and we're looking for more opportunities to work together. The main ways we've done that so far have been, yeah, through illustrations in the app, like for empty states and and things like that, and also on our, like, upgrade funnel, we sort of like lended our marketing design expertise to those pages on the app when that happened. What are some of the things that you think- maybe I can learn from you on this- that you think lead to like a really collaborative atmosphere at Paystack across product and growth design?

‍

Tomi:- It starts from the company goals, or the company values. One of our very strong values is actually, one of our values is choose transparency and communicate clearly. We are very big on that. As an example, like you are very, you are more likely to find people ask questions in a public Slack channel and then have people from different teams, versus having people go into your DMs to ask you a question. We've even learned that, I guess, for new people it can can be a bit of a cultural shock. But with time, everybody sees the value in that. If I'm going to design something today, my review channel is most likely going to be public. The first feedback we get will definitely be within in the smaller team. But aside that, it goes outside and the great part about this is feedback can come from anywhere across the company. So I can be designing something and then someone on the user apps team is like, "Oh, hey, we've noticed this trend, so maybe you want to do this." We're able to do this 'cause we are open. And I guess that's just how we've created a culture to encourage people to just…

‍

Charli:- Jump in and leave feedback. Yeah

‍

Tomi:- Leave feedback. Yeah, exactly.

‍

Charli:- You mentioned a review channel there. Do you make- this is like getting really into the weeds and nerdy question, but this is what we do on the show- do you make a new Slack channel per project to like group all the, share your design work and have the conversation about the project in there?

‍

Tomi:- That's interesting. I think it's a hybrid of two of,

‍

Charli:- Okay.

‍

Tomi:- of the two of them. So if it's a new project, like you said, like something that's from scratch, we would most likely have a new Slack channel. We have an interesting Slack naming conversion. So it'll be room, project, name, room-project name, and then that's, this is where everybody collaborates. So like from requirement gathering, so you have like the product marketers, the designers, the product designers, everybody just is sometimes, even the CEO, like essentially everybody just comes in like... It's a...

‍

Charli:- That's the place for that project.

‍

Tomi:- Exactly. And then once we go beyond that, once we get to the executing design phase, a lot of the early feedback will happen in that channel. But then we bubble it up, so we bring it to our more public channels, that, "oh, hey, in case you're curious, this is what the design team is working on." And another interesting culture we have that kind of, I guess, makes this better, was we publish a monthly report across the design team. So it's interesting 'cause I'm working on the offer this month.

‍

Charli:- Nice. Again, we're looking at your to-do list for today. That's what we're talking about this episode.

‍

Tomi:- Exactly. We rotate whoever, like it's not just, I'm not responsible for the reports, so this time is my turn, next month it can be a product designer. So what that also does is lets you know what everybody's working on. So, like, actively or I guess possibly however, you get to learn what, and then by time you share the report at the end the day to, like there's more to learn from everybody.

‍

Charli:- And that's an internal report, I'm guessing,

‍

Tomi:- Yes.

‍

Charli:- that just goes out amongst the teams and everyone gets, yeah, that's the place to go for insights. If you don't wanna, like, read every message or check every Slack channel, you can just look at this report and get an overview of what everyone is working on.

‍

Tomi:- Exactly, yes.

‍

Charli:- Oh I really like that. Is that more backwards looking or forward looking? Like, is it about what we did in the past month or is it more about what we're gonna do in the next month?

‍

Tomi:- It's more here's what we've done in the last month, but if you're curious about more of this, you can check this channel and this channel and this channel because this is still happening.

‍

Charli:- So that report really sounds like a good place for all of the designers across the company and like anyone else too to check in on what's happening. But do you meet like weekly or monthly as a wider design team team as well or have like crit sessions and stuff like that?

‍

Tomi:- Well, we have crit sessions. With scale it's becoming harder to, I guess, get everybody on board. But say, for example, if we're working on something today, the first approach is to share in our public feedback channel, right? So get feedback. If we're trying to, let's say there's a bit of confusion on something, or it feels like multiple people have different requirements, we can have like a feedback call. Across the design team, we have a biweekly all hands meeting where- and depending on the agenda, the agenda is not strict, it's quite flexible- so different people could come present, "Oh, hey this is why I've been working on. What do you think?" Sometimes we can even just watch movies. That's how, like,

‍

Charli:- Oh my gosh, fun!

‍

Tomi:- So yes, like it honestly varies to be honest. Like, the other day we were trying, we're just kind of muddling through, where essentially we're embracing ourselves with our design skills. It wasn't so great. It was like, "Hey, with your track pad, draw this island route."

‍

Charli:- Oh. Wow.

‍

Tomi:- So yeah, we do a lot of that. So, and the critic is a good opportunity.

‍

Charli:- Those things that like, watching a movie, doing silly drawings together, I think that is probably contributing a lot to your culture as well, right? Like just getting everybody comfortable with each other 'cause that's what you need, that layer of, like, trust to be able to get and give really good feedback, right?

‍

Tomi:- Yes. Especially in your, I guess when your remote first, first world, those things are very, very important.

‍

Charli:- And it definitely does sound like, from what you were saying about the first place to get feedback is asynchronously in a Slack channel that you do default to asynchronous to start with and then like get on a call if we need to, if there's some stuff that needs clarifying.

‍

Tomi:- Yes, yes. That's exactly how it works.

‍

Charli:- I'm curious to know if the Paystack music project came about through one of these, like, design team jam sessions. I don't know. Tell me about that, 'cause it's a really cool project. We'll show it on screen right now for anyone watching the video version, and if you're listening to the audio then I guess you can check the link in the description. But yeah, tell us about how how that came about, Tomi.

‍

Tomi:- If I remember correctly, we had just finished working on another vertical, I think it was Paystack's storefront, so I think it was paystack.com/storefront, and that was, like, many things that happened, like with product launches, a lot of things change and then you have to maybe deliver on a tight schedule. So there was like...

‍

Charli:- Right. So one of those like stressful, nose to the grindstone type of projects.

‍

Tomi:- Exactly. So we had just, I feel like we had two of those and it was a perfect time to, I guess, get the team to cool off, right? Internally, across Paystack, we have a music channel 'cause music is honestly a very big part of what we do at Paystack, and has grown us with skill because then you have different people with different music taste. So we have this channel that we would usually, people just share, "Hey this is what I'm listening to, you should check out this artist. Hey, you should check out this person. Oh, this person just dropped the fire album, you should check it out." So we have all of that, and then we decided to make it into- the first problem we had was there was no way to compile that. So from a jam session, I guess between like a couple of people on the team, I think it was the head of growth, a product designer, and like maybe one or two other people on my team were like, "Oh hey, we can build this thing. and now is actually a good time to do it. I would like my team to do this because we really need something, like I think this would be a good opportunity to cool off." Right? And I was like, "Oh, that's fine. We can, I guess, dedicate like two and a half, three weeks to do this if that's something you're down for doing." And yes, that's pretty much how the whole village started. I was like, okay we have this very short time line to do this. But then there's the backend we need to do, there's the websites we need to do. So we need the backend to like collect the playlist from Slack. We need this beautiful UI to design, like, the playlist. We want to highlight the rock stars that work at Paystack. So we want the UI to be able to actually show who shared this link to see also, so that you can kind of like follow it, I guess, across. And that's essentially how it started from, like, I guess, one meeting to one Slack message to multiple Slack messages to different functional team. I think the product designer literally led the market team. I was leading the, I guess the web experience team. Copy came, I think copy came from marketing, in between. But within all of those different, like, I guess, teams, we had a jam session, had multiple jam sessions, kept iterating. Like, we knew that we didn't have any brand restriction so we were just like it was, it was the perfect thing. It's like, "Hey, have fun! Build something for yourself. Like at the end of the day we can always use this, to like, I guess listen to the music." And yeah, we did that. We wrote the code, wrote the blog post about how we did it and honestly just released this thing to the internet and the reception was not what we expected. Like it has been crazy. We're like, oh we just did this thing for ourselves but good to know that people really like this and people actually come to the, I guess, the website. So the way we built the website is an interesting way, so that we compound the templates or the playlists at the first of every month. So we have an automated, it's called, I think it's a crown job. So have a crown job that runs like at the first of every month to build everything, including the website. So there was a month where, for some reason, it didn't work. So like the new playlist was down and we had people message and say,

‍

Charli:- "Where's the the playlist?"

‍

Tomi:- "Where's the playlist?!" Like, oh whoa, we're sorry, We're sorry, we're sorry. But, hey, yeah so it goes, it's actually very interesting project and it was so beautiful how everything came out in the end.

‍

Charli:- I love that as a company you were able to invest time and resources into that too, right? That the leadership level or like whoever's in charge of like saying yes or no to how you spend your time working on a project, saw the value in that, saw the value in giving designers a chance to blow off steam. Like we've just worked through some really tough projects, let's just have some fun and that investing in that is gonna lead to being able to get back to the the tougher projects in the future.

‍

Tomi:- Yeah, yeah. And it really helped, even on the same, like you could tell that the energy was up, like I mean the energy was here but then it was like here, here. Like everybody was just proud of the work they had put in.

‍

Charli:- And it sounds like honestly it's a great tool for like hiring and stuff now too. People can get a sense of who's on the team and the general like culture of Paystack, so I think that's cool.

‍

Tomi:- Funny enough, it's also an interest, like we didn't see this coming, like we didn't see the brand, like, see the brand perception impact of the brand, impact of the project at all. Like you have sales people in meetings and then you have people referencing, "Oh, like you salesperson talking to me. Are you not so so and so? You shared this song on Paystack music." I was like, ha!

‍

Charli:- Wow.

‍

Tomi:- “Sorry, what was that?” So yeah.

‍

Charli:- And then you're like, yeah, yeah that was, we were meaning to do that all along. That was totally the intention. It just shows that you know the brand well and that when you can just like trust designers to have some fun, like good things can come out of it. And even if the only, you know, "only" benefit had been giving the designer the chance for blow off steam, it would've been worth it. But the fact that it also has all these other company benefits is just awesome. Let's get back into talking about the work that, you know, is assigned to you, though, or like does come down from company goals. Tell me about how the success of your work is measured. Like what metrics or like outcomes are you held accountable to?

‍

Tomi:- On our team, it is very important performance because we know the market we are building for. So how long are people spending on the page? How easy is it to find this, this, this? Because we already work with the marketing team, we have a sense of what our average signups are across. We know our top performing pages, we know our most visited pages. When we work on, let's say, brand asset, could be announcement asset, that is a little more qualitative. So yeah, we've done some research, we know who we are designing these assets for. We try to measure inter activities. So like firstly like if we're designing like a, let's say assets for a developer specific event, who are the people interacting with this? Are these developers? If we're designing it for a new Africa market, what does the actual brand perception in the market look like? Does it actually meet our target? Those are some of the things we measure and to be honest, some of those things it's harder to measure them versus like monthly sign ups or what's the page speed and things like that. So yeah.

‍

Charli:- Yeah. How, what are some of the ways you measure the brand perception? Is that through like user research calls? Do you run surveys, I guess? I don't know.

‍

Tomi:- I guess, well our service end leaders just completed a brand audit exercise across the team and that literally involved everybody, from users to indirect Paystack users to people within the company. Just to get a sense of, oh a lot has happened between point A and point B where we are today, how has the brand perception evolved? What are the things we should be thinking about? So how should we be thinking about the brand? And yeah.

‍

Charli:- Oh that's interesting too that you talked about the indirect users as well, because obviously it's people who are making the payments and not necessarily collecting them.

‍

Tomi:- Exactly.

‍

Charli:- I like it. I like it a lot. Site speed, though, is a really interesting one. And honestly you're one of the first guests to have talked about that on this show. I find it doesn't often come up as a metric of success and it's something that at ConvertKit we're really focusing on right now because Google is really cracking down on this and if your site does not, like, perform adequately, if things don't load quickly, you don't get that like first meaningful paint, you get penalized in search results. And so it's become like a really important thing. Like site speed is where we're improving our SEO. But tell me more about about why it's a vital metric at Paystack and what you look at to measure it.

‍

Tomi:- Firstly, our market is different. So depending on the market we are going to, internet penetration or connectivity is different. So we plan for that from day one, to be honest. Because let's say, like, averagely, assuming- this is just a rough number- I don't know if this is true, but like it's somewhere close- if we have more people using 3Gs or 2Gs in this part of the world, then we should not be building for people that are I guess using 5G internet and like higher, on higher broadband speeds. What that usually ends up meaning for my team specifically is like I think all our websites, except for one or two, we build like from scratch. So we write HTML CSS, little to no framework at all because we essentially optimize it for our users. So if it's going to take us X more hours to deliver a better experience for our users, then we are going to go through that journey.

‍

Charli:- Yeah, that you wanna do it to make it make it worth a site speed. Is there like a bar you wanna hit for like the time that it takes a page to load that you're like yeah, okay cool, this is good enough?

‍

Tomi:- I feel like the bar is always constantly improving. It's constantly shifting and the truth is, for performance, there's always, I guess, more you can do, but like you rightly said that it gets to a point where you just know that, okay, this last 90%, the last bucket, is not really, the value I'm going to get from that is not really worth the effort into that. So I think averagely we try to do, we get our pages to load within a second or less and we test that through different ways. And our site's load, our site's load time, we need to test this across multiple devices. It's very important because- I'm not sure because I haven't looked at this today- but like, if I'm building a website today, I most likely need to consider maybe Microsoft Edge or late Internet Explorer just because there's a chance where I may have someone in an office that still, that maybe doesn't use a laptop, that uses a desktop and it's running on a Windows laptop, and that's not their fault, it's just a function of what their company is giving them. We need to be able to account for those users as well. We need to be able to account for users that would, I guess, use the internet via Opera Mini, which if you write codes, it's a very hard browser to build for. So yeah, those are just the, those are the different verticals we need to consider when we are doing that.

‍

Charli:- And it's interesting to hear you say that your choice of not using a framework, of like using, I guess, like vanilla HTML CSS code as much as possible is one of the ways that you try to improve site speed. What other considerations do you make as a designer when it comes to site performance? Like are you limited in the number of photographs you can add to a page, or I don't know, that sort of thing? Does that come into it for you?

‍

Tomi:- Yes, definitely. So as an example, we would use SVGs instead of actual raw images, like, and we would align the SVGs, so take the SVG code and dump it into the terminal, because we're trying to optimize that. We would maybe tune down on plane width. So one of the things we want to do maybe today is play with the...

‍

Charli:- Again, your to-do list for today.

‍

Tomi:- I'm sorry, but like today is the first that comes to mind. So,

‍

Charli:- No, it's great. We're getting realness.

‍

Tomi:- Let's say we want to, we want to build, build an express that uses a new technology. We may need to, we may decide to turn down that, just observe the market first. Observe penetration like what volume of our, or like what's the volume of our users or of our viewers? Have this new version of, let's say Chrome as an example, if we want to use web technologies, let's say want to play in like, want to build something with WebGL, and yes things like WebGL and the likes, we try to be very careful. We don't want our users' funds acting up like we don't want things that we don't work in. And even when we do those, we try to add a lot of fallback as well. So like try to add fallback to account for users essentially that do not have that capacity.

‍

Charli:- It sounds like you stay really close to the code. Are you coding the designs that you create, or like how do you work with the developer on them?

‍

Tomi:- I code the designs that I make. On the team, we're a very linked team, and I guess it also helps that I have a bit of engineering and product design background so I'm very close to the designs.

‍

Charli:- Yeah, yeah. Which helps, obviously, like you you're talking about making these decisions about fallbacks and things. You can be like, "I know what I need to fallback to or like what needs a fallback because I'm gonna be the one coding it."

‍

Tomi:- Exactly. Yeah. That's how I think about it.

‍

Charli:- Can you share an example of a project where you, like, you shipped something and the site speed just wasn't quite where you wanted it to be, and how you then iterated on that and got it to an acceptable level?

‍

Tomi:- So yes, integrations, directories definitely one of them. And this was also in the interesting project 'cause here, our client wasn't the marketing team, it was more or less like the developer relations team. So you can think about them as the developer educations team kind of. I think some people call that, call those teams that. So here we're working with them to build an online directory of the various integrations we or other people have built to Paystack. So this was something that was, that we had to integrate over, 'cause the first time we, by the time we designed this and implemented the first version of our design, we didn't account for... essentially we're pulling a list from a database, right? We're pulling a list of integrations from a database. We didn't account for the load time that it was going to take to generate that.

‍

Charli:- Right, to be fetching that data.

‍

Tomi:- Exactly, to be fetching the data. And by the time we had pushed the demo, 'cause hey we had made this from that, oh hey this is going to be ready at point x, and then like maybe two days to point X or like three days to point x comes and we're testing this scenario, like, oops... We need to go back to the drawing board for this. How can we make this better? How can we rethink the code? How can we update the design to serve this purpose? So thankfully we were able to make the case. The team was like, okay we understand, we can see what you're saying. I think we did like three different variations of the page. So eventually got to the point- in fact, after we optimized, we were like, oh, hey, this thing is nice, but realized that yes, in the the hurry of trying to launch, we didn't design, like, an empty state for the search. So yes, hey, let's go back, let's add that as well. Let's give users the ability not just to show an a list of it, a direction of integration, but let's make it easy for, I guess, third parties to submit their integration as well. Because, I mean, people are building a lot of things on Paystack today. Some we know, some we don't know. And what better way to, like, I guess, view that archive than to leverage in our existing network? So those were some of the interesting things that we did. One that comes to mind now is an end of the year- So we usually have, we publish gift guides as a part of an end of the year campaign. Right? And on one of the-

‍

Charli:- I'm guessing within all the products on the gift guides are with pay stack customers' businesses.

‍

Tomi:- Exactly, exactly.

‍

Charli:- Yeah.

‍

Tomi:- And very, so like, because we are very big on, like, the African creator community, we're like, Paystack, we are big on that. So we try as much as possible to highlight those type of products in our gift guides. So like the Indian merchant that is building something, let's say, handcrafted things in their house, we have products like that on the page. So that's another example of a product that we had to push back, either because of timeline, because scope was too, like, we couldn't deliver on the scope in the, like, within the timeframe, or we had to, like, at different points we had to iterate on the design just to get to our performance benchmark. And at the points where we couldn't hit that performance benchmark, we thought of clever ways to maybe introduce a loading state that creates the illusion of speed, essentially. So here we are using code, here we are using design, we're trying everything just to make sure that the site's performance is great, speed is topnotch.

‍

Charli:- "The illusion of speed." I like that. That's definitely what loading states do, right? Like if you can see something happening instead of just a blank screen, it feels fast, even if this is actually loading at the same time.

‍

Tomi:- Yes, exactly.

‍

Charli:- Maybe that ties into something else I wanted to ask you, which is what advice you have for designers when it comes to thinking about site speed and considering how their designs, these websites were designing, might be used in markets where the internet connection is slower.

‍

Tomi:- Yes. I think the tools that come to mind that actually, like I feel like a bunch of Google guidelines. There's definitely load speed. I feel like I can't float load speed enough.

‍

Charli:- So that's like making sure our images are compressed as possible and that we're not loading something that's a whole megabyte when it's only sitting on the screen about this big.

‍

Tomi:- Exactly. I like remember, because we try to work with partners as well. So, like, aside I guess the studios we have on retainer, we try as much as possible to create a community of African creators. And one of, as an example now we have a web studio and then a brand studio. By the time you collaborate on something, like there's no- the chances of the web and brand studio collaborating before Paystack was going to be, it was probably like little to none. But like now with Paystack in the mix, we are, like they're definitely going to collaborate. We do that as well with individual creators. We have maybe an illustrator from another country in Africa that we work with, and then another country. So essentially we try to do those type of things. And when you work with those type of people, that the contacts we have, so we need to communicate, okay, say, "Hey, I'm outsourcing a website for someone else to build. We need to have it as part of the requirement." "Oh yes, load speed is important to us. That means, like, when you put that image, please consider this." Sometimes it can also be complex computations on the browser, right? Cause when we outsource this and sometimes we're like, no one mess with that, we review the code as well. We think of like cheaper ways to do the same things on the browser. Essentially that's what it is, so like let's say it could be a Java script code. Say, "Oh, hey, you're doing this thing, like this normal lines. But then the repercussion is the effect painting," as an example. "Oh, hey, let's do this then." "Oh, hey, you have this animation library in your code, how can we optimize that?" And yeah, I think everything ties down to page speed and like you said, Google is cracking down page- I feel like I'm one of the people that- I'm so happy about that now because I feel like-

‍

Charli:- Yeah, it's gonna force everyone to pay attention to it, right?

‍

Tomi:- Yes. Because I feel like it's something that the whole community as a whole should care about that like, like I don't think we care about it enough, essentially.

‍

Charli:- Agreed. And I think it'll be really inspiring for people to hear about how you work with it. So thanks for, thanks for sharing all that. I'm also really getting a sense that the connection between design and code is really vital for this. Like we can't just have designers handing over giant assets or like designs that are gonna take something like a, you know, WebGL to build them. There needs to be a collaboration so that we're considering how our designs will be coded.

‍

Tomi:- Yes, there has to be some form of collaboration. And I guess with scale, I also want to add that with scale, we are going to have less. So now we have one web engineer that is not a designer, right? And there's a lot of learning from the product design side on handoff processes. 'Cause that's not something we had prior to this. It was just like, it was the same person.

‍

Charli:- Right, well you didn't have to hand things off if you were building it. Hand it off to yourself.

‍

Tomi:- Exactly.

‍

Charli:- Nice. I like that. Let's move on to talking about a different side of data and how that impacts your work, which is conversion rates. So I'm assuming that is like a really important metric for the marketing team in the like marketing briefs you work on. But how closely do you pay attention to this as a designer at Paystack? How the site is converting, and getting users to sign.

‍

Tomi:- Put it in context. We publish a marketing weekly report. Yes. That has our sign up numbers.

‍

Charli:- Nice. So you get access to that data weekly.

‍

Tomi:- Exactly. I am constantly stupid- that, okay, what's this? And that also helps me because when I'm giving feedback or when I'm designing as well, giving actionable feedback, we can draw a line across some of the things we've done in the past that were successful to help people go forward.

‍

Charli:- Do you run tests? Like AB conversion rate tests to see how one design performs better than another? Or is it more like we'll ship an update to this page and compare to how it performed before?

‍

Tomi:- Honestly it is a hybrid, right? We've had projects where we would run designed multiple iterations in Sigma- because, I mean, that's easier to do- and then try to get some form of feedback, but at the same time, it's also interesting because we are just, like I mentioned, we're just building off our research function at the company, so before, research used to be a function of, I guess my best practice. It used to be a function of the designer. We didn't have a dedicated researcher.

‍

Charli:- Right, you had to do your own research.

‍

Tomi:- Exactly. And that would mean that I would do Figma test today. So more, I most likely say, oh I think this will work. Trust me! And then we will measure, and then push our integration. So it's been a habit of, but now I'm confident in the fact that we're getting to the point where we are documenting our process and it'll be a bigger part of how we work.

‍

Charli:- Does conversion rate or like, wanting to see a change in that tend to be the reason why you would iterate on a page on the site? Like say the homepage, Does that tend to be a reason that it becomes a project you work on because you see that there's opportunity to increase the conversion rate?

‍

Tomi:- Yes, definitely. Also, if the goal shifts, if the goal post shifts- and by goal post, I mean like if there is a higher metric we want to track as well, then that could also be another reason why we're iterating on a page.

‍

Charli:- Oh nice. What could be an example of what one of those higher metrics could be?

‍

Tomi:- Let's assume- this is off the top of my head- we're trying to drive enterprise sales. This is like a real life example. We've pushed an improvement to the homepage. Before on the homepage, we just used to have the sign up button, and the contact sales button was kind of hidden somewhere in the drop down. And they realized that, "oh, hey," I think this was, this was definitely from like feedback of like, "oh, hey, we're trying to grow the sales world, we have more people in this bucket now, let's try to push, even if it's increasing, let's validate their idea, let's try to push a quicker improvement to see how that works." Another example would be tracking. It's a form of referral, but not necessarily referral. So as an example to run a campaign, being able to track investment on that campaign down to what merchants actually came from that campaign. And just being able to have access to all of that data to say, "oh, hey, we paid X amount for this, we spent two weeks on this, and this is the ROI in six months." That will also require an improvement.

‍

Charli:- Yeah, I like that you pay attention not just to the money you spent on it, but the time you spent on as well. Because that is also money isn't it?

‍

Tomi:- Exactly.

‍

Charli:- I'm really interested in this change to the homepage to make the like sales, like contact sales more obvious. How fast did that project happen, to like get an iteration out? Did you try a few things first or was it like, no this, the answer is obvious?

‍

Tomi:- So for that one, to be honest, the answer was quite obvious and it already helped that as part of the work like, that we did on the website, we built, I guess, like we manage the CMS, which is like a contact management tool, so it's for the team to add this copy on the website. It's a templated module, so we already had the module to add this button. So like, "oh, hey, let's even just go to this tool, blah blah blah, put the URL and see how that performs." And the return was actually, like the difference was actually fast. It was like a very small thing, but a lot of the work there was listening to the stakeholder, hearing- or the partner in this case- hearing what they were trying to do. "Oh this is what you're trying to do? I think we may have a system that solves for that. Give me two minutes, I'll be right back."

‍

Charli:- Nice. Yeah, like the time that it took to understand the problem was way more than actually making the solution.

‍

Tomi:- Yes, definitely.

‍

Charli:- That's good. But you wouldn't have been able to get to that quick solution without listening to the problem, right?

‍

Tomi:- Yes.

‍

Charli:- Yeah. Okay. Wait, tell me more about this modular, like, system then that you use for the site. Have you got like a design system for the Paystack marketing site?

‍

Tomi:- In the code base, yes. We have that in Figma, not so much.

‍

Charli:- That's interesting, 'cause we have the opposite problem at ConvertKit right now, where we have more of a design system in Figma than we do in the code base.

‍

Tomi:- So ours is the other way around. And I guess we are solving that because this year it's one of the terms that came up the sales, like the system sale, like I already mentioned. So that's part of, you know, like that's one of the things we're working with them to figure out. And then from the CMS, on the CMS itself, which is the contact management tool, we tried to make modules on this site modular. So on the homepage now, there's tutorial section that is modular, the next section is also modular. What that means is I can create a page tomorrow and use the hero module from the homepage and then maybe use like a, I know that separate section that we've built, like another module let, I would say, maybe like an interactive module. We'll use the interactive module on the, let's say on the pricing page, use it on this top page. We've built this system so that we can do those things.

‍

Charli:- Oh cool. And what are you using for that system?

‍

Tomi:- So we use it tool called Craft CMS, today.

‍

Charli:- Oh yeah, yeah, yeah. Nice. Okay. That sounds like a really great way to be able to act quickly on, well, needing to make a change like this, of adding the contact sales, but also just building up a quick landing page too. So something I always like to do at the end of these episodes is, like, look forward to the future. I'm really curious to know what, like, skills you're working on building next or what growth looks like for you. This is something that I've had my audience ask about in the past. It's like what is the career path for a marketing designer? So yeah. What are you working on?

‍

Tomi:- Currently I am, I would say, like, I'm lucky to have joined a company, like, I guess in the very early stages or like in the very early chapter of the comp- I think we were barely thirty when I joined. And what that means is that I have worn multiple hats and across that life cycle, I think right now, like, growth is growing into a guess like a... balanced troupe, balance is not the term I'm looking for, but essentially going into a capacity where I'm able to mentor like upcoming designers in code, able to help people make the same journey I've made, but in a shorter time. Right? And I think another thing I'm also constantly trying to do- which I guess can be a blessing and a curse- is, with design, there's never really an end, always trying to- the other day I was on leave, and then I bought a course one day into my leave, because I was trying to just, hey let me go back into the basics of Java Script Canvas, just to play around with what that looks like. So I feel like it, a lot of that is, that's where my growth is like. Just trying to upscale, improving on my leadership skill and for myself also and for my team.

‍

Charli:- I love it. And then one final question for you, Tomi, is in your time at Paystack, what is either the project, or the impact, the outcome, that you are most proud of? And you've been there for like five years, so I know there's a lot to think through and pick from. But let's pick one thing.

‍

Tomi:- It has to be music. It has to be music, because it embodies all my values, if I'm being honest. Collaboration on check, literally 'cause it took a whole village to bring that to life. And then just being able to express myself creatively is a big for me, and Paystack music literally gave me the leeway to do that. And I guess also like effort is good, but it's great to see reward and like, Paystack music is perfect because the reward was, like, I mean like quantitative reward is nice, but like this was more of seeing, hearing people talk about this in hiring conversations or hearing people, I dunno say, "oh I was in this sales pitch and then this thing literally just was the over the line for me." So I guess yes, like definitely Paystack.com/music is definitely it.

‍

Charli:- No one will be surprised by that answer from the way you like lit up when you were talking about that earlier on in this episode. So yeah. It's been so great to hear about your work and learn about your process and the things that you consider in the design process. Everyone go check out paystack.com/music. Yeah, thanks for everything that you've shared, Tomi.

‍

Tomi:- All right, thank you so much, Charli. I really appreciate doing this.

‍

Well, I hope that after this episode, you are convinced that page performance and site speed needs to be a metric of success for the marketing site that you work on. And we really got a great crash course from Tomi about some of the factors that go into a speedy website. So, thank you Tomi. It's really clear to me that Tomi's knowledge of code goes hand in hand with his design skills and is a huge help in making design decisions that won't slow a website down, because he has that context of how it's gonna be coded, right? So I guess let's put that in the pro column for the old, "Should designers learn to code?" debate. You'll find links to follow Tomi and also check out the music project that we talked about in the show notes. And I'll say a huge thanks to WebFlow for supporting the show. Check it out for yourself using the link in the description and have a play around with their interaction timeline. Trust me, you're gonna love it. We are about halfway through the season now, and you can check out all of the episodes so far in both video and audio form at InsideMarketingDesign.com. And if you're enjoying this show, it would mean a lot to me if you wanted to head on over to Apple Podcasts and leave a review. Tell your friends about it too. You know what? While you're at it, let's share the marketing design love and I'll see you, and hopefully your friends, in the next episode. See you then.

‍