1 / 29

UX Design for Developers

UX Design for Developers. Tech Talk & Workshop. Nazmul, Developer. Izabel , Designer. Build better products not more features. Build better products; not more features. Your code drives the experience for the user UI != UX Good UX = moments of delight. Users have great expectations .

astra
Download Presentation

UX Design for Developers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UX Design for Developers Tech Talk & Workshop Nazmul, Developer Izabel, Designer

  2. Build better productsnot more features

  3. Build better products; not more features • Your code drives the experience for the user • UI != UX • Good UX = moments of delight

  4. Users have great expectations • Smartphone revolution ensured this • Embrace design to stay relevant • Success is driven by good UX design

  5. UI != UX

  6. User- Ugh! Too Long! :( User- Yaay! Press the button :) UI!=UXLogin Flow Developer- Nice form! :) Good UI Bad UX

  7. Ship to Developer- Whew! Got all the data to make calls to fulfillment and payment APIs! :) User- Ugh! More forms? Please, make it easy for me to pay you! :( UI!=UXCheckout Flow User- Yaay! This is more like it! :) Good UI Bad UX Bill to CC info

  8. A few more UX best practices • Design for crappy networks • Design for short attention spans • Pre-fetch more data • Cache already fetched data

  9. The design process Learn how to deliver delight

  10. The design process • User research • Persona • Use case • Persona Use case Feature(s)

  11. Design for personas • Don’t denature a persona • Don’t support too many personas “Casey Googler” “Darth Storm”

  12. Design for use cases • Tech Savvy • Has credit card • Has kids • … “Casey Googler” Use cases Features • Quick ordering • Kid’s menu • Family combo meals • Kids are hungry • Working late • Game night

  13. Where we fit in this process

  14. Where we fit in this process • Ground designs in reality • Bring amazing designs to life • Team = Developers + Designers + PM • Design, prototype, iterate (a lot). Then Build.

  15. Hands On Part 1 Design an app; not a random collection of features

  16. Workshop Part 1 • Let’s think differently • Why? • Who? When, where, how? • Flow Design mobile app Order pizza From one parlor

  17. Workshop Part 1 <Your name here> Convenience > Price Has credit card Create a persona This persona represents you List 5 of your attributes No dairy Mobile shopper Tech savvy

  18. Workshop Part 1 Use case # 1 – Working late, delivery When – After work, it is late Where – On a train, going home How– Custom order; in-app payment Create < 3 use cases

  19. Flow for ordering pizza Workshop Part 1 Focus on flow

  20. Draw your UI on the stencil Or just draw on a Post-It note and paste it over this stencil Add comments Use device capabilities Document interaction between steps/screens Focus on the UX & the flow Keep the UI simple Start by making personas & use cases

  21. - You will work alone in Part 1 - You have 30 mins - Open your “Part 1” envelopes - Have fun! Remember the flow + Focus on UX (!UI) + Don’t focus on implementation details

  22. Individual Activity | 30 mins Create a persona Create < 3 use cases Design app < 9 screens

  23. Hands On Part 2 Design for more than one persona

  24. Workshop Part 2 Work as a team Design 3 personas Design 1 use case per persona Redesign app

  25. - Form groups (of up to 4 people) - Introduce yourself to your neighbors - Open your “Part 2” envelopes - You have 50 mins - Have fun!

  26. Team Activity | 50 mins Create < 3 personas Create 1 use case per persona Re-design app < 9 screens

  27. Wrap up

  28. You ARE a part of the design process • Build products; not features • Don’t design for everyone; think personas & use cases • Own the delight! • Join us @ bit.ly/uxcommunity

  29. <Thank You!> Don’t forget to OWN THE DELIGHT! Join us @ bit.ly/uxcommunity

More Related