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.