Mark Susters blog is one I’ve been reading for years and one of the very few I check daily. Being a designer by trade, I readily offer up my design critiques for free. I’ve already given Brad Feld my two cents and wanted to do the same for Mark. However Mark’s blog was less in need of critique and more in need of a complete overhaul. I bugged Mark about it (in July) and he agreed to give it a go. Having worked with Mark before on creative projects I knew this was going to take a very long time. That’s just the way it is with busy people (and free work).
You can see an archived image of Mark’s site here. Large file warning! Thats what you get when your front page is 21,000 pixels in height.
There are two major problems with Mark’s old design. The first is that it completely lacked personality. It was top blog in its category, from a technology investor, and it was using the most basic wordpress theme. The content deserved a better treatment. Something with an identity that was also modern in its implementation.
For a while I’ve been totally enthralled with the way Newsweek treats its feature magazine content online. Huge graphic headers. Really clever parallax cutaways to surface full width images. Carefully guttered content images. All legit. So I found a wordpress theme that had the right basic elements and was able to hack in what I wanted with the help of a fiverr coder. I am a huge fan of fiverr and have spent over $1,000 there in $5 increments. It’s been an invaluable extension of my skill set. I don’t code, I’ve tried, and while I am decent at hacking with html/css the intricacies of some of the more modern wordpress themes elude me. I took a chance on a Pakistani developer named Mudassar Ijaz and he’s been indispensable.
The other indispensable person was Kyle Taylor who does “platform management” (whatever that is) at Mark’s firm Upfront Ventures. On this project Kyle was Mark’s liaison and also a second pair of design eyes and hacking hands. Working with Kyle (starting in November), rather than with Mark directly we were able to get this project done in record time. Well… three months.
So with the right blog theme and structure, I could focus on the lacking personality. I had this concept of doing a pixel art illustration of an old and young Mark sitting across a table. I am no pixel artist, but that is what fiverr is for. I found a guy, Eloy, and he is awesome at pixel characters. I did a little photoshopping and came up with the follow header for Mark’s blog.
I thought this was just awesome. Humorous, light, and fits in with the tech audience. Kyle dug ‘em, but Mark wasn’t too jazzed. Too… gimmicky maybe. I went a few rounds to see if there was a way we could adjust and get them in there, but it wasn’t happening. Back to both sides of the (drawing) table for this central element. Side note: I did work with Eloy on another outside-of-fiverr project that did really well. But the header was the main opportunity to inject some personality and customization. We tried a few different backgrounds of LA, but they felt too generic. Then while searching around for inspiration I came across this charcoal image of Mark, which he is using for his about.me page.
I am pretty sure the other guy is Brad Feld and this is from an episode of This Week in Venture Capital. I thought it could make a great background header but of course would require a lot of ‘charcoal-shopping’. I went back to my young and old (er.. current) Mark idea and extended the table, ‘shopped out Brad (sorry!) and added a younger Mark. It came out really well I think. Click for larger version.
I am all about details when designing, so for this ‘shop I had the younger Mark be a bit more wide-eyed (literally) and optimistic (up-turned mouth) which I think fits well with Mark’s blog and content. If you can’t tell its been manipulated (without seeing the original) then I have succeeded.
There were 101 other smaller design decisions and Kyle did a stellar job turning many of Mark’s post into really handsome works of content. The second major issue with Mark’s blog is the organization and structure is a mess. He has so much evergreen content that it just impossible to find since, as many bloggers due, he abandoned useful post tagging and categorizing early in the blogs life. But we already have a really great solution for this in place, it’s just not live yet.
The whole thing turned out really well and I think Mark’s blog is certainly the dopest VC blog on the net right now, as always in function, but now in form too!
Edit: In case there are future design changes from my original, here is working version for posterity. http://byjess.net/bothsides/
I wasn’t planning on posting this, but since Brad made it public, I might as well. FeldThoughts is a site I visit a few times a week. One of few, so when the site design was radically altered (not for the better) I was a bit disappointed. After I was able to filter out my irrational objections to change, I sent some annotated feedback to Brad.
click for largeness
In short, the overall aesthetics are good. The designer, J Cole Morrison has demonstrated some talent here for sure. And while the enthusiasm in design is present, the focus is not. I see this a lot. Too much attention paid above the fold combined with other inefficiencies do not add up to a sum of their parts. Great design is holistic. See Jerry Colona’s blog for a masterful look at focus and branding.
This gratis design audit was for Brian Vogel of Flyte Park. He makes and sells audio variometers for pilots. Yeah.. I had no idea what those were either so I thought this would be a fun challenge. I actually redesigned the site for this audit which is something I don’t usually do.
Here is the original Flyte Park site. As you can see it’s a very long page, especially for a single product. (click for larger)
So let’s break it down.
Logo and header
At first I was confused as to what the squiggle was and though it evoked a plane spiraling down, not a good image. But later after I knew about what the product did, it made sense. Hang glider pilots use the variometer to find themals that will increase their altitude. I am assuming only pilots will be coming to this site, so the logomark works. The wordmark doesn’t though. Some sort of bastardized font that looks like it needs to duck its head down to fit into a small space. It had to go.
It’s often the case that there is way too much information in the top nav of sites. Visitors to the home page don’t care about your blog and you don’t need a “store” for one product line. These left side elements just felt backwards as well. Lead with your logo, not your nav.
When a visitor first gets to your site you have mere seconds to engage their frontal cortex. Images work best, and the more evocative image the better. This product image is too soon, and really boring. The feature/description copy is matter of fact and implies that the new visitor is ready to buy an audio variometer and just looking for the right one. This may be the case for some visitors , but not all. There needs to be a real language description here.
But wait, there’s more
The home page is the AAA real estate. All the extraneous stuff should be kept off or relegated to the footer. You haven’t sold me on the vario yet, why would get the t-shirt. And it’s great that you have a twitter feed, but visitors don’t care. Push the twitter feed after they have made a purchase as a support or as an RSS option. You never know what might be in your twitter feed that could turn potential customer off.
Videos are great for selling or quickly communicating just what it is you have for sale. So why is the video buried in a blog post half way down the page? This video needs to be front and center, though I also recommend reshooting so it’s more explanatory of the features and benefits.
Made in the USA
Made in the USA is a great selling point for certain products. When a pilot is entrusting their safety to a product, like the vario, they will want something that is not made on the cheap from China. This point should be featured and celebrated.
I had a few conversations with Brian and came up with a redesign that address the above points and goes a bit further. The original site had sales information strewn across a variety of pages. Despite the $99+ price tag, I thought the sale would be much simpler especially with the right social proof and design. Here it is, click for larger.
Logo and header
I kept the curly logo but changed the font to something more appropriate. Here you can see the “y” invokes someone taking off. I also reduced the header have to “who we are” which is the about page and important when dealing with critical products. The “support” page is not something that needs to be there for first time users, but if you feature it, it shows you have made at least some commitment to support. Support is not just a tool for customers, it’s a feature for potential customers.
Direct and simple
A clear and effective “mission statement” is critical. This statement in 5 words outlines the vario’s unique value proposition. Combine that with an image to engage hang gliders and you can convey concepts and emotions to the user in the first critical few seconds.
Normally I wouldn’t feature the “who” so prominently on the page but in Brian’s case I thought there was an opportunity to present the “”who” story as well as some ad copy. Brian’s reasons for creating the vario likely align with what potential customers are looking for. And when you have a single product, the creator, or the person behind that becomes an asset. It show’s you are small, and all the connotations that go with that, craft, care, excellent. All important concerns when you’re 500 feet in the air.
The “who” segues nicely into the made in America part which people will attach their own stories too. I do with Brian had a better photo though.
Video and social proof
The video was moved up so people would actually get the change to see it. Social proof is paramount. You simply have to have it. In this design it’s featured and the user can click through to see more if they want too. The particular quote should be A/B tested as it’s hard to say which will work best.
And finally, the product
So the original site has two products, or rather versions of the vario. You click through to another page which has more info and you can add a mount and spare battery to your cart. The difference between the vario and vario Pro is slight and only useful to certain users. They also look identical so one photo can serve them both. In the mock up above, the user can add the mount by ticking a box instead of “adding to cart”. The “free battery” tick box is a bit of a psychology trick. It could just say “all varios come with a free battery” but the act of ticking the box makes the user feel like they are actually getting something for free. Another item for free, since it has a box. And that is something they might not want to abandon.
Finally, right at the point of checkout is the Money Back Guarantee which all sellers should have if they can. This is a product the customer will be using while flying hundreds of feet in the air. The single most important thing to engender is trust. Show the creator, made in the USA, social proof, money back guarantee all work to that end.
Finally, the social buttons and blog link all belong in the footer. If a customer is interested, they know where to look.
This is another request off the twistlist. This time from Greg for Municibid. I wanted to take this on because marketplaces are interesting cases and Greg does a lot of things right here. It doesn’t need a major overhaul, just some improvement.
Here is the full site, capped. As you can see it’s pretty bland. Just because you are appealing to municipal workers doesn’t mean you have to style down to their subdued sensibilities. So lets get started.
This is just a lost and confused logo and type treatment. There are concentric arcs on the “m” which don’t make sense. When you use concentric arcs your company better have something to do with wireless, transmission, communication, or RSS feeds. Municibid has nothing to do with any of that. The irony is that the name Municibid is such a good and descriptive name, that the logo and type treatment should be simple and not distracting. Now if we took away the arcs and the random italic “i” we just have a boring piece of text. So I took the liberty of doing a few logotypes that are more appealing.
You may have already guessed, but the font here is a variant of Highway Gothic, which is what many of our nations highways use. Further more I pulled the colors out of highway signs as well as the arrow which you maybe remember from such signs as “Exit here” or “Next exit.”
I think these changes, perhaps subconsciously would juice the government imagery a little bit. The best logos are always subtle. Gregg could pull some of these colors into the rest of the site if he were to redesign it.
2. Showing Activity
The single most important thing a marketplace wants to convey is activity. New marketplaces always face the chicken-egg problem of bringing both the buyers and sellers to the table at the same time. As a new visitor, the very first thing I want to know if I am a seller is ”is stuff being bid and sold”, and “is there enough being listed” if I am a buyer.
Gregg’s Bid Now link does a good job of featuring that, as there are in deed several large ticket items with bids ending in the next day or so. Putting a selection of auction items on the front page also does a good job in showing activity as well as orienting the visitor to the types of things being sold here.
3. Don’t show your empty shelves
Now that the user has satisfied their initial question of activity they are ready to dive deeper to find something they may actually want to buy. This is where the process falls apart for municibid. There are several ways the visitor can do this and they all paint municibid as a desolate place.
The first is the left hand side bar of Auction Categories. There are lots of categories listed, but a click on most of them lead to a “No items found.” page. This is not the best way to treat a visitor. Eventually they will pick up on the number in parenthesis and see that municibid is primarily a place to sell autos and furniture. There is a category for Jewelry, but I doubt they have even sold a piece of municipal jewelry.
The second UX failure is the browse by state page.
With marketplaces that are dominated with small items, like ebay or etsy, the location of the seller doesn’t matter much as it all can be shipped. But from the municibid homepage I can see that we are likely going to be buying furniture and vehicles here so it behooves me to be near the seller. The browse by map is a good idea in theory, but in practice it fails because there are only items available in a few Northeastern states. So a normal visitor will click their state first and see its likely unpopulated. Then they will check the big states to see if anything is populated. California, Texas? Nope. Florida, New York? Nope. The user will likely bounce at that point.
The final failure is the Browse page. Ebay has a great one… just reams of categories and subcategories. Municibid has one too, the difference is there is nothing there. Automotive has 99 items, but sporting goods has zero, real estate is empty, electronics is barren, and do we really need a category for vinyl records? Did the municipal DJ business every really take off?
The bottom line here is that municibids is building in a lot of unnecessary disappointment for the visitor. Let’s say you walk into a story called Jack of all Trades Supply Super Store. An employee greets you and says “Welcome, what can I get you?” You ask for drywall, “nope!”. What about power tools, “sorry!” Windows and doors? ”‘fraid not.” Electrical? “not here!”. Well then what do you have? “Plumbing, lots and lots of plumbing supplies!”
Well for fucks sake, just call your self Jacks Plumbing Supplies.
1. First step is to get rid of all of the empty categories on the home page and browse page. You can expose these to the SELLER when they want to sell an item, but not to the visitor. Municibid started strong in the activity front, but shot themselves in the foot by diluting their activity with non-activity. If you want to keep the map page then it needs to be a choropleth map so the visitor can immediately see “oh it’s a north east thing.” Trust me, if this scares away visitors from other parts of the country, they were never going to be your customer to begin with. People in Arizona will be your customer once you get to Arizona first.
2. Given the locality issue, I suggest on focusing on big ticket items only. Autos, dumpsters, farm and construction equiptment, or anything over $500. There is a greater chance of a buyer traveling a longer distance to get the item, thus you have increased your pool of potential buyers buy focusing on large items. I might drive 250 miles to get this moble fire safety house or a fire engine but wouldn’t drive 5 minutes to get a $5 computer cart. Gregg mentioned he used the small ticket items to hook the agencies so that when they did have to sell that $20k back-hoe they would come back. But to me, the small ticket stuff isn’t selling, or has no bids. And why should it?
So I think municibid should go out of it’s way to pitch it self as a great place to sell big ticket municipal items. A bit of a redesign is in order to do this, including some good use of…
3. Social proof! Where is it? Activity is great but municibid is still an unknown marketplace. Throw up some quotes from city managers or whomever saying “Muncibid allows us to liquidate our old inventory super quickly. It’s the secret weapon of our financial tool chest”. Gregg mentioned there were 700 agencies signed up. Where are they? Using municibid for the seller is a risk. What if they screw up and let go of a F150 for a super cheap price? Then they look stupid and no one wants that. Tell them, with social proof, that municibid is legit and it works. There is actually a good amount of social proof buried in its blog… but no one is going to read that.
4. There is a smart feature on muncibid that allows agencies and municipalities to have their own stores. I suggest this be really blown out and customized for each agency. If the Agency had their logo on the actual store, and a customer url like municibid.com/BatonRouge then that is something they can easily actively promote. You want the sellers to do as much of the outside selling as possible. You want municipal workers to say “yeah just go to municibid.com/BatonRouge” Make it easy on them. These agencies are years behind in the tech world, and would love a little marketplace to call their own.
Municibid has a lot going for it. The auction pages are done well and the site is pretty straight forward. That is exactly how it needs to be for its audience. It just needs a less confusing logo and to double down and focus on what it is selling, and not sell what it doesn’t have.
This is another request from the Twist list, this time of JD. I wanted to take on this one because it’s a mobile app which should have very different sales and design patterns, at least as far as their websites are concerned.
The full site is at WhosFreeApp.com and also capped below.
1. The thing about app sites
Sites for webapps should function very differently than sites for webapps for a few specific reasons. With webapps, the site is your product and the hurdle can be significant. You are often asking for someones email or credit card number. This means you need to provide enough sales inertia to get them through that.
With 95% of mobile app sites, the only thing you want the visitor to do is click that iTunes link. Any other clickable item will reduce the visitors chance of getting to iTunes. Normally I recommend a longer sales process, but for mobile apps, there should be nothing below the fold.
The other thing about mobile apps is the website is likely not your major problem. Mobile app users will download, install, click around, and uninstall your app before a webapp user has even confirmed their email. The low new user hurdle just means people will be dumped into the product quickly and have less invested, emotionally and financially. So don’t worry about optimizing your mobile app landing page, that’s the easy part.
With all that said, less is more, and when there is less on the page, each item becomes more important. So let’s get started.
This just is not doing it for me. It feels dated and cheap. Way too much glassy reflection going on. That just isn’t hot anymore. Also there are about 50,000 apps that use chat bubbles in their icon/logo. I know you feel like you have to do it because its a social app, but you don’t. The app name is descriptive enough, use the logo as an opportunity to stand out rather than blend in.
There really shouldn’t be a header here at all. As a visitor, I don’t care about any of that stuff. If I do start clicking around then I am getting farther from the place you need me to be, the iTunes app store, then my gmail notifier goes off, and you’ve lost me. I’m off doing other stuff. Many apprepreneurs make the mistake of combining their app and company all into the same page. Unless you a big hot company like instagram, I don’t care “about you” or your buzz or jobs and unless you have an active community, you don’t need a blog. Apps don’t have blogs. Nor do I care about your facebook or twitter profiles. If I am a first time visitor, chances are I haven’t used the app yet, why would I like or tweet anything. You haven’t earned it. The only reason social buttons should be there is for social proof, as in “oh 20k people have liked this, it can’t be too bad”, and that should only be used if you have 1K+ likes. I don’t think there is a need for google translate either. Is your app in “Afrikaans”? No, then you site doesn’t need to be either. This header has 8 clickable items that take me away from where I need to be.
3. Hot Mess of Distraction
Wow. 11 clickable elements here. There should be one, possibly 2. Fire up the chain saw.
Why repeat your logo, it’s not even an effective one. Ditch it. The only two buttons that matter here are the android and apple ones, yet strangely they don’t even look like clickable buttons. You want to funnel the visitors into these links so make sure they look like buttons and they should really be the only thing that looks like a button. You don’t want the visitor to stick around, they need to move on to your other sales page.
You don’t need images of both an iPhone and android phone. Especially since the screen shot is the same. Use just the iPhone, it will be the most popular. If I am an android user I will looking for that andoid logo, it’s my nature. If you are going to have some sort of animation here, it should only be flipping between screen shots of the app. If you can effectively communicate what the app does in a few screenshots, then do it. Remember, there are two sales pages here, yours and apples. You have more control over yours so try to give the visitor plenty of inertia to power through to the ‘view in itunes’ button or get them to pick up the phone and search for the app. But at the same time, don’t make them linger. This is a 10-15 second sell, anything longer and people are going to drop out.
Your copy is the third most important thing on the page, behind the call to action (which is hidden) and the app images (which are redundant). This is your only opportunity to say what the app does so make it count. You have wasted value space and time by saying “free to hangout” three times. It’s really hard to say what works and what doesn’t so you should be split testing this like a samurai. Try all sorts of copy. Not only will this increase your CTR, but will also give you some insights into what people want and what resonated with them.
App videos are high risk. They can turn the visitor into the user or make them flee. The best video’s are just short and professional demonstrations of the app and it potential. You have a lifestyle video. Maybe I don’t like guys with beards, maybe I think the people in your stock photos look like douchebags, maybe I don’t drink beer. Ideally you want the user to project themselves using the app. Currently you are projecting a vision of the user which may be incongruous to viewer. Save the lifestyle stuff for the big brands that do it well, Apple, Nike, etc. Just show me how to use the app in 30 seconds or less. Also split test with and without the video, you might find people who click the video tend to flee. Also drop that situations link, it’s another distraction. My situations are different from your situations and any user of social apps already have their situations in mind.
Finally, that bottom grey section is just more distractions. I don’t care if you are on facebook, everyone is. Why is there a link to SXSW interactive? Are you getting paid to send YOUR customers there? Nothing on that SWSX page mentions Who’s Free and oh… check out this article on this other cool app. Another visitor lost. The switchable apple/andoid buttons are totally useless aswell.
4. Social proof
CNN? Washington Post? Just who is your target demo? Old people? Not only does this social proof lead me away from your site, it may be pejoratively coloring your app. Let’s say I am a 14-22 year old coming to your site. ”Oh, its a CNN and Washington post thing, nevermind, not for me.” You don’t need to list every press clipping you get, only the ones that will make an impact. Are you going after early adopters, then get some press on TechCrunch or RWW. I have no idea what realTVfilms or NHK is so that makes me suspicious. Honestly, I would remove the press stuff altogether until you have something worth putting up.
5. Design Katamari
The rest of the page reminds of the awesome Katamari series of games where this small sticky ball just rolls along and everything in its wake just globs on to it. Eventually it’s a behemoth of indistinguishable debris. That’s what this page is. Unattributed sensational quotes, redundant andoid marketing, redundant social buttons, redundant sales copy, and a blog posts I care exactly zero about. The only thing else that needs to be on this page is this.
A link in the bottom right to your company. Your company’s site is where you put the blog, about us, jobs, and press. If I am the rare visitor who is seeking that info out, it’s not hard to find. I will look for a link to your company and it doesn’t need to be in the header.
This page needs to go on a diet, and not the low carb kind. I’m talking about the hack-off-your-limbs diet where you get down to the very basic necessities needed to survive. These are your product image, your sales copy, and your call to action button. I would start over with just that. Once you have those elements, and only those elements, you can try to spruce up the general design which is seriously dated. Of course all of this will only help user acquisition. If your churn is high, then funneling more users into the app will just multiply the gross inefficiency going on. Hope that helps!
So I put out a call to do some design audits to the members of the TWIST list. Alex put in a call for his startup, FitPack. So here goes.
The current website is here, but I have composited a sceenshot below.
It’s actually a pretty decent logo. It reminds me of a men’s magazine like Maxim and feels dynamic enough. The only real issue is that it is a bit soft at the edges. This might be caused by some compression that wordpress uses on its image uploader. It’s subtle for sure but can make a big difference on a subconscious level.
I am not against putting the main call to action, “join”, in the header. Although there is no inertia going into it, people look to the header navigation for goals to complete so it’s fine there. The “basics of exercise nutrition” is really out of place as it feels like a blog post that got stuck in the header. There is quality info on that page but it should be woven into the sales copy, likely on page 2. The main problem with this navigation is what it is missing. Tucked away in the corner are links to the FAQ and the FitPack Team. Those are VITAL pieces of information. FAQ’s are great low-pressure sales opportunities. The Fit Pack team are some series experts. PhD’s, Harvard, Oxford, Columbia, national champs, why are they hiding all this? This should not only be in the header nav but in the main first page sales copy as well. One value prop of FitPack is the convenience, but a major one is the expert factor. There are thousands of nutritional products, it can be overwhelming, and I would be looking to cede the decisions of ‘what’s best’ to an expert. FitPack has the experts, they are just tucked away in the attic.
3. Leading Statement and Call to Action
“Fuel Your Fitness”. I guess that works. It really can be applied to any nutritional product though and therefore isn’t memorable. I might try something like “Your monthly nutritional trainer” or “Personal nutrition trainer” or “Your Nutrition Strategy Guide”.
Then you have your WHAT statement. People don’t resonate with WHAT statements. It’s too early to hit them with that. You have a picture to the right which shows the visitor what a FitPack is, you really don’t need to explain it just yet. It’s intuitive to lead with your WHAT, but you really should be leading with your WHY, which is absent from this page entirely. The WHY is what FitPack believes and why they are doing this. It might sound like this, “Sports nutrition doesn’t have to be complicated. We are passionate about delivering the right nutrition strategy to you in a streamlined monthly package.” Or it might sound like “We were endurance athletes who spent way too much trying to navigate the dizzying array of nutritional products. We found out we weren’t alone so we started FitPacks where we can bring our knowledge and system to you with no hassle.” Basically you want the visitor to agree with you. To believe what you believe. The sell because much easier after that. Sports nutrition doesn’t have to be complicated. ”I’ll drink to that”. We spend too much time trying to figure out what to buy. ”Sounds like me!” You have 10-30 seconds to sell them. You haven’t built a relationship with the visitor yet. You need to sell them on the pain point BEFORE you can sell them on the solution.
Because of this, the Join now button is way to early. I go into more depth here, but basically you are funneling visitors into a pain point (your form) before you have sold them. This will cause them to flee your site. You have not built up enough inertia to allow them to power through that massive form you have. Do not worry about having your call to action below the fold, that’s where your customers are. And you also have it in the header anyways.
What’s up with this? It looks totally amateur and taken with instagram. Your monthly product is expensive, $60+. I want to know that I get a quality box in the mail. I want to be able to leave the box around and my friends are like “What’s that?” and I can say “Oh it’s FitPack, check this out” instead of tucking an ugly shoebox under my bed until recycling day. The box in the image just looks cheap. The labels look cheap and it just generally looks like it’s barfing up a bunch of protein bars. I suggest using several images here, one of the closed box, which looks awesome and is something I want to open like it’s christmas. Also an image of the stuff you get in the box, but not in a big disorganized mess. The current image is contributing to my anxiety of sports nutrition, not alleviating it. And please use a quality camera and even some DOF instead of your iPhone and instagram.
5. Specific sales copy
Do I need FitPack? That’s cheesy. There are two sales going on here. You are trying to sell people on sports nutrition, and then sell them on FitPack. It’s going to be tough to do both. If you have properly articulated your WHY’s you don’t need to sell the benefits of FitPack, people will put it together themselves. So in these sections you need your HOW and finally your WHAT. It looks like you have those, so get rid of the Do I need FitPack section. I suggest creating a whole section just for the personal nutrition strategy you are talking about. It sounds like a good value prop but I don’t really know what it is. For the WHAT section you should flaunt your expertise as a value add. ”Not all nutritional products are made the same and some are down right terrible. We get to the science behind each product and make sure only the best gets in your FitPack.” Both the HOW and WHAT sections should be expanded to allow for more sales copy and images. You need to build inertia and that won’t happen from a few bullet points.
6. Giant persistent Crotch
So the persistent background image is basically looking up at some fleeing womans crotch. There has got to be a better option than this. Whats your target demo, men or women? Maybe a non-crotch shot of a guy working out would be better. Or just leave it a neutral color and save the images for the sales copy.
7. Social proof?
The main thing missing here is social proof. This would just be some pull quotes from athletes and trainers. It doesn’t have to be much but I want to know that FitPack actually works for people and it does what you say it does. I might actually include a small section on who the team is, as this is good social proof too, since they are all experts in the field. I’d like to know there are doctor/athletes behind this venture.
8. The Form
This form is a beast. 20+ questions. You got to be kidding me. Introducing this as the last step is a deal breaker. I don’t care how interested in the product I am, I really don’t have the time to fill all this out. What you should do is just collect the persons email and their price level. Let them buy that with minimal friction. Then you can send them a questionnaire through email that they are now motivated to fill out because they have already spent $60. You can even say “Our expert staff will get in touch with you to tailor your FitPack” and then send them the form. The money form should be separate from the fitness form. I have never seen a sales funnel that asked for your resting heart rate, that’s hilarious.
It’s the basic problem of not enough inertia to get over the huge form hurdle. With a $60 price tag there needs to be way more sales in here. Sell them on the problem first, then the solution. Bring in your assets, like your team, and decent photos if you have them. The blog is a good opportunity to review nutritional products. This could likely pull in some decent long tail search traffic if SEO’d properly. Also use the blog to become leaders in the space, as you have the background to do so. In some cases, like Oblong and BetterWorks I suggested a two page sales process, but I don’t think that is necessary here, though the first page should really be more blown out than it is now.
Caveat here: This audit was not solicited by Oblong. They are simply a fascinating company which a less-than fascinating web presence. It’s fairly common to have really smart people who don’t pay much attention to design, though this may not be the case with Oblong. Also, these audits focus not just on design, but on branding, identity, and occasionally product. Given that all I know about Oblong I have derived from their site, some of my assumptions may be wrong, but these wrong assumptions may also be shared by other site visitors, who certainly know no-more about Oblong than I do.
This is their current site, which you can also find at Oblong.com, followed by my audit.
1. Logo and header
I am not feeling this logo at all. It does look intriguing, but ultimately does not represent the company. Two things that come to mind when seeing this logo. DNA fingerprints and Scantrons. Neither conjure up anything to do with what Oblong does. This header also needs help. The logo links to the homepage so a “home” link becomes redundant. ”Offerings” is just an odd word to use here. Oblong is a company that produces a product and a service. Maybe they are trying to combine those into one word, but it feels off. When someone has a “product” to sell, I can evaluate it. When they have something to “offer” I am looking for the catch. Jobs should be combines with People and no one cares about your blog.
2. Leading copy
Why use the word “industries”? It’s confusing. Oblong is a startup and certainly doesn’t have enough employees or customers to be a single industry, let alone plural. This leading statement can be a little scary to visitors as well. It feels high-risk both on the potential customers point of view, and Oblongs’.
This sub-statement starts off strong, then degenerates into nerd speak, “multiple participants, working in proximity and remotely, using a groundbreaking spatial interface to control applications and data spread across every display.” That’s quite a mouthful, then hilariously they bracket it with. “This is what Oblong builds. It’s why we’re here.” Ok…so what does Oblong build? Visitors are going to be giving you half their attention at best. If you do something complex, then reduce it to a few words and a picture (which is 1,000 words).
This is a good video. Lots of cool things going on, some good music. But the problem is that it’s too conceptual. Visitors will watch it and try to envision how they will use the product. Certainly navigating a matrix of chinese characters is not a goal. The main thing lacking from Oblongs site is social proof, which is CRITICAL when you selling something over $10k. So Oblong should take the opportunity to make a video that does double duty. It should show off how an existing company uses their product. This can provide the whiz-bang visuals but also reinforce that Oblong is NOT in the R&D phase (which is the vibe the current video gives).
4. Explanatory copy
I’ve seen some poorly named products before but g-speak is a real head scratcher. As far as I can tell, g-speak has nothing to do with speaking or speech. You would think it might be some voice recognition technology. For this reason, it’s just a terrible name. Also, the signifier “g”, for most people, refers to two things, gravity and gangsters. Not ‘gesture’ as may be the case here. Further more, the text blurb here doesn’t really explain the product at all. Just because you define what SOE means, doesn’t mean you can just use it all over the place and it won’t trip people up. Memory is a muscle that requires repetition.
Companies care about what they are up to, other people don’t. News is not important to the first time visitor and it’s a waste of valuable space. Ideally, this stuff should be pushed to a twitter feed or in the “about us” page which is where people go to seek out news.
6. Product differentiation
So it looks like Oblong has three…. offerings here. But it’s actually much more confusing that that. Two of them, ‘platform’ and ‘client solutions’ deal with g-speak, which is also a product. So as a visitor, can I get mezzanine as a client solution? Does g-speak come as a product? Whats the different between products and solutions? There isn’t a clear path for the user to take and the blurbs underneath do not help much. Also there are no images. WTF is Mezzanine? Why should I click that button?
7. Company history
So is company’s history important enough to put on the home page? Yes, in the case of Oblong. They deal with complex and future leaning stuff, as a visitor I actually want to put that and the company into perspective. Oblong has some very cool things in their history including Tom Cruise and TED, but they are not fully exploiting it. The part about Minority Report is called “g-speak at 24 fps” and has a diagram on how to perform a two handed shove. And where is the TED video? That is a missed sales opportunity, big time.
The page is very unfocused and is full of missed opportunities. There is far too much text for an incredibly visual product. Oblong should check their site analytics to see what the time-spent on this page is. Then time themselves reading everything on the page. Visitors are going to miss information, you can’t control that. But you can control how much they miss by controlling how much they get. More visuals and less text will keep them on point.
So I went ahead and redesigned the homepage on what I think will work best. Click the image below to enlarge.
Yes I changed that terrible logo. Now it’s like a hand, which is pretty central to what Oblong does. It’s a logo that I can remember and invoke Oblong when I see it. ”Oh, it’s that company that does that futuristic hand stuff.” Instead of “oh it reminds me of taking the SATs (Scantron)”.
A cleaned up header. This is all you really need. ”What we do” would go to your product page and “Who we are” will go to your team/jobs/blog/news page. This is much more compelling than “people.” A contact link, which is essential a call to action for Oblong, should always be in the header.
3. Leading statement
A short and impactful statement. It can either imply that the future is something you have now, as in “in your hand” or that the future “is your hand” which is Oblongs product. Good and short copy sets the tone for the entire experience. Imagine Oblong is a stranger who knocks on your door. You open it and they say “Oblong Industries is remaking the world of computers!” Holy shit! Should I hide in the basement? Unplug the toaster? What? Now if Oblong said “The future is in your hand”, well then that is pretty cool. Tell me more.
Images, Images, Images. From these three images I already know more about what Oblong does than the previous paragraph of explanation. I am also totally intrigued because this looks cool. These images are actually vidcaps from the video as I couldn’t find any better examples.
5. Explanitory copy
This is your opportunity for a few more words. Not a whole paragraph, people aren’t ready for that. It’s a teaser for the video it’s pointing to. In this case, paragraphs of text will not sell me. Videos will.
I am using the screenshot from their video, but as I explained above, this should be a REAL WORLD customer centric video. It can have all the cool stuff in it, but I want to know that paying customers are using it, not just a few guys playing next-level mahjong.
A great opportunity to name drop here. MIT, Minority report, TED, etc. I’ve reduced it to only what matters. It all leads to their commercial solutions. This is a tabbed navigation thing similar to what they have now. And get that god damn TED video in there.
Oblong, you have two products. Not one product, one platform, and client solutions. Two products. One of the products has a platform component, but it’s still a product. Client solutions can really apply to both. Mezzanine is your flagship product, as stated by your homepage. Odd that it’s not featured. Well now it is. An image and some text is what is needed. I just copied your text here because I was lazy but I would re-write that copy to something friendlier.
Social proof. This is what B2B is all about, reducing risk. Oblong’s products have LOTS of risk, being on the cutting edge so show me some companies that are actually using the product. Logos is fine here as the video above is doing the same job.
These buttons are really the only call to actions on the page. Clicking this would lead you to a page about Mezzanine that would have more videos, more images, more text, and more social proof. Finally leading into another call to action, which I am guess would be a phone number. Same for their other product.
I simply could not leave that unfortunate product name in there. It is now called Kintrol. Which as you can surmise is a combination of kinetic and control, which sums of the product perfectly. It also sounds fun. ”Kintrol” doesn’t seem to have much usage on the net so I would trademark that asap.
10. Lead out
Some faux social proof here. A very apt quote from a management god, that’s a double win. Then some more copy to give intertia for people to make use of the contact info at the bottom of the page.
Paige is a pal, and BetterWorks is an interesting company. When I went to the BetterWorks site a month ago I couldn’t help but notice that it’s a mess and not reflecting the potential of the company. So I offered a design audit, gratis. Below is some of the nuts and bolts.
The numbers on the page refer to the comments below. While this is primarily a design audit, I do touch on marketing, branding and product. It’s all the same thing.
(click to see larger)
- “Contact Sales”? No one wants to talk to a sales person. Try “Questions” because people do want their questions answered by a live person, just not a sales person.
- Thoroughly uninspiring tag line. That’s WHAT Betterworks is. That doesn’t inspire decision-making. Tell them what BetterWorks BELIEVES… people will align themselves to that if they are potential customers.
- Way too early for the call to action button. Put yourself in a CEO’s or HR’s shoes. Instituting an employee reward program is a big decision. It’s going to take more than 15 words to “get me started”. You need to build a relationship with the potential customer first. I know conventional wisdom says to put the call to action above the fold, but consider the act of scrolling down a sales qualifier. If your user is too lazy to scroll, they won’t be committing to your program either. There are times when a quick call to action works, when the get-in (and get-out) process is fast and easy, like installing an analytics code snippet. It doesn’t work here.
- Who cares about your press? As a CEO, I know getting good press means I pay my press people well. It’s hardly a signal of quality. Sure it can be on the homepage, but there is no reason for it to be above the fold.
- Uninspiring image? Why waste the real estate. This image conveys something about a neighborhood or broadcasting or something.
- Who cares what’s new? I’m not even a customer yet. Once I am a customer then you can feed me more info about new features and articles from your blog. But right now, you have 20 seconds to get me to take the next action. Don’t waste it by making me process irrelevant information.
- Leading companies? Really… like who? As a decision maker I get marketed too 100 times a day. Unsubstantiated claims mean nothing. As a decision maker, one of my biggest fears is looking like a dumbass. I want to know that other people who have used BetterWorks do not look like dumbasses, they actually look like heroes.
- Ok… so there are your features. A few words each. Now I am supposed to “get started”? I don’t think so. You haven’t sold me yet. I am going to be looking for anything other link to click on besides “get started”.
- That is your social proof? That sounds like the most generic and boilerplate quote. Show me something like “BetterWorks rocks! Our employees have something awesome to brag about. And the 50% less turnover is a great cherry on top”.
- Feedback? Huh? Why would I want to leave feedback on your homepage. Save the feedback for users of the product. I don’t have feedback, I have questions, which I can answer with the ‘click for support’ chat bar below. It really should say “questions” since that’s all I really have.
My audit went on to cover other pages but you get the idea. The main conclusions are that BetterWorks was not appealing to people’s emotions. It was all “This is WHAT we do” and “This is WHAT you get”. I felt there was a real opportunity for BetterWorks to rebrand upstream and become an Employee Happiness platform, not a “perks and rewards” thing. That’s boring. As a CEO or HR, I can immediately get behind something called an “Employee Happiness platform”. I have employees, I want them to be happy. But a perks and rewards tool… that you need to sell me on.
Now criticism is one thing, but I wanted to take it a step further and show how I would make it better.
Also, there are lots in here regarding design and emotion and psychology. If you think something will have negligible impact, or is total bunk, that’s fine. But I think much of design (and decision-making) is processed in the subconscious brain.
- The only call to action on this page (besides login) is For Employers or For Employees. This is basically “more info”. My idea is that if you are an employer, you click the link and go to a page that sells the employer benefits. Higher retention, engagement, making you look like an awesome CEO hero. It would have quotes from other CEO’s etc. The Employee page would have benefits and features that employees love. While the CEO is the decision maker, selling the employee is a great tactic too. If 70% of your employees want BetterWorks… who are you to say no. Also, CEO’s will no-doubt click the Employee link too, and see all the happy and awesome employees loving BetterWorks. They want employees like that, thus, they want BetterWorks. Now it’s not a traditional call to action, in that it doesn’t say DO THIS or CLICK HERE. It’s a button, there is nothing else to do with it, and nowhere else to click. On the road to a sale, your actions should be Yield signs, so they feel they get there naturally, not the DO THIS! actions that force an unnatural change of direction.
- The Employee Happiness Platform. That just sounds awesome. How can I, as a CEO go wrong implementing that. The type weight has some subtle properties too. You can read the full sentence, The Employee Happiness Platform, or you can read by weight as The Happiness (Platform) or (The) Employee Platform. This should just enforce some core emotions about the product.
- Wow… I want my employees to be so happy and awesome they levitate. Never leave an opportunity for a well placed and visually striking image.
- What’s with the curves? This curve which is used all over is the up-and-to-the-right curve that you want to see in your business charts. It means good things when you see it. It’s also one half of a smile face, which is reinforced by the small divot in the black bar, which is the smile’s dimple. Yeah it’s subtle. The curve also pulls triple duty by pointing up to the phone number, your best chance to close a lead.
- So BetterWorks leads to a more engaged workforce with better retention, etc. That’s boring. It’s been tested and proven that success is the result of happiness, and not the other way around. This statement should set the tone of why happiness is important, if you were not already aware. Oh an there is a wink/smile emoticon that is on the outside of the blurb box.
- BetterWorks is on a mission. They have a higher calling. They have beliefs. That’s something a CEO can respect and get behind. This copy is also quite positive. It’s telling you that your employees are awesome. As a CEO, I will agree to that, or wish it were the case. I also believe that “every business, no matter the size, should have access to the perks and rewards of industry leaders.” Ok so now I have been in agreement twice, above the fold. That’s a good place to start.
- BetterWorks has these customer spotlight videos that are really well done and showcase how the customer uses the product and why it’s awesome. But these videos are buried in its blog. They are social proof gold! Instead BetterWorks uses confusing product videos to quickly cram as much info into the viewers 2 second attention span. If you show me a video of Elon Musk (a BetterWorks customer) extolling the benefits of BetterWorks…. game over, where is the buy now button. I suspect that replacing your lame product demo video with a social proof video will help most businesses.
- Ok now that I’ve led with my WHY statement, I can get more granular. I can start filling in the blanks of how BetterWorks…. works. I get that happiness is important. How does BetterWorks deliver that? By delivering “local perks at deep discounts in an easy to use platform”. Two other subtle things here. The winking emoticon is now a smiling emoticon. It is also internalized within the blurb. BetterWorks is bringing the happiness inside your business. Also you will notice another curve here on top of the blurb. There is a drop off at the same point it mentioned “deep discounts”. A subtle design reinforcement.
- Ok there is no diagram here, but there would be. I am honestly not sure how BetterWorks works but some people operate on different communication modalities and it helps for them to SEE how it works, and where they and their employees fit into the picture.
- These are your features. Enough info for me to make sense of it and get what’s going on. The ticket-like design channels the ‘white space’ so it flows across the features and then down to…
- Support! Support is depicted here as the bedrock of the features and benefits. This is as it should be for B2B because I don’t want to look like a dumbass decision maker so I want to know that BetterWorks will back me up, show me how to get the most of everything, and help me look like the awesome CEO I deserve to be. Look how big that smile emoticon is, it just grows and grows.
- Look at that tasty sandwich. Now I am hungry. Another problem that BetterWorks can solve. Catering is a big part of BetterWorks and throw in some creative copy there.. and… mmm look at that sandwich…
- Here is your more standard social proof in text form. Not everyone can listen to audio at work. This is tangible social proof in real-person-speak. You don’t need much here, as you can put more on the next two pages.
- Here you are, at the bottom of the page. You may have gotten here in 5 seconds or 50. Your subtle ‘whisper-to-action’ is awaiting for you to take the modest step of “finding out more”, not “getting started”. The next pages will have more specific copy, more social proof, and finally, a short form to submit. If they are not convinced at that point, they are likely not your customer to begin with. Do they not want their employees to be happy? You may also notice this is the same image as above…. but the enlightened employee has been replaced by the call to action buttons. You know that thing that happens when you look at a bright light and the image is ghosted in your eye for a while. Yeah… details, I’m all about ‘em.
I only spent one evening on this and made no assumptions about Paige implementing anything. But it seems he and BetterWorks are going through some big changes. I wish them the best and know that he is making the tough and smart choices that good entrepreneurs do.
I hope this case study was useful to others as well. I would say that 95% of companies have some terrible design going on and lots of missed opportunities.