# Refactoring UI: WSS Channel: Steve Schoger Video: https://www.youtube.com/watch?v=ZJj7uNdzPpM Duration: 15 min Language: English Words: 2934 Transcript page: https://viewrankai.com/tools/youtube-transcript/ZJj7uNdzPpM --- [0:00] hey guys welcome back to another edition of refactoring UI today we're gonna be taking a look at a submission from jonathan Hillis jonathan is the marketing director at we speak student comm which is a program that provides health benefits to students across Canada and he wanted help with the plan details page that lists all of the coverage options available to the students so we're gonna see what we can do to clean this up and make it look more professional so let's get right into it now the first thing I want to talk about is the scroll jacking on this page scroll jacking is when a site [0:30] manipulates the scrollbar to behave differently in this case using fixed scroll points now scroll jacking is a bit of a controversial subject and although it might work nicely on a marketing page as it introduces a cool factor it's not really practical on a page like this so we're gonna remove that additionally the fixed scroll points on this take you to each section within the plain details in the current design you can either scroll to each section or use the tabs at the top of each page this can be a bit jarring and unexpected mainly because the tabs have usually toggled the view this interaction is also creating this awkward scrollbar [1:00] within the table because it has a fixed height so it fits within the viewport so what we're gonna do is consolidate these and remove the max height so everything including the header is on one page that's easy to scroll and move around on okay now that that's out of the way we have our starting point that I've redrawn in the sketch now the first thing we're gonna take a look at is the background campus photos right now they're a bit overwhelming and distracting especially on the plan details chart so we're gonna go ahead and remove it from that section but we want to keep the photo on the header as [1:30] it adds a bit of personality to the page and I think it's sort of nice to show the school of the page you're on but we want to give it a bit of a treatment so the foreground elements have a higher contrast against it so one thing I like to do when working with background folders like this is to desaturate them and overlay a bold color using the multiply blending mode in this case I'm going to use the school's primary color red now normally I would apply this treatment in the graphical editing software as you can see me doing here in sketch and then export it but you can [1:59] also achieve this with CSS I made a coat pen of this and provided the link in the description so you can check that out now because we no longer have the scroll jackin between the header and the plan details I'm just gonna tighten things up a bit and this is nice because it pushes the tabs above the fold because we did that this colorful navigation on the right is a bit repetitive in unnecessary so let's go ahead and remove it as it's taking focus away from some of the other items in the header okay let's take a look at the hierarchy so right now the page [2:29] title is tucked away in the top right corner and the company logo is down here with all the other items which seems reversed since the company is a parent to the school selection so we're gonna restructure these so the logo is in the top bar and the page title is below it but before we do that we're going to make the top bar white and invert the other items since the logo only really works well on a white background and we're just gonna add the page title here making it large and clear with 30 pixel text and we're just gonna continue to tighten things up as we work here okay [3:02] let's take a closer look at these cards with the gray shim if you take a closer look at these cards you'll see that they fit into two groupings the opt-in and opt-out options and the Quick Links that navigate to the sections you can find in your space and it's important to distinguish the two because one is far more important than the other which is the opt-in and opt-out options as these are counting down the days until you can make any changes in fact these are so important that on the current design you can see them on every page when you scroll on the bottom right corner so [3:30] we're gonna rearrange these in such a way that puts emphasis on the opt-in and opt-out options but also position them so they can remain on the viewport as the user Scrolls so it can always be taken in at a glance in order to do that we're gonna consolidate this section by giving it a single dark shim in this case I'm going to use black with the opacity reduced to 60% and create two rows within it the first row is going to be all the Quick Links and we're gonna de-emphasize them by removing the icons and making them regular style smaller text and the second row separated by a [4:03] border is going to be for the opt-in and opt-out options and this row is going to be a bit taller to support both the label and the amount of days left and this alone does the job at putting emphasis on these options but in addition to that too high these items a bit more we're not going to remove the icons now here's a quick tip when working with icon sets like this icons like these with not an incredible amount of detail are designed for smaller uses like in-app experiences not blown up for larger sizes so instead of blowing these size up as you see here we're going to keep them the regular [4:36] size and contain them within a circle to make them feel bigger we're also going to update the icons currently this site is using font awesome which is a great set but probably the most adopted set by developers so we're gonna try something a little more unique I'm gonna use my go to set Horicon GUI which you can get for free on my website steve sugar comm other great alternatives are in typo or Zonda cons you can find the links for those in the description of this video okay moving on now these often opt-out options are both status indicators and links but they don't really look clickable right now so [5:15] we're gonna add an arrow icon to the right to make them look a little bit more like clickable targets and all of these changes make up quite a huge impact because not only does it make this information much more scannable but it also makes it much more condensed moving our plan details away above the fold eliminating heavy scrolling and now that we have this global status indicator that Scrolls through the page we can remove them from the bottom right additionally we can now remove the chat bar on the left side and keep it static on the right like it is in the header on the current design okay before we move [5:48] on I just want to take a look at the top navigation earlier we identified that the placement of the logo and the page title was a bit confusing so we flipped them but in addition to the placement of the logo and page title being a bit confusing this top navigation is having a similar problem as the plan details and your space links are actually children to the school selection but because they're above our page title on the same row as a company logo they feel like they're global links so we're gonna move the plan details so it is included in the first row navigation and as for [6:22] this your space link we're going to remove that all together because these quick links already take you to that page these are just more popular affections and since this navigation currently doesn't contain all the items on this page we're going to add a more button that will be a drop-down to quickly get to those other sections let's move on to the plan details now when I remove the background canvas photo earlier it also took away the boundaries of this chart because the chart background had a white shim and the boundaries were nice for keeping this busy table contained so we're gonna make the background off-white and give [6:56] the chart a subtle box shadow to reintroduce the boundaries okay let's talk about these tabs currently the rainbow of colors make it hard to tell what tab is currently selected so we're only going to show the tab on the selected item and the bulk color draws a little too much attention taking focus away from the chart but Jonathan did mention to me that he likes the way the colors add a touch of playfulness that speaks to the target audience so we're going to make it just a small hint at the top of the selected tab let's organize this chart now first let's remove this help text as it's [7:31] irrelevant now that we've removed the fixed height we're also going to reduce the size of the titles as they're a bit excessive the goal of this chart is to make it easy for students to scan and compare plans but at the moment it's a bit tricky to scan for a few reasons one is that the comparable plan details are not guaranteed to line up on some of these views each column is independent so when a larger point wraps on one column it doesn't on the others and it may throw everything off so to fix that we're going to make this chart into a table with borders giving each point its [8:07] own cell and unlike the current design we're going to give everything much more room to breathe by introducing liberal padding on the table rows in this case one cell has a height of about 60 pixels okay so that helps a bit but this is still looking pretty busy because there's just so much text on these points and that's mainly because each value includes a label beside it this is also repetitive because every column being compared includes the same label this is a common mistake I see on pricing sections of websites so instead of repeating the label in every column we're going to add an additional column [8:42] to house the label enabling us to remove it from each point but before we do that we need to figure out what we can do with the column containing these section titles as it's currently interfering so what we're gonna do is create another role for these titles and to make it clear that these are section titles we're going to void the horizontal borders and give it a settled gray background and just for a little more distinction we're not going to make them as tall and now it can use this column for all of the labels finally I'm going to reduce the font size and the max width of this [9:18] table so it shares the same width as the header section now it's not immediately clear how you select the plan it turns out that you need to click this opt-in button and it will show this same view in an overlay which seems a bit repetitive so we're going to include the plan selection in this view at the top okay last but not least let's talk about the font the font currently being used is lato which is a great Google font but we want to find one that is not as widely used and use one that we can attach better to the brand so let's take a closer look at the logo here as you [9:56] can see it has a bit of a playful look with its slightly rounded edges and all the colors being used so we want to try and find a font that shares a similar personality but still very clean and legible so let's head over to Typekit and narrow down our results using these sidebar options when I'm looking for a good UI font I always start by selecting a sans serif font that's suitable for paragraphs nothing too heavy or too thick and nothing too narrow or too wide now I read somewhere that a large X height is more legible on screen so we're gonna select that and I like to [10:31] use somewhat geometric shapes and these properties give us a nice small set of pretty good options so let's find something with the playful personality we're looking for now a favorite font of mine that has some of these characteristics is Museo sans it's playful but still manages to look professional and has a ton of different weights so let's apply that to the design now fonts are not necessarily transferable so we're going to have to adjust the size and weights a bit I know museo sans tends to be a bit heavier than most fonts so we're going to make a few adjustments and that pretty much wraps everything up okay [11:12] now a few people have asked me to address mobile in these videos and because the target audience for this application is students I felt it would be a great place to start so I'm just going to share a few opinions on the subject and how I would make this is unresponsive now there's no one-size-fits-all way of doing this so we're going to consider a few options and weigh them against each other okay so for the header I decided to move the about us in social links to the bottom of the page students who come to this page are far more interested in the plan details liyan learning about the company [11:45] and its social media presence it's OK on the desktop view because we have the real estate but on mobile is just unnecessary and to keep the page header condensed I put the page navigation in a expand collapse menu and restructure these status indicators so that the text is below the icons like on the current design let's make our way to the table down so for the top tabs we could either contain all the options in a drop-down or make each section in accordion both have their pros and cons a drop-down keeps things nice and condensed but accordions are easier to use in this case I think the accordion makes a bit [12:24] more sense as the tables are quite long on mobile and it might be frustrating to continually scroll back up to the top now let's look at the table view tables are really tricky on mobile we're definitely not going to be able to fit everything in a single view so our goal is less about making it scannable and more about being able to move around efficiently now I did some digging around and found a few examples with similar cable treatments for example Shopify pricing page uses tabs at the top to change the views but for our example I felt it would interfere with the current tabs making it confusing [12:59] another option is slacks pricing page they use the approach of stacking every column but I thought that would lead to excessive scrolling for this example because there's just so many plan details so I thought for this site as boring as this solution maybe is to just give the table horizontal scrolling this is actually what the bootstrap framework tables do by default now when implementing a solution like this try to provide hints that you can scroll horizontally you can do this by fading the text a bit or cutting it off at an ideal spot now I think this is off to a good start but this is something I would [13:35] probably want to build a prototype of just to see how it feels when using it now I want to bring up one more option that some people may find a little bit controversial geoffery way recently tweeted sometimes I visit a website on my phone that hasn't been optimized visually for mobile it's a zoomed-out desktop view and I think to myself yeah I actually prefer this and I couldn't agree more again it's important to consider a variety of options and pick the one that works best for your design problem and that pretty much covers everything so let's compare our new design with the one we started with [14:07] [Music] [14:20] now if you enjoyed the tips in this video be sure to check out my Twitter page at Steve shoulder where I regularly share practical tips that you can apply to your own design and if you want to see these sketch files to the design in the video I've included a link to download the sketch files in the description and if you enjoyed this video and want to receive updates when more content like this is published be sure to sign up at refactoring you i.com [Music] --- About this transcript Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com). ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts. Free transcript tools, no account needed: https://viewrankai.com/tools How to read any video this way: https://viewrankai.com/llms.txt