TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.
-
Upload
merryl-dixon -
Category
Documents
-
view
224 -
download
1
Transcript of TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.
![Page 1: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/1.jpg)
1
TECH TALK& WORKSHOPNAZMULDEVELOPER
IZABELDESIGNER
![Page 2: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/2.jpg)
BUILD BETTER PRODUCTSNOT MORE FEATURES
![Page 3: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/3.jpg)
3
BUILD BETTER PRODUCTS; NOT MORE FEATURES
• Your code drives the experience for the user
•UI != UX
•Good UX = moments of delight
•Good UX = emergent property of ENG + DESIGN
![Page 4: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/4.jpg)
4
USERS HAVE GREAT EXPECTATIONS
• Smartphone revolution ensured this
• Embrace design to stay relevant
• Success is driven by good UX design
![Page 5: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/5.jpg)
UI != UX
![Page 6: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/6.jpg)
6
UI!=UX
LOGIN FLOW
Good UI
Bad UX
User-Ugh! Too Long!
:(
Developer-
Nice form! :)
User-Yaay! Press the
button :)
![Page 7: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/7.jpg)
7
UI!=UX
CHECKOUT FLOW
Good UI
Bad UX
Ship to
Bill to
CC info
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!:(
User-Yaay! This is more like it!
:)
![Page 8: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/8.jpg)
8
A FEW MORE UX BEST PRACTICES
•Design for crappy networks
•Design for short attention spans
• Pre-fetch more data
• Cache already fetched data
![Page 9: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/9.jpg)
THE DESIGN PROCESSLEARN HOW TO DELIVER DELIGHT
![Page 10: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/10.jpg)
10
THE DESIGN PROCESS
•User research
• Persona
•Use case
• Persona Use case Feature(s)
![Page 11: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/11.jpg)
11
DESIGN FOR PERSONAS
“CASEY GOOGLER” “DARTH STORM”
•DON’T DENATURE A PERSONA
•DON’T SUPPORT TOO MANY PERSONAS
![Page 12: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/12.jpg)
12
DESIGN FOR USE CASES
• Kids are hungry
• Working late
• Game night
USE CASES FEATURES
• Quick ordering
• Kid’s menu
• Family combo meals
“CASEY GOOGLER”
• Tech Savvy
• Has credit card
• Has kids
• …
![Page 13: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/13.jpg)
WHERE WE FIT IN THIS PROCESS
![Page 14: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/14.jpg)
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.
![Page 15: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/15.jpg)
HANDS ON PART 1DESIGN AN APP; NOT A RANDOM COLLECTION OF FEATURES
![Page 16: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/16.jpg)
16
WORKSHOP PART 1
Design mobile app
Order pizza
From one parlor
• Let’s think differently
•Why?
•Who? When, where, how?
• Flow
![Page 17: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/17.jpg)
17
WORKSHOP PART 1
Create a persona
This persona represents you
List 5 of your attributes
Convenience > Price
Has credit card
No dairy
Mobile shopper
Tech savvy
<Your name here>
![Page 18: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/18.jpg)
18
WORKSHOP PART 1
Create < 3 use cases
When – After work, it is late
Where – On a train, going home
How– Custom order; in-app payment
Use case # 1 – Working late, delivery
![Page 19: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/19.jpg)
19
WORKSHOP PART 1
Focus on flowSTEP 4 GRATIFY
• DELIVERY• TRACKING• STATUS• ESCALATIO
N• FEEDBACK
STEP 3 PAY
• GOOGLE WALLET?
• CARRIER BILLING?
• PAY ON DELIVERY?
STEP 2 CONFIGU
RE
• GLUTEN FREE CRUST
• VEGAN CHEESE
• DELIVERY OR PICKUP?
STEP 1 DESIRE
• I’M HUNGRY
FLOW FOR ORDERING PIZZA
![Page 20: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/20.jpg)
20
Add comments
Use device capabilitie
s
Document interaction between
steps/screens
Draw your UI on the stencil
Or just draw on a Post-It note and paste it over this stencil
Focus on the UX & the
flow
Keep the UI simple
Start by making
personas & use cases
![Page 21: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/21.jpg)
21
REMEMBER: THE FLOW + FOCUS ON UX (!UI) + DON’T FOCUS ON IMPLEMENTATION DETAILS
- YOU WILL WORK ALONE IN PART 1
- YOU HAVE 30 MINS
- OPEN YOUR “PART 1” ENVELOPES
- HAVE FUN!
![Page 22: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/22.jpg)
22
INDIVIDUAL ACTIVITY | 30 MINS
Create a persona
Create < 3 use cases
Design app < 9 screens
![Page 23: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/23.jpg)
HANDS ON PART 2DESIGN FOR MORE THAN ONE PERSONA
![Page 24: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/24.jpg)
24
WORKSHOP PART 2
Work as a team
Design 3 personas
Design 1 use case per persona
Redesign app
![Page 25: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/25.jpg)
25
- FORM GROUPS (OF UP TO 4
PEOPLE)
- INTRODUCE YOURSELF TO YOUR
NEIGHBORS
- OPEN YOUR “PART 2” ENVELOPES
- YOU HAVE 50 MINS
- HAVE FUN!
![Page 26: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/26.jpg)
26
TEAM ACTIVITY | 50 MINS
Create < 3 personas
Create 1 use case per persona
Re-design app < 9 screens
![Page 27: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/27.jpg)
WRAP UP
![Page 28: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/28.jpg)
28
YOU ARE A PART OF THE DESIGN PROCESS
• Build products; not features.
•Good UX is an emergent property
•Don’t design for everyone; think personas & use
cases
•Own the delight!
• bit.ly/uxcommunity | bit.ly/uxcommunitysurvey
![Page 29: TECH TALK & WORKSHOP 1 NAZMUL DEVELOPER IZABEL DESIGNER.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649efb5503460f94c0e303/html5/thumbnails/29.jpg)
<THANK YOU!>Don’t forget to OWN THE DELIGHT!
RATE IT @ bit.ly/uxcommunitysurvey
JOIN US @ bit.ly/uxcommunity