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

56
UI & UX design for websites & apps Yiannis Konstantakopoulos, porcupine.gr & porcupinecolors.com 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 · 2019-04-10 · 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 & porcupinecolors.com

MATCH & DEVELOP A STARTUP

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

“I have a dream…”

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

“I have a dream…”

Business, Agencies & Startups

will care more about their users

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

“I have a dream…”

Business, Agencies & Startups

will care more about the user experience of their users

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

“I have a dream…”

Business, Agencies & Startups

will care more about the user experience of their

users, so they will design better ones

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

Design != Art

Page 7: UI & UX design for websites & apps · 2019-04-10 · 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 8: UI & UX design for websites & apps · 2019-04-10 · 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 9: UI & UX design for websites & apps · 2019-04-10 · 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 10: UI & UX design for websites & apps · 2019-04-10 · 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 11: UI & UX design for websites & apps · 2019-04-10 · 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 12: UI & UX design for websites & apps · 2019-04-10 · 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 13: UI & UX design for websites & apps · 2019-04-10 · 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 14: UI & UX design for websites & apps · 2019-04-10 · 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 15: UI & UX design for websites & apps · 2019-04-10 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Personas

Page 16: UI & UX design for websites & apps · 2019-04-10 · 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 17: UI & UX design for websites & apps · 2019-04-10 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Sketches

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

Wireframes

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

User Flows

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

Sitemaps

Page 21: UI & UX design for websites & apps · 2019-04-10 · 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 22: UI & UX design for websites & apps · 2019-04-10 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

UI Design

Page 23: UI & UX design for websites & apps · 2019-04-10 · 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 24: UI & UX design for websites & apps · 2019-04-10 · 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, Web Personalization e.t.c.)

• Improve

• Repeat

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

Heatmaps

Page 26: UI & UX design for websites & apps · 2019-04-10 · 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 27: UI & UX design for websites & apps · 2019-04-10 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Recordings

Page 28: UI & UX design for websites & apps · 2019-04-10 · 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 29: UI & UX design for websites & apps · 2019-04-10 · 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 30: UI & UX design for websites & apps · 2019-04-10 · 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 31: UI & UX design for websites & apps · 2019-04-10 · 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 32: UI & UX design for websites & apps · 2019-04-10 · 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 33: UI & UX design for websites & apps · 2019-04-10 · 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 34: UI & UX design for websites & apps · 2019-04-10 · 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 peopleYou know what good people are, right?

Page 35: UI & UX design for websites & apps · 2019-04-10 · 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 36: UI & UX design for websites & apps · 2019-04-10 · 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 37: UI & UX design for websites & apps · 2019-04-10 · 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 38: UI & UX design for websites & apps · 2019-04-10 · 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 · 2019-04-10 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

Kaizen +

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

A real case

Liolios Eyewear

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

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)

A real case

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

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

A real case

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

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 · 2019-04-10 · Create Prototypes (Launch) 5. Measure & Improve. Find your users • Learn how to think like your users do • Find and talk to

A real case

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

A real case

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

A real case

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

A real case

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

A real case

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

A real case

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

Small wins

Bounce RateDesktop: 38% (-23%)

Mobile: 41% (-28%)

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

Other statsPages / Session: 6.79 (+106%)

Session Duration: 03:22 (+64%)

Small wins

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

Small wins

Site speed~ -50%

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

Small wins

Brand awareness

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

A huge win

March 2019

Best selling month ever

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

How to win

Slow and steady wins the race

Μηδέν Άγαν

Page 56: UI & UX design for websites & apps · 2019-04-10 · 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 & porcupinecolors.com

MATCH & DEVELOP A STARTUP