$30 off During Our Annual Pro Sale. View Details »

UI & UX design for websites & apps

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.

Yiannis Konstantakopoulos

April 11, 2018
Tweet

More Decks by Yiannis Konstantakopoulos

Other Decks in Technology

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