108
How Everlane Sells More Than Clothes DESIGNFIELDGUIDE.COM PRESENTS... ...AN AWESOME APP DESIGN CRITIQUE

Everlane iOS App Design Critique

Embed Size (px)

Citation preview

Page 1: Everlane iOS App Design Critique

How Everlane Sells More Than Clothes

DESIGNFIELDGUIDE.COM PRESENTS...

...AN AWESOME APP DESIGN CRITIQUE

Page 2: Everlane iOS App Design Critique

Hi! I’m going to walk through Everlane’s app “as a user” and reveal my insights so you can learn how to think like a designer and design better.

Page 3: Everlane iOS App Design Critique

Oh, who am I?Four years as a visual and interaction designer at Google. Before that, I started a mobile app company with some friends that was acquired by Google.Now I teach design at DesignFieldGuide.com

PS props to useronboard.com for coming up with this awesome format for teaching and sharing.

Page 4: Everlane iOS App Design Critique

Let’s walk through a situation that a person downloading Everlane might have...

“I want to buy a gift for a friend who loves Everlane.”

(mini-me)

Page 5: Everlane iOS App Design Critique
Page 6: Everlane iOS App Design Critique

First I have to find the app on the App Store.

Page 7: Everlane iOS App Design Critique
Page 8: Everlane iOS App Design Critique

Interesting. They’re promoting things that aren’t clothes in the image carousel.

It made me wonder for a second “Is this the right app for buying clothes?” I see a bike and something about inviting friends… ?

Page 9: Everlane iOS App Design Critique

If you have a lot of organic downloads (like, people just find you on the App store randomly) make sure your app store images clearly explains what your app is.

I *think* that Everlane did this because most of their users download the app after already making a purchase on their website, so its OK to feature “non-clothes” since their customers already know what Everlane is.

Page 10: Everlane iOS App Design Critique

The App Store listing is like their home page because it’s the first experience I have with the app.

Page 11: Everlane iOS App Design Critique
Page 12: Everlane iOS App Design Critique
Page 13: Everlane iOS App Design Critique
Page 14: Everlane iOS App Design Critique

My friend recommended Everlane to me, but I still want to read the reviews.

Page 15: Everlane iOS App Design Critique
Page 16: Everlane iOS App Design Critique

Oh jeez, lots of 1 stars. I’ll forgive the app if they’re old reviews, but these are recent. Looks like it’s buggy.

Page 17: Everlane iOS App Design Critique
Page 18: Everlane iOS App Design Critique

This is a fantastic description of the benefit of shopping with Everlane.

It would have been helpful to read this on one of the screenshots because I’m not familiar with the brand like my friend is.

Page 19: Everlane iOS App Design Critique

Whaaat! Real-time weather wardrobe recommendations! Cool. I’ve never seen this from a clothing company.

I guess this is what they were hinting at in the App Store screenshots.

Page 20: Everlane iOS App Design Critique
Page 21: Everlane iOS App Design Critique

This is cool. It’s an example of how their mission statement of being transparent plays out in an unexpected aspect of their work.

Page 22: Everlane iOS App Design Critique
Page 23: Everlane iOS App Design Critique
Page 24: Everlane iOS App Design Critique
Page 25: Everlane iOS App Design Critique

Ahh. I can breathe.

Page 26: Everlane iOS App Design Critique

Their logo reminds me of something...

Page 27: Everlane iOS App Design Critique

B A T M A N

Page 28: Everlane iOS App Design Critique

B A T M A N

...nailed it.

Page 29: Everlane iOS App Design Critique

Asking for permission to send me notifications is a nice way to prime me before the iOS modal pops up unexpectedly.

Page 30: Everlane iOS App Design Critique

..but to make it even more likely I’ll hit OK, I would swap these two bits of copy. Always start with the benefit.

Page 31: Everlane iOS App Design Critique

Be the first to know about new product launches and

announcements.

How? Receive Everlane Notifications by hitting OK on the next screen.

Page 32: Everlane iOS App Design Critique

OK back to the real app..

Page 33: Everlane iOS App Design Critique
Page 34: Everlane iOS App Design Critique
Page 35: Everlane iOS App Design Critique
Page 36: Everlane iOS App Design Critique

Signing up with email

Page 37: Everlane iOS App Design Critique
Page 38: Everlane iOS App Design Critique
Page 39: Everlane iOS App Design Critique
Page 40: Everlane iOS App Design Critique
Page 41: Everlane iOS App Design Critique

Whaat? After logging in, I was dropped into my account page.

You should definitely drop me off where I can browse…

Page 42: Everlane iOS App Design Critique

Let’s try logging in with Facebook instead to see what happens.

Page 43: Everlane iOS App Design Critique

Logging in with Facebook

Page 44: Everlane iOS App Design Critique
Page 45: Everlane iOS App Design Critique
Page 46: Everlane iOS App Design Critique
Page 47: Everlane iOS App Design Critique

Facebook never filled with any real content, but you can see that blue, so it’s recognizable.

The transition was super quick.

Page 48: Everlane iOS App Design Critique
Page 49: Everlane iOS App Design Critique

This time it dropped me into Home where I could browse clothes.

Page 50: Everlane iOS App Design Critique

OK, now I’m actually buying a sweatshirt.

Page 51: Everlane iOS App Design Critique

Lots of stuff that is not “buy clothes” in this app. I guess they are more interested in building community and a brand than letting people quickly buy stuff.

Is there even a search?

OK time to find that sweatshirt.

Page 52: Everlane iOS App Design Critique
Page 53: Everlane iOS App Design Critique
Page 54: Everlane iOS App Design Critique
Page 55: Everlane iOS App Design Critique

This is the gift I’m going to buy her. Let’s choose a color...

Page 56: Everlane iOS App Design Critique
Page 57: Everlane iOS App Design Critique

Visually this page is beautiful and functional The photos are square (like Instagram) so they feel well-balanced. There’s a light, airy feeling to everything on this page. The combination of serif and san-serif feels refined. Serif for the products, and sans-serif for the navigation. It’s subtle, but makes a difference for a company like this.

Page 58: Everlane iOS App Design Critique
Page 59: Everlane iOS App Design Critique
Page 60: Everlane iOS App Design Critique
Page 61: Everlane iOS App Design Critique
Page 62: Everlane iOS App Design Critique
Page 63: Everlane iOS App Design Critique

Nice, big call-to-action here makes it easy and obvious what to do.

Page 64: Everlane iOS App Design Critique

They kept the price with name of product (like the last screen). The price could also go next to ADD TO BAG. I would guess that distancing the price from the call-to-action leads to more clicks. It feels less expensive to hit that button :)

Page 65: Everlane iOS App Design Critique
Page 66: Everlane iOS App Design Critique
Page 67: Everlane iOS App Design Critique
Page 68: Everlane iOS App Design Critique
Page 69: Everlane iOS App Design Critique

This “loading” state is nice. Its VERY clear, and gets me to pause for a moment and not do other things on my phone that could potentially crash the app in the middle of a purchase.

Page 70: Everlane iOS App Design Critique
Page 71: Everlane iOS App Design Critique

Looks like the bag has been updated with my one item… super subtle.. also it’s super subtle that is in fact a “bag.” The bag icon is better than a cheesy shopping cart, but I think the icon designer can get it a few notches closer to looking like a familiar bag.

Page 72: Everlane iOS App Design Critique
Page 73: Everlane iOS App Design Critique

Nice! This is a great time to teach me something, right after I bought a product. Im in a good mood, and done with the task I had earlier.

Let’s try it out.

Page 74: Everlane iOS App Design Critique
Page 75: Everlane iOS App Design Critique
Page 76: Everlane iOS App Design Critique

(long-pressing)

Page 77: Everlane iOS App Design Critique

A small circle appears...

Page 78: Everlane iOS App Design Critique
Page 79: Everlane iOS App Design Critique

OK, this is familiar. Cool.

Page 80: Everlane iOS App Design Critique

OK, this is familiar. Cool…

Page 81: Everlane iOS App Design Critique

… but no thanks.

Page 82: Everlane iOS App Design Critique
Page 83: Everlane iOS App Design Critique

Let’s checkout

Page 84: Everlane iOS App Design Critique
Page 85: Everlane iOS App Design Critique

Apple Pay is a default, so I dont even have to type in a credit card.

Something tells me I might be back to this app to buy more stuff...

Page 86: Everlane iOS App Design Critique
Page 87: Everlane iOS App Design Critique

Using Touch ID…

Touch ID is so cool..

Page 88: Everlane iOS App Design Critique
Page 89: Everlane iOS App Design Critique
Page 90: Everlane iOS App Design Critique

...and we’re done!

Page 91: Everlane iOS App Design Critique

This is it? There is so much opportunity to do something cool here.

● A list of what I bought● A photo of the team or

factory that produced my clothes thanking me

● A little bit more about the Everlane brand

● How long I can expect it to take for me to get my stuff

Page 92: Everlane iOS App Design Critique
Page 93: Everlane iOS App Design Critique

Unrelated to Everlane, but that notification is great because I have confidence that I was charged the right amount.

Page 94: Everlane iOS App Design Critique
Page 95: Everlane iOS App Design Critique
Page 96: Everlane iOS App Design Critique

After purchasing, exploring the real-time wardrobe recommendation feature.

Page 97: Everlane iOS App Design Critique

I’m done with what I needed to do, so let’s poke around. Here’s that thing that impressed me in the details of the App Store.

Page 98: Everlane iOS App Design Critique
Page 99: Everlane iOS App Design Critique

Another prep screen before the iOS notification. They did a better job here leading with the benefit, but still could improve it.

Page 100: Everlane iOS App Design Critique

Get morning outfit suggestionsbased on your local weather

Turn on Location Services so we know what the weather is like where you are. Hit OK on the next screen.

Page 101: Everlane iOS App Design Critique
Page 102: Everlane iOS App Design Critique

Great copy here. Very clear.

Page 103: Everlane iOS App Design Critique
Page 104: Everlane iOS App Design Critique
Page 105: Everlane iOS App Design Critique

Not bad. Unlike other weather apps, there’s a big photo of what I should wear. Great!

Page 106: Everlane iOS App Design Critique
Page 107: Everlane iOS App Design Critique
Page 108: Everlane iOS App Design Critique

So that’s Everlane!

Sign-up for more app design critiques at DesignFieldGuide.com