Crash Course in UX - Internet Week NY 2015

Crash Course
in UX
Deﬁne your mission, better understand your
audiences, craft your story, create and organize
your content, explore key design principles and
understand the functional interactions to create
engaging, modern and satisfying digital user
experiences. Is that all?!
Photo by Ron Cogswell, Flickr

DP
Hi, I’m Sarah…
Director of User Experience
Digital Pulp
@sblecher
sarah@digitalpulp.com
https://www.linkedin.com/in/sblecher

DP
What is UX?
It’s the moment when content, design,
and interaction come together and
how the user feels about it.

DP
Content + Design + Interaction
CORE ELEMENTS

DP
WHAT ARE THE STEPS?
Deﬁne Your
Goals
Understand
Your Users
Create Your
Content
Organize
Your Content
Craft the
Experience
Test the
Experience
Visual
Design
Interactions &
Technology

DP
EXAMPLE GOALS
• Communicate who you are and what you do in a
compelling way online
• Support users during the evaluation phase with things they
didn’t know to ask for
• Continually drive users to the next action (ﬁnd a campus,
ask their questions and sign up for a tour)

DP
“The more you know. The more
ideas you’ll have.”
- Sarah Blecher, Digital Pulp
Photo by Mr Moss, Flickr

DP
Who are they? How do they see the
world? What motivates them? What
are they trying to accomplish? What
do they need from you?
GAINING KNOWLEDGE

DP
CREATING PERSONAS
http://www.ux-lady.com/diy-user-personas/

DP
CREATING PERSONAS
Aspiring Parents (Children 0-2)
They may or may not have the child in daycare but they are
just starting to think about school for their child. They wonder
about their options and when is the right time to start thinking
about and researching schools.

DP
CREATING PERSONAS
Experienced Parents (Children 6-13)
These parents know what they want. They are dissatisﬁed
with their previous school or have recently moved. They are
interested in teaching philosophies, curriculum, class size,
discipline, test scores, all the details. Friendships inﬂuence
their decision.

DP
TIPS FOR PERSONAS
• Go beyond demographics to what motivates the person
(lack of time, lack of knowledge, lack of resources, family
history or situation, world view, immediate needs)
• A good persona is not long. It simply includes things that
will impact your content, design and interaction choices.
• Prioritize your personas. Too many and you can’t use them
to make decisions.

DP
A customer journey map tells the
story of the customer’s
experience from initial awareness,
through the process of engagement
and into a long-term relationship.
CUSTOMER JOURNEY MAP

DP
http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2014/12/1-broadband-provider-journey-large-opt.jpg

DP
Establish a
rental budget
Determine
neighborhoods
& desired
amenities
Start the rental
search
Talk to an
agent
Tour
apartments &
adjust
expectations
Fill out rental
application &
pay fee
Customer Journey Map for CitiHabitats
Persona Goal
Missy McAndrews, Renter, 20s Rent her first apartment in New York City
Customer Needs & Activities
• Find out about
average costs
• Discuss with Family
• Discuss with Friends
• Review online
neighborhood guides
• Create a list of things
that are desired
(outdoor space, view,
walking distance to
gym, etc)
• Search on
aggregate sites like
street easy
• Search local real
estate agency sites
• Adjust expectations
• Find a series of
acceptable
apartments
• Contact the agent
associated with one of
the desired listings
• Discuss desires
• Setup a time to see
the apartment
Expectations of Real Estate Agent / Agency
• None • None • Make it easy to
search for apartments
• List only apartments
that are available
• Explain the
• Alter key apartment
criteria (increase
search area, increase
budget, etc)
• Meet up with agent to
sign paper work.
• Read through the
rental agreement and
ask any questions.
• Sign the Lease
• Set a move in date
• Accept the keys
• Move in
• Make it easy to
contact an agent
• Ensure someone
responds to the inquiry
quickly
• Arrive at the
scheduled time
• Have access to the
apartment
• Talk through the
• Explain the rental
process
• Arrive with the
paperwork
• Ensure the signed
Stages of Journey

DP
average costs
• Discuss with Family
• Discuss with Friends
neighborhood guides
• Create a list of things
that are desired
(outdoor space, view,
walking distance to
gym, etc)
aggregate sites like
street easy
• Search local real
estate agency sites
• Adjust expectations
• Find a series of
acceptable
apartments
• Contact the agent
associated with one of
the desired listings
• Discuss desires
• Setup a time to see
the apartment
Emotional State of Persona
HAPPY
SAD
Expectations of Real Estate Agent / Agency
• None • None • Make it easy to
search for apartments
• List only apartments
that are available
• Explain the
apartment features
location and amenities
• Save searches
criteria (increase
search area, increase
budget, etc)
sign paper work.
• Read through the
rental agreement and
ask any questions.
• Sign the Lease
• Set a move in date
• Accept the keys
• Move in
• Make it easy to
contact an agent
• Ensure someone
responds to the inquiry
quickly
• Quickly schedule a
showing
• Suggest alternative
apartments or
neighborhoods
• Give helpful guidance
on saving money or
finding the right
apartment
• Arrive at the
scheduled time
• Have access to the
apartment
• Talk through the
benefits of the
apartment and the
costs.
• Explain the rental
process
• Arrive with the
paperwork
• Ensure the signed
agreement gets
returned
• Ensure keys are
handed over on move-
in day.
Thu May 14 2015

DP
CUSTOMER JOURNEY MAP TIPS
• Create your journey map with the client or co-workers. More
perspectives = better.
• Focus on all stages of the user’s experience and list out
what your users need to make a decision or move forward.
• Capture any ideas for your organization of what you could
provide your users along the way – especially in moments
of stress.

DP
Content is the reason search began
in the ﬁrst place.
~ Lee Odden, TopRank Marketing
Photo by Miguel Virkkunen Carvalho

DP
What are the key messages or
themes? What do you want to
say about who you are and
what you do?
KNOW YOUR STORY

DP
ASSESS EXISTING CONTENT
PACE UNIVERSITY - Existing Site Content
Level 1 Level 2 Level 3 Level 4 Level 5 Level 6 Level 7 URL TYPE OF CONTENT CATEGORY / TOPIC TARGET AUDIENCE
OBSERVATIONS/RECOMM
ENDATIONS
CORE CONTENT
Homepage http://www.pace.edu/ feature page undergraduate
Academics http://www.pace.edu/honors-college/ listing page graduate students
Undergraduate http://www.pace.edu/honors-college/ article page executive education faculty
Majors & Minors http://www.pace.edu/honors-college/ video international staff great content!
Detail Page http://www.pace.edu/honors-college/ audio about the school everyone
Combined degrees (goes here) http://www.pace.edu/honors-college/ slideshow undergraduate
Programs http://www.pace.edu/honors-college/ search tool graduate press links to 3rd party site
Honors College http://www.pace.edu/honors-college/ interactive tool executive education
Degree Completion http://www.pace.edu/honors-college/ feature page international
Business Studies, BBA http://www.pace.edu/honors-college/ listing page about the school students embedded tool
Nursing, BS http://www.pace.edu/honors-college/ article page undergraduate faculty
Prof, Communication Studies, BS http://www.pace.edu/honors-college/ video graduate staff
Prof. Technology, BS http://www.pace.edu/honors-college/ audio executive education everyone
Online Learning http://www.pace.edu/honors-college/ slideshow international out of date
Is Online Learning for You? http://www.pace.edu/honors-college/ search tool about the school press out of date
Open Houses & Information Sessionshttp://www.pace.edu/honors-college/ interactive tool undergraduate out of date
How You'll Take Courses http://www.pace.edu/honors-college/ feature page graduate
Application Process http://www.pace.edu/honors-college/ listing page executive education
Tuition & Fees http://www.pace.edu/honors-college/ article page international
FAQs http://www.pace.edu/honors-college/ video about the school students too long
Summer Programs http://www.pace.edu/honors-college/ audio undergraduate faculty only one sentence
Summer Class Schedule http://www.pace.edu/honors-college/ slideshow graduate staff
Summer Tuition & Financial Aid http://www.pace.edu/honors-college/ search tool executive education everyone
Summer Housing http://www.pace.edu/honors-college/ interactive tool international
Application Process http://www.pace.edu/honors-college/ feature page about the school press
After You Register http://www.pace.edu/honors-college/ listing page undergraduate not helpful
FAQs http://www.pace.edu/honors-college/ article page graduate
Winter Intersession http://www.pace.edu/honors-college/ video executive education
Winter Class Schedule http://www.pace.edu/honors-college/ audio international students
Winter Tuition & Financial Aid http://www.pace.edu/honors-college/ slideshow about the school faculty
Winter Housing http://www.pace.edu/honors-college/ search tool undergraduate staff
Application Process http://www.pace.edu/honors-college/ interactive tool graduate everyone
After You Register http://www.pace.edu/honors-college/ feature page executive education
FAQs http://www.pace.edu/honors-college/ listing page international press
Bridge Programs http://www.pace.edu/honors-college/ article page about the school
for High School Students http://www.pace.edu/honors-college/ video undergraduate
for International Students http://www.pace.edu/honors-college/ audio graduate students
CAP Program http://www.pace.edu/honors-college/ slideshow executive education faculty
Academic Support http://www.pace.edu/honors-college/ search tool international staff
First Year Academics http://www.pace.edu/honors-college/ interactive tool about the school everyone
Academic Advising http://www.pace.edu/honors-college/ feature page undergraduate
Tutoring Center http://www.pace.edu/honors-college/ listing page graduate press
Writing Center http://www.pace.edu/honors-college/ article page executive education faculty
Center for Academic Excellence http://www.pace.edu/honors-college/ video international staff
Libraries http://www.pace.edu/honors-college/ audio about the school everyone
Computer Labs http://www.pace.edu/honors-college/ slideshow
Career Services http://www.pace.edu/honors-college/ search tool press
Study Abroad http://www.pace.edu/honors-college/ interactive tool
more? http://www.pace.edu/honors-college/ feature page goes deeper in this section
Research at Pace http://www.pace.edu/honors-college/ listing page
Grants & Topics http://www.pace.edu/honors-college/ article page
Enrichment Seminars http://www.pace.edu/honors-college/ video
Content Audit and Analysis:
• Hierarchy
• Page Title & URL
• Type or Format
• Category or Topic
• Target Audience
• Observations or Recommendations

DP
GENERATE NEW CONTENT
Consider the top 5
questions a user
has on their mind as
they come to the site.
Look at your
customer journey
map to determine
what content users
need
See what
competitors and
peers are saying and
doing
Look outside your industry for inspiration of tone and format!

DP
CONSIDER VOLUME, TONE & FORMAT
• Volume of content (how much will you have initially & over time)
• Tone of content (authoritative, conversational, etc)
• Format of the content (blog, infographic, video, text, photos, etc)
• Create samples and test them!

DP
CONTENT TIPS
• If the content you want exists already online, consider publishing it
anyway. Like a song that’s been covered a million times, people
want to hear your interpretation.
• Avoid syndicated or obligatory content - glossaries, etc. It’s
typically poor quality, doesn’t help with search results or reputation
and users can tell it’s not yours so you don’t get much credit.

DP
Photo by David Loﬁnk, Flickr
“Say what you will about the Ten
Commandments, you must
always come back to the
pleasant fact that there are only
ten of them.”

DP
Sitemaps + Flowcharts + Wireframes
INFORMATION ARCHITECTURE

DP
Photo by Juhan Sonin, Flickr
ORGANIZING
• Card sorting is a typical approach.
• It is done by writing content ideas on
individual sticky notes and placing those
notes in logic groups.
• If the site is too large, sort on your own in
excel and use a service like TreeJack to test
it with users later.

DP
MBA Program
Innovation &
Entrepreneurship
Global
Opportunities
Academics &
Faculty
Power of the Case
Method
Global Business
Experiences
i.Lab Incubator
Competitions
Courses &
Concentrations
Clubs &
Conferences
Student Videos
Learning Teams
Advance Your
Career
Top Hiring
Companies
Salary &
Earnings
Employment by
Industry
Counseling &
Support
Employment by
Location
On-on-One
Counseling
Recruiting Workshops
& Preparation
On-Grounds
Recruiting
Off-Grounds
Recruiting
Career Conferences
Alumni Network
Class Proﬁle &
Community
Class Proﬁle
Why I Chose Darden
Career Switchers
What Surprised
Me The Most
What I Plan To
Do Next
Student Clubs
Experiential Learning
Opportunities
Contact a Student
A Diverse MBA
Community
Global Field
Experiences
Students Speak
Section
Videos
Consulting Projects
Leadership
Entrepreneurship
Finance
Operations
Internships
Unique Courses
Curriculum
Exchange
Programs
Batten Institute
International
Students
Women
Military
LGBT
Partners and
Families
Electives
Core Business
Curriculum
Electives include: Accounting, Consulting, Entrepreneurship,
Innovation, and Strategy, Ethics, Finance, Global Economies and
SITEMAPS

DP
FLOWCHART
Photo by Paul Gallo / CC BY

DP
INFORMATION ARCHITECTURE TIPS
• Group similar things together
• Remember the magic rule of 7
• Clarity over creativity in navigation
• Try to avoid going more than 3 levels deep (or breadcrumb it is!)
• Try to avoid a lopsided sitemap where it’s deep in one area and
shallow in another (adds navigation patterns)

DP
INFORMATION ARCHITECTURE TIPS
• Less clicks are not as important – conﬁdent clicks are better.
• You may think your structure is perfect but just wait! After spending
hours on your beautifully organized hierarchy the wireframe
exercise will change things.
• More ideas: http://www.goodui.org/
• Or read: How to Make Sense of Any Mess by Abby Covert

DP
A visual guide that gives a framework for your
website. A blueprint or page schematic that
is created to layout site elements in the best
way possible to support a speciﬁc purpose.
WHAT IS A WIREFRAME?

DP
BENEFITS of WIREFRAMING
• Gives you a sense of the user experience
• Hints at the content and how it might come together
• Non-technical people can see and comment on the direction
• Technical people can start to think about how it will be built and
managed
• WIREFRAME IS NOT A DESIGN!

DP
WIREFRAME TIPS
• Start with a pattern library… http://ui-patterns.com/ or http://pttrns.com/
• Beware of using ‘Lorem ipsum’. It allows wireframes to get
approved, go through design and coded before anyone realizes it
won’t work.
• Make it clean and pretty. Messy wireframes are hard to react to.
• Sometimes you don’t want to do a wireframe (what?!?!). For some
marketing sites a wireframe just inhibits the designers creativity.
Start with the content and go straight to design from there.

DP
TOOLS FOR CREATING SITEMAPS, FLOWCHARTS & WIREFRAMES
• http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

DP
TYPES OF USER TESTING
• Web Analytics
• Click & Eye Tracking
• A/B Testing
UNDERSTAND YOUR USERS ORGANIZING THE CONTENT
LIVE SITE
CRAFTING THE EXPERIENCE
• Stakeholder Interviews
• Focus Groups
• Surveys
• Card Sorting
• Tree Testing
• Usability Testing

DP
WHEN TO TEST?
• Decide whether you’re going to do formal or informal user testing.
Formal testing can be done by a company, freelance expert, or online
service like usertesting.com
• Approved wireframes is a great moment to start testing the experience
• If you have an application, testing with a working prototype is better
• If you have a marketing site, wait until you have designs before testing

DP
DIY TESTING RECIPE
1. Find 8 people that can commit to 1 hour of time. Session should last 45
minutes to allow time in between participants.
2. Create a script covering the most important questions your users will have
when coming to the site.
3. Output your wireframes as PNGs that allow a user to find answers to their
top questions. Upload the PNGs to Invision (or similar service) and interlink
the screens so they feel interactive.
4. Setup a computer with internet in a private room. Have a sign, water and a
few snacks outside the door in case the next user comes early.
5. Start by letting the participant know there are no wrong answers and you
just want to know what they think. That they can’t hurt your feelings. Be as
dispassionate as possible. Tell them you are going to ask them to find
things on the site. You want them to narrate out loud where they would go.
6. When testing the navigation labels, ask what the person expects to find
under each section. Only then have them click. Then ask them to tell you
what they think now that they see what’s inside the section.

DP
• Google Analytics is a great free
platform.
• Easy to setup
• Great for benchmarking,
conversion and marketing
• But it can’t tell you how people are
feeling or why people are avoiding
certain sections of the site.
SITE USAGE & ANALYTICS

DP
CLICK TRACKING
• CrazyEgg is an inexpensive platform
starting at $9/month.
• Easy to setup – Simply add some
JavaScript code into your site code
and tracking begins.
• Great for seeing the density of interest
on a given page, how far people scroll
down, and if there are any changes in
that behavior based on where they
came from.

DP
A/B TESTING
• Google Analytics oﬀer the ability
to do A/B Testing for free (http://
www.newmediacampaigns.com
/blog/google-analytics-ab-split-
test-tutorial)
• Optimizely also oﬀers A/B
Testing but has a cost (https://
www.optimizely.com/ab-testing/)

DP
Great design is making
something memorable
and meaningful.
~Dieter Rams
Photo by Martin Thomas, Flickr

DP
WHERE ON THE SPECTRUM?
calm energizing
traditional modern
typical unexpected
authoritative informal
novice power user

DP
DESIGN TRENDS
• Flat Design - removing of gradients happened with iOS and since then the web has not
looked back. The new flat design allows UXers to create new interactions previously held
back by 3D skumorphic gradients.
• Emphasis on Type - until CSS3 beautiful typography was trapped in JPG and GIFs, since
then the web has become much more beautiful and can communicate even more about an
organization through the typography chosen.
• Long Scrolling & Parallax Effects - we’ve seen the end of the “fold”. generation Z
expects and enjoys the long scrolling pages and see parallax effects as modern and
engaging.

DP
DESIGN TRENDS
• Cinematic Experiences & Ambient video - with bandwidth no longer a concern and a
desire of audiences to feel immersed in an experiences we’ve seen videos take over the full
screen. To bring even more life and realism sites like AirBnB and Cornell University have been
experimenting with ambient video loops that act as large moving photographs that make
users feel as if they are there on campus without having to hit play.
• Grid Layouts - aside from being touch friendly easily adaptable and responsive to varying
devices, card design and grid layouts content into share-able objects.
• Micro Interactions - with the rise of JS libraries it’s now possible to give websites an app-
like feel. where the page doesn’t refresh to submit a newsletter subscription but beautifully
transitions to let the user know the data was captured. These micro animations and
interactions add a level of elegance to the experience.

DP
GETTING TO THE RIGHT DESIGN
• Take a look at the competition
• Take a look at modern sites & design trends
• Decide where you want to be on the spectrum
• Color, images and breaking patterns can bring focus
• Reserve certain colors for clickable items
• Put buttons on the axis of interaction
• Limit # colors & fonts and be consistent

DP
INTERACTIONS & TECHNOLOGY
• Responsive Design - using JS and media queries to transform
the page elements based on the width of the browser
• Interactions, Animations and Transitions - using ajax to
submit form data an return results without a page refresh for app-
like feel
• Device Speciﬁc Features - accelerometer in the iphone, etc

DP
Content + Design + Interaction
BUILDING BLOCKS of UX

DP
STAGES of UX
Deﬁne Your
Mission
Understand
Your Users
Create Your
Content
Organize
Your Content
Craft the
Experience
Test the
Experience
Visual
Design
Interactions &
Technology

DP
Focus on feelings
Continually work on balancing user needs
and organizations goals
Use all tools to create the experience –
content, design and interaction.
THE BEST EXPERIENCES

Crash Course in UX - Internet Week NY 2015

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Crash Course in UX - Internet Week NY 2015

Similar to Crash Course in UX - Internet Week NY 2015 (20)

Recently uploaded

Recently uploaded (20)

Crash Course in UX - Internet Week NY 2015