YC Facelift: Flutter | Hacker News Reader

YC Facelift: Flutter

kyrobeshay.com

148 pointsmicrypt53 comments

Cute and fun. I'd try the app if it had this page.

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]

Realized I was so busy I didn't get a chance to respond to last week's Exec redesign, but in general I was happy that Kyro took a shot at it and thought he surfaced some interesting ideas, and that it definitely looked much prettier than what we have today.

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.

Thanks for the contrary perspectives, everyone. You've convinced me! Best of luck to Kyro and to Flutter!

+1 to Justin's response.

Since it looks prettier, are you going to buy the design off kyro?

No. Prettier != better, as one other commentator pointed out. I think there were many things that Kyro did better than the current design, but his design wasn't something I'd be comfortable putting on the site in it's current form.

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.

word. let me know if i can ever buy you a beer.

Since it looks prettier, are you going to buy the design off kyro?

Prettier does not necessarily mean better :-)

I wish Justin would have explicitly elaborated.

Yes, we at Flutter feel that we would try the app if it had this design too. :) We appreciate all the hard work that Kyro put in behind this!

So are you going to buy the design off kyro?

Zack - we would be fools to not consider that option!

Nice design, go for it!

Just downloaded for my Mac, awesome program, hoping for next and previous tracks sometime soon...!

> go straight to high fidelity, none of this nonsense of wireframes and personas and other deliverables...

Reminds me of this good how-to article [1] a while back on prototyping without Photoshop or wireframes, but directly in HTML/CSS.

1. http://24ways.org/2009/make-your-mockup-in-markup

go straight to high fidelity, none of this nonsense of wireframes and personas and other deliverables that many PMs and designers are obsessed with

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.

I would change the tagline at the top. "Welcome to the future." is way too generic. Maybe try "Wave hi to the future." or something like that. It makes the graphic to the left look like a giant hand wanting to give an iMac a high-five. Some specificity would be helpful.

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.

I personally like the "Welcome to the future" tag even though it is generic. It immediately grabs me, peaks my curiosity, and makes me excited that I'm about to see a new product that doesn't exist yet.

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

"Wave hello to the future" also captures the connotation of welcoming to the future, as well as providing a more concrete indication of what the app does. I think one of the biggest challenges with copywriting is hitting all of those notes at once, the visionary, the concrete, the solution, the problem, etc. And like other forms of art, some pieces just come together better than others.

Tim - like the idea of waving hi to future. :)

Kyro - you rock. Thanks for taking time out of your busy schedule to give Flutter a facelift. We appreciate it..

One thing that impresses me is how the OP has clearly learned from the feedback on the Exec design. Even if nothing comes out of his YC Facelift project, he'll become a much better designer for it.

Thanks for all the feedback, guys. I take it all to heart and it's all appreciated. Hopefully you'll like what's to come!

As one of the naysayers from last week, I can say this one is a lot better. It's much more on target, and you didn't use any made up quotes/content. Great work!

YC should hire this dude as their designer in residence. This and the Exec facelift he did last week are gorgeous.

Do you know if YC has ever or will ever have that position? I've always wondered if they would have an in house designer to help.

I'm pretty sure he's a partner now, but Garry Tan used to be a resident designer for YC

http://mashable.com/2011/01/14/posterous-founder-leaves-star...

Garry Tan is a partner and a rockstar. He's given a plenty of amazing pointers and w/o him (and other partners) we would've gotten plenty of other things wrong.

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.;-)

They do, his name is Garry Tan

It looks nice. It doesn't matter.

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.

[1] http://www.dustincurtis.com/dear_dustin_curtis.html

I checked the source of both sites, none of them use any front-end A/B testing services. I think it's incredibly over the top to call this disrespectful.

They're great for self promotion, they're great for self improvement, and he is giving them out to the companies!

We do not feel this is disrespectful at all. In fact, we love it. Even Kyro is our user, and we love his passion for Flutter.

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.

Completely different contexts. These are startups with fire at their backs running as fast as they can. They don't have time to be methodical and their brands are completely in flux. They have far fewer stakeholders to please and much quicker reaction time. In short: they are not American Airlines.

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.

Agreed about the value of outside perspectives to resource-poor startups. The (purposefully provocative) point I was trying to make with American Airlines was simply that in all cases design is applied in service to goals which may not be obvious to an outsider.

Of course, an outsider might see what users want more easily than the product team.

I think this is a much better redesign than the Exec one - because it actually is a redesign for the product as it stands - rather than a new design for a product with a substantially different message and positioning, which is what the Exec one read like to me.

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 think the overall layout and color palette is great.

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.

dear Flutter people. i actually downloaded and installed your software because of his landing page. if i had just stumbled on your landing page the same may not be true, it doesn't feel nearly as professional.

that said, there is obviously more than just a landing page going on here (a blog post, a discussion, etc).

love the product!

Same here. Very neat.

Is it just me, or this guy should do this for a living? Like, we make sucky homepages, he improves, we never even need to talk to him.

Just take my money! (I'm kidding, I have no money)

Really like the redesign. Great, great work Kyro! My one feeling, as a non-designer and merely as a user, is that the product itself is so much fun, I wish there would have been a bit more of that vitality infused into the design. Just experientially, I feel like using the site should closely mirror the experience of using the product. So something a bit more dynamic, maybe in color or vibrancy, might have punched it up a notch. That's a small quibble. Overall, really solid.

Great feedback on redesign and product Adahm. Thanks!

I agree his designs are lovely. Flutter needs a redesign a bit less than Exec does, but his is an improvement nonetheless.

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.

Maybe it's just me, but when I see a product that claims to do something seemingly impossible without explaining how it works, I tend to be highly suspicious that it doesn't, and I feel a little bit patronized. I think the main description should at least give a hint.

I see "webcam" mentioned in the testimonials now, but I would make it more prominent.

Great redesign. Now they should just add skip/forward/back + voice recognition, charge $5 for it and be happy :)

This isn't about the redesign, but I just downloaded Flutter and I can't find anywhere that lists all the controls... Does it just do Play/Pause? Can you skip songs?

After downloading it, Flutter appears to only Play & Pause in iTunes and Spotify (on Mac & Windows). I imagine (and hope) that they're working on supporting more gestures and more apps!

Hi Guys, we just do play/pause right now and only on iTunes and Spotify. It only works on Mac for now too. Yes, we will be adding support for more apps/gestures/windows in near future.

We will also communicate things more clearly when we implement our own facelift. ;-) Thanks for your patience with us in the meantime!

Brilliant way to self-promote while also servicing the community. I love this approach, and the design.

I love this concept, 37signals way back in the day used to do these UX teardowns and rebuilds via http://37signals.com/better and that had a lot to do w/building their rep for UX expertise

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.

1024x768 is no longer the standard experience for the majority of browser users.

Also the design seems flexible enough to support percentages, so "a" won't be much of an issue.

1024x768 is no longer the standard experience for the majority of browser users.

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.

I love the idea of the facelifts! Good job keeping to it!

Works. Awesome.

Gesture seems to be the next frontier.

These are great! Would love to see a screencast of your next facelift.

Reply on news.ycombinator.com