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

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

More Decks by Yiannis Konstantakopoulos

Other Decks in Technology


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

  2. Mockup Design User Interface Design User Experience Design

  3. Design != Art

  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
  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)
  6. UX vs. UI

  7. UX vs. UI

  8. UX vs. UI

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

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

  11. The Principles of UX Design 1. Find your users 2.

    Pen & Paper (Wireframes) 3. Design Mockups 4. Create Prototypes (Launch) 5. Measure & Improve
  12. Find your users • Learn how to think like your

    users do • Find and talk to them • Create personas
  13. Personas

  14. Pen & Paper (Wireframes) • Sketch. Test ideas. Be quick.

    Trust low fidelity. • Design User Flows/ Storyboards • Prepare your Sitemap
  15. Sketches

  16. Wireframes

  17. User Flows

  18. Sitemaps

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

    trust you
  20. UI Design

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

  22. Measure & Improve • Measure 
 (Analytics, Heatmaps, A/B Tests,

    Web Personalization e.t.c.) • Improve • Repeat
  23. Heatmaps

  24. A/B Testing

  25. Recordings

  26. Tools
 (regarding the previous steps)

  27. • Pen & Paper • Sketch (UI design) • UX

    PIN (Prototyping) • InVision (Prototyping) • Balsamic Mockups (Wireframes) • Axure (Wireframes & Prototyping) Tools Wireframes & Prototypes
  28. Tools Analytics • Google Analytics • hotjar (Analytics & Feedback)

    • Crazy Egg (Heatmaps) • Mixpanel (Analytics) • Optimizely (Analytics) • Kissmetrics (Analytics)
  29. When startups do the right thing 
 (and when they

  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/
  31. Hard facts Why startups fail, according to their founders http://fortune.com/2014/09/25/why-startups-fail-

  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
  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.
  34. Greek Startups that embraced design

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

 (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”)
  36. Bonus track Kaizen

  37. Kaizen Continuous Improvement

  38. Kaizen One Small Step Can Change Your Life: The Kaizen

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

  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
  41. “It’s my startup
 And I'll cry if I want to”

    (a.k.a. how to embrace design)
  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.
  43. “It’s my startup - And I'll cry if I want

    to” Hire good people
  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/
  45. “It’s my startup - And I'll cry if I want

    to” Let designers do what they know best. Trust them.
  46. Thank you! Yiannis Konstantakopoulos, porcupine.gr MATCH & DEVELOP A STARTUP