Usability and User Experience. The User Centered Design Process (UCDP), taking designs from Abstract to Concrete. Identifying Measures of Success. Putting together a UX Team. Microsoft’s Web Content Management System - SharePoint Publishing Portals. Publishing Site Components - Master Page, Page Layouts, CSS, JS, XSLTs, Web Parts. Leveraging CSS Frameworks for responsive web like Bootstrap.

1. User Centered Design and
SharePoint Publishing
Portals
Incorporating User Centered Design and SharePoint Publishing Portals
CAP Area SharePoint Interest Group Meetup, 8/19/2015

2. About the Speaker
Tom is a User Experience Designer, and is very active in the User
Experience community. He has devoted countless hours to being
entrenched in projects and engaged with local organizations. He
learns and shares industry best practices, while applying them
into his own work. To advocate the value of usability, he works
closely with stakeholders. His belief is that great design is
intentional.
Tom has nearly 20 years of experience in Graphic and Web Design.
Following trending technologies, he shifted his focus to
incorporate SharePoint into his work. Since2007, he successfully
delivered numerous SharePoint solutions. These projects range
between Intranet Portals and Developing Roadmaps, and its
respective User Interface, for Communities of Practice and
Collaboration Spaces.
www.ptdesignsllc.com
tom@ptdesignsllc.com
linkedin.com/in/tpham211
@tpham211

3. PT Designs
 Design
 Corporate Branding
 Web Presence
 Graphic
 User Experience
 UX Exercises
 Usability Analysis
 SharePoint
 Consulting
 Training
 O&M
 Development
 Front-end Development
 Custom
25%
30%
45%
SERVICE OFFERINGS
Design UX SharePoint

4. Agenda
 User Experience
 User Centered Design Process (UCDP)
 From Abstract to Concrete
 Measures of Success
 UX Team
 SharePoint Publishing Portals
 Master Page, Page Layouts, CSS, JS, XSLTs, Search WP
 CSS Frameworks
 Responsive Web
 Bootstrap

5. “
”
…pay attention to
what users do, not
what they say
— Jakob Nielsen
Start with the end in mind.
The end is not completed solution.
The end is the user’s satisfaction.

6. User Experience Design
 Information Design
 Visual Design
 Interaction Design
 Information Architecture
 Usability Design
 Copywriting
 Marketing & Communication
 Technology Considerations

7. User Centered Design Process
 Taking Abstract ideas to Concrete
solutions.
 5 Planes
 Strategy, Scope, Structure,
Skeleton, Surface
 Checkpoints, Outputs and
Milestones
 This and more can be found in The
Elements of User Experience by
Jesse James Garrett

8. Strategy
 User Needs
 Externally derived goals for the
site; identified through user
research, etc.
 Site Objectives
 Business, creative, or other
internally derived goals for the site

9. Scope
 Content Requirements
 Definition of content elements
required in the site in order to
meet user needs
 Functional Specifications
 “Feature set": detailed
descriptions of functionality the
site must include in order to meet
user needs

10. Structure
 Information Architecture
 Structural design of the
information space to facilitate
intuitive access to content
 Interaction Design
 Development of application flows
to facilitate user tasks, defining
how the user interacts with site
functionality

11. Skeleton
 Navigation Design
 Design of interface elements to
facilitate the user's movement through
the information architecture
 Interface Design
 As in traditional HCI: design of interface
elements to facilitate user interaction
with functionality
 Information Design
 Designing the presentation of
information to facilitate understanding
Wireframe Tool: www.flairbuilder.com
Sample wireframe: Conference Portal

12. Surface
 Visual Design
 Visual treatment of text, graphic
page elements and navigational
components
 Graphic treatment of interface
elements (the "look" in "look-and-
feel")

13. Players/Roles
 Stakeholders
 Business sponsor
 Client
 PM
 User centered design team
 Business analyst
 Information Architect
 Solutions Architect
 UX Designer
 Interface Designer
 Development team
 Developer
 SharePoint Administrator

14. Aligning Roles to the User Centered
Design Process
STRATEGY SCOPE STRUCTURE SKELETON SURFACE
ABSTRACT CONCRETE
BUSINESS
ANALYSTS
INFORMATION
ARCHITECTS
UX/UI
DESIGNERS
OUTPUTS
EXERCISES
 Design Composition 1
 Design Composition 2
 Design Composition 3
 Wireframe
 Click-through Wireframe
 Content Mind Map
 Content Inventory
 Site Structure
 Solution Design Document
 System Requirement Specifications
 Business Needs Requirements
 Functional Requirements
 Content Mining  UX Review
 Wireframe review with Client
 Design Comps review with Client Technical Review Meeting Kick-off Meeting
 Internal Business Needs Review Meeting
 User Needs
 Site Objectives
 Content Requirements
 Functional Requirements
 Interaction Design
 Information Architecture
 Information Design
 Interface Design
 Navigation Design
 Visual Design
UX Team Poster

15. Measures of Success
 What are the project objectives?
 What are the project’s measure of success?
 What are your contribution’s measure of
success?
 How can you align measures of success to
objectives?

16. SharePoint Publishing Portals
The “technology”

17. SharePoint Publishing Portals
 Microsoft’s Content Management System
 Activate Server Publishing Infrastructure
 Site Collection Administration -> Site Collection Features
 Activate SharePoint Server Publishing Infrastructure
 Site Actions -> Manage Site Features
 Activate SharePoint Server Publishing
 2 Major Players in consideration when developing SharePoint Portals.
 Consumers (site visitors)
 Accessible
 Producers (content owners)
 Manageable

18. Publishing Pages
Publishing pages differ in that their content is stored
separately from the page in the different fields of the Pages
library.
Traditional pages like those created in the Site Pages library
store the page and its contents as a single entity within the
library.
The publishing page hosts special field controls that read the
data from the page item fields and display it on the page.
Designers then take control of the Page Layouts to set how
content is displayed.

19. Page Layouts
The advantage of this system is that the actual layout
page can be changed out without affecting the content it
is displaying. The data from the Pages library item is
simply read and displayed in the new layout.

20. Master Page

21. Leverage CSS Frameworks
 CSS Framework Comparison
 Bootstrap
 http://getbootstrap.com/
 Bootstrap Tutorial: http://www.w3schools.com/bootstrap/
 BINDTUNING
 Bootstrap Theme
 Eric Overfield
 SharePoint 2013 Branding Bootstrap 3

22. Don’t Forget
“I didn’t know we had to do that.”

23. Security Model
Owners
Contributors
Visitors
 Owners
 Full Control Access
 2 to 3 users
 Site Gate Keepers
 Contributors
 Contribute Access
 Content Owners
 Visitors
 View Access
 All Authenticated Users or Internal
Group

24. Configure Search
 Search Center Configuration
 Uses system.master
 Build Your Own Search Results
 Create Page
 Add Search Web Parts
 Configure Web Parts
 Configure search settings

25. Communication Plan
 Plan early
 Align plan with milestones and deliverables
 Audience
 Stakeholders
 Content Owners
 Users
 Frequency

26. Q & A