Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mockup Design and UI/UX

Mockup Design and UI/UX

What is UX Design and how startups can take the most of it.

Yiannis Konstantakopoulos

April 10, 2017
Tweet

More Decks by Yiannis Konstantakopoulos

Other Decks in Technology

Transcript

  1. Mockup Design and UI/UX
    Yiannis Konstantakopoulos, porcupine.gr
    MATCH & DEVELOP A STARTUP

    View Slide

  2. Mockup Design
    User Interface Design
    User Experience Design

    View Slide

  3. Design != Art

    View Slide

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

  5. “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

  6. UX vs. UI

    View Slide

  7. UX vs. UI

    View Slide

  8. UX vs. UI

    View Slide

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

    View Slide

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

    View Slide

  11. The Principles of UX Design
    1. Find your users
    2. Pen & Paper (Wireframes)
    3. Design Mockups
    4. Create Prototypes
    (Launch)
    5. Measure & Improve

    View Slide

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

    View Slide

  13. Personas

    View Slide

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

    View Slide

  15. Sketches

    View Slide

  16. Wireframes

    View Slide

  17. User Flows

    View Slide

  18. Sitemaps

    View Slide

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

    View Slide

  20. UI Design

    View Slide

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

    View Slide

  22. Measure & Improve
    • Measure 

    (Analytics, Heatmaps, A/B Tests, Web Personalization e.t.c.)
    • Improve
    • Repeat

    View Slide

  23. Heatmaps

    View Slide

  24. A/B Testing

    View Slide

  25. Recordings

    View Slide

  26. Tools

    (regarding the previous steps)

    View Slide

  27. • Pen & Paper
    • Sketch (UI design)
    • UX PIN (Prototyping)
    • InVision (Prototyping)
    • Balsamic Mockups (Wireframes)
    • Axure (Wireframes & Prototyping)
    Tools
    Wireframes & Prototypes

    View Slide

  28. Tools
    Analytics
    • Google Analytics
    • hotjar (Analytics & Feedback)
    • Crazy Egg (Heatmaps)
    • Mixpanel (Analytics)
    • Optimizely (Analytics)
    • Kissmetrics (Analytics)

    View Slide

  29. When startups do the right thing 

    (and when they don’t)

    View Slide

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

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

    View Slide

  32. “In the very beginning when we’re just trying to understand what’s possible, we might do a
    research session to understand user needs. Then when we have an idea we might put
    together paper prototypes, or really lo fi digital prototypes that maybe are more smoke and
    mirrors than real code, just to get people’s reactions. That helps test assumptions. And from
    there, once we are starting to develop higher refined ideas, we put real working prototypes
    in front of users to get reactions. Once we understand how they respond we’ll build it out,
    then we might do an AB test shared with something like 50% of users, and that way we can
    see the difference in user experiences. If it looks positive then we will roll it out to
    everybody.”
    Experience design and prototyping the Airbnb way: Q&A with Katie Dill https://www.justinmind.com/
    blog/experience-design-and-prototyping-the-airbnb-way-qa-with-katie-dill/
    Airbnb

    View Slide

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

  34. Greek Startups that embraced design

    View Slide

  35. When Startups don’t embrace design
    “We don’t need a designer yet”

    (9 out of 10 times means: “We will never need a designer until we will fail”)
    “We will use a theme”
    “Someone I know will help us”

    (aka: “Someone” = “My nephew”)

    View Slide

  36. Bonus track
    Kaizen

    View Slide

  37. Kaizen
    Continuous Improvement

    View Slide

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

    View Slide

  39. Kaizen

    View Slide

  40. Kaizen +
    2007: Launch
    2008: Native 3rd party Apps, App Store
    2009: Cut/Copy/Paste, Push notifications, Spotlight Search
    2010: Multitasking, Folders, FaceTime, Retina display
    2011: Siri, Notification Center, iCloud
    2012: Apple Maps
    2013: Visual overhaul
    2014: HealthKit, HomeKit, Continuity
    2015: 3D Touch
    2016: Overhauled Messages & Maps

    View Slide

  41. “It’s my startup

    And I'll cry if I want to”
    (a.k.a. how to embrace design)

    View Slide

  42. “It’s my startup - And I'll cry if I want to”
    Learn. Feel. Care.
    Ask not what design can do for you; ask what you
    can do for design.

    View Slide

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

    View Slide

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

  45. “It’s my startup - And I'll cry if I want to”
    Let designers do what they know best.
    Trust them.

    View Slide

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

    View Slide