sharepoint techfest 2013

SHAREPOINT 2013

USER EXPERIENCE

SharePoint TechFest | April 4, 2013

INTRO

Tracey NolteUser Experience Practice Area Lead

� Photographer, Videography and loves TRAVELING – pic is in New Orleans

� Owns 2 Pomeranians

� Sci-fi and gamer fanatic

� @traceynolte

INTRO

DENNIS JACKSONSolution Architect

� Soccer Player

� Father of 3 amazing kiddos

� Husband to a beautiful wife

� @dennisjjackson

YAMMERyammer.com/dallassharepointtechfest2013

1. Set up your account

2. Check email to confirm

3. Login to Yammer

4. Request an invitation

5. WAIIIIIIIIIT FOR IT > approval

6. Join our Group �“SharePoint 2013 User Experience Design”

TWITTER1. Tweet questions @dennisjjackson

2. His COOL watch will show us the tweets

SHAREPOINTIS LIKE SKIING…

� It’ .s feels cold and unnatural when you first try it out

� .You could spend a lot of money for the equipment

� It’s something you experience alone but much more !fun with a group of people

� You can never get enough training – face it an instructor and bunny hill will not .make you an expert

� If you don’t plan which path before you get started .you can end up falling off a cliff

� .It takes a lot of courage to try the harder stuff

� The whole time, you are trying NOT to fail – .or die

� There aren’t always gondolas at the top to take you .down if you chicken out

� You can’t always backup

� If you don’t plan ahead you could crash and break ..something

AGENDA

The Story of

CrossboneCrossboneCrossboneCrossbone

Why

UX?

Approach

& Tools

Demo

Wrap-

Up

THE STORY OFCROSSBONE

Crossbone, Crossbone Brands, and all creative designs are the exclusive property of Slalom Consulting, LLC. Reuse, modification, or

redistribution without the explicit permission of Slalom Consulting is strictly prohibited

WHAT IS…

CROSSBONE� It is a fictitious company –that’s way cooler than CONTOSO

� It’s about uniting extreme sports enthusiasts with music and gear

� We will showcase common business problems and demonstrate how to solve them

Crossbone, Crossbone Brands, and all creative designs are the exclusive

property of Slalom Consulting, LLC. Reuse, modification, or redistribution

without the explicit permission of Slalom Consulting is strictly prohibited

CROSSBONEPROBLEMS

� Existing site looks outdated

� Low visitor count, hard to find information, search results aren’t .great and want to increase community

� No success .criteria and measure it ongoing for improvements

� Wasteland of disorganized content and frustrated shoppers

� Employees cant connect with customers

� They want user to be able to listen and buy music online

� Desire to use the latest SharePoint 2013 environment

� And they wanted to “HAVE A GOOD TIME”

Crossbone, Crossbone Brands, and all creative designs are the exclusive

property of Slalom Consulting, LLC. Reuse, modification, or redistribution

without the explicit permission of Slalom Consulting is strictly prohibited

:// . . / /http www youtube com embed 6Ls5j5iz2eA

STEP 2

WHY UX?

USER EXPERIENCE IS ABOUT PEOPLE.

•••••

USER EXPERIENCE IS ABOUT PEOPLE.

When things are well designed, intuitive, easy and fun

.People are delighted

WHAT ISUSER EXPERIENCE?

INFLUENCE DECISIONSTASKS AND THINGSCONSEQUENCES WHICH

AFFECT BUSINESS GOALS

AFFECTHOW PEOPLE FEEL

User Experience is the design of TASKS AND THINGSTASKS AND THINGSTASKS AND THINGSTASKS AND THINGS to influence users to make decisions that align to business

goals – like profitability, .engagement and efficiency

WHAT ISUSER EXPERIENCE?

INFLUENCE DECISIONSTASKS AND THINGSCONSEQUENCES WHICH

AFFECT BUSINESS GOALS

AFFECTHOW PEOPLE FEEL

HOW DOES THIS APPLY TO…

� Store Documents

� Share Knowledge

� Create Content

� Learn About…

� Follow People

� Search Information

TASK + THINGSAFFECT

HOW PEOPLE FEELINFLUENCE DECISIONS

CONSEQUENCES WHICHAFFECT BUSINESS GOALS

SHAREPOINT

� Feels easy to use

� Trusted information

� Confident in creating

� Fun to learn

� Easy to find experts

� Intuitive and can find what I need

� I WILL STORE INFO

� I WILL RELY ON IT

� I WILL CREATE IN IT

� I WILL ENJOY IT

� I WILL SEEK PEOPLE

� I WILL RETURN TO IT

� User Delight & Adoption

� Return on Investment

� Improved Communication

� Enrich company culture

� Employee engagement

� Increased efficiencies

STEP 3

APPROACH & TOOLS

OUR APPROACH?1. Set measurable business goals

2. Talk to their users – DON’ !T ASSUME YOU KNOW THEM� Learn their needs, preferences, ,tasks the equipment they use to

.access the site and other things that affect them

3. Combine user requirements with business goals

4. Prioritize features to user priorities

5. Content audit and strategy

6. Select DESIGN FRAMEWORK (Twitter Bootstrap, 960 GS))

7. ( )Wireframe FOCUS ON FUNCTION NOT BEAUTY

8. Technical feasibility review with developers

9. Test and validate with real people

10. Visual Design (now… you can make it pretty))

TOP TOOLS

DISCOVERY, PLANNING & DESIGN

TOP TOOLS

TESTING and VALIDATION

TOP TOOLS

VISUAL DESIGN

TOP TOOLS

DEVELOPMENT

TOP TOOLS

TOP TOOLSGuiding Principles Guiding Principles Guiding Principles Guiding Principles are a well-defined credo

that can steer .your business to success

TOP TOOLSPersonas Personas Personas Personas represent major groups of users

to help focus on their tasks and needs

TOP TOOLSTask analysis Task analysis Task analysis Task analysis 'learning about your users

,goals what they want to do in the system

and how they work

TOP TOOLSA use caseuse caseuse caseuse case is a description of how users will

.perform tasks on your site A use case includes two main

:parts

• Steps a user will take to accomplish a particular task

• The 'way the site should respond to user s actions

TOP TOOLSA Content StrategyContent StrategyContent StrategyContent Strategy ,includes a content audit content

inventory and planning for how to redistribute information in the new

, .site while focusing on priority ownership and information targeting

TOP TOOLSA Wireframe Wireframe Wireframe Wireframe is a blueprint that demonstrates the

new layout of your site and should iteratively change

.based on thorough testing

TOP TOOLSA Workflow Workflow Workflow Workflow ,is similar to a task analysis but

demonstrates FUTURE state task flow and should be

. ..tied to a wireframe action

TOP TOOLS

TOP TOOLS

TOP TOOLS

TOP TOOLS

TOP TOOLS

TOP TOOLS

TOP TOOLS

TOP TOOLS

TOP TOOLSCREATE DESIGN with LAYERS

TOP TOOLSCREATE FINAL DESIGN

Crossbone, Crossbone Brands, and all creative designs are the exclusive

property of Slalom Consulting, LLC. Reuse, modification, or redistribution

without the explicit permission of Slalom Consulting is strictly prohibited

TOP TOOLSSLICE

Crossbone, Crossbone Brands, and all creative designs are the exclusive

property of Slalom Consulting, LLC. Reuse, modification, or redistribution

without the explicit permission of Slalom Consulting is strictly prohibited

TOP TOOLSSave for Web

Crossbone, Crossbone Brands, and all creative designs are the exclusive

property of Slalom Consulting, LLC. Reuse, modification, or redistribution

without the explicit permission of Slalom Consulting is strictly prohibited

TOP TOOLSHTMLAND IMAGES

TOP TOOLSHTMLAND IMAGES

TOP TOOLS

TOP TOOLS

STEP 4

DEMO

WORKING WITH THE

DESIGNER

� Break down the wireframe or design

WORKING WITH THE

DESIGNER

� Look for main functional areas

WORKING WITH THE

DESIGNER

� Figure out div spans based on framework selected

WORKING WITH THE

DESIGNER

� Identify the functional areas

WORKING WITH SHAREPOINT� Basics

� Dev environment

� Cloudshare

� Approach

� App deployment

� Farm based solution

� Design Manager

� Source Control

� What to control

� Dev Team Communication

� Documentation

WORKING WITH SHAREPOINT� Start with Content

� Metadata

� Site Columns

� Content Types

� Lists and Libraries

WORKING WITH SHAREPOINT� Moving to Structure

� ( )Master Page s

� Page Layouts

� WebParts

� Content by Search

WORKING WITH SHAREPOINT� Style

� Frameworks

� .960 gs

� Twitter Bootstrap

� JQuery

� Customize

� CSS

� JS

� Jquery

WORKING WITH SHAREPOINT� Debugging tools

� Cloudshare

� Fiddler Tool

� Chrome Dev tools

� /Firefox Firebug

WORKING WITH USERS� Governance

� Soft Governance

� Hard Governance

� Content Loading and Training

STEP 5

WRAP UP

STEP 5

WRAP UP