YC Facelift: Flutter(kyrobeshay.com) |
YC Facelift: Flutter(kyrobeshay.com) |
As a working designer, there's a few things I love about this guy's approach:
* use real language, not lorem ipsum. Text is half of the design.
* branding is just as much about giving personality as it is choosing a visual treatment, like "playfully nerdy with Jedi references" here or "sleek VIP club" like with Exec. The people that ripped on last week's mocks don't get it - design is a conversation-starter. Don't like the exclusivity of the previous mocks? Cool, then let's hone in on what you do want and guess what, some stuff from previous iterations might carry over.
* go straight to high fidelity, none of this nonsense of wireframes and personas and other deliverables that many PMs and designers are obsessed with. If you want low fidelity to quickly brainstorm, it's what paper, whiteboards and Starbucks napkins were invented for.
* speaking of high fidelity, don't be afraid to use real textures and take a stab at the logo too while you're at it. Designers that swear they love Swiss minimalist grids as their style usually turn out to be like the bad contestants on Top Chef that get weeded out early on because their style is "rustic". Riiiight, it's not because you don't have the knife skills to do Asian cuisine, sauce skills to do French, or baking skills to do desserts.
* and the thing I like the most is that he took the initiative to just put something out there. Even when you're working in-house, sometimes you have to grab ahold of the conversation and ship something real, something people can sink their teeth into instead of spinning out into orbit with conversation. It's also very common not to know what you do or don't like until you see some alternatives. Hey, it's called being human.
And trust me, you can cool it with the disrespect angle. None of the targets of these redesigns feel disrespected, since everyone's dying for design help and even just a few spare cycles from experienced pixel pushers. I tried an experiment of holding office hours for just one YC batch (S11, because I'm friends with Jason from Ridejoy) and my last two Saturdays have been booked completely solid. And Justin reached out to me a few weeks back about helping Exec's visual design and we haven't been able to get together, probably because of post-Demo Day craziness, so how happy do you think he was to see the free mocks from last week? Justin didn't ask for any shady spec work, some guy was just fired up to help out on his own dime. Right on.
(thankfully there's less naysayers on this thread so far compared to last week's one about Exec, just a boatload of feedback on possible alternatives. Yay HN, reminds me of the days of old :)
Like I said, love it. This is the quality of work I get paid to deliver and if I had to break into design or the SF startup scene all over again, I hope I'd be smart enough to do a series like this. It worked for Dustin Curtis with American Airlines, Metalab with Zappos and even 37signals did it way back in the day when they were a design shop. They did some unsolicited redesigns of FedEx and other brands that led to a lot of client work for them. I read Jason Fried saying somewhere that it was a smart move for them and didn't get why more designers don't do it.
[edit: added the paragraph about unsolicited designs not being disrespectful]
Unsolicited designs are definitely not disrespectful and are very much appreciated: I love to get other people's thoughts on what we can do better in all aspects of the business.
Reminds me of this good how-to article [1] a while back on prototyping without Photoshop or wireframes, but directly in HTML/CSS.
Nonsense? Right deliverable for the right place surely.
Doing a ton of hi-fi wireframes for a startup landing page? You're doing it wrong. Redesigning a large content based site and dropping straight into Photoshop? You're doing it wrong.
As for persona - great tool for understanding your users and getting alignment across the team. Waste of time if it's just you and two other people and you are all talking to your users every day.
If you look at the criticisms of Kyro's Exec redesign the root cause of many is that it's talking to a different audience with different concerns from the original design. Exactly the sort of problem that persona help with.
Of course Kyro didn't have any persona that the Exec team had built available (if they even exist) which puts them at a disadvantage. But maybe looking at the existing content on the home page, FAQ page, etc. and building an ad-hoc persona around that would have helped.
Use the right tool for the right context.
Also, the CTA should give some indication of what will be expected out of you on the next page. I would say something about it being in alpha and how it's free.
But the image could use something to convey this is an audio product. Something more clear than an angled shot of a music app. Maybe some headphones next to the comp, or subtly work some music notes into the header somewhere. Just spitballin, but it would be nice if the header communicated music a little more clearly
http://mashable.com/2011/01/14/posterous-founder-leaves-star...
I'm not convinced that redesigns done in isolation are useful. As the AA designer's reply to dcurtis indicated [1]--in the prototypical example of this kind of stunt--the design can't operate in isolation from the structure and goals of the organization (even if those are dysfunctional).
These "blank page" redesigns disrespect the hard work these YC companies are doing A/B testing and talking to users to improve what really matters: conversions.
But they are great for self-promotion.
They're great for self promotion, they're great for self improvement, and he is giving them out to the companies!
An outside contribution at this stage is as valuable as anything the companies themselves have the resources to put together. Meanwhile, we all see different angles to attack these problems while learning about a great designer. Everyone wins, and it sounds like it matters a great deal.
Kyro is, from the post, a fan and a user of Flutter, which probably helped with that. The hardest design work to do is when you're a long way personally from the market the design is built for.
If I was wearing my design critique hat I'd be asking Kyro this though:
* Why is "Welcome to the future" - which tells you nothing about the product - pushed above the "Control iTunes and Spotify Using Gestures" sub - which does. The former is tone and mood setting device - why am I not picking up that tone and mood from the visual design? If I am is it necessary? What is it's purpose?
* Why move the video and social proof so far down the page - are they really less important?
* Is the navigation bar at the top really necessary? (home == your there. features == this page should convince, download == pretty darn obvious). Are there more useful things we can use that vertical space for? (see previous point)
* The logo is still a bit "meh" to my eyes - but I suspect Kyro already knows that and it wasn't the focus of the changes done.
* The background noise on the main image is a little bit strong to my eyes and pull the eye away from the content a bit
* Is the "Flutter in the news" headline necessary? If you take it away will the reader be confused?
* The move lines on the hand don't quite work. "Why is the hand sweating" was a comment from my partner :-)
I'd like to suggest some improvements to the marketing message, however, since you've included that in the purview of your proposal this time.
I'm not crazy about the Jedi-themed language in the official copy, as it distracts from what the product actually does. My mind wants to be learning how the product works, not wondering how it cleverly relates to futurist mythology (as much as I am a fan). However, I think the Jedi themed testimonial is entirely appropriate, as it is of lower weight in the informational hierarchy and is an individual's statement, not the company's.
Lastly, the "Yes, master" blurb is not appropriate as official marketing copy, even if it is intended as an ironic reference to the Jedi master-apprentice relationship. It is too easy to mistake it for a reference to a master-slave relationship, which is not a good association in any respect. It's just not an issue you want to draw association with even in the slightest most oblique way. The lesson here is that all copy must be screened for any kind of irrelevant connotation.
I do like the direction in which you're going with the copy in the left hand column below the main section. That's starting to develop a fun, snappy voice, and the fish graphic is pleasantly quirky.
Lastly, to maximize the "throughput of information" about the product that one gets by just looking at the page "above the fold", I would make the main graphic more explanatory (possibly with little blurbs like you used for "yes, master"). The main graphic on their existing page https://flutter.io/signup was good in that regard.
Kudos to you doing these designs every week. I think it's a great exercise. Just remember that it's not just about the pixels, it's the total message and then of course the whole UX after you interact with the page.
that said, there is obviously more than just a landing page going on here (a blog post, a discussion, etc).
love the product!
Just take my money! (I'm kidding, I have no money)
Main concerns with the current Flutter site: The video is front and center. I get why companies do that, and it's smart to make the video and have it there. But I almost never watch product videos until I'm already intrigued. Videos take waaaaay longer than reading, so a focus on intriguing me in a sentence or two first goes a long way to getting me to watch the video at all.
The second is that annoying little popup at the bottom. I can't stand those things, they're very distracting. Irrational level of turnoff for me.
On his redesign, one minor comment about copy. Probably can't make "Jedi" part of your official copy without triggering the Lucas machine. Having it in a testimonial is probably acceptable.
As a final thought, the name Flutter and the product are one of those rare natural matches. That's good stuff.
I see "webcam" mentioned in the testimonials now, but I would make it more prominent.
We will also communicate things more clearly when we implement our own facelift. ;-) Thanks for your patience with us in the meantime!
A couple of notes from conversion side:
a) Better - Your inclusion of a visually descriptive image is an improvement vs. pic of the girl - maybe as a keyframe since the vid is an important visual demo.
a) Draw - Original site compatible w/1024x768, your new one less so. Their audience is probably tech savvy and not @ 1024x768 but as a rule better safe than sorry and 1024 requires an element-economy that can sharpen your messaging anyways.
b) Worse - Your headline is more entertaining, but less on point. You've incorporate their original as a sub-headline but you'd be surprised how many people will simply overlook that.
Also the design seems flexible enough to support percentages, so "a" won't be much of an issue.
Indeed. Many are looking at much smaller windows :-)
Overall screen resolution of the majority of users on the internet is a pointless number to worry about. Worry instead about the available browser size window of the user group that you're actually interested in.
http://browsersize.googlelabs.com/ is a nice reality check.
Gesture seems to be the next frontier.
Of course, an outsider might see what users want more easily than the product team.
That said, Garry can guide us. His job isn't do design for us... that onus is still no us! Hence, please blame us for poor design.;-)
A/B testing is something that we will add in near future, but when product is still in alpha, we have to continue to focus on improving it.
To address some of the points in the other thread: Yes, the current Exec design looks like something that was done by a non-designer in an hour. That's because it was, by me, the night before we launched. And I'm comfortable with how it works; when we have a full time designer in house they will iterate it based on achieving specific goals.
I don't believe in changing design for the sake of changing design or just having something prettier. I believe in design that achieves specific goals and functions, and that defining those goals and functions are actually the most important parts of the design process. Because of that, I do not believe that it is possible for us to use an outside design without first coming up with new goals for the front page. I don't want to invest my own time in doing that right now, because my time is extremely valuable and I don't think our crappy front page is our current bottle neck on Exec (actually, I know it isn't). So, any effort we made in improving it at the moment would wasted. So, I'm not changing it.
Prettier does not necessarily mean better :-)