Breaking the dam with a look at Drip
How clean and simple can make for good UX
I don’t often get to gush about a website. In my role I’m usually looking for problems to solve, or finding solutions for already identified problem areas. So I was pleasantly surprised today when I came upon the landing page for drip.com, and here’s why.
Everything that I will cover today is just observation. It will highlight the types of things that I look for and assess, that Drip happened to do well. I think it’s good to have examples of what you should and could be doing, not just what to avoid.
The approach
When it comes to reviewing any site for its user experience, it’s good to start with any low hanging fruit. Get a few wins under your belt and then you can tackle any issues that require more minutiae. So you always want that first pass to focus on anything you can see represented on the homepage, and typically don’t dig too far into the site. A lot of the formatting and approach represented on a homepage will be carried on into other pages, so tackle that first and then move on. It’s like picking up all the clutter in your house before you start deep cleaning each room.
You may notice that many of the items in this list are not exclusively user experience focused. While I’m not thinking a lot about color theory or the latest trendy typeface in use, I am looking at contrast and hierarchy. So those elements are not ignored, they just don’t hold the same weight at this stage.
I find the best way to determine how well a page has addressed user experience is to determine how well it can answer a series of specially curated questions. It’s like an interview, and either they’ve got it, or they don’t. Follow along with your own site as we move along. Here’s just a few of the heavy hitters.
Focus please
When I first land on a page I’m looking to be able to clearly understand the purpose of the site. Who is this site for? This can be taken two ways, to say, who does the site represent, as well as who will use it. Both need to be clearly represented.
Right away on the Drip site, I can see that they do automated marketing for businesses. Front and center, clear as day. Just the way I, and other users on these kinds of sites like it. We’re off to a good start!
What would you say you do here?
What should users of this site be able to do? Meaning, what tasks will they be able to accomplish, and is that all that they’re likely to want to accomplish, or is something missing?
Are we focusing on the highest priority tasks? Being able to do a lot of unrelated tasks is not a good thing here.
From my previous understanding that they are providing a service for businesses, I can make some assumptions based on past research, that users of this type of site are looking for how much the service will cost, if it’s right for them, and eventually, how to get started.
Drip has each of these represented in their navigation. Clear labels for “Pricing”, “Product”, and “Try Drip for Free”. I could also argue that it’s further supported by their messaging relating to growing businesses looking to engage their audiences.
Are your links clear?
I’m a big fan of fun microcopy to add personality to a site, but never in place of clear messaging. A user should always know what to expect when they click on a link. Unless you’re Google and we’re talking about the “I’m feeling lucky” button. But I guess at this point everyone does sort of know what to expect there. Something random and unexpected.
Drip has two main offerings shown on their home page that are broken down into Ecommerce and Services and Experiences. And you know what wild names they used? “Drip for Ecommerce” and “Drip for Services and Experiences”. Before you call that boring, they were able to add some fun content that furthered the message, calling out that Ecommerce folks sell products online, and Service and Experience folks sell services and experiences. Each one punctuated with a “yeah” or “that’s me”. It’s fun and conversational, but still clear.
Be thoughtful with your graphics
Sure it’s nice to have something pretty to look at sometimes, but we have to remember the main goals of most users on a site, they are typically looking to search for something specific, browse content, or complete a task. If your graphics are not supporting those missions, they should be secondary, and not in place of something more useful to the user.
Throughout the page, the graphics used by Drip support their message, showing first icons that represent avenues for marketing messaging, then screenshots representing familiar activities for each group. Throughout, the style is consistent, and any graphic is only there to further support the message, no fluff. Yes, you can save your stock photo budget for your Christmas card, we got this.
Be careful with animation
There is a big trend to add animation to pages to make them more engaging. I’m all about fun, as I mentioned before with the microcopy, but we have to be very careful, there are considerations like accessibility, as well how an animation is executed. We never want something that will take away from the content being presented.
All of the animation used on the drip site is subtle and eases in as you approach the content during your scroll, with everything clearly in place when it’s in the main viewing area, and then eventually settling into place for good. It adds a bit of fun without going overboard.
Now put these insights to good use
We’ve covered a lot of examples here, but there are many more. If you want to make improvements to your homepage, this is a great place to start. But what’s good for Drip might not be good for Drop. (I don’t know if that’s a real site, it just felt right.) So take the general ideas presented here and find how they make sense for your goals on your site. Even if you just pause a second longer to think about these areas, you’ll find yourself making user experience improvements to gush over in no time.
This article is day 7 of a 31 day series. A mash-up of the Inktober 2023 prompt list and UX insights for business owners. Read more about the challenge here.
