Design in startups

by @mattrobs

hello.

People who are reading these notes: I wrote them at 1am the night before. They are the ramblings of a delusional crazy person. There is LOTS OF SHOUTING AND EMOTION.

Sorry about that.

Hey. Hi.you look nice today.

Let’s start with a story.

So, who is this jerk?

• I’m Matt.

• I worked in failed startups.

• I met the best designer and developer friends of my life.

• Working on 2 new products!

Bitches.

Big shot.

pretty big.

I also work for these guys.

One of Australia’s most successful Internet startups.

Help businesses send email newsletters with analytics. Apple. Nike. Square. 37signals. Soundcloud.

Users want QUALITY, RELIABILITY, WANT IT NOW. Can’t fuck it up.

Design in startups

by @mattrobs

hello.

All of that was just to justify my preaching for an hour. Let’s begin.

What is design?

Not just making shit

pretty

Pretty solves nothing.

DESIGNERS WHO JUST DO PRETTY ARE A DISGRACE

1. Strategy

2. User motivations

3. Organising information

4. The way they interact

5. Pretty shit

1. A simple idea that solves a problem. Convenience. Appeals to an emotion.2. The way a user flows through an app. GET THE MOST FROM FEATURES AND FEEEEEELLLL ACCOMPLISHMENT3. Organising so its EASY TO COMPREHEND4. Clicking on this does that. Page to page interaction.

Design is not how it looks, but how it

works.— Some guy.

Design is not how it looks, but how it

works.— Steve Jobs.

My dear Matthew, why should I care about design in a startup?

People don’t want ideas,They want solutions.

Design takes an idea and it PITCHES it in the right direction. It POLISHES AND SELLS

Dropbox is a great example of a solution, not an idea. Hundreds of startups had tried to make file sychonisation a success. They failed. They were big, complex, they didn’t design for the user. They made a product. Dropbox made a solution. What if your files JUST APPEARED on ALL YOUR DEVICES? MAGIC. EFFORTLESS. FITS INTO MY LIFE.

Good design are about humans not products.

eople use Facebook not because they like browsing Facebook. They like using Facebook because it’s an ego stroke, they can stalk friends and feel good about themselves, keep up to date about their real friends. How often have you incessantly refreshed the page after posting a photo? It’s not a product for product’s sake. It taps into a core emotional need.

Psychology in copy

People don’t want ideas,They want solutions.

People don’t like using computers. Computers are intimidating. Virus ridden. And difficult to understand. And a black box. They’re obtrusive to life. LIFE IS IMPORTANT TO REGULAR USERS.

That’s what design’s purpose. CATER TO THE USERS.

Good design makes it easy to understand

an idea.

TO THEIR REAL LIFE PROBLEMS

If you don’t focus on design, you’re not focusing on the user. You’re not making a product that is USEFUL.

People don’t LIKE computers. They like REAL LIFE.

LOOK CLICKABLE

CALL TO ACTION

1. Title2. Section

3. Contents

HEIRARCHY

Related together

Related together

Danger Safe

My photos“LIVE” here

With good design, RANDOM DIGITAL SCREENS develop a PERSONALITY, LIVE IN UNIQUE PLACES, CONTAIN UNIQUE DATA.

Your mind treats it like an OBJECT a thing you can understand

Good design takes a random idea and makes it MATERIAL

Users won’t notice good design.

All subconscious. No one realises this. But it all comes together to form a general gist of “understanding”.

“It just feels professional ”trustworthy fun simple

Good design is delightful.

Remember when you first tried rubber-band scrolling? I bought the first iPhone and would show the hot chicks in my class rubber-band scrolling. They all had the same wide-eyed child-like delight. It was unlike any technology they’d ever tried

Delightful. Metaphor. Relationships with animations. Real world imitation with rubber banding. “Had me at scrolling”. Remember when you first tried scrolling with an iPhone? Animations teach relationships. Became a part of ourselves. We love our iPhones because it’s evolved from a tool to an extension of ourselves; an experience. It brings us joy.

Demo time!

Why good design is important → an example of poor design

Pygg live demo! Scenario/user persona: we are at a thai place on a Friday night. Dirty, disgusting, delicious thai food

—— Visual design sets tone. Gives background. Would you trust that icon WITH YOUR BANK ACCOUNT INFORMATION? Too playful. you’ve already lost half your audience

Come on

—— User motivations — why am I on the transactions screen to begin with? COMPLETE INCONSIDERATION.

Think back to the key user scenatrio. I’m on the go. TRANSACTIONS MEAN NOTHING TO ME RIGHT NOW

I stopped reading half way through that first sentence. What does it even mean?

Product was not simplfied enough

Icon is confusing. Wallet-out? Isn’t that what the Pay button does?

Tap on Pay. Get to here.

WHAT DO I DO NOW

affordance

New screen. Never seen before. Revealed in a BACK SLIDE!

Think back to the Instagram example. I know where everything LIVES in Instagram. My photos LIVE in the bottom right tab. Pygg is just RANDOM SCREENS. I have no sense of heirarchy. Things just happen. I can’t break it down intoa gist

But by itself, is actually the best designed screen in the app— minimal, gets to the point

You only get one shot a first impression.

don’t fuck it up.

Every roadblock/confusion/resistance and you lose more of your users. They’re FICKLE. They won’t put up with it.

See also: Pygg’s sign up flow. Utter clusterfuck

You only get one shot a first impression.

to make

don’t fuck it up.

How to good design?

You don’t have to be a designer.

But it helps

1. Strategy

2. User motivations

3. Organising information

4. The way they interact

5. Pretty shit

1. A simple idea that solves a problem. Convenience. Appeals to an emotion.2. The way a user flows through an app. GET THE MOST FROM FEATURES AND FEEEEEELLLL ACCOMPLISHMENT3. Organising so its EASY TO COMPREHEND4. Clicking on this does that. Page to page interaction.

Strategy• Simplify your idea.

• What problem are you solving?

• Are you making up the problem?

Would youuse it?

Would youuse it?

Would youuse it?

Product requires design and thought. Do I want to use it? Would I go through the pain to use it? If it’s no, do it again.

Strategy

• Get the idea in the user’s hands.

Photoswatch idea test. What’s the cheapest way to test the idea of curated photoswatches? A facebook page. People loved it. Cost us nothing to test.

minimum viable product

M.V.P.Just the basic idea Designed for USERS

MVP has a P in it— needs to be DESIGNED

People don’t want ideas,They want solutions.

remember

Strategy

• Remember the user.

• Remember the objective.

Who are your users? They hang above your head. They will make or break you. EVERY decision you do should be measured against the users. It sounds so obvious saying it right now. But you get distracted into a rabbit hole with an idea, a design, a engineering problem that you lose sight of the big picture.

Strategy

• Remember the user.

• Remember the objective.

Who are your users? They hang above your head. They will make or break you. EVERY decision you do should be measured against the users. It sounds so obvious saying it right now. But you get distracted into a rabbit hole with an idea, a design, a engineering problem that you lose sight of the big picture.

Strategy

• Remember the user.

• Remember the objective.

Who are your users? They hang above your head. They will make or break you. EVERY decision you do should be measured against the users. It sounds so obvious saying it right now. But you get distracted into a rabbit hole with an idea, a design, a engineering problem that you lose sight of the big picture.

UI !owsWhat the user sees

What they do

What they see next

What they do next

Always think in terms of the user. What are they thinking when they browse the app?

Via 37s

UI !ows

wireframes!

Photo-what?

Notice I haven’t showed you PS mockups yet. PS is distracting. Use sketches. Use mockup tools. WIREFRAMES ARE YOUR BEST FRIEND.

• Related things go together.

• Colour is emotional and meaningful.

• Heirarchy helps with gist.

• Motion attracts attention.

• Metaphor helps perception.

• Animation teaches relationships.

• Data lives in unique places.

Basic design principles

• Get feedback from people better than you.

• Don’t get emotional. Kill your babies.

• Your best design is never your first design.

• Iterate. Iterate. Iterate.

Basic design practices

the counterarguments

You’re high!

probably

“But x succeeded without design!”

→ Without visual design.

Still had IA, ix and heirarchy

“We can do design later.”

→ Poisonous thinking.

People don’t want ideas,They want solutions.

People don’t buy into ideas. They buy into solutions. Design takes an idea and makes a cohesive solution. It tells them a story. It makes a big, vague promise into something material. Something they can wrap their heads around.

Unsatisfying conclusion:

It’s a balance.

Don’t waste time.Don’t waste money....dot dot dot by doing too much design

Don’t waste time.Don’t waste money....dot dot dot by not doing enough.

i’m @mattrobs

I’m hungry.Let’s get lunch.