crash course in ux - internet week ny 2015
TRANSCRIPT
Crash Course in UX
Define 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 [email protected] 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
WHAT ARE THE STEPS?
Define 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 (find 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
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 dissatisfied with their previous school or have recently moved. They are interested in teaching philosophies, curriculum, class size, discipline, test scores, all the details. Friendships influence 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
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
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
• 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• 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.
Stages of Journey
Thu May 14 2015
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
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
• 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• 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.
Stages of Journey
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 first place.
~ Lee Odden, TopRank MarketingPhoto 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 CONTENTPACE 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/RECOMMENDATIONS
CORE CONTENTHomepage http://www.pace.edu/ feature page undergraduate
Academics http://www.pace.edu/honors-college/ listing page graduate studentsUndergraduate 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 everyoneCombined 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 siteHonors College http://www.pace.edu/honors-college/ interactive tool executive educationDegree 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 toolNursing, BS http://www.pace.edu/honors-college/ article page undergraduate facultyProf, Communication Studies, BS http://www.pace.edu/honors-college/ video graduate staffProf. Technology, BS http://www.pace.edu/honors-college/ audio executive education everyone
Online Learning http://www.pace.edu/honors-college/ slideshow international out of dateIs Online Learning for You? http://www.pace.edu/honors-college/ search tool about the school press out of dateOpen Houses & Information Sessionshttp://www.pace.edu/honors-college/ interactive tool undergraduate out of dateHow You'll Take Courses http://www.pace.edu/honors-college/ feature page graduateApplication Process http://www.pace.edu/honors-college/ listing page executive educationTuition & Fees http://www.pace.edu/honors-college/ article page internationalFAQs 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 sentenceSummer Class Schedule http://www.pace.edu/honors-college/ slideshow graduate staffSummer Tuition & Financial Aid http://www.pace.edu/honors-college/ search tool executive education everyoneSummer Housing http://www.pace.edu/honors-college/ interactive tool internationalApplication Process http://www.pace.edu/honors-college/ feature page about the school pressAfter You Register http://www.pace.edu/honors-college/ listing page undergraduate not helpfulFAQs http://www.pace.edu/honors-college/ article page graduate
Winter Intersession http://www.pace.edu/honors-college/ video executive educationWinter Class Schedule http://www.pace.edu/honors-college/ audio international studentsWinter Tuition & Financial Aid http://www.pace.edu/honors-college/ slideshow about the school facultyWinter Housing http://www.pace.edu/honors-college/ search tool undergraduate staffApplication Process http://www.pace.edu/honors-college/ interactive tool graduate everyoneAfter You Register http://www.pace.edu/honors-college/ feature page executive educationFAQs http://www.pace.edu/honors-college/ listing page international press
Bridge Programs http://www.pace.edu/honors-college/ article page about the schoolfor High School Students http://www.pace.edu/honors-college/ video undergraduatefor International Students http://www.pace.edu/honors-college/ audio graduate students
CAP Program http://www.pace.edu/honors-college/ slideshow executive education facultyAcademic 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 everyoneAcademic Advising http://www.pace.edu/honors-college/ feature page undergraduateTutoring Center http://www.pace.edu/honors-college/ listing page graduate pressWriting Center http://www.pace.edu/honors-college/ article page executive education facultyCenter for Academic Excellence http://www.pace.edu/honors-college/ video international staffLibraries http://www.pace.edu/honors-college/ audio about the school everyoneComputer Labs http://www.pace.edu/honors-college/ slideshow
Career Services http://www.pace.edu/honors-college/ search tool pressStudy Abroad http://www.pace.edu/honors-college/ interactive tool
more? http://www.pace.edu/honors-college/ feature page goes deeper in this sectionResearch at Pace http://www.pace.edu/honors-college/ listing page
Grants & Topics http://www.pace.edu/honors-college/ article pageEnrichment 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 Lofink, 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
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
Career Advisors
Alumni Network
Class Profile & Community
Class Profile
Why I Chose Darden
Career Switchers
What SurprisedMe The Most
What I Plan ToDo 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
Dual Degrees
Student Videos
Exchange Programs
Batten Institute
International Students
Women
Military
LGBT
Partners and Families
Life at Darden
Student Blogs
Mission-Drive Careers
For International Students
Electives
Core Business Curriculum
Concentrations
Faculty
Electives include: Accounting, Consulting, Entrepreneurship, Innovation, and Strategy, Ethics, Finance, Global Economies and Markets, Leadership and Organizational Behavior, Management Communications, Marketing, Operations, Quantitative Analysis, Sustainability, Specialty Areas
Dual Degrees include: MBA/JD, MBA/MD, MBA/MPH, MBA/MPP, MBA/MEd in Innovation in Education Reform, MBA/MA in East Asian Studies, MBA/MA in Government or Foreign Affairs, MBA/ME, MBA/MSN, MBA/PhD
Costs & Financial Aid
Tuition &Expenses
Scholarships
Loan Programs
Applying for Financial Aid
Admissions
Apply
Requirements
Schedule a Conversation
Deadlines
Veterans Benefits
Important Dates
Events & Receptions
ExecutiveMBA Blog
Visiting Darden
Request Information
Visit Darden
Attend an Event
Compare MBA Formats
Contact Students& Alumni
Apply Now
Confirmation
FAQs
Social Links
Online Viewbook
Connectwith Us
SITEMAPS
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 – confident 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 specific 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 offer the ability
to do A/B Testing for free (http://
www.newmediacampaigns.com
/blog/google-analytics-ab-split-
test-tutorial) • Optimizely also offers 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 Specific Features - accelerometer in the iphone, etc
DP
STAGES of UX
Define 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