UI & UX design for websites & apps

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Design != Art

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

“A UX designer’s work should always be derived from people’s problems and aim at ﬁnding 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 scientiﬁc method (no, really)

Slide 5

Slide 5 text

UX vs. UI

Slide 6

Slide 6 text

UX vs. UI

Slide 7

Slide 7 text

UX vs. UI

Slide 8

Slide 8 text

The user is a _____   who wants to ____ Start with:

Slide 9

Slide 9 text

Design 4 versions of a TV remote control in 4’

Slide 10

Slide 10 text

UX Design Step by Step 1. Find your users 2. Pen & Paper (Wireframes) 3. Design Mockups 4. Create Prototypes (Launch) 5. Measure & Improve

Slide 11

Slide 11 text

Find your users • Learn how to think like your users do • Find and talk to them • Create personas

Slide 12

Slide 12 text

Personas

Slide 13

Slide 13 text

Pen & Paper (Wireframes) • Sketch. Test ideas. Be quick. Trust low ﬁdelity. • Design User Flows/Storyboards • Prepare your Sitemap

Slide 14

Slide 14 text

Sketches

Slide 15

Slide 15 text

Wireframes

Slide 16

Slide 16 text

User Flows

Slide 17

Slide 17 text

Sitemaps

Slide 18

Slide 18 text

Design Mockups • UI Design • Attempt to make people trust you

Slide 19

Slide 19 text

UI Design

Slide 20

Slide 20 text

UI Design

Slide 21

Slide 21 text

Create Prototypes • HTML, CSS, and JS & Back-End

Slide 22

Slide 22 text

(Launch)

Slide 23

Slide 23 text

Measure & Improve • Measure   (Analytics, Heatmaps, A/B Tests e.t.c.) • Improve • Rinse and repeat

Slide 24

Slide 24 text

Heatmaps

Slide 25

Slide 25 text

A/B Testing

Slide 26

Slide 26 text

Recordings

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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 diﬃcult.

Slide 31

Slide 31 text

(Some of the) Greek Startups that embraced design

Slide 32

Slide 32 text

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”

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

“It’s my startup - And I'll cry if I want to” Dare to create real teams and skip workaholism* * How To Deal With Workaholism On Web Teams https://www.smashingmagazine.com/2014/01/dealing-with- workaholism-on-web-teams/

Slide 35

Slide 35 text

Bonus track Kaizen Continuous Improvement

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Kaizen

Slide 38

Slide 38 text

Kaizen +

Slide 39

Slide 39 text

Party time Made by Joinweb & porcupine colors

Slide 40

Slide 40 text

Party time

Slide 41

Slide 41 text

Party time Market behaviour Look for sunglasses >   Go to skroutz.gr and ﬁnd 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)

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Party time Previous website issues User ﬂow Home > Sunglasses > Home 100 > 45 > 25 Women - Men Bounce Rate  Desktop: 49%  Mobile: 57% Other stats  Pages / Session: 3.30 Session Duration: 02:03

Slide 44

Slide 44 text

Party time New website stats Bounce Rate  Desktop: 38% (-23%)  Mobile: 41% (-28%) Other stats  Pages / Session: 6.79 (+106%) Session Duration: 03:22 (+64%) Sales +

Slide 45

Slide 45 text

Party time User Experience Design works but not alone - you’ll always need a good team

Slide 46

Slide 46 text

Thank you! Yiannis Konstantakopoulos, porcupine.gr MATCH & DEVELOP A STARTUP