UI & UX design for websites & apps

UX & UI design for websites and apps. Focused on startups for the event Match & Develop A StartUp in Greece.

Transcript

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

   View Slide

2. Design != Art
   

   View Slide

3. 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
   

   View Slide

4. “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)
   

   View Slide

5. UX vs. UI
   

   View Slide

6. UX vs. UI
   

   View Slide

7. UX vs. UI
   

   View Slide

8. The user is a _____ 

   who wants to ____
   Start with:
   

   View Slide

9. Design 4 versions of a TV remote control in 4’
   

   View Slide

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

    View Slide

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

    View Slide

12. Personas
    

    View Slide

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

    View Slide

14. Sketches
    

    View Slide

15. Wireframes
    

    View Slide

16. User Flows
    

    View Slide

17. Sitemaps
    

    View Slide

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

    View Slide

19. UI Design
    

    View Slide

20. UI Design
    

    View Slide

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

    View Slide

22. (Launch)
    

    View Slide

23. Measure & Improve
    • Measure 

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

    View Slide

24. Heatmaps
    

    View Slide

25. A/B Testing
    

    View Slide

26. Recordings
    

    View Slide

27. When startups do the right thing 

    (and when they don’t)
    

    View Slide

28. 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/
    

    View Slide

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

    View Slide

30. 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.
    

    View Slide

31. (Some of the) Greek Startups that embraced design
    

    View Slide

32. 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”
    

    View Slide

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

    View Slide

34. “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/
    

    View Slide

35. Bonus track
    Kaizen
    Continuous Improvement
    

    View Slide

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

    View Slide

37. Kaizen
    

    View Slide

38. Kaizen +
    

    View Slide

39. Party time
    Made by
    Joinweb & porcupine colors
    

    View Slide

40. Party time
    

    View Slide

41. 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)
    

    View Slide

42. 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
    

    View Slide

43. Party time
    Previous website issues
    User flow
    Home > Sunglasses > Home
    100 > 45 > 25
    Women - Men
    Bounce Rate

    Desktop: 49%

    Mobile: 57%
    Other stats

    Pages / Session: 3.30
    Session Duration: 02:03
    

    View Slide

44. 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 +
    

    View Slide

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

    View Slide

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

    View Slide