In this presentation, Perficient leverages its extensive SharePoint user experience design, customization, and implementation expertise to guide you in understanding the criticality of SharePoint user experience (UX) in driving user adoption, and to provide you with user experience best practices in the areas of information architecture and visual design, technical configuration and customization, and user experience server deployments.
2. About Perficient
Perficient is a leading information technology consulting firm serving clients
throughout North America.
We help clients implement business-driven technology solutions that integrate
business processes, improve worker productivity, increase customer loyalty and
create a more agile enterprise to better respond to new business opportunities.
3. Perficient Profile
Founded in 1997
Public, NASDAQ: PRFT
2011 Revenue of $260 million
Major market locations throughout North America
— Atlanta, Austin, Charlotte, Chicago, Cincinnati, Cleveland, Columbus,
Dallas, Denver, Detroit, Fairfax, Houston, Indianapolis, Los Angeles,
Minneapolis, New Orleans, Philadelphia, San Francisco, San Jose,
Southern California, St. Louis and Toronto
Global delivery centers in China, Europe and India
2,000+ colleagues
Dedicated solution practices
87% repeat business rate
Alliance partnerships with major technology vendors
Multiple vendor/industry technology and growth awards
3
4. Our Solutions Expertise & Services
Business-Driven Solutions Perficient Services
• Enterprise Portals End-to-End Solution Delivery
• SOA and Business Process Mgmt IT Strategic Consulting
• Business Intelligence IT Architecture Planning
• User-Centered Custom Applications Business Process & Workflow Consulting
• Interactive Design Usability and UI Consulting
• CRM Solutions Custom Application Development
• Enterprise Performance Management Offshore Development
• Customer Self-Service Package Selection, Implementation and
• eCommerce & Product Information Management Integration
• Enterprise Content Management Architecture & Application Migrations
• Enterprise Resource Planning Education
• Management Consulting Interactive Design
• Industry-Specific Solutions
• Mobile Technology
Perficient brings deep solutions expertise and offers a
• Security Assessments
complete set of flexible services to help clients implement
business-driven IT solutions
5. Our SharePoint Expertise is #1
SharePoint is HOT!
Perficient is one of the strongest, largest, most trusted SharePoint partners in the
United States.
400+ professionals in the SharePoint practice area
Leader in cloud-based SharePoint Online implementations
500+ SharePoint projects
One of 20 companies worldwide on Microsoft Partner Advisory Council for
SharePoint
Hired by Microsoft to build SharePoint 2010 demo for Microsoft Technology
Centers (MTC)
Early access to software and training via Product Group relationships
Defined competencies in infrastructure, development, design, and strategy
Strong partnerships with Nintex, NewsGator, AvePoint, Telligent, Metalogix, and
Yammer
5
6. What We Will Cover
• What is SharePoint
• What Are Our Assumptions for Today’s Presentation
• What is User Experience (UX)
• Common SharePoint Project Types
• The Anatomy of a SharePoint Page
• Deconstructing the SharePoint Page
• SharePoint Quality of User Experience By Level of Customization
• Examples and Associated Best Practices
• Key Considerations for Deployment & Maintenance
• Key Questions to Ask Yourself
• Case Studies
6
7. What is SharePoint? Websites & Portals
Comprehensive information • Intranet, Extranet, & Internet Sites
• Collaboration & Productivity Solutions
platform for the enterprise.
• On-premise, Cloud-based, & Hybrid Models
• Cross Browser, Offline, Mobile, MS Office Integration
Business Applications
Sites Social Networking
• Program & Project Management
• Custom Business Application • Communities, My Sites, Blogs & Wikis
Development • Tagging, Tag Clouds, Ratings, Activity
• Read / Write Integration w/ Line Feeds, Social Bookmarking
of Business (LOB) data Composites Communities
• Profiles & Expertise
• Visual Studio Support • Organizational Browsers
• Data Exposed Through Web
Services & APIs
Web & Enterprise Content
• Web Content Management
Insights Content • Enterprise Document, Records,
Audio/Video Management
Business Insight & Analysis • Workflows & Routing, Metadata
• Dashboards & Scorecards Taxonomies and Folksonomies
Search
• BI Reports • Document Imaging & Capture
• Incorporation of LOB Data from
Data Warehouse Enterprise Search
• Web Analytics • Search Structured & Unstructured Content
• PowerPivot, Excel Services, Visio
• Search Content w/in SharePoint, File Shares, Websites,
Services
Email Folders, Databases, LOB Systems (FAST Search)
• Social Relevance & Phonetic Search
8. Our Assumptions for Today’s Presentation
• SharePoint can be leveraged as a comprehensive information platform
for the enterprise. This includes Public Websites for digital marketing
(“in front of the firewall”), and Intranet and Extranet portals (“behind
the firewall”)
• Today, we are focusing on SharePoint User Experience primarily in a
“behind the firewall” context.
• Today’s topics apply to the SharePoint 2007 or 2010 platforms.
• Today is not a presentation or overview of the complete, end-to-end
SharePoint platform capability set.
8
9. What is User Experience?
Lexical Definition
User Experience (UX) is about how a person feels about using a system.
It highlights the experiential, affective, meaningful and valuable aspects
of human-computer interaction and product ownership, but it also
includes a person’s perceptions of the practical aspects such as utility,
ease of use and efficiency of the system.
User experience is subjective in nature, because it is about an
individual’s feelings and thoughts about the system. User experience is
dynamic, because it changes over time as the circumstances change.
9
10. How Does It Work?
Process for achieving the proper front-end UX
Users
Visual Informational Interactive
Design Design Design
• Branding • Information Architecture • Navigation (menus)
• Creative Design • Calls-to-Action • Video & Rich Media
• Content • Tagging & Search • Ratings & Comments
Presentation • Messaging & Content (Social)
• Content Relationships
& Page Flow 10
11. “Questions about whether design is necessary or
affordable are quite beside the point: design is inevitable.
The alternative to good design is bad design,
not no design at all.”
- Douglas Martin
11
12. Why Invest in User Experience?
Advantages
• Increase User Adoption
• Improve Productivity
• Improve Team Collaboration
• Empower Employees
• Brand Reinforcement
• Delight Your End Users
12
13. Common SharePoint Project Types
Typical SharePoint Applications “Behind the Firewall”
Corporate
Collaboration
Communications
Sales, Marketing, Human Resources Team Sites, My Sites, Extranets
Line of Business Insights & Analytics
LOB Solutions that Improve Processes BI Reports, Dashboards & Scorecards
13
14. The Anatomy of
a SharePoint Page
Master Page
Page Layout
Web Parts
16. Shows the current logged in user.
Way Finding
The Company Logo/Portal Title lets the
user know what site they’re visiting.
Global navigation shows the other
sections available and highlights the
current section selected.
This headline text also reinforces to
the user the current section selected.
Breadcrumbs provide the path to the
current page.
This local navigation shows all the
other pages at this same level in the
site hierarchy while also highlighted
the current page.
17. Search
Content Areas
Employee Directory
Important Links
Employee Highlight
Department Updates
Department
Program
Highlights
Department Documents
News List
20. Example #1: Light
Basic out-of-the-box approach
w/ custom Master Page styling
• Custom header, navigation and
footer
• Design for full screen width
• Styled web part wrapper, i.e.
“chrome”
• Light Page Styling
21. Example #2: Light
Same as Example #1 but with
OOB web part placed on it
• Custom header
• Design for full screen
• Styled web part wrapper, i.e.
“chrome”
• Basic CSS (Title 1 & 2, Body)
• No Custom Web Parts
22. Example #3: Heavy
Same as Example #1 but with
all custom web parts
• Custom header, navigation and
footer
• Page Layout Design for full
screen width
• Styled web part wrapper, i.e.
“chrome”
• Custom Web Parts with Layout
and Styles for each
• Additional Considerations:
• Default Styles
• My Sites
24. For Go-Live & Ongoing Support
Key Considerations for Deployment & Maintenance
• Solution Integrity (Source Control vs. Document Versioning)
• SharePoint Designer (Powerful, Potentially Problematic)
• Staging & Live Servers
• Process for Maintenance & Enhancements
24
25. Questions to Ask Yourself
Before beginning a SharePoint UX project, think about:
• Who are the different users?
• What kind of content do you want them to have?
• What kind of content do they want?
• Are you ready to invest in customization?
• Who will take ownership of the business needs and governance?
• What resources do you have to support the solution?
25
38. PORTFOLIO :: Integrated Solution Across Public Website, Customer Portal, and Corporate Intranet :: SharePoint
JAS Forwarding Worldwide
Customer Portal
Public Website
Corporate Intranet
39. Contact Us
Thank You!
Follow us on our Microsoft blog:
blogs.perficient.com/microsoft
Or on Twitter:
@Perficient_MSFT
39
Walter will cover all the way up to and through this slide and then transition to Sean.
Often creates a “first impression” for employees of a company and how they conduct business internally; it establishes credibilityIn order to accomplish this, we must understand the client’s business objectives (GOALS) and the intended behaviors (SCENARIOS) of each audience (PERSONAS). Without this knowledge, the interface design will not be effective. (RELATE THIS TO OUR NR PROCESS)Clinical definition fromhttp://en.wikipedia.org/wiki/user_experience
Many facets to User Experience, i.e. Technical Architecture, Info Arch, Features & Functionality, Interactive Design, Content Management, and Development & Maintenance – Only covering the “front-end” aspects of UX today.The core of what we do and how we begin to understand what the “right solution” is for you:Users – Defining the personas and scenarios of an application ultimately decides what the architecture will be and what content is necessary.Design – The look-n-feel plays a big role in an application. A user needs to connect emotionally to the application in order to completely adopt the tool and use it on a day-to-day basis. In most cases, this is commonly understood for public-facing websites but it’s only recently that companies are beginning to learn that this applies to internal applications as well.Usability – How an application works plays an equally large role for an application. Something can look sharp, professional and on-brand but if it’s confusing as to where to find information, download resources or find personal information, the application will soon be deemed a failure and lose adoption quickly.(Interactive Design – Mention Silverlight possibly.)
Master Pages – Defines the overall page structure for common elements such as Header, Footer, and Navigation.Page Layout – A page layout is a template that is used in conjunction with a master page to control the look, feel, and content of a page. Each page layout has an associated content type that determines the kind of content that can be stored on pages based on that page layout.Themes – (Not pictured) Are the most basic form of SharePoint UI customization and are a simple way of changing the color scheme of a site in 2010. PROS: - They are easy to create by non-designers. CONS: - It’s easy to lose a professional look-n-feel - Only screen colors can be changed using themes. - Themes cannot be inherited by parent sites. They must be applied to each individual sub-site. - In order to update a Theme, you have to reapply it on every site that uses it. RECOMMENDATION: - Themes can be appropriate for team sites, when employees wish to customize their own corner of the site. Themes are not an appropriate choice for site-wide customization.
These are “common” content areas, although each set of content is specific to each page, company and department so these may/not apply to your organizationRECOMMENDATION:Rolling up content to top level pages (fewer clicks, more efficient users)Featured contentSummary / Recent ListsRelated Links
Web Part - added to page, reusable within site in web part zones or content areas in 2010Component – built into master page or page layout
In determining how much customization you need and which route to take, you have a few decisions to make. Think about:Maturity of businessIs this your first SharePoint intranet? If so, you may want to keep it light.What kind of budget to you have set aside for the project?Scope of IntranetAre you simply looking to use as a document repository? If so, you may want to keep it light.Do you have a lot of integrated applications? Do your employees “live” in your Intranet? If so, you may want to consider heavy customization.Have you considered the importance of your brand through this initiative and that it will serve as an extension of it?Is there a clear Return-On-Investment? Will this improve productivity or increase user adoption? What are your key goals & objectives? What defines success for the project?
Full screen width – critical in SharePoint sites that will be using Out-Of-the-Box web parts, because some web parts can become quite wide (e.g., a document library with many columns)
Custom headerDesign for full screenStylized “chrome”Custom Web Parts with CSS for each… you’re still going to haveareas/pages where you’ll utilize out-of-the-box web parts, so this doesn’t necessarily take care of everything
Set of Master Pages.
Solution Integrity:Do you have source control or do you use document versioning features in SharePoint Designer?Source control is the better choice when dealing with development teamsSharePoint Designer:A powerful tool, but can be problematic when used in complex environments (b/c it can affect the design greatly and have a ripple effect, plus it can effect source control and even possibly affect things in production)Consider disabling access for SharePoint Designer to design elementsStaging & Live Servers:Staging (Test) Server is a must for custom solutionsDesign changes (master pages) can severely impact site so you’ll still want to test them prior to production.Process for Maintenance & EnhancementsYou need to be responsive to usersAs well as stick to creative visionBe sure to Monitor & Analyze your application regularly to learn: Who is using what? What are they searching for? Etc.
Determine how much you want to invest in customization – Is this just a better look-n-feel? Or is it more of a strategic move?Who is going to “own” the new application? Marketing, Corporate Communications or IT?What resources do you have to support? Think about Content Admins, Help Desk, Technical, etc. This needs to be thought about early in the process, rather than near Testing & Deployment (last minute).A few other thoughts:Consider structuring your intranet based how your users may be searching for information, not necessarily your Org ChartYou may want to consider taking more advantage of collaboration tools that SharePoint offers to increase user adoption and generate new, relevant content.Document Sharing vs. Idea SharingSearch & TaggingBlogs, Wikis, My Sites &Team SitesWhat is working and not working for your current Intranet? Have you bolstered feedback from your employees, distributors, stores, clients – whomever is using the application? THIS is where you will get your real drivers for redesigning your application, from a visual and technical perspective.What should the overall design theme and tone be for the new Intranet? What kind of feelings are you looking to emote?
AAA Cooper TransportationMeijerPacific LifeChick-fil-A
These are more-or-less out of the box implementations. There may be some custom work here but it’s very minimal.
Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
Custom look and feelOut-of-the-box calendaring, announcements, and discussionsCustom web parts for managing store information with additional employee hierarchyCustom web part to calculate and roll up store daily sales totals
Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
Unified branding for public website, customer portal, and intranetSharePoint to Flash integrationSharePoint integrated OCS ChatInfrastructure Design to support OCS and SharePoint