Download - UX101
![Page 1: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/1.jpg)
UX 101:Working with UX and
the UX designer
@natashairizarry
![Page 2: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/2.jpg)
Design is not just what it looks like and feels like. Design is how it works.
Steve Jobs
![Page 3: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/3.jpg)
UX is not UI
![Page 4: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/4.jpg)
What we see is visual design
![Page 5: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/5.jpg)
UX is MORE!
![Page 6: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/6.jpg)
“UX is the intangible design of a strategy that brings us to a
solution.”
![Page 7: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/7.jpg)
What is UX?
UX stands for User Experience
Who, What, When, Where, Why and How of a product
![Page 8: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/8.jpg)
How do UX designers work?
Ask questions/research
Follow a user-centered design process when designing products
![Page 9: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/9.jpg)
WTF is User Centered Design?
A process in which the needs, wants, and limitations of end users of a product are given extensive attention at each stage of the design process.
![Page 10: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/10.jpg)
![Page 11: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/11.jpg)
WTF is User Centered Design?
StrategyResearchAnalysisDesignProduction
![Page 12: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/12.jpg)
Strategy
Learn where you want to take your productAsk: Where are you now?Ask: Where do you want to be?Ask: How will you get there?Ask: How will you measure success?
![Page 13: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/13.jpg)
Benefits of Creating a Strategy
Gets your entire team involvedClarifies abstract design thinkingReduces the time spent building components that don’t contribute to user or business value
![Page 14: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/14.jpg)
Research
Is an investigative technique used to add context and insight to the design processIt is also used to combat the tendency to design for ourselves
![Page 15: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/15.jpg)
How is Research Done?
Non-directed interviewsContextual inquiryQuestionnairesCard sorting
![Page 16: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/16.jpg)
Analysis
Takes information collected in the research phase and turns it into actionable information
![Page 17: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/17.jpg)
Analysis Techniques
The creation of: PersonasMental modelsStoryboards
![Page 18: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/18.jpg)
Design
There are two parts to the design phase of this process: information architecture and visual designInformation architecture delivers wireframes and clickable prototypesVisual design produces high-fidelity comps and mockups
![Page 19: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/19.jpg)
Design Methods & Techniques
Sticky notesProject spaceGood practice guidelinesAestheticsPrototypingUser requirements
PersonasScenariosProgressive disclosureUsability testingRapid visualization
![Page 20: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/20.jpg)
Form over function.
![Page 21: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/21.jpg)
Production
You are familiar with this. Trust me.
![Page 22: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/22.jpg)
Why you should care:
Fast Company recently noted that industry studies show every dollar spent on UX brings in between $2 and $100 in return. (DANG!)
![Page 23: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/23.jpg)
Why you should care:
Do you code to deliver value to users? Do you want to become a better coder?
![Page 24: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/24.jpg)
Think of the experience the user is going to have.
![Page 25: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/25.jpg)
How to work with a UX designer
Get ready to deal with the neediest person you have ever met in your life.
![Page 26: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/26.jpg)
![Page 27: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/27.jpg)
Designers vs Developers
![Page 28: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/28.jpg)
Designers vs Developers
We are both hard to deal with.We are both terribly opinionated.
![Page 29: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/29.jpg)
Designers vs Developers
We have shared priorities.Design isn’t completely aesthetic and
development isn’t completely technical.We must communicate!
![Page 30: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/30.jpg)
Collaboration
Successful product development requires effective collaboration between designers and
developers.
![Page 31: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/31.jpg)
Collaboration Tips
Check in about design status every daySit with the teamCommunicate layout mechanicsDesigners write HTML & CSSPair designers & developersExternalize everything
![Page 32: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/32.jpg)
Q&A
![Page 33: UX101](https://reader034.vdocument.in/reader034/viewer/2022051110/54c73e9d4a79593f708b45b3/html5/thumbnails/33.jpg)
THX!