SPSRIC - A SharePoint Designer’s Lessons Learned

  • 2,102 views
Uploaded on

Presented at SharePoint Saturday Richmond 11-5-11 …

Presented at SharePoint Saturday Richmond 11-5-11

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,102
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
51
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Lessons LearnedA SharePoint Designer’s Lessons LearnedBy Marcy Kellar 1 | SharePoint Saturday Richmond 2011
  • 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
  • 7. What is Branding? 7 | SharePoint Saturday Richmond 2011
  • 8. Branding: the use of advertising,distinctive design, and other means tomake consumers associate a specificproduct 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
  • 12. BrandingContent Placement, ContentLayout, Interaction Design,Site ArchitectureBasically - Everything Else 12 | SharePoint Saturday Richmond 2011
  • 13. 13 | SharePoint Saturday Richmond 2011
  • 14. 14 | SharePoint Saturday Richmond 2011
  • 15. 15 | SharePoint Saturday Richmond 2011
  • 16. 16 | SharePoint Saturday Richmond 2011
  • 17. SharePoint Branding / UI Customization is Challenging 17 | SharePoint Saturday Richmond 2011
  • 18. But Not Impossible 18 | 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 theeffect 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 VocabularyUnclear Scope - Innovation vs InspirationMultiple Designs and / or VariationsUndefined Design Reviews and Change ManagementUnclear Roles & ResponsibilitiesHighly Customized Sites Custom Site Definitions Highly Customized Site/Lots of FeaturesTeam of Independent ContractorsLack of Key Stakeholders (Committee Projects)Poor Requirements (Non-Requirements) 22 | SharePoint Saturday Richmond 2011
  • 23. 23 | 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 HappenExperienced With SharePoint BrandingBuild 32 Hours to Build Master Page & CSS+ 8 hours for Jquery & CSS Webpart 40 hoursTest10 hours for testing & bug fixes_________________________________50 hours total 26 | SharePoint Saturday Richmond 2011
  • 27. Example: Branding Sucker Punches HappenExperienced With SharePoint BrandingBuild 32 Hours to Build Master Page & CSS+ 8 hours for Jquery & CSS Webpart 40 hoursTest 10 hours for testing & bug fixes+_________________________________ 8 hours SharePoint Sucker Punch50 hours total 58 27 | SharePoint Saturday Richmond 2011
  • 28. Example: Branding Sucker Punches HappenExperienced with SharePoint Branding NoobBuild 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 hoursTest 10 hours for testing & bug fixes Test+_________________________________ 8 hours SharePoint Sucker Punch 10 hours for testing & bug fixes50 hours total _________________________________ 58 70 hours total 28 | SharePoint Saturday Richmond 2011
  • 29. Example: Branding Sucker Punches HappenExperienced with SharePoint Branding NoobBuild 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 hoursTest 10 hours for testing & bug fixes Test+_________________________________ 8 hours SharePoint Sucker Punch 10 hours for testing & bug fixes50 hours total + 8 hours Sucker Punch 58 + 12 hours Sucker Punch + 6 hours Sucker Punch _________________________________ 70 hours total 86 29 | SharePoint Saturday Richmond 2011
  • 30. 30 | SharePoint Saturday Richmond 2011
  • 31. • Review project plan.• Discuss activities.• Create glossary. 31 | 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
  • 35. SharePoint – Inspiration Design Example 35 | SharePoint Saturday Richmond 2011
  • 36. SharePoint – Innovation Example 36 | SharePoint Saturday Richmond 2011
  • 37. Lesson 4: Multiple Designs Require Time toArchitect 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 toArchitect• 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 aremanaged. 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
  • 42. Lesson 6: Define Roles & Responsibilities Typical SharePoint Project Team Project Sponsor Project Manager SharePoint Biz Analyst / Architect Site Builder 42 42 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
  • 45. Lesson 7: Mitigate Risk for Highly Customized Sites 45 45 SharePoint Saturday Richmond 20112011 | | SharePoint Saturday Columbus
  • 46. Lesson 7: Mitigate Risk for Highly Customized Sites• Custom Site Definitions • Proof of concepts• Multiple Solutions and • Code reviews Features • Multiple check points• Public Facing Sites • Define assumptions • Define stakeholder responsibilities 46 46 SharePoint Saturday Richmond 20112011 | | SharePoint Saturday Columbus
  • 47. Lesson 8: Understand and Confirm Skills Required 47 47 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 / UXDesigners Architects / Creative Developers DirectorFront End Information Platform / ITDevelopers Architects 49 | SharePoint Saturday Richmond 2011
  • 50. 50 | SharePoint Saturday Richmond 2011
  • 51. Lesson 9: Have Single Contact for Visual Design Decisions 51 51 SharePoint Saturday Richmond 20112011 | | SharePoint Saturday Columbus
  • 52. Basic WCM & Branding Project (Waterfall) 52 | 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 Requirements1. 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 ChoiceConceptual Site Modeling Content Organization & Planning  SmartDraw  Jumpchart.org  Mindjet  PowerPointWireframes / 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 marcykellarPlease Fill Out Session Forms 62 62 SharePoint Saturday Richmond 20112011 | | SharePoint Saturday Columbus
  • 63. Special Thanks to Our Sponsors 63 | SharePoint Saturday Richmond 2011