Design Secrets - Modern Investment Dashboard & Embedding

yes I can awesome so I'll go ahead and kick it off with with the demo for today so today we are discussing the design secrets behind the investment suite dashboard that we created a few weeks ago now one of the things that I'm also going to touch on with this dashboard is how we embedded it into our custom portal alright so a quick walkthrough of the of the dashboard so here's the the investment dashboard that we'll be covering today this dashboard displays performance information for for various portfolio and holding information alrighty so you have a top your bands you have your trend for your network you have breakouts bioregions allocations and sectors and then you have some additional trend information and some KPI information so your day to day change weeks a day months add a quarter today and then you also have a breakout the bars represent whatever a metric is selected here so we can switch between a series of metrics oh it's neat about this dashboard is that you can also navigate to another dashboard you know all while staying in the same type of workbook so top if you wanted to change from looking at the investment performance to looking at an investment comparison where you can select two different stickers to compare and here's the dashboard that allows you to do that all right so those are the dashboards that we're going to walk through today all right so the focus point of our session today is one to show you how we've been bedded this dashboard into a custom portal and some of the things and items that go into a custom portal and then show for the in terms of the development of the dashboard I'm going to show you how to create these modern backgrounds and figma and then how you design to it inside below alrighty so first let's talk about the requirements for the dashboards so there are two dashboards the investment performance in the investment comparison dashboard the investment performance dashboard we wanted to do is display the performance from your portfolio and by the holding levels this dashboard will also show the asset allocation exposures area dividend you of the expense ratio and common investment risk statistics the investment comparison dashboard is going to compare two mutual fund holdings using important statistical risk and return characteristics right so the one that we're going to focus on today is actually the investment performance one but creating the investment comparison one I'll show you how easy tricks are to create that once you have the the background of the investment performance one created all right so creating the template if you all have been following our design secrets there are a few things that we lay out first you want to gather requirements second you want to create a template third you want to starts to incorporate some some some design characteristics like colors icons and incorporating differents so the one that we're going to focus on today is creating a template right so the template that we're going to design is a modern template that is within the background of our tableau dashboard so we're creating these modern designs there are a few things that you want to keep in mind first I typically like to start with an example in mind second you want to make sure that you are using enough white space so with inside below when you're you know building dashboards and you're using the house functionality if you don't have a lot of padding in between your dashboards your items can really look cluttered right so one thing you want to focus on for a modern design dashboard is you want to incorporate a lot of white space in and let your your base have room to breathe third you want to design to a grid and this isn't just for a modern design dashboards for all dashboards in general you you typically want to make sure that your design is to a grid and use for in visual hierarchy to layout your dashboards for you want to incorporate a drop shadows and I'll explain exactly what drop shadows are you want to also have rounded corners and then last but not least you want to also incorporate large bands so the example that I have in mind is actually not a modern dashboard we have a great guy on our team Zack who spends a good number of years within the financial industry and he's also an amazing coder and tableau developer and he created this dashboard based off of the financial data that he was able to pull right so we're starting with this example in mind knowing that we're not actually creating this dashboard from scratch but more so enhancing the dashboard that is that one you created right so a lot of the elements that are on here we're going to make sure that we incorporate them in our modern dashboard once we start to build out our template overall I think this contains the structure of what we want to accomplish we're just going to move some elements around and make it breathe a little bit more all right so to do that I'm going to create the template in figma figma if you aren't familiar with it it is a free design tool a lot of web developers and app developers use it to create interactive templates and and wireframes I particularly use it to create templates that I place in the back of tableau dashboards it's free to use you can export for free I have a free account and everything that I needed to do has been free I haven't upgraded my account so figma calm is what we'll be focusing on today in terms of creating this template all right so let's go to figma all right so coming into figma the first thing that you'll see is typically a blank screen right and the first thing that I do whenever I come into figma is I first add in page add in a page so I like to create several pages within my my template right so it's add a page you simply just press the plus icon here I'm already starting with page one and the first thing that we want to do for the background of our template is we want to ensure that we are creating the rectangle or the size of the dashboard right so you know when you're creating a dashboard inside below it's typically some form of a rectangle that you're adjusting to a custom size so here the first thing we want to do is go ahead and create that Simplot so I simply selected the drop-down icon that has the shapes that I can import incidence of figma and I selected a rectangle from there we have this this nice rectangle that I just created by dragging and dropping and then adjusting the corners what you can do on the right-hand side is use the toolbar to adjust the the width and the height according to preference so for this dashboard I want to size the width of it as 1250 and hide a bit as 1500 right I also want to color the background and the background of this dashboard is going to be a light gray so f1f1f1 there we have it so that's the background of our dashboard now step two of this is that we want to incorporate our header so I'm gonna start to build out the various aspects of a dashboard and typically I start by building out the header and then incorporating the various body components of it so the first thing I'll do is go ahead and select a new container a new rectangle so I'll drag that rectangle in and I'll create a title area now remember when I went through some of the pointers for a a modern dashboard on modern simply we talked about rounded corners so here I want to make sure I'm rounding the corners of this rectangle to do that on the right hand side you can adjust the corner radius the default is always zero but we can go ahead and take that up to ten next I want to color this this this header right here so the the color that I want this headers to be is that that dark blue that you all saw so the dark blue is zero six three six six eight and there we have it and last but not least I want to add a drop shadow so a drop shadow is literally kind of what it says it allows your your objects that you place on your dashboard sets have some form of a shadow compared to the background so right now it has like a very flat design you see the the blue on top of this gray but if you wanted to give the blue somewhat of a shadow in terms of laying on top of this gray background so add a drop shadow a default drop shadow and pigma you simply select effects and the default is a drop shadow and I'm leaving all of the components the same here for this drop shadow and as you can see now we have a drop shadow along the X and y-axis of this particular rectangle so that's step two adding our header next we want to design the body of our of our dashboard so here is where I'm going to add in one more rectangle and I'll start to incorporate the body of our dashboard so this is where I'm planning to place the band area I'm going to change the fill of this to white which is 6x want to make sure that we incorporate that radius again of 10 and that we have a drop shadow right so really simple and then if you drag it left to right on the left hand side you see those left those red tickers that appear that's just to let me know that it's aligning with the element that's above it all right so this is going to be our band area and instead of dragging you another rectangle I'm simply going to just select this rectangle hold ctrl C command C on a Mac and then paste it so now I have two rectangles next to each other and I can size this one accordingly and I'll do the same thing to build out the rest of the body of the dashboard this one it'd be in the middle and this one on the edge already so now we've built in the various components of our dashboard and thanks to note that we've done here as I was creating this is I've incorporated a good bit of white space right so whenever I'm dividing sections up eclis try to incorporate a good bit of white space in between various elements these are probably a little too close so we can drag it to the left a little the width here is 355 so we can say 355 and 355 all right so you want to make sure that you have this this white space in between the various elements and then you want to make sure you have like the drop shadows and now everything is just clean and roomy on the dashboard and I think that's really the key to it's a modern dashboard very minimal very roomy a lot of white space components are stacked on top of each other all right so we have that we have our body or here you down so now we duplicated everything and you saw what the final design was so now we want to go ahead and add some images to this right so on the investment dashboard I've incorporated some some header images just to add some aesthetics to this banner up top so to add an image within pigma you simply select the the drop-down up top and you select place image now the image that I want to incorporate is going to be one for the left side of the banner and one for the right side so I'll go ahead and start with the left side when you bring it in be careful not to drop it on your actual template right if you drop it on your actual template what it's going to do is try to take this image and fill that component that you selected so I typically just try to drop it on an area that's that's not selected or nowhere near my template and there we have it right so we drop that in and now you can change the the size of it so I'll go ahead and drag this in line it up with the banner adjust the size of it I did a 225 124 alright next we want to do the same thing for the next side place image and you can actually bring them both in at the same time I might just chose to do it separate already pretty sure this me 194 for those of you who are following 225 194 225 194 we're gonna line it up perfectly with the corner and there we have it right so the next step here is we want to add in our rectangles for the navigation button so you saw that the dashboard allowed you to navigate from the investment performance one right so the investment comparison one so now we want to build in those navigation buttons right so to do that I'm going to add in another rectangle up to the top this rectangle the first one I'm going to change the color to white going around the corner it's a 10 and size it 205 37 drag it down just a little bit all right and I also add in drop shadow now instead of dragging in another rectangle I'm simply gonna hold ctrl and copy it go line it up perfectly and now this second one we want it to be blue right so the reason that we have one rectangle is white and the other has blue is because the white one is going to to signify that this is the selection this is the dashboard everyone and the blue one is going to signify the other option that you can go ahead and jump to so whichever dashboard we home like that button so that's essentially be be white so this one I'll go ahead and fade it to blue the blue that we'll use to 6507 see there we go so enough that you know it doesn't blend so much in the background and it sticks out enough so that your users still see the options to select it boom there we have it alright so next we want to go ahead and finalize our header here to me there's a lot of white space in between these two buttons so what I'm going to do is I'm going to add in a line as well as some circles just to accentuate and you know adds on some more visual effects to this to this header so it's adding a line you simply select your drop-down and you select line and I'll go ahead and drag a line from the left one to the right one we're going to change the color of the line to the same blue here so that's the two 6507 see and then I also increase the stroke of the line or the weight of the line I'll take that actually up to two and I'm going to send the line to the back or bring these elements forward by right-clicking on them and saying brings the front right clicking on this one and saying brain's affront alright so next I want to incorporate some of those circles that you all saw to do that that's another shape I'm gonna drag that in you create the circles so here we have the first circle we want these circles to be small we don't want them to take up too much of the dashboard so before I drag them down here I'm gonna go ahead and change the width and the height of it to 15 15 and I also change the color of it to the blue that we've been using and I'll add in the effects so here we have our first circle I'm going to line it up perfectly right on top of the line take our second circle instead of creating one from scratch I'm simply just going to click on it ctrl C copy ctrl V to paste circle to and encircled three and now I can hold shift highlight all of them and drag them so the sensor of the dashboard and there we have it right so now the next thing we want to do now that we have our circles and we have our our lines and everything is pretty much checked out I think this is you know good a good start here just want to double check everything export it and then duplicate it right so with the final versions end up looking like are you have your investment performance on here all right and then you have your investment compare someone here and the difference between the two of these since I just did a copy and paste is that our investment comparison one we want the right rectangle to be white and we want the left one to be blue so we can actually switch these around like that I believe I did it on the wrong one but you all get the case there alrighty so next we're going to go ahead and export these images right so I'm actually going to do this one correctly with these so here negative 545 there we go for the white one 149 perfect now sex with the background images simply click on the the white space of your template and on the right hand side you're going to see an export so if you select export finance demo you're gonna see all of the various elements that make up this template deselect everything except for the main one which is typically your first one and select export and now it's downloaded to our computer and we can go ahead and switch over to tableau alright so first up when you are creating a dashboard inside blow when you're using the figma template as your background image you first want to go ahead and create a new dashboard and size the dashboard to the same size as the figma template so the width of ours was 1250 and the Hyatt was 1500 and now you can drag in an image place it on top of the dashboard as a child object choose the download of the element that you just downloaded choose the picture for it you want to fit it and you also want to censor it and there you have it other things that I typically do have remove the padding on this so that it could you could fill the entire background and I also change the background color to match the background color of my figma template so you still see that white border on the on the very outside of the the tobblo dashboard so to get it all to blend I'm simply just going to format the dashboard and change the dashboard shading select more colors pick the screen color and then let it blend and now it all blends so that's step one step two you want to add your worksheets right so I'll go up gone ahead and I've placed in the the ban worksheet what's adding your worksheets I'm pretty sure that you all are very familiar I hope that you all are very familiar at this point with you know dragging elements onto the the dashboard the only thing I'll note here is that everything has to be floating because you can't have your background image or a figma background image like this and then have child elements on here so I've gone ahead and place the the band's here we can add in the the net worth floating line chart here we can then also add in the additional charts here change the fit of it since our view I'm sorry of you and then the sectors one thing I'll note here has I dragged the sector's in is that regions and allocations they have very similar amounts of data of members right so there are four regions and there are about five allocations very similar s whereas sectors has a lot more so what I do not want to do is do an entire view here because this just makes the bars very tiny when trying to fit all of this into the screen and I try to typically keep bar sizes the same on a chart whenever I'm creating anything and this just defeats the purpose this sector chart so if I'm ever running into this issue typically what I do is I fit with this chart and then I size the row header the height of the row very similar to that of the other charts so here instead of having you know that that entire viewing and things are squished and as you see information technology doesn't even wrap I'm just going to go ahead and let let the chart breathe typically when users are reading this they're consuming probably like the top five and then they have the ability to scroll down I typically don't think that you need to show a million bars at at one time right especially if the other bars on your chart are a larger width so we've gone ahead and we've placed those various elements on the dashboard and once you have all of that on there you'll then see your dashboard look like this what I want to call out with this dashboard right is sometimes when you're designing and you're trying to put objects together and make them seem like they have somewhat of a flow on a dashboard even though they're separate worksheets it just doesn't seem to work right so this date today week today month today these are individual worksheets that's how's that designed oh man as you know as the designer who's just editing this dashboard I didn't want to go in and place everything and so the same same worksheet I was trying to minimize the amount of development work that I had to do personally what you see here is that and when you do that and you bring these worksheets in separately you get like these breaks on the line right so a neat trick for that is to remove the padding so for each of these elements whenever you drag an object and since I blow it comes with 4 4 or 4 pixels of padding on that on the outside so what you can do here is remove all of the padding for everything and it'll start to align for this one we actually have to increase the height of this just a little bit to get it to match up but once you do that you'll then see your elements start to align perfectly all right you'll do that for everything and you'll start to see everything connect instead of being broken up like this and yes it does take a little bit of fudging you know to get this charts aligning with the rest of them but adjusting the inter patterning and the outer padding is what's going to allow you to connect multiple sheets together and look as though they have like a unique flow to them like they're all a part of the same worksheet and that's how I was able to accomplish that here all right and you see the final version of it looks like this last but not least I've gone ahead and added in the dashboard title as well as a description for it and now I want to builds in the navigation for it to do that I'm going to drag in a nav object drop it here I'm going to edit the button by clicking more options selecting edit button I'm going to tell it what to navigate to and we wanted to navigate to investment comparison and I'm going to change the button style instead of it being an image to text the textile place here is the name of the dashboard so this one will say investment comparison and the background color for it is going to be this blue excuse me not the background color of it the font color of it is going to be those people with black for right now alrighty press ok and now you can size it accordingly drop this down just a little bit there we go it's actually supposed to go on this side edit the font of this to be white there we go perfect and now for this one on the left hand side we actually don't need a navigation button we can just incorporate the text investment performance and that's what we will have is blue you could then use the layout pane to just make sure that these both align right and then from there you just duplicate your dashboard and here's what your final versions will look like for those of you who are wondering about the image and the PDF export buttons with version 2020 and forward you can now have export objects on your dashboard right so these aren't anything special that I've incorporated outside below did all the hard work behind the scenes and now you can drag in an expert object onto the canvas and specify exactly the which the the file that you want to export it to as well as the button style so all I did here was change these two images and then locate those images on my computer which were right here image and the PDF so that's what those are and there you have that all right so now we will talk about the embedding part of this right so we've created all of this and what we want to do is we want to share this dashboard with our end users but our end users are very nuisance I blow their executives who are used to looking at financial numbers but aren't necessarily you know used to navigating a tableau server or any type of tableau environment so we want to create a way for our end users to go into a custom portal that looks very similar to a website because I'm very sure that a lot of us have worked with or used web sites so let's go ahead and navigate back to uh it's a PowerPoint and I'll show you exactly what the the portal looks like so by default the portal allows you to sign in and you can use a single sign-on with your with your credentials that are associated with your organization so you can incorporate that into your portal so here I'm putting in or inputting the username and the password for our portal and I select login and the way that our developer created this is that the default for our portal is the analytics tab here we also have a home button which just provides more information about the portal itself then we also have documents that our users can go through so it's like a one-stop shop for our finance folks they can look at financial financial contract they can look at an investment report and whenever they select any of these these links it'll take them to the dashboard right or the Dropbox link that that contains that information and then they can go ahead and go back to the to the dashboard or its excuse me to the portal alright so what are some of the benefits of having a portal right so I broke it down into six areas when you can customize the front end of the portal so the demo that I just showed you and I'll walk more more in detail in a second the portal that I just showed you we've customized we're fully customized the front end of it it doesn't look like a standards habló server and for those of you who are not familiar with what it's how both server looks like here is an example of a tableau server right you come into it this is our lovely x1 and you come into the server you have your recent store recommendations and typically users who are new to tableau this can be a little overwhelming for them right you can't customize the look and feel of this too much because it's the out-of-the-box solution which have low I love it given the fact that you know I've been using tableau for many years now but sometimes when you're just starting your users out you know this may be overwhelming for them and you can't customize it too much so I love the tableau server environment however we we use embedded analytics as as a way to enhance the components of a tableau server so one of the benefits of of the of a custom portal is that you can customize the front-end look and feel of it you saw that there were a lot of tiles on the table whereas we've only allowed the users to have four tabs to navigate between with that you can engage your users rather quickly our default was the analytics page so they're automatically drawn to the the dashboard as soon as they as soon as they open the portal login to the portal and with that you know with a customized front-end and the ability to engage your users quickly you can just automatically see an increase in user adoption I've spent a lot of time in corporate America and you know some of these organizations that I've worked for I came into the organization they were still stuck in Excel and we were transitioning everything sets habló and what you'll notice is that sometimes the environment can be a little overwhelming as I mentioned before and that could potentially hurt your user adoption so with your users being you know familiar with that website look and feel you can just expect that user adoption would increase you know slightly or even drastically with having a customized portal as I mentioned it looks just like a website right because it is it has I'll show you the components behind it so it looks just like a website and users are very familiar with a website looking field you can provide users with additional resources right on the portal without having to navigate anywhere else so if I were to send my user is a link to the tableau server right and not the portal and they wanted to view those documents I'd have to send them another link to view those Dropbox documents that you just saw when the documents tab whereas within the portal everything is right there on the left hand side let me go back to the portal right everything is right here on the side they're not navigating to its additional websites or URLs and last but not least you can integrate portal authentication on the same as you have user authentication with your tableau server alright what are some things you need in order to build out your server let's what do you actually need for it so I broken it down into three areas develop host and customize so obviously you saw that we developed our dashboards in tableau creator now you can use your tableau online environment your tableau server environment if you have an explorer license but you basically just need to be able to create your dashboards right your portal cannot create those dashboards for you there next you need a place to host your dashboard typically you would host your dashboard on your tableau server because you have to allow your portal to pick up the dashboard so the investment dashboard we are hosting it on our tableau public site and I'll show you why we're hosting an our tableau public site and why it doesn't matter if you hosted here if you host it on you know your tableau server the reason where we just want to make sure we're hosting our dashboard on a table low environment so that we can get this embed code and this embed code is what we need in order to embed it in our in our portal you can get an embed code from your tableau public account and you can also get one from a server if it's proprietary information you know you don't want to share it with the world which is how will public anything you upload you're sharing it with the world then you want to make sure that your hosting environment for your dashboard is obviously your tableau server from there you also want to make sure you have a web server your custom portal has a unique or URL to it as you saw the the URL for our embedded analytics dashboard her framework is love Linux finance comm right so you want to make sure that you have a web server to host your website and next in terms of customizing the actual portal itself there are three things you need you need to know HTML and that's gonna help you build out the web page itself and its various elements javascript is what you're going to need for the functionality of the dashboard so when you're clicking on things when I click on logout what is the logout doing I had but and what is the the print doing so that's the JavaScript that's the the functionality of it and then last but not least to customize the look and feel of it you need to CSS so that's like your colors your as you see your drop shadows things like that so you need CSS to do all of that and once you have all of those components right you can host your dashboard within a custom portal as you see here and you have a one-stop shop for your users to navigate without having to go to the tableau server with that you'll probably see increased user adoption less questions you can even have a contact us button here Jake is on my team so I know that I logged in and you see Jake's face hello Jake is a wonderful trainer and silo developer oh I see so this is what a custom portal looks like and you still have the same navigation as you would on the tableau server so for those of you are wondering if you can click you know from dashboard to dashboard within the portal absolutely it's the same elements and as you can see here you have the the tableau logo down below just to let you know like this is be embedded the embed code that's hosting this you can also expand it and collapse it so all of the same elements there alright and with that we've gone ahead and we've covered two main things today one we we've talked about embedding dashboards in a custom portal and then last but not least we've covered creating templates and figma and designing within tableau with that I am essentially Jaganath the webinar was recorded today sorry for the technical difficulties Mike and I will be sure to crop that out we'll be hosting the the recap or the recording the recording of this on design secrets for a non designer calm on the site you can also just go to it really quickly you can also look at some of our pre district ordains is our series that we've been doing on how to you know just create better dashboards and top glow what are some of the secrets that that we take into account they're not secrets anymore but obviously what are some of the things and the secret stuff that we take into account I love lyrics when we're trading some of these amazing dashboards and the team and I are really diving in so go ahead and check out this site and watch some of our previous recordings and be on the lookout for it for some future ones with that Mike I'll turn it over to you definitely so we have just a couple of quick questions today and of course right if anyone has questions later on by all means feel free to email me here's a design one for you chantilly so at the end user or the client wants a mobile version and a desktop version do you just repeat your steps and make sure to format for mobile any other things to keep in mind there yes so typically when I am designing for for mobile I do not use the figma background right so everything is floating when you when you use a figma background template however I keep those same modern principles in mind even when I'm designing for for mobile essentially you want to just make sure that your your dashboard is tiled so that when your user is on a mobile device the elements are expanding so with child elements they expand you can kind of see what the formatting that and formatting is going to look like with it so so that's just my recommendation from her from a design perspective when you're designing for for mobile I do not recommend using the figma background but keep those same modern design principles in mind and essentially just try to mimic that you know with with the tile design it's you can accomplish it and at some point we'll do a series on it but just keep those things in mind and then remind us of the website you used to get icons o flat icon com it's free flex icon com it's it's free free - free to download you can search hundreds of thousands of icons free to download as long as you create a free account you can edit the colors of your icons and then the premium version is also pretty good and I think it's a hundred dollars a year cool I think that's it for today so again appreciate everyone's time jumping on today and of course thanks for working through the technical difficulties we will make sure to send out the recording afterwards and look forward to seeing you all again thank you very much thank you you

Channel: Lovelytics

Views: 5,216

Rating: 4.9642859 out of 5

Keywords: Lovelytics, Data, Tableau, Business, Intelligence, Viz, Visualizations

Id: YuEj9ODovUg

Length: 44min 54sec (2694 seconds)

Published: Wed May 27 2020