what is this ux thing?
TRANSCRIPT
![Page 1: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/1.jpg)
WHAT IS THIS USER EXPERIENCE THING?
Presented by Youmna Aoukar
![Page 2: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/2.jpg)
HI MY NAME IS [email protected]
![Page 3: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/3.jpg)
![Page 4: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/4.jpg)
WHY SHOULD YOU BE EXCITED ABOUT UX?
![Page 5: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/5.jpg)
Olly the web connected smelly bot http://www.ollyfactory.com/
PLAY
![Page 6: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/6.jpg)
Olly the web connected smelly bot http://www.ollyfactory.com/
![Page 7: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/7.jpg)
Fat Duck restaurant experience:Like a kid in a sweet shop
http://www.thefatduck.co.uk
PLAY
![Page 8: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/8.jpg)
ICE BREAKER 1-Introduce yourself (Name,Profession?)2-Why are you interested in learning UX?
![Page 9: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/9.jpg)
CARD SORTING EXERCISEWHAT IS UX?
1- Gather in groups of 42- 2 people from the group will write keywords using post-its about what comes to your mind when you think of UX3- 2 other people from the same group will give a title to categorize these keywords using another color of post-its4-Each group presents 5-Lets compare by finding similarities and difference to gather insights
![Page 10: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/10.jpg)
UX CHECKLISTBeing in this field requires
Problem solving
Listening
Observation
Innovative
Analytical
Methodological
Holistic
Risk taker
Realistic
Rational
EmpatheticCommunicative
Storytelling
Source: quirky.com
![Page 11: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/11.jpg)
UX FRAMEWORK
=work of multiple people
Development
Prototyping
Business requirements
User research
Content Strategy
Interaction Design
Testing
QA
Copywriting
Information ArchitectureVisual Design
![Page 12: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/12.jpg)
![Page 13: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/13.jpg)
USER RESEARCH
• Informs Strategy• Tests solutions• Compares performance• Measures success
Good design starts with research
Some questions we hear : Is there a customer need or a market for this product? Are we solving a problem that respond to users needs and behaviors? What problem are we tackling? How many users used this website in the past? What is the data? Is this the right feature for this website/product?
![Page 14: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/14.jpg)
INFORMATION ARCHITECTURE
• Facilitates understanding of the system• Orders meaning• Creates clarity• Establishes consensus
Structure your content and prioritize it
Some questions we hear : How is the navigation of the site organized ? How are we going to prioritize content?How many main pages does our site/app have ? Where does this page link to?
![Page 15: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/15.jpg)
INTERACTION DESIGN
• Designs the pieces• Refines the flow• Determines the errors• Documents the solutions
Designing the behavior of the product
Some questions we hear : Is the product behavior predictable, expected, and usable? Can our user accomplish her goals without many steps or much conscious effort? What are the main features of the website?
![Page 16: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/16.jpg)
SO...WHAT IS UX ?1-User Needs2-Business Goals
![Page 17: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/17.jpg)
USER NEEDSEverything that affects the users interaction with that product
![Page 18: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/18.jpg)
BUSINESS GOALSUX designer need to take into account the business need too.
![Page 19: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/19.jpg)
UX IS A RESULT1-How user feels : Effect you have(happy, sad,confused...)2-How users act: Your return of investment (ROI)
![Page 20: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/20.jpg)
WHAT IS GREAT ABOUT THESE EXPERIENCES?
![Page 21: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/21.jpg)
Instagram Netflix
BMW Car DashboardHermin Miller
ChairiPhone
![Page 22: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/22.jpg)
Xbox
Square Cash MTA Kiosk
Oculus Rift Mario Kart
Uber App
![Page 23: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/23.jpg)
WHAT IS GREAT ABOUT THESE EXPERIENCES?
1-Solves a problem2-Creates habits 3-Inspire Emotions3-Becomes Indispensable
![Page 24: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/24.jpg)
HOW DO WE MEASURE WHAT IS GREAT ?
1-Business goals (increased sales, acquired users)2-Competition (Competitive offerings against competition)3-User testing(Validation of the UX with users)4-Data analytics (Metrics:clicks, number of visits etc..)5-Social media stats (social buzz on Twitter, Instagram, Facebook etc..)
![Page 25: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/25.jpg)
IA HEURISTICS
Source: Abby Covert IA Heuristics
![Page 26: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/26.jpg)
UX DESIGN PROCESSis a set of tools and techniques to take users needs intoaccount at every stage of the product lifecycle.
![Page 27: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/27.jpg)
DISCOVER
•Determine business needs and goals by workingclosely with the strategy team or product managers
Technique: Stakeholder interviews or issue card exercise
---> Business requirements
![Page 28: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/28.jpg)
Issue card exercise for the redesign of a consulting company website. The goal of this exercise was to understand business needs and pain points
![Page 29: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/29.jpg)
DISCOVER
•Determine users needs by engaging and observing target audience
Technique: User interviews, surveys, ethnographical studies
----> Customer journeys/Personas
*For interviews, users can be recruited or guerrilla style interviews can be conducted in problem space
![Page 30: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/30.jpg)
Survey sample for curriculum development of online education platform?
![Page 31: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/31.jpg)
DISCOVER
•Look at your competitors
Technique: Competitive Analysis
----> Understand best practices and patterns of behaviors
![Page 32: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/32.jpg)
Competitive analysis diagram for donation based website
![Page 33: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/33.jpg)
DISCOVER•Create personas which are fictional users that represents the target audience of the product:who they are (demographics), theirs behaviors, needs, goals and pain points.
They can be also be created by looking at a the data collected from the user interviews/surveys/ethnographical studies and the similarities and differences in patterns of behavior
Tool: Persona table
![Page 34: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/34.jpg)
Personas template
PERSONAS
WHO?
DEMOGRAPHICS
BEHAVIORS
NEEDS/GOALS
FIND THE PROBLEMS THAT PEOPLE FACE WHILE NETWORKING IN THE ART WORLD IN ORDER TO FIND SOLUTIONS/ IMPROVEMENTS
![Page 35: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/35.jpg)
Personas of Mail ChimpSource: Mail Chimp
![Page 36: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/36.jpg)
DISCOVER
•Create customer journeys which are the key stages of a users activities in the problem space, how they behave in each stage as they move to complete their tasks
Tool: Customer journey map
----> Identify opportunities, obstacles and possible features for the product
![Page 37: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/37.jpg)
Andy app / Customer journey that defines key tasks that people perform before, during and after an art event (like Art Basel) . This diagram maps out the different tasks, different environments and different feelings that the person has.
task gridWalk me through your networking activities BEFORE an art event
MAIN TASK: MAIN GOAL:
Sub-Tasks
Scenario
Improvements
Pain points
Functionalities
![Page 38: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/38.jpg)
Awareness Consideration Validation Aquire
The user is aware theproduct exist (heard, read or saw)
The user start thinking about their needs andwhich product toconsider
The user knows what he wants but needs morevalidation to feel secure
The user is sold butneeds incentivesto stay loyal
![Page 39: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/39.jpg)
DISCOVEROnce the team has a clear idea of the who?what?where?how and why? of the product experience they can start thinking of the scope
•Define what can be built/designed in scope(what features for example) with certain amount of time and money
Tool: Post-its
---->Prioritize feature by dividing them in high, medium and low
![Page 40: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/40.jpg)
DESIGN
Thinking about the Information Architecture
•Design the site map which determines the structure, navigation and taxonomy of the website
*Taxonomy is how we classify content.
![Page 41: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/41.jpg)
Example of site map
![Page 42: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/42.jpg)
DESIGNDesigning the interactions
•Design user flows which represent the different actions the users takes while doing a certain task.
•Wireframes is a blue print of the experience which have different resolution from a sketch to a high fidelity mockup
--->Hierarchy of information is tackled, features and functionality are established, rules of displaying content (by default, on load, on click, on hover, if logged in)
![Page 43: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/43.jpg)
Example of a wireframe: Wireframes can be low fidelity (sketch) high fidelity (black and white) mock-up (with color)
Low fidelitySource: Harvest App
High fidelity
![Page 44: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/44.jpg)
Mockup
Example of a wireframe: Wireframes can be low fidelity (sketch) high fidelity (black and white) mock-up (with color)
![Page 45: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/45.jpg)
...VISUAL DESIGNLook and Feel GUI(Graphical User Interface)
![Page 46: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/46.jpg)
...DEVELOPMENTProgrammers code front and back end experienceRelease a beta version in QA (Quality Assurance)(Find bugs and errors)
![Page 47: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/47.jpg)
...TESTING IN BETWEENEACH PHASE
Creating quick and easy prototypes is essential to the development of the experienceand product. It is recommend to have as many iterations as possible
![Page 48: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/48.jpg)
HOW TO GET INTO UX?• Take classes and workshops online and offline (more
extensive/advanced classes are available at GA)
• Build a portfolio• Freelance or work for free or a side project• Go to Meetups (THE UX LAB, HUGE UX EVENTS,
NYTECH, BKUX,)
• Be curious and meet people in the field
![Page 49: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/49.jpg)
WORKING ENVIRONMENTSIN THE UX FIELD
• Agencies• Clients• Start-ups• Tech companies• Freelance
![Page 50: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/50.jpg)
AS A UX DESIGNER YOU MIGHT WORK ON
• Marketing Experiences (Smart Water)• Digital Products (Google maps)• Hardware products (Fitbit)• Retail Experiences(Fragrance IQ by Sephora)
• Interactive Environments( Cooper Hewitt Smithsonian Museum)
• Games (LA Noire)
![Page 51: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/51.jpg)
UX REFERENCES• UX booth DIGITAL PUBLICATION
• A list apart DIGITAL PUBLICATION
• Smashing Magazine DIGITAL PUBLICATION
• IXDA ASSOCIATION/COMMUNITY
• The Interaction Design Foundation ASSOCIATION/COMMUNITY
• Product Hunt PRODUCT
• Nielsen Norman Group UX FIRM
• User Testing or Peak PRODUCT
• Design Kit by Ideo METHOD TOOLS
• Google Ventures VC FIRM
• Service Design Tools METHOD TOOLS
• Omnigraffle SOFTWARE / COMMUNITY
• Axure SOFTWARE / COMMUNITY
• Boxes and Arrows COMMUNITY
![Page 52: What is this UX thing?](https://reader034.vdocuments.mx/reader034/viewer/2022052700/55c59e82bb61ebea6a8b47c8/html5/thumbnails/52.jpg)
QUESTIONS?