ui & ux design for websites & apps · 2018-04-11 · create prototypes (launch) 5. measure...

46
UI & UX design for websites & apps Yiannis Konstantakopoulos, porcupine.gr MATCH & DEVELOP A STARTUP

Upload: others

Post on 28-May-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

UI & UX design for websites & apps

Yiannis Konstantakopoulos, porcupine.gr

MATCH & DEVELOP A STARTUP

Page 2: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Design != Art

Page 3: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

What is User Experience Design?

“Everything has a user experience. Our

job is not to create the user experience.

It is our job to make it good.”

The Hipper Element http://thehipperelement.com/post/71886924188/daily-ux-crash-course-1-of-31

Page 4: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

“A UX designer’s work should always be derived

from people’s problems and aim at finding a

pleasurable, seductive, inspiring solution. The

results of that work should always be measurable

through metrics describing user behaviour.”

UX Design for Startups https://www.uxpin.com/studio/ebooks/ux-design-for-startups/

A scientific method (no, really)

Page 5: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

UX vs. UI

Page 6: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

UX vs. UI

Page 7: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

UX vs. UI

Page 8: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

The user is a _____

who wants to ____

Start with:

Page 9: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Design 4 versions of a TV remote control in 4’

Page 10: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

UX Design Step by Step

1. Find your users

2. Pen & Paper (Wireframes)

3. Design Mockups

4. Create Prototypes

(Launch)

5. Measure & Improve

Page 11: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Find your users

• Learn how to think like your users do

• Find and talk to them

• Create personas

Page 12: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Personas

Page 13: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Pen & Paper (Wireframes)

• Sketch. Test ideas. Be quick. Trust low fidelity.

• Design User Flows/Storyboards

• Prepare your Sitemap

Page 14: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Sketches

Page 15: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Wireframes

Page 16: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

User Flows

Page 17: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Sitemaps

Page 18: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Design Mockups

• UI Design

• Attempt to make people trust you

Page 19: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

UI Design

Page 20: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

UI Design

Page 21: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Create Prototypes

• HTML, CSS, and JS & Back-End

Page 22: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

(Launch)

Page 23: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Measure & Improve

• Measure (Analytics, Heatmaps, A/B Tests e.t.c.)

• Improve

• Rinse and repeat

Page 24: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Heatmaps

Page 25: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

A/B Testing

Page 26: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Recordings

Page 27: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

When startups do the right thing (and when they don’t)

Page 28: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

90% Of Startups Fail

Hard facts

Why startups fail, according to their founders http://fortune.com/2014/09/25/why-startups-fail-according-to-their-founders/

Page 29: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Hard facts

Why startups fail, according to their founders http://fortune.com/2014/09/25/why-startups-fail-according-to-their-founders/

Page 30: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Facebook

Facebook’s Product Design Director Explains One Of Its Biggest UX Changes In Years https://www.fastcodesign.com/3057113/facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years

• Reactions should be universally understood.

• Reactions should be widely used and expressive.

• Reactions should be an extension of the Like button

• Reactions should not make existing behavior more difficult.

Page 31: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

(Some of the) Greek Startups that embraced design

Page 32: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

When Startups don’t embrace design

“We don’t need a designer yet” = “We will never need a designer until we will fail hard”

“We will use a theme”

“Someone I know will help us”“Someone” = “My nephew”

Page 33: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

“It’s my startup - And I'll cry if I want to”

Hire good people

Page 34: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

“It’s my startup - And I'll cry if I want to”

Dare to create real teamsand skip workaholism*

* How To Deal With Workaholism On Web Teams https://www.smashingmagazine.com/2014/01/dealing-with-workaholism-on-web-teams/

Page 35: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Bonus track

Kaizen

Continuous Improvement

Page 36: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Kaizen

One Small Step Can Change Your Life: The Kaizen Way https://www.amazon.com/Small-Step-Change-Your-Life/dp/076118032X

Page 37: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Kaizen

Page 38: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Kaizen +

Page 39: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Party time

Made by

Joinweb & porcupine colors

Page 40: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Party time

Page 41: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Party time

Market behaviour

Look for sunglasses >

Go to skroutz.gr and find the cheapest price >

Return to the e-shop and make a phone-call

Don’t buy eye glasses

A *very* seasonal market (better when the sun

shines)

Page 42: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Party time

Users

Sex

Female: 60%

Male: 40%

Ages

25-34: 42%

35-44: 25%

18-24: 17%

Devices

Mobile: 52%

Desktop: 36%

Tablet: 12%

Interests

- Sunglasses

- Value for Money

- Fashion

- Sports

Page 43: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Party time

Previous website issues

User flow Home > Sunglasses > Home

100 > 45 > 25

Women - Men

Bounce RateDesktop: 49%Mobile: 57%

Other statsPages / Session: 3.30

Session Duration: 02:03

Page 44: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Party time

New website stats

Bounce RateDesktop: 38% (-23%)Mobile: 41% (-28%)

Other statsPages / Session: 6.79 (+106%)

Session Duration: 03:22 (+64%)

Sales +

Page 45: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Party time

User Experience Design works

but not alone - you’ll always need a good team

Page 46: UI & UX design for websites & apps · 2018-04-11 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Thank you!

Yiannis Konstantakopoulos, porcupine.gr

MATCH & DEVELOP A STARTUP