Well, I wanted to share this article with you, because recently I shared some pictures around how I revamped and redesigned my tips Auto portal in order to make it easier for my clients to understand how to access the information I was sharing with them, as well as Make sure that it was consistent with the rest of my branding and I’m telling you I got an overwhelming response of people who were really interested in how I did this.
What’s really appreciative of the style and things like that that I implemented with my depth, Auto rebrand, I figured I would create a article that would help you understand my process and some of the tips and tricks that I learned in order to ensure that everything was Consistent and well branded this article will help you understand how to not only design your dips, auto portal banners also associated emails, that you can use to share with your clients on how to use the depth auto portal and sections and graphics that can be used throughout Additional forms that you may have throughout your depth saddle site.
So let’s get started and hope you learn a lot. So the first thing we’re going to talk about is the file that way I use to generate my graphics. So what I use in order to generate my graphics was Photoshop. Now a lot of you may not have access to Photoshop or you have access to Photoshop and are still may be intimidated by using Photoshop, because it is a industry standard for graphic design and photo manipulation.
So if you don’t have Photoshop or if you don’t want to use Photoshop, then certainly you can use something like canva. You can use adobe spark. You can do use any of the online and mostly free resources to generate your graphics. But it’s important to understand kind of the sizing that I use, and I know a lot of people were had a lot of questions around what size were the different items and most of the sizing I got from reading.
Some of the support articles end up Sado. As well as some of the articles and Facebook live sessions that depsite will put out, so the portal banner should be 1800 by 200, so I have that here. So this is the portal banner. The mobile banner should be 760 by 200. The hero image for any of your form should be 2,000 by nine-thirty, and then the section dividers can be 2,000 by 110. Now go into that a little bit later about the section dividers and how I use those now.
The first thing, I will say is what I’m showing you the example that I’m showing you is one of our dub Sado members reached out to me and asked me about recreating a rebranding heard of Sado, and so her name is Lauren and she’s, with captivating calligraphy. Beautiful work, beautiful branding, and so in order for me to do this so quickly and efficiently, she had to provide me a few things, one of them being her brand guideline.
Thank goodness, she had a really strong, clear, cohesive brand guideline for her, which included her logos. Her colors her typography, and with that information and a few pictures and textures that she shared with me, I was able to come up with the following designs, so once I changed, the overlay get the sides overlays off of this. This is what I came up with for captivating calligraphy. Now I’m going to be referring to some of my notes as you can see.
So if you see me looking away not because I’m not paying attention to you, it’s because I’m you know wanting to make sure that I don’t miss anything. So basically what we did was created a client portal banner. This banner is going to go right at the top of the portal so that people know where they are so. It says welcome to your client portal and has her branding and some of the graphics that she shared with me as well as some of the graphics that I obtained from her social media or Instagram blogs.
Now they provide. They tell you to create a portal banner as well as a mobile banner. Now, one of the things that I will say about the portal banner versus the mobile banner is don’t try to squish every single thing in the portal banner for the desktop into your mobile banner. It should be a good kind of modification of it, but still consistent with your branding. So, as you can see you know, the picture of her is not on there, but you you try to make sure that you’re putting the most important most representative images in your mobile banner from a party standpoint versus trying to really fit everything from the desktop banner Into the mobile one, because you have clearly a lot less space, so then what you will do is also create a header or a hero image for your portal guideline, and so, when you’re sharing with your clients, hey you have this client portal.
You can access it anywhere, here’s the way to access it. Then you have this beautiful image up top so that it welcomes and invites your clients in and they understand they hate, you’re, very professional, very top-notch, and things are consistent with your branding. I also developed section dividers so that, as the different sections of your Deb Sato, information in your guideline are talked about.
There’s clear separation of them using these images and again consistent with her brand colors, her logos, her fonts and things like that. I was able to develop the dividers so that we can really separate the information out much more clearly. Also, you may wonder why the content and the imagery is only filling half of this available space and the rest of it. When you see these checker marks, that means it’s transparent, because when you import images into DEP Sado, it will default to filling the available space, a hundred percent.
So if I were to make this particular divider shorter, just to fit the content, when I imported it into DEP Sado, it would stretch it. It wouldn’t necessarily stretch it, but it would make it bigger, wouldn’t distorted, but it would stretch it to fill the 100 % width of the space and I would have to manually, go in and adjust the percentage that it took up and it may Center it and Things like that, which may not be things that are really intended, so I made sure that the size of the portal section dividers was 2,000, so it’s consistent with the size of the hero image.
Now you’ll see a lot better. What I’m talking about in this piece of it when we actually start filling out her client portal guide and we’ll be getting into that very soon? But basically, what you have are what I use is artboards. I use artboards very extensively because you can create different artboards of different sizes and one document and not have to worry about. You know creating completely different documents because you’re using different sizes, and so once I’ve created all of my images at the correct size.
All I have to do is go to file export artboards to files and then browse to the right folder that I want to put everything in you can export selected artboard, but if you want to just export everything you can uncheck this export. The artboard content only make sure it’s PNG if you were going to use something that went all the way across and was completely filled and there was no transparent pixels that you wanted to keep in the document.
Then you could use jpg and that would reduce the size of the file significantly because JPEGs are compressed files. But if you wanted to make sure that you have the transparency you’re going to have to do PNG so once all of these selections are made. Also, the prefix, you can add a prefix, you can just create something that says dubs and what will happen is when these files are exported. Your file name will be dubs, underscore portal banner dubs underscore mobile banner and that’s how it will be exported into whatever file folder that you wanted to use as your destination.
So that’s basically it you would hit and-run and then you would have all the files. You need to start updating your website or portal and associated forms. So now, let’s mosey on over to Deb silo where we can make the adjustments to the portal associated with the design we’ve just made. Now, when you first log into the dub sava, your dashboard may look a little different than this, but that depends on how you customize your account where we’re going to go.
First, is the gear icon for settings? If we’re going to go to Puerto and as you can see when I first logged in all of these, things were set up like this, and what I’ve done is made sure that I click hide. The welcome message, as well as hi logo and your portals, because the design that I created already has the logo and already has a welcome message embedded in it. So then, are you going to do I’m going to exit out of these from now and show you exactly what you need to do so for the portal banner here you have the general banner for desktop upload and we’re going to get the portal banner image.
You see that is 1800 by 200, which is recommended hit, choose then you’re going to get the mobile device banner. You choose that one okay. So then we have both the portal banner for desktop and for mobile here and we’ve hidden the welcome message and the logo. I’r going to go ahead and grab this link for the portal and hit save now what I also did to make sure that I can take a look at the portal banner in context before I send this to my clients, is I set up a test account Inside my projects and make sure that I could just log in with my email address, and so with this link, you can come over here and paste that link here and it’ll show your portal login before I actually put in my email address.
I’r going to go ahead and take a screenshot of this image and I’ll show you why, in a few minutes, okay, so that screenshot is available all right now, I’m going to put in my email address, I didn’t put a password associated with this test account. So I’m just going to hit login, and now you see portable banner is sits very nicely up here. Does it have an overlay of any welcome messages or additional logos, and you can see very clearly where everything is now, while I’m here, I’m also going to take a few more screenshots, because these screenshots are going to be useful when you’re developing your client portal guide.
So I’m going to take a screenshot of this homepage and of the documents page you emails page and the profile page. Okay. So again these are going to be useful a little bit later. So let’s go back to Deb Saito and now we have this information in the portal and people will once they come to their portal, will see that that new, updated graphics now we’re going to actually look into updating the client portal guide.
So you see, if there’s no client portal guy set up yet, but if you want to set one up and don’t want to have to do it from scratch, you can go to the template library and see that they have a client portal guide there as well. Now you see a laundry list of templates very helpful. I’ve looked through, several of them might be using more of these, and all you have to do is kind of filter it by quest questionnaire to make the list a little bit smaller and go all the way down to the bottom and you’ll see the client portal Guide here go ahead and preview it so that you can see kind of what you’re working with you see.
This big image is probably going to be appropriate for the larger image that we created in Photoshop, and here is where I wanted to bring your attention to the screenshots that we made. So currently. If you use the client portal guide as a template, as is it will have their branding in it, it’ll have kind of the way that their portal looks. If you want it to use your portals design, then you, those screenshots that we just took, will come in handy.
You can use some of their images and things like that. But generally I’m using my own images, you see here they have kind of like a article as well, and this is really just a gif animated gif that they incorporate it. You don’t have to do this. I did not use this animated gif for mine at all, but if you are going to, if you meet some guidance or to provide some guidance to your clients on how to upload things into the file uploader, then that’s exactly what you can use, but yeah everything Else here is pretty straightforward: alright, so then what you’re going to do is hit copy to account and that’s it.
You’ve got the client portal guide and then you got ta start adjusting this client portal guy to fit your needs. The text that is in bold is usually notes for you, the designer or the entrepreneur, to give guidance on how these sections can be used and very helpful. But what you definitely want to do is delete them before you actually send this to other people. So I am, I’ve read through this, make sure you read through it and get the information you need, but I just generally delete any of these because I’m not going to be providing that information to my clients.
I’ve got the home page, and so you see where it says, portal login here we’re going to delete that and we’re going to delete a lot of the headings. The first thing you’re going to want to do is actually take this image and you’re going to click on it and you’re going to actually upload all of these images from what we created into your image gallery. So we’re going to need this one. You know to need all of these where the section headers, okay and I believe, that’s it.
We took a picture of the portal login, the branded portal login. So I’m going to move that on over okay and I think that should be it from what we exported from what we export it from Photoshop, okay. So the first thing you’re going to make is this welcome guide? First, you got hit upload. All all of those are uploaded. You can go ahead and replace that hero image, the bearer image with the one that we create clothes, looks very nice.
Okay, I’m not going to be adjusting any of her copywriting. She will be doing that a little bit later, but what I will do is start adjusting the section headers and some of the screen shots. So this is the start of a new section and I am going to actually add an image block here. Click this and because this next section is just talking about the portal login. I want the portal login section here, so you kind of have to click through them, because it’s hard to see now before I put this in there actually I’ll show you what it looks like you see.
It fits very nicely in this space for the portal login. This is halfway across exactly what we wanted now, if I would have used what I mentioned before is making the size of the section headers without that extra transparent space. If I would have done that, I’m going to show you what it would look like. So when I created the portal login – and I just made it the size of the actual image – you see how large it is, it fits a hundred percent by default of the available space.
And if you don’t want that section header to be that big, you would have to adjust the width here to maybe take it down to 50 percent and then align it to the right in order for it to show up the way that you want it. Okay, but to avoid those extra clicks in those extra steps, I just created the portal login and any of the section headers with the empty, transparent space as part of the image, so that it’s actually sized the exact way that I want it to be sized and Then it fits perfectly where it needs to go.
I’r going to go ahead and change this to the branded one right. When I look at it, I still feel like it’s a little large for the space, so I’m going to go back into the image and maybe make it 80 % of the lid. I, like it being centered, that’s fine, and by default it is centered, and so now it looks like this. So again, the screenshots of the areas where you may screen shots in the portal would be added in these remaining spaces.
So we’ll just go to where my screenshots, our homepage, we’re going to do is click here. We’re going to drop all of these images in upload them all and we’re going to select this one to be the next one close. So this reflects what the client portal would look like once they logged in all right. This still seems a little bit big, I’m going to take this down to 60 % all right. I like that better all right there.
So again, you would continue on replacing images with images from your portal making sure that if you want to detail something, that’s in the Documents folder that there’s content in there too to detail. If you wanted to keep this again deleting any of the bolded text that are notes for you personally and adjusting everything like that, so that’s it! I’r not going to go through and do everything else, but you get the point which is replacing the images with your images is going to make your client portal guide.
Look very professional and brand it to you now. Once you have everything uploaded all the pictures and the screenshots that you need uploaded, we’re going to assume that I’ve done that. What I found is that I liked that when someone came to the client portal and was on the home page, but when they came to the home page, I like for the client portal guy to be one of the first things they saw now. Here’s a couple of things that I’ve noticed about deaf side.
1. If you do not have a field on a form, then once you act that form to a client’s job, then it will automatically be completed. It will automatically be a completed form because there’s nothing for them to fill out, nothing for them to do so. It would not appear on the Home tab, it would only appear in the documents, tab and it would be complete. I felt like that was a little bit confusing, because people are looking at these documents as if they need to do something or they don’t need to do something and if there’s a form somewhere in their portal that says incomplete, then they’re more likely to actually open It up read it and do something with it and if it says complete, then they’re probably not going to do anything.
So I make sure that I added a field here at the bottom, and I said I have read and understood the information provided yes or no. You can even make this a required field if you want to um, but you know, or you can leave it unrequired, but basically this allows that question to be asked and if that field is available, then there’s going to be a submit button and that’s my submit Button on my personal, dub, Sato account says I’ve read this.
You know something you know more of a call to action. Yes, I’ve read this or if you even want to do something as as far as if you select no, then I have additional questions all right, and so then they can say. Okay, I didn’t quite understand this. I didn’t quite understand that or my login is not working, etcetera whatever, but they will see that they can provide additional feedback on the client portal form if you want them to put that as a response in that field, I don’t have this online.
I just have the yes or no, and that allows the button for submission to show up, because otherwise it won’t and then it’ll be an incomplete form. That’s shown directly on the home page that they will be prompted to do something with, and they all have to go into the documents page in order to see it. Okay, so that takes care of developing your client portal form your client portal guide and your portal.
Graphics, all right, so that’s it! Now that you have your client portal guy created, then you can actually set up a page on your website for your clients to log into what you’ll need in order to start. This is the embed code from your client portal settings. So let me save this document, we’re actually saving clothes all right and then we’re going to go back to the settings we’re going to go to the portal and what you’re going to use is your embed code.
Now this embed code is very important. Most web hosting providers, whether you’re using Squarespace, Wix WordPress, I personally use WordPress, will allow some sort of space for you to add specialized code into your site so that this will show up. So, for example, if you go to captivating calligraphies page, this is her home page and you see in her menu there’s a client portal. When you click on that.
You see at her client portal log, okay and we’ve already got the image of the actual log in with her branding on it. So, armed with those two things, what you’re going to go do is go back to the up side, oh and you’re, going to go back to templates, we’re going to go to canned emails right and then what you’re going to do a new canned response. In the end, bro say: okay and then the subject is, if I use the same or you can call this client portal well phone a little bit shorter, and so here you’re going to say hello, client, name.
Cuz we’ve got smart fields, we don’t have to type everyone’s name out, hello. You may say hello. First name, you can put whatever content you want in here. I’r just going to type some sample text. But again you would create the email that you would want. Your clients to see you you and what you’re going to do is add a linked all right and you, as you know, when you have links form Ling’s, then there will be a color-coded button that they can use, and then you can also say you can also Log in to your portal, using the say from my website as indicated below all right, then you can take the image drop.
This image. Okay, you’re, definitely going to make it bigger right so that people can see it. You have questions. So, of course you would. You know copyright this in a way, that’s more engaging to your clientele more than I did and I’ll do some more work on hers as well. So don’t think that she’s going to be left with this text, but basically, what you’re going to do is say that so now you have a wonderful email with an image on how to log into your client portal and what people will find once they log in You also want to do this if you are setting up passwords and their password protected for the for the portal, you want to make sure that you add the password here.
So the link to the portal is one thing, but you also want to add. The link to the past are the information for the password to access so the portal password. So that’s it. That’s the template for your canned email. Well, I hope you enjoy spending this time with me going through how to update your client portal. I know it seemed like a long process, but hopefully it’s pretty clear of many of the tips and tricks that I use to make sure that my client portal and associated documents looked great.
So if you really enjoyed the article but felt like I don’t want to do this, I want you to do it. Then I am available to help you redesign your client portal right now. I am offering an introductory rate for people who want to hire me to redesign their client portal redesign their canned emails and provide them templates for additional forms, as well as create the client portal guide for you, I’m available for that for two hundred and seventy-five dollars.
I have a link here to my website and the product page for that service and if you are interested and purchasing that, then I’m available. I hope to hear from you soon and I thank you for spending this time.