2. • Lessons Learned from SharePoint Branding Projects
• Stories and Lessons
• No Code
• No Demos
2 | SharePoint Saturday Richmond 2011
3. • Designers
• Architects
• Project Managers
• Business Decisions Makers
• Anyone who’s head will roll when things go wrong on branding
project.
3 | SharePoint Saturday Richmond 2011
4. • Intro
• What Is Branding
• What Is UI Customization
• 10 Lessons Learned
• Q&A
4 | SharePoint Saturday Richmond 2011
5. • Key Lessons to Guide a Successful
Branding /Visual Design for SharePoint
• Identification of High Risk Projects
• A Copy of Beginning SharePoint Designer
2010
• Branding Rockstar
?
The Best
Tool for
Branding
UI
5 | SharePoint Saturday Richmond 2011
6. Marcy Kellar
• Over 6 years in Microsoft SharePoint (Consultant &
Architect)
• Background in life sciences, web design project
management, and technology
• Co-author of Beginning SharePoint Designer 2010
(Wrox, October 2010)
• Former Professor of “Intro to User Centered Design”
and “Usability Testing” at the Art Institute of
Indianapolis
• Award winning fine-artist and photographer
Marcy Kellar, Solution Architect
6 | SharePoint Saturday Richmond 2011
6
8. Branding: the use of advertising,
distinctive design, and other means to
make consumers associate a specific
product with a specific manufacturer
8 | SharePoint Saturday Richmond 2011
9. What Does It Take To
“Brand SharePoint?
9 | SharePoint Saturday Richmond 2011
10. What Does It Take To “Brand SharePoint?
Minimum General
• CSS • Page Layouts
• HTML • Master Pages
• Custom Feature(s) to
Deploy Branding
10 | SharePoint Saturday Richmond 2011
11. What is a Custom User Interface?
11 | SharePoint Saturday Richmond 2011
19. What is Risk?
19 | SharePoint Saturday Richmond 2011
20. The ISO 31000 (2009) /ISO Guide 73
definition of risk is the
'effect of uncertainty on objectives'.
20 | SharePoint Saturday Richmond 2011
21. • No one wants to be responsible for it?
• Gotchas
• Skills
• Experience
• Concept Is Fairly New - Skinning CMS’s is a new Web Skill
21 | SharePoint Saturday Richmond 2011
22. Unknown Territory (Anything not using a templated design)
Undefined Vocabulary
Unclear Scope - Innovation vs Inspiration
Multiple Designs and / or Variations
Undefined Design Reviews and Change Management
Unclear Roles & Responsibilities
Highly Customized Sites
Custom Site Definitions
Highly Customized Site/Lots of Features
Team of Independent Contractors
Lack of Key Stakeholders (Committee Projects)
Poor Requirements (Non-Requirements)
22 | SharePoint Saturday Richmond 2011
24. • Unknown Territory (Branding Projects with New Content, Concepts and Designs)
• Branding SharePoint is challenging
• Learn from the mistakes of others (you are here).
• Identify risk & mitigate.
• Basic PM 101.
• Have a contingency plan “what if things go wrong.”
24 | SharePoint Saturday Richmond 2011
25. • Unknown Territory (Branding Projects with New Content, Concepts and Designs)
• Branding SharePoint is challenging You WILL get sucker punched.
• Learn from the mistakes of others (you are here).
• Identify risk & mitigate.
• Basic PM 101.
• Have a contingency plan “what if things go wrong.”
25 | SharePoint Saturday Richmond 2011
26. Example: Branding Sucker Punches Happen
Experienced With SharePoint Branding
Build
32 Hours to Build Master Page & CSS
+ 8 hours for Jquery & CSS Webpart
40 hours
Test
10 hours for testing & bug fixes
_________________________________
50 hours total
26 | SharePoint Saturday Richmond 2011
27. Example: Branding Sucker Punches Happen
Experienced With SharePoint Branding
Build
32 Hours to Build Master Page & CSS
+ 8 hours for Jquery & CSS Webpart
40 hours
Test
10 hours for testing & bug fixes
+_________________________________
8 hours SharePoint Sucker Punch
50 hours total
58
27 | SharePoint Saturday Richmond 2011
28. Example: Branding Sucker Punches Happen
Experienced with SharePoint Branding Noob
Build Build
32 Hours to Build Master Page & CSS 32 Hours to Build Master Page & CSS
+ 8 hours for Jquery & CSS Webpart 8 hours for Jquery & CSS Webpart
40 hours +16 Hours to Ramp Up______________
60 hours
Test
10 hours for testing & bug fixes Test
+_________________________________
8 hours SharePoint Sucker Punch 10 hours for testing & bug fixes
50 hours total _________________________________
58 70 hours total
28 | SharePoint Saturday Richmond 2011
29. Example: Branding Sucker Punches Happen
Experienced with SharePoint Branding Noob
Build Build
32 Hours to Build Master Page & CSS 32 Hours to Build Master Page & CSS
+ 8 hours for Jquery & CSS Webpart 8 hours for Jquery & CSS Webpart
40 hours +16 Hours to Ramp Up______________
60 hours
Test
10 hours for testing & bug fixes Test
+_________________________________
8 hours SharePoint Sucker Punch 10 hours for testing & bug fixes
50 hours total + 8 hours Sucker Punch
58 + 12 hours Sucker Punch
+ 6 hours Sucker Punch
_________________________________
70 hours total
86
29 | SharePoint Saturday Richmond 2011
32. Lesson 3: Verify The Problem You Are Solving
32 32 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
33. • Is branding really going to solve the problem?
• Branding / Styling is the solution when content and functionality are already defined.
• If not, you are still defining functional and content requirements too.
• Use appropriate process to get requirements
Review creative process with stakeholders.
Show examples.
33 | SharePoint Saturday Richmond 2011
34. SharePoint – Inspiration Design Analogy
Your result still resembles the original structure
34 | SharePoint Saturday Richmond 2011
37. Lesson 4: Multiple Designs Require Time to
Architect
37 37 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
38. Multiple Design & Theme Implementation
How would you architect this?
• # of master pages •
3 designs,
• Inheritance of branding 14 color variations for each one
elements 2 collaboration
1 publishing
• Minimize “tweaking” impact 3 page layouts?
• How many master pages?
• Any inheritance?
• What if you find several bugs just
before launch?
• How many files will you update?
38 | SharePoint Saturday Richmond 2011
38
39. Lesson 4: Multiple Designs Require Time to
Architect
• Split into new master page only when necessary.
• Minimize # of master pages and manage styling variations in page layouts.
• Inheritance is important – base CSS.
• Requires development and deployment strategy.
• Makes changes or troubleshooting much easier.
39 39 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
40. Lesson 5: Define how iterations, reviews , and approvals are
managed.
Infinity Symbol
40 40 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
41. Lesson 5: Define how iterations, reviews , and approvals are
managed.
• Inherent in some methodology (agile).
• Define # of iterations of Wireframes and Mockups before starting project
• Define approval process.
• Put in legal document (SOW).
• Define how changes are managed.
Infinity Symbol
41 41 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
43. Lesson 6: Define Roles & Responsibilities
Typical SharePoint Project Team Possible Roles with Custom UX
Project Sponsor Project Manager UX Architect/ Developer(s)
Branding Lead
SharePoint Biz Analyst / UI Designer Front End
Architect Site Builder Developer
43 43 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
44. Lesson 6: Define Roles & Responsibilities
• Review together as a team (even if it seems to be common knowledge)
verify with SharePoint Project Team
Typical stakeholder. Added Roles with Custom UX
• Define whoSponsor
Project owns each task, who does what andUX Architect/
Project Manager when. Developer(s)
Branding Lead
• Ensure you have source control if multiple folks in same file (Subversion for Photoshop).
SharePoint Biz Analyst / UI Designer Front End
Architect Site Builder Developer
44 44 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
48. Lesson 8: Understand and Confirm Skills Required
• Discuss process & identify skills required.
• Make sure you learn experience level of team.
Don’t assume credentials mean branding/UI design experience.
Look at previous project experience.
Web designer without SharePoint experience is not the same as one with. Plan for some ramp
up time.
• Determine which skills are required for project success (master pages, page layouts, CSS,
client side scripting, XSL styling).
• Identify any discrepancies early – build time in for learning/mentoring.
48 48 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
49. UX Strategists / UX
Designers Architects / Creative Developers
Director
Front End Information
Platform / IT
Developers Architects
49 | SharePoint Saturday Richmond 2011
53. Lesson 9: Have Single Contact for Visual Design Decisions
• “Design by committee” doesn’t work without risk to timeline.
• Assign a creative contact.
• Define a role with veto power.
• Beware of IT Sponsor that “dabbles with design”
53 53 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
54. Lesson 10: Start with Good Requirements
54 54 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
55. Lesson 10: Start with Good Requirements
55 55 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
56. Lesson 10: Start with Good Requirements
1. Branding meeting with stakeholders.
Walk through examples.
Define whether you are creating an inspired design or an innovative design.
Communicate cost and timeline implications of fully customized site .
2. Review functional requirements.
56 56 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
57. • Migrations (un-ghosting/customized pages).
• Undefined/unclear methodology (agile/hybrid/waterfall).
• Unclear transfer points b/w design & development.
• Locked down dev box.
• Lack of project management.
57 | SharePoint Saturday Richmond 2011
58. 1. Avoid getting sucker-punched by learning from others mistakes.
2. Share a common vocabulary.
3. Verify the problem you are solving.
4. Multiple designs require time to architect.
5. Define how iterations, reviews , and approvals are managed.
6. Define roles and responsibilities.
7. Mitigate risk for highly customized sites.
8. Understand and confirm skill set of team.
9. Have single contact for visual design decisions.
10. Start with good requirements.
58 | SharePoint Saturday Richmond 2011
59. • Best to have a project manager
• At the least an agreed upon project plan.
• If you are a solo resource without a project manager, be sure to have a plan
for tough conversations.
59 | SharePoint Saturday Richmond 2011
60. Best Tool for SharePoint Branding
Use Paper and Pen to
communicate Visual
Design
60 | SharePoint Saturday Richmond 2011
61. Other Tools of Choice
Conceptual Site Modeling Content Organization & Planning
SmartDraw Jumpchart.org
Mindjet PowerPoint
Wireframes / Functional Design Visual Design / Mockups
Illustrator (make your own UI set) Photoshop
Mockflow.com Illustrator (for lots of text)
Visio
Intranet Factory
61 | SharePoint Saturday Richmond 2011
62. Thank You
My Blog: The SharePoint Muse
Twitter @marcykellar
Linked in marcykellar
Please Fill Out Session Forms
62 62 SharePoint Saturday Richmond 20112011
| | SharePoint Saturday Columbus
63. Special Thanks to Our Sponsors 63 | SharePoint Saturday Richmond 2011