Pull 'em into your website

so you're designing a website what can you do to optimize the design in this video i'm going to answer that question by looking at the website of my friend matt mazur if you want me to analyze your website in a video like this you can submit your website at nickcolenda. com submit all right first the visual layout i think it looks very clean and pretty but there's one thing that's missing an entry point something in this website needs to pull people into this design how can we we need to make something stand out i'm going to adjust the color of this headline so that we have something distinctive now when visitors look at this page this element will capture their attention and orient their focus to begin evaluating this information now i do think it's helpful to use an adjective that describes the word timeline but the word professional is a little broad and generic if somebody is searching for a timeline maker this term isn't going to be at the forefront of their attention if our website looks professional then our product will naturally inherit this perception of professionalism so we should replace this word with something that is at the forefront of their attention maybe something related to the purpose of the timeline like project timelines or maybe the type of timeline like visual timeline the main headline says create visual timelines in roadmaps in minutes normally i would get rid of the word roadmaps because it repeats the concept of timeline but in this case we might need it it's important that your website uses terminology that's inside the user's top-down attention let's say that your boss asks you to find software to visualize project roadmaps this term roadmap is now inside your brain you're going to be actively looking for something with the term roadmap so that's why it's important to include the linguistic terms that people are actively searching for even if that does produce some redundancy in your written copy but let's look at this sub-headline it says precedent is an easy to use timeline maker that helps you quickly create timelines this is an example of a redundancy that we can remove an easy to use timeline maker is something that creates timelines quickly and easily so let's get rid of this second part now we have a concise sub headline precedent is an easy to use timeline maker that helps you visualize projects and communicate progress with your team i like that this button is white dark objects look visually heavy while white objects look visually lighter as if they're easier to lift so this white button might produce a subconscious feeling of ease and this feeling might get misattributed to the process behind this button where this signup process will just subconsciously feel easier to do for this background i might add a subtle graphic i'll copy the website into adobe xd and i'll create a long bubble and another bubble and a bunch of bubbles and i'll take this grouping and place it behind the text reducing the opacity near the top and middle so this subtle background is both pretty and meaningful it just adds a little pizzazz to the website next would be these images i like that this website is showing examples of timelines but there's a slight problem this headline is positioning precedent as an easy to use software but these images look very complex i'm guessing that matt wanted to show the features and capabilities of the software but this approach is contradicting the previous framing we could change this positioning to say that precedent is a robust timeline maker then this complex graphic becomes more appropriate but i suspect that the majority of the market would prefer something easy to use so we should simplify these images when people arrive on a website they have what's called a high construal they're focused on the broad gist of information they want to know what something is and why they should do it as they progress throughout the website they start adopting a low control where they become focused on the concrete details so these images at the top should communicate what the software does and the later images should communicate the detailed features looking through these images this one might be a good representation i'll recreate this image in adobe xd so this new graphic has the same content just in a simpler format i also added a laptop to provide context matt created this fake browser header which is helpful whether you show a device or this type of header it's important that you show the contextual environment i've made the argument that you're more likely to make a decision if you can imagine yourself making this decision contextual objects are important because they facilitate this simulation a laptop is very familiar to people they can easily imagine themselves using a laptop so you're taking something unfamiliar this software and you're merging it with something highly familiar suddenly their simulation of using this software becomes more real and vivid i chose a laptop because this image just felt right to me but maybe i'm being biased this is the same brand of laptop that i'm using right now i'd be curious whether this image is still persuasive for people who don't use a mac laptop so let me know in the comments below whichever image we show it's important that we show horizontal bubbles people have what i call a canonical prototype for example you can draw a teacup in an unlimited number of variations and styles yet when people are asked to draw a teacup they all draw the same image

this image is their canonical prototype it's a subconscious image that their brain uses to symbolize a teacup in any context like timelines and roadmaps your brain will be using a subconscious image to conceptualize this idea and we should be showing this image on our website how do we know what people are subconsciously envisioning you can usually search your topic on google images the top ranking images have been deemed by users to be the most representative of this idea and sure enough when we search for road maps we see horizontal bubbles when users arrive on this website these horizontal bubbles are going to be activated subconsciously in their brain because that's how their brain is conceptualizing the idea of timelines and road maps so if they see a tangible manifestation of this symbol then this website in software will seem more relevant and desirable okay so that covers the banner section we have some nice client logos below but let's tackle these descriptions and images first we have gain clarity by visualizing your project's key events most marketers will tell you that you need to emphasize benefits over features and i'm guessing that's why we're seeing gain clarity in this headline but this advice can often be wrong if you survey or interview these customers virtually nobody is going to say you know it's really important that i gain clarity they don't use those words to conceptualize this need i suspect that they're using words like you know i want to see what's behind me what's ongoing and what's coming up that's the real benefit and need so let's focus on that i'll condense the headline into visualize key events and for the sub headline it says with precedent you can you should normally delete stuff like this entire website is about the capabilities of precedent so this portion doesn't add anything now let's quickly add project milestones to your timeline to help you stay organized when possible remove the words help you from sentences it also doesn't add anything there are some exceptions for example i wanted to remove these words from the main sub-headline but here it was necessary but in this new sentence we can get rid of it and you know what we can go further we can get rid of this first sentence so that we stay laser focused on the key benefit see what's behind you what's ongoing and what's coming up next it's clear and concise unfortunately though it also creates another problem because of this empty space in one study a message was less persuasive when it was surrounded by empty space if you have more space to extend your reasons but you don't extend those reasons then it can imply that you didn't have any additional reasons to give so even though i prefer this concise framing just from a visual standpoint perhaps we should keep the previous sentence though i'll simplify it to say add milestones to stay organized and effortlessly see what's behind you what's ongoing and what's coming up next i think the image is fine it's more complex than i would normally like but it shows the advanced capabilities of the software one thing i might tweak i might add an image of a written to-do list that's transforming into this visual timeline many users will have this written list of tasks so this image kind of acts like a before and after photo the after photo is more effective when you have the presence of this before photo they'll be able to see the transformation from their existing state next we have a headline that says present high-level project timelines to senior leaders we can condense this to present timelines to senior leaders i like the image of this powerpoint interface again it's a contextual environment that's very familiar to people you can imagine using powerpoint in this vivid memory helps you imagine using this integration that said it might be better to match the headline of presenting to senior leaders i bought this stock photo separated all the people and made it seem like one of them was presenting a timeline ideally i would also replace these people with real photos that you took yourself just to reduce the stock photoy nature of these images but i think this framing would be more persuasive than the interface image suddenly you're not just buying a timeline maker you're buying confidence you're buying the ability to present information more effectively you'll look more competent and you'll get more respect from colleagues that's the real benefit that people want for this text it's a little wordy and we're seeing the same redundancies precedent can help you i'll remove the beginning now it's communicate plans with confidence share timelines using a link pdf etc we're running into the same issue with too much space at the bottom depending on how much copy we removed below we could increase these font sizes to take up more space and i think this looks good let's summarize everything here was the starting point and here is where we ended we highlighted text in the headline to pull people into this design we added a subtle background of timeline bubbles and we transformed these interface images to be a simpler and more prototypical version of these bubbles this type of visual is how people are conceptualizing the idea of timelines in roadmaps we made the copy more concise we added a before version in illustrations we transformed features into the deeper benefits that people want and now it's your turn comment on this video with your own ideas and i'll pin

the most helpful comment at the top and if you want me to analyze your business in a video like this submit your business at nickkalenda. com submit