# Refactoring UI: Resolute

Channel: Steve Schoger
Video: https://www.youtube.com/watch?v=BMHUKij1yUE
Duration: 17 min
Language: English
Words: 3441
Transcript page: https://viewrankai.com/tools/youtube-transcript/BMHUKij1yUE

---

[0:00] hey guys welcome back to another edition of refactoring UI today we're gonna be taking a look at a submission from Aaron Francis Aaron is the CTO at a company called resolute there are a property tax solution based out of Texas that work on behalf of homeowners and what makes them so great is that they only get paid if the client gets paid so I was really happy to help melt with this now Aaron was struggling with the design of their internal tool that's used by the agents and camps particularly this properties page that you see here we don't wanna make any major structural changes here it's important to respect that the team

[0:30] is using this every day and they're really familiar with the current layout instead we just want to see what we can do with small cosmetic changes to bring this design to the next level the resolute recently got a facelift on their marketing website so another goal we're going to try and accomplish is to better align it with the homepage so it's a more cohesive experience internally so let's get started so here's the design of the properties page that I recreated in sketch so the first thing we're going to take a look at is the middle section of this page containing all the forms currently the layout is fluid causing the form and

[1:00] span the entire width of the page this might be okay on a smaller laptop monitor but this page is primarily viewed on extra large monitors resulting in really long form inputs it's important to use input lengths as an affordance so we're going to start by constraining the middle section giving it a max width of 960 pixels and the idea here is that it will always be centered in the viewport between the left nav and the notes on the right that helps a little bit but these inputs are still quite long so a technique I like to do with long forms like this is to give them a two column layout this is

[1:31] something I saw for the first time on Shopify's dashboard where they use the section labeled occupy the first third of the layout and then they put the form on the remaining two thirds of the layout so we're going to apply that treatment to our design and not only does this help condense and center the for making it a bit more manageable but it also creates a space that can be used to add informative text to provide a little more clarity to the user and this is great because even though the temps are quite qualified the system is brand new to them and it's huge and proprietary so these additional notes

[2:04] are quite helpful now when I apply this treatment it eliminates the need for the top bar that contained the title because all the white space is now doing the job of putting emphasis on it but the bar did play an important role of distinguishing the panel's a bit better and bringing focus to the page so we're going to add a top border nothing too heavy like it was before just a small hint in this case four pixels high and not only does this help distinguish the panel's with better but it's a nice way to introduce the primary brand color making it feel more attached to the

[2:36] brand's visual identity this is already looking much cleaner but as I mentioned at the beginning we want to see what we can do to better align this to the new website so I was able to find these inputs on the signing forum and I noticed that they look much taller than the ones that are currently being used in this forum so we're gonna give them the same treatment [Music] now I want to point out the space in between the inputs here right now the label is almost as close to the input above it as it is to the one below it's not guaranteed but I will often make the

[3:11] space between the input and the label below it about half the size of the input itself so in this case the input is 40 pixels so I'm going to give it a bottom margin of 24 pixels okay let's move on to the flags and the appointment of agents sections the entire layout of these sections is looking quite messy so we're gonna see what we can do to clean it up a bit both of these sections are pretty similar so let's start with the flag section and see what changes we make are transferable to the AOA section so the first thing that I find interesting is that this information is sort of in a

[3:44] table layout with these headings but sort of falls apart with their flags in the notes so we're gonna give the notes their own column and we're gonna make the person who applied the phonetic part of the notes but give it a lighter tax treatment to give it some distinction and also de-emphasize it because it's less important and we're also going to add a to pixel bottom border to the table header let's now look at the styling of the flags right now they're contained in this pill shaped box which is a common visual treatment for tags and if you search tags on dribble you'll see what I mean and this works nicely

[4:17] when you have several tags grouped together to give them the distinction as well as the appearance of a clickable target but for this example it's not a grouping of flags you would only have one flag per row so this can be a bit confusing and another thing I should mention is that Flags never get removed they just get marked as complete and archived but the X icon on these may create the expectation that the tag is getting deleted completely so what we're gonna do is remove this treatment from the flag and add a checkbox to the left side of the row which will be used to mark

[4:48] flags as complete so that looks a bit cleaner and a bit clearer but unfortunately when doing that we lost the red treatment of this particular flag that indicated the severity of it so we couldn't make the text red and bold it to highlight a little bit better but it still doesn't have quite the same impact that the red box date before we removed it so in addition to the bold red text we're going to add a small red da to the left of the text you give it a little more emphasis let's also take a look at this show more tags link right here right now it doesn't really feel

[5:22] attached to the table it's just sort of floating there so we're gonna add a border to the bottom of this and left the line the link to it and instead of making it a blue link we're going to make it darker and bolder and put it on a subtle gray background that way the subtle gray helps it feel like ad emphasized extension of the table well the dark bold text still manages to make it look clickable okay so this table treatment is looking much more organized but how do we apply a new flag well right now it's tucked up in the corner with 12 pixel size text so let's start

[5:55] by moving it to a more obvious location before we do that I want to point out that these lists never get very long in fact what you see here is probably quite accurate you might see one or two flags attached to a property so I think it would be safe to make this button in line with the list and not worry about it getting buried this may even encourage the users to scan the list of flags first to make sure what they want to add isn't already there we're also going to bold and darken the text as well as make it uppercase to make it a

[6:24] bit clearer and just to make it more identifiable at a glance we're going to add a plus icon to the left of it okay so that organizes the flag section much better and as I mentioned earlier we're gonna see what ideas we can now transfer to the AOA section so let's start by organizing this information into a table so we're gonna have one column for the name of the document and the label that indicates that it's been signed and we're gonna have another column for the status and finally one for the note and change history let's also update the way the dates are displayed here right now the dates on

[6:57] the flags and the AOA s are using a different format so we're gonna make them consistent by showing just the month day and year okay let's just add a bottom border to the header here and we're also going to give the status the same treatment as the flag as well as move and style the create new AOA action in line like we did with the apply new flag action finally we're going to update the link color here so it's just a darker version of the brand's color only because the brain color is in accesible went on a wait background and that makes it so it has almost an

[7:31] identical treatment as the plagues making both sections much more scannable okay so let's move on to the cancel section so this is looking pretty good with some of the global changes we've already applied I'm just going to darken the text and let in the background of this alert so it's a bit more legible as well as increase the Z line height of it and I like the small hint of color on the left but we're gonna move it to the top so the placement is consistent with the panels on the page and this message is pretty important so just to better highlight the severity of it we're going

[8:01] to add an icon so it's easier to take in at a glance okay now this button it's looking a bit clunky and the homepage redesign has a much flatter treatment so we're gonna give this button the same style and the right being use here is looking a bit rich which is fine but the colors on the website and on this page have a bit of a washed out look making this button look a bit out of place so we're gonna slightly reduce the brightness and saturation of it not so much that it doesn't stand out as the primary high severity action that it is but just enough so it blends in with the

[8:33] page now the button is right aligned here which is fine but it feels like it's sort of just floating there because it's the way the text wraps above it so what I like to do with right aligned buttons is add a border that spans the entire width of the form adding borders like this is a nice little trick to make detach content feel more attached without having to put items in a box okay and now I'm just gonna clean up these inputs by giving them a little more space okay so that wraps up the middle section of this design so let's take a look at the notes section on the

[9:04] right side so these notes are actually quite heavily used to help anyone knew who comes to the page and needs to review the past updates but right now the notes feel quite de-emphasized so we're gonna give it a white background and position it at the tops to help the notes pop off the page making it feel like it's its own section now no creation is important but it's even more important that the already posted notes are clear but right now they're really easy to miss so we're gonna emphasize the already posted notes by de-emphasizing the create note input and options and we're gonna do that by using

[9:37] progressive disclosure so we're going to remove this input and these options and add a button to the top right and for consistency we're going to give the text a similar styling treatment as the create actions used on the flags and AOS and the idea here is that when you click it it would expand inline and present the same options now let's go ahead and stylus sections so let's start with the tabs the tabs are nice here but the style feels a bit out of place with some of the other visual ideas we've been introducing now if you search on Gribble you'll see another common way to style tabs is to use a

[10:14] heavy-bottomed color border to highlight the active state and this would align nicely with the top borders that we've introduced on the panels this treatment also gives us a little more room to work with so we're also going to increase the size a bit and distribute them evenly in the sidebar okay let's move on to the notes right now they're looking messy so let's structure these a little bit differently well I want to quickly point out that the notes can be categorized by notes or audits and they're indicated with this icon and text on the bottom left corner I think it'll be nice to highlight that a bit better so what

[10:49] we're going to do is instead of using the container to distinguish these notes we're going to make these icons bigger and align them to the left of the notes so they sort of act as a bulleted list we're also going to put the name and date beside each other separating them with a dot and move them below the note as their secondary pieces of information and we really want the note itself to align with the icon okay so that's looking much cleaner we're almost done here so let's just review the left navigation and make a few adjustments so let's first bump up the size of the

[11:21] text and increase the space between as it's pretty small and sort of hard to read and I also want to update the icons the icon is currently being used are set I actually designed a while ago called zonda cons this is a free set you can get at zonda cons comm now I am happy to see an icon set that I designed being used on this site but when I design this set the go-ahead in mind was to give them a neutral and an opinionated look but one of our goals with this design is to align it with the homepage and when I was clicking around I saw

[11:51] these illustrations that have a very playful look to them with their dark outlines and rounded corners so it might be more fitting if we use a set that has similar characteristics so another set of mine called hora con zu I share some of these attributes and you can get these icons for free on my website at Steve sugar com I've already introduced this set in other parts of the design like the right side bar and the alert so we're gonna do the same here these are looking nice but they still feel a bit heavy next to the text so we're gonna make them a bit lighter so they feel

[12:24] more balanced and do a better job at just being supportive to the text not take over let's also give our active state a treatment since we're using this border on the tabs on the right let's do something similar with this let's add a four pixel border on the left and make the background color white as well as make the icon our primary brand color and we're also going to add a border to the right to contain the navigation but also to help the middle section feel Center between each sidebar now I forgot to include this in the sketch file but this border dividing the navigation is

[12:58] to separate the frequently used links with the infrequently used links so we're gonna add that back in okay let's just clean up this top section now first let's align the breadcrumbs to the left we want them to be snug with the navigation and the search and not interfering with the title we're also going to increase the size a bit and change the text color to our new link style now unfortunately this creates some awkward alignment so we're going to add a border that spans the entire width this makes it feel like an extension to the surrounding UI and not the main content area now this icon is here

[13:33] because this page looks awfully similar to the contacts pages so it was requested by the team to add this icon for distinction so we're just going to update this with the new style and add color to make it stand out a bit more the Miss Bowl title it's a bit stronger than it needs to be and taking focus away from the content of the page and the font size is already doing enough work so we're gonna make this a normal way and finally this active status it button still with the title because it has the same treatment so to make it stand out a bit more as a status that

[14:06] changes we're going to put it in a pill style badge and give it a background color okay last but not least we're going to take a look at the top bar this search is probably the most important thing on the application when a client calls in the temp is likely going to use this to search with the information that's provided to them so we really want this stand out way more than it currently does so instead of using the white background that's used everywhere else we're going to use the primary brand color we're using and invert the logo one thing I like to do when I have

[14:40] inputs on a dark background like this is to saturate it a bit so it doesn't look so intense this is also nice because it allows us to use the white as an obvious focus date and again let's update the icon here so it's the same set as everywhere else okay so that pretty much covers everything but there's just one last thing I want to take a look at and that is the font right now the design is using Helvetica or Arial depending on the operating system now these are great because they're web safe fonts so they're efficient but they also are a bit dated now I could update the font to

[15:16] the one that's used on the website it's a sans serif font called national by the Klum type foundry it would look really nice but it also increased the loading time something we don't want for an internal application we want this to be efficient one thing I've been seeing popping up in recent years is the adoption of the system font stack companies like github and Shopify have been using it further in app experience while still using the brand font for the marketing material now the fonts do look really good but more importantly they're efficient so they require no download time so we're gonna use it for this

[15:49] design in this case we're going to use Apple's San Francisco okay so that pretty much wraps everything up so let's just do a comparison of the before and after if you enjoyed the tips in this video be sure to check out my Twitter page at Steve sugar 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 you can check out the site resolute at resolute pts comm and if you enjoyed this video and rana receive updates when

[16:34] more content like this is published be sure to sign up at refactoring UI calm [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