Jacklyn Cohen conducted a UX bootcamp on designing grocery shopping apps. She began with introductions and an overview of UX design, usability, and UI. Cohen explained the differences between these concepts and emphasized that UX design focuses on the overall user experience. The bootcamp covered various topics related to the UX process like research methods, creating personas and empathy maps, wireframing, and user testing. Participants conducted user interviews on grocery shopping habits, created affinity diagrams to identify themes, and designed wireframes for a grocery shopping app home screen and shopping list screen. User testing of the wireframes was also practiced. The goal of the bootcamp was to provide hands-on experience with UX design methods through the

1. Jacklyn Cohen, UX Consultant @ UX Collective
UX BOOTCAMP

2. UX BOOTCAMP
3
My name is Jacklyn.
Nice to Meet you
@playfulpixel [I curse a lot]
@LadiesThatUXATL [dudes are welcome!]
Your name
Your current job
Why you’re here
Favorite app
Now, YOU!

3. UX BOOTCAMP
4
You can download them!
These Slides + Others
slideshare.net/jacklynburgan

4. UX BOOTCAMP
5
uxcompanion.com
A handy glossary of user experience
(UX) theories, tools and principles. I
promise you’ll use it today!
UX Companion
Isn’t is strange that a chopped off hand holding an old iPhone looks
professional? It gives me the creeps.

5. A
G
EN
D
A
08:00 – 08:30 Introductions
Get to know each other
08:30 – 09:30 UX Design + Usability + UI
Understand the difference
09:30 – 10:00
10:00 – 10:30 Research
Conducting + Analyzing
10:30 – 11:30 Wireframes
Creating + Testing
11:30 – 12:00 Tools + Software
A big old list of ‘em
UX Process
Waterfall, Agile + Lean
08:00 – 08:30 Resources
People + events you should know
These times are bogus. This workshop is built for YOU, so timing will depend on our progress.

6. UX Design + Usability + UI
No, they’re not the same.

7. 8
“The design of anything independent of medium or across
[device] with human experience as an explicit outcome
and human engagement as an explicit goal”
— Jesse James Garrett, co-founder of Adaptive Path
“User experience encompasses all aspects of the end-user's
interaction with the company, its services, and its products.”
— Nielsen Norman Group
User Experience Design
“User experience design (UXD or UED) is the process of
enhancing user satisfaction by improving the usability, ease
of use, and pleasure provided in the interaction between the
user and the product.”
— Wikipedia
http://img.dare.co.uk/wp/spectrum-of-user-interface-design.gif

8. 9
“Usability is the ease of use and learnability of a human-
made object. The object of use can be a software
application, website, book, tool, machine, process, or
anything a human interacts with.”
— Wikipedia
Usability
“Usability is a quality attribute that assesses how easy user
interfaces are to use. The word "usability" also refers to
methods for improving ease-of-use during the design
process.”
— Nielsen Norman Group
This proves that people are super confused by what usability is because this
was a top result in google images.http://usabilitygeek.com/wp-content/uploads/2012/07/12-Typography-Font-Guidelines-Usability.jpg

9. User interface design (UI) or user interface engineering is the
design of user interfaces for machines and software, such as
computers, home appliances, mobile devices, and other
electronic devices, with the focus on maximizing usability
and the user experience.
— Wikipedia
10
“Usability is the ease of use and learnability of a human-
made object. The object of use can be a software
application, website, book, tool, machine, process, or
anything a human interacts with.”
— Wikipedia
UI [User Interface Design]
http://netdna.webdesignerdepot.com/uploads/2015/02/003.jpg

10. UX BOOTCAMP
11
Erik Flowers
uxisnotui.com
UX is the intangible design
of a strategy that brings us
to a solution.
“
”

11. UX BOOTCAMP
12
“
”

12. UX Process
Waterfall, Lean + Agile

13. UX BOOTCAMP
14
Traditional UX Process // Waterfall
Information gathering
Discover
Releasing the
product
Deploy
Building the product
Develop
Creating
requirements
Define
^ What that says
Design

14. UX BOOTCAMP
14
Traditional UX Process // Waterfall
Information gathering
Discover
Releasing the
product
Deploy
Building the product
Develop
Creating
requirements
Define
^ What that says
Design

15. UX BOOTCAMP
15
Iterative UX Process // Agile
Discover Deliver
Develop
Define
Design
Research
• Focus Groups
• Competitive Analysis
• Interviews
• Personas + Scenarios
• User Goals
• Usability Goals
Implementation
• Usability Testing
• Expert Evaluation
• Accessibility Evaluation
Concept
• Concept Models
• User Scenarios
• Paper Prototypes
• Usability Testing
• Expert Evaluation
Design
• Process Flows
• Wireframes
• Interactive Prototypes
Launch
• Usability Testing
• Expert Evaluation
• Accessibility Evaluation
• Focus Groups
• Competitive Analysis
• Metrics

16. UX BOOTCAMP
16
Iterative UX Process // Lean
Think
Check
Make
• Generative Research
• Ideation
• Mental Models
• Behavior Models
• Test Results
• Competitive Analysis
• A/B Testing
• Usability Testing
• Site Analytics
• Metrics
• Prototypes
• Wireframes
• Value Proposition
• Hypotheses
• Landing Page
• Code

17. Research
Conducting + Analyzing

18. UX BOOTCAMP
18
Competitive Analysis
Your Company Competitor 1 Competitor 2 Competitor 3
Overview + Profile
Analysis
Competitive Advantage
Target Market
Market Share
Marketing Strategies
Products + Services
Pricing + Costs
Distribution Channels
This is a tweaked version of the Client Heartbeat template.

19. 19
Let’s Talk Apps
• What grocery stores have apps that you’ve seen?
• What makes a good/bad grocery shopping experience?
• What other activities surround grocery shopping?
• What makes a good/bad grocery shopping experience?
• What other activities surround grocery shopping?
• What grocery stores have apps that you’ve seen?
#RealTalk: Grocery Shopping is the Worst
https://s3-eu-west-1.amazonaws.com/static.nextnature.net/app/uploads/2016/02/supermarket-consumers-impact1.jpg
pg

20. UX BOOTCAMP
20
Competitive Analysis
Price Chopper InstacartPrice Chopper’s List Instacart’s List

21. UX BOOTCAMP
21
Competitive Analysis
Aldi KrogerAldi’s List Kroger’s List

22. UX BOOTCAMP
22
Competitive Analysis
Publix Shop RitePublix’s List Shop Rite’s List

23. UX BOOTCAMP
23
Competitive Analysis
Whole Foods ZapposWhole Foods List Favor

24. 24
Why Understand our Users?
• So you don’t build a snow machine for an eskimo
• Ensures you’re solving a problem that exists in peoples lives
• Key to building a product that is tailored to its audience
http://www.wired.com/wp-content/uploads/2014/04/10_watering-can.jpg
What do we Need to Know about our Users?
• Why?
• Who?
• What?
• Where?
• When?
• How?

26. UX BOOTCAMP
26
What do we Need to Know about our Users?
01// Why?
Why are they coming to us?
Goals?
What are their needs?
04// Where?
What are they when they access?
Where are they coming from?
02// Who?
Who are our users?
Businesses vs. consumers?
Demographics?
Background knowledge?
Understanding of terminology?
05// When?
When are they visiting?
Morning or evening?
When they’re in a crisis?
Daily?
Monthly?
03// What?
What are their habits?
Do they use social networks?
Content producers or consumers?
What you ask depends on the product
06// How?
How are they accessing?
Desktop or mobile?
Tablet?
Over the phone or in person?

27. 28
Finding Participants
Where to find them:
• Existing customers
• Work with your support or sales teams
• Coffee shops
• Asking your network
• Social networks and forums
• Craigslist ads [last resort - stay safe]
http://www.morgansbookbag.com/wp-content/uploads/2015/06/coffee-shop.jpg

28. 29
How to Ask Questions
• Be wary of priming
• Don’t ask leading questions
• Never ask about intention, always probe behavior
- “How many times do you plan to go to the gym?”
+ “How many times have in the last 3 months?”
• Focus on specific instances
+ “Have you ever had ________ problem”?
+ “Tell about the last time you ....”
• Avoid generalizations:
- “What do you usually ...”
• Keep them talking
+ “Tell me more about that”
+ “What do you mean by...”
+ “Help me understand better..”
• Never put words into their mouth
- “So do you mean...”
http://www.pixotech.com/wp-content/uploads/2014/07/IMG_1739.jpg

29. UX BOOTCAMP
30
Preparing for an Interview
Record, if possible
Ask permission. Explain why + that it’s
for helping with any gaps
Focus on topics
Focus on topics rather than a list of
questions
Stay on track
If you divert off topic: “that’s really
interesting, can you tell me more about X…?”
Take notes
Take as many notes as you can while
maintaining focus on the participant
Keep it organic
It should be a conversation

30. UX BOOTCAMP
31
Topic Maps + Discussion Guides
Final
Testing
Choosing a
place to visit
Guide
books
Budgeting
Working out
who will be
coming with
me
Visas +
paperworkPet care

31. UX BOOTCAMP
32
Exercise 1: Topic Maps + Interviews
You are going to do a user interview about grocery shopping in order to better
understand users’ behavior + habits + desires
• Prepare a topic map covering all subjects you want to know [20 minutes]
Be prepared to share!

32. UX BOOTCAMP
33
Exercise 2: Conducting Interviews
Let’s interview!
• Split into groups of 3
• 1 person will interview, 1 will record notes on post it notes, 1 person
will be interviewed
• We will rotate every 10 minutes
Be prepared to share!

33. 34
Capturing Insights
• Straight after interview
• Write down or identify the 3 most important insights
• When reviewing recording/notes
• Write out each interesting point on individual post it
Identifying Trends with Affinity Diagrams
• Once you have all of your data, it’s time to analyze
• Goal is to extract common trends / themes
• Post-Its are your friends

34. UX BOOTCAMP
35
Exercise 3: Affinity Diagram
The affinity diagram process lets a group move beyond its habitual thinking and
preconceived categories. This technique accesses the great knowledge and
understanding residing untapped in our intuition.
• Everyone should have a pile of post it notes
• One group will place their notes on the wall + read out the insight
• If another group has a similar insight they will place it on top
• Repeat until all the post it notes are placed on the wall
• Create themes from the grouped insights

35. UX BOOTCAMP
36

36. 37
Personas
• An example, generally fictional, of a person within your
user base
• Created by conducting user research + summarizing
trends into one or more archetypes
Why they’re Important
• Communication tool
• Useful for summarizing what you know about your user
• Will help to highlight pain points + opportunities to
tailor your product to your user
• Keep your product focused on your key users rather than
building for the whole world.
• [Keep in mind it’s just a framework, not a roadmap]
http://www.christinanghiem.com/images/persona-01.jpg

37. UX BOOTCAMP
38
Data to be Included
Goals + Needs
Scenarios
Describe what they would do
+ why independent of an
interface
BehaviorsNeeds Biographical Info
Like name, age, gender,
location, income, etc.
Personality Traits
Optional, but these traits
should be based in research

38. UX BOOTCAMP
39
http://www.christinanghiem.com/images/persona-01.jpg

39. UX BOOTCAMP
40
https://fakecrow.com/wp-content/uploads/2014/04/FakeCrow_Persona_Template2.jpg

40. UX BOOTCAMP
41
Persona Template
Bio + Demographics Behaviors
Stories + Scenarios Goals + Needs

41. UX BOOTCAMP
42
Provisional Personas
• Provisional Personas are personas created without primary research
• They can be created through empathy mapping techniques
• They need to be validated as soon as possible with real users as part of the build,
measure, learn loop

42. What does this person
THINK and FEEL?
What does this person
SEE?
What does this person
HEAR?
What are this
person’s NEEDS?
What are this person’s
CHALLENGES?
What really counts? What are their major preoccupations?
What are their worries and aspirations?
What do they
hear in the
media and
advertising?
What do their
friends and
family say?
What do their
bosses, and
other
influencers
say?
What is their
home
environment
like? What is
their work
environment
like? Who are
their friends
and coworkers?
Why do they need this? What needs does
this already address? What do they need
to learn to use this?
What obstacles do they need to
overcome? What fears are blocking them?
What frustrations are causing friction?

43. What does this person
THINK and FEEL?
What does this person
SEE?
What does this person
HEAR?
What are this
person’s NEEDS?
What are this person’s
CHALLENGES?

44. UX BOOTCAMP
45
Exercise 4: Empathy Maps
Scenario: You’re hosting a holiday dinner at your house for 12 people.
• Treat your table as a team
• Draw an empathy map on your table or wall
• Begin filling out your empathy map based on insights from your interviewing
exercise and conversations with your team.
• You’ve got 30 minutes for this exercise.

45. 47
Challenges with Personas
• They can be artificial / abstract / fictitious
• They are a composite sketch of 10 people all rolled into 1
• They don’t have opinions
• They can’t talk back, answer questions, or give feedback
http://iceaventuras.blogs.sapo.pt/quando-por-estupidez-perdes-um-dia-19493
This is why you shouldn’t post photos of your babies on the internet.

46. Wireframes
Creating + Testing

47. 49
What’s a Wireframe?
• Focus on Structure.
• Visualize Ideas.
• Define Project Scope.
• Clarify Hierarchy.
• Identify Content Needs.
• Promote Discussion.
• Reduce Problems Early.
http://www.designedbyknight.com/wp-content/uploads/2014/01/reservation_annotation.jpg
themetaq.com/articles/wireframe-is-worth-a-thousand-spreadsheets-wireframing-101

48. UX BOOTCAMP
50
Wireframes are fun for Everyone!
Useful to understand patterns and
visual hierarchy while creating
awesome products
Designers
Inform the requirements of what
they’re building
Developers
As a tool to make sure their needs and
goals are met.
Clients
http://technical.ly/philly/wp-content/uploads/sites/2/2015/10/GDI_Summit_2014-074-e1444137795534.jpg
http://greatives.eu/themes/osmosis/wp-content/uploads/2014/10/Young-creative-designer-man-at-phone-working-at-office.jpg
http://goblackcentral.com/wp-content/uploads/2013/01/business-owner.jpg

49. UX BOOTCAMP
51
Use + Flexibility
Wireframes can be [and should be] used EVERY DAY. But specifically, when you’re
having trouble agreeing with your stakeholder, when your design is more than two
pages deep, etc.
Once the wireframe has been approved, does the comp need to match pixel perfect?
The answer is:
IT DEPENDS!

50. UX BOOTCAMP
52
Exercise 5: Introduction to Wireframes
Using the reference on the next
slide, sketch what you see.
We’ll complete this exercise in
5 minutes.
Here are some examples of
varying fidelity.

53. UX BOOTCAMP
55
Exercise 6: Design a Grocery App
Put your research data, empathy maps and wireframe skills to use!
Create a home screen for a grocery shopping app. You’ve got 30 minutes.
Think about:
• What makes a good/bad grocery app experience?
• What elements did people say they liked when you talked to them?
• What other activities surround grocery shopping and how can you design for them?
• What groups/themes did you identify in your affinity map?
• How does a user navigate from the home screen to create a shopping list?

54. UX BOOTCAMP
56
Exercise 6.1: Design a Grocery App
Create a shopping list screen for a grocery shopping app. You’ve got 30 minutes.
Think about:
• How do people interact with shopping lists in the store?
• What makes a good/bad grocery app experience?
• What elements did people say they liked when you talked to them?
• What other activities surround grocery shopping and how can you design for them?
• What groups/themes did you identify in your affinity map?

55. UX BOOTCAMP
57
Exercise 7: User Testing
Find a partner to test your wireframe.
• Remind participants to be as candid as possible - your feelings won’t be hurt!
• Let them know that this is just a prototype so they’ll need to use their imagination
• Remind them to think out loud and ask questions
• I’ll give you some questions to get started with and you fill in the rest with ideas
from your topic map. Ready?

56. 59
Congratulations
You just completed your first user experience design sprint!
http://www.canogaparknc.org/wp-content/uploads/2016/07/sun_fw.jpg
pg

57. Tools + Software
A big old list of ‘em

58. UX BOOTCAMP
61
For Wireframes + Prototypes
• UX Pin
• Wireframe.cc
• Solidify App
• Proto.io
• InVision
• P.O.P. app
• Axure
• Paper sketches
• Flinto
• Protoskecth
• Mockups.me
• Appery
• Realizer App
• Framer JS
• Easel
• Power Mockup
• Moqups
• Keynote Kung Fu
• Antetype
• AppSketcher
• HotGloo
• FlairBuilder
• Pidoco
• Pencil Project
• FileSquare
• Concept.ly
• MockingBird
• Mockflow
• iPlotz
• Balsamiq
• OmniGraffle
• Fluid
• Handcraft
• Composite

59. UX BOOTCAMP
62
For Research + Testing
• Wufoo
• TypeForm
• Bagel Hint
• Verify App
• Usabilla
• Morae
• UX Recorder
• Google Hangouts
• PollDaddy
• Qualtrics
• SurveyGizmo
• SurveyMonkey
• WebNotes
• LiveChat
• Frelay
• iPerceptions
• Kampyle
• Qualaroo
• UserVoice
• Webreep
• Intuition HQ
• Usability Hub
• UsersThink
• Plain Frame
• Chalkmark
• Plunk
• SilverBack 2.0
• Delight.io
• MagiTest
• Camtasia
• Jing
• Try my UI

60. UX BOOTCAMP
63
For Organizing Information
• Mind Node
• Lucid Chart
• MindMeister
• Coggle.it
• Optimal Sort
• Concept Codify
• WebSort
• Simple Card Sort
• Xsort
• XMind
• Mindjet
• Freemind

61. UX BOOTCAMP
64
For Diagrams + Sitemaps
• Sketch
• Illustrator
• Photoshop
• Gliffy
• Lovely Charts
• Creately
• Google Drawings
• Draw.io

62. UX BOOTCAMP
65
For Analytics + Metrics
• FullStory
• Crazy Egg
• Good Data
• KISSmetrics
• Mix Panel
• Google Analytics
• Lucky Orange
• Live Person
• Myna Web
• HiConversion
• Tableau
• Maxymiser
• App Annie
• Flurry
• Woopra
• Quantcast
• Piwik
• Clicky
• Attention Wizard
• Click Density
• Click Tale
• Inspectlet

63. Other Resources
People + events you should know

64. UX BOOTCAMP
67
Recommended Online Reading
• Hints from the Lazy Bear
• 52 Weeks of UX
• UX Apprentice
• Usability First Glossary
• UX Beginner
• UX Booth
• UX Magazine
• UX Matters
• UX Zeitgeist
• Smashing Magazine
• UIE
• A List Apart
• Think Brownstone
• Dear Design Student
• Boxes and Arrows

65. UX BOOTCAMP
68
Recommended Books
• Smashing UX Design
• Don’t Make Me Think, Revisited
• The Elements of User Experience
• The User Experience Team of One: A Research and Design Survival Guide
• It's Our Research: Getting Stakeholder Buy-in for User Experience Research Projects
• Designing Together: The collaboration and conflict management handbook for creative professionals
• How to Make Sense of Any Mess: Information Architecture for Everybody

66. UX BOOTCAMP
69
People you Should Know
• Jakob Nielson
• Jared Spool
• Alan Cooper
• Dana Chisnell
• Nate Bolt
• Peter Morville
• Stephen Anderson
• Steve Krug
• Luke Wroblewski

67. UX BOOTCAMP
70
Companies of Note
• Nielsen Norman Group
• Adaptive Path
• IDEO
• Smart Design
• Frog Design
• Cooper Design

68. UX BOOTCAMP
71
Local Organizations
• Ladies that UX [non-ladies are welcome!]
• IXDA
• amUX
• UXPA
• Atlanta Web Design Group
• CHI Atlanta

69. UX BOOTCAMP
72
Conferences
• Talk UX
• GIANT
• Interaction [by IXDA]
• SIGCHI
• IA Summit
• Gel Conference
• Enterprise UX
• #dareconf
• UI21 [by UIE]

70. Questions?
Ask me anything

71. Thanks
y’all!