Lessons LearnedA SharePoint Designer’s Lessons LearnedBy Marcy Kellar                                     1   | SharePoint...
• Lessons Learned from SharePoint Branding Projects• Stories and Lessons• No Code• No Demos                               ...
• Project Managers• Business Decisions Makers• Architects• Designers• Anyone who’s head will roll when things go wrong    ...
•   Key Lessons to Guide a Successful    Branding /Visual Design for SharePoint•   Identification of High Risk Projects•  ...
Marcy KellarSharePoint•   6 years experience in SharePoint•   Branding, Publishing, Intranets, Public    Facing SharePoint...
What is Branding?                    6   | SharePoint Saturday Columbus 2011
Branding: the use of advertising,distinctive design, and other means tomake consumers associate a specificproduct with a s...
SharePoint BrandingContent Placement, ContentLayout, Interaction Design,Site ArchitectureBasically - Everything Else      ...
9   | SharePoint Saturday Columbus 2011
10   | SharePoint Saturday Columbus 2011
SharePoint Branding                      11 11 SharePoint Saturday Columbus 20112011                         |    | ShareP...
SharePoint Branding                      Master Pages                      Page Layouts                      Css          ...
SharePoint Branding /UI Design Customization    is Challenging                     13   | SharePoint Saturday Columbus 2011
But Not Impossible                 14   | SharePoint Saturday Columbus 2011
1.  Unknown Territory (Anything not using a templated design)2.  Undefined Vocabulary3.  Unclear Scope - Innovation vs Ins...
16   | SharePoint Saturday Columbus 2011
•   Unknown Territory (Branding Projects with New Content, Concepts and    Designs)•   Branding SharePoint is challenging•...
•   Unknown Territory (Branding Projects with New Content, Concepts and    Designs)•   Branding SharePoint is challenging ...
Example: Branding Sucker Punches HappenExperienced with SharePoint BrandingBuild 32 Hours to Build Master Page & CSS+ 8 ho...
Example: Branding Sucker Punches HappenExperienced with SharePoint BrandingBuild 32 Hours to Build Master Page & CSS+ 8 ho...
Example: Branding Sucker Punches HappenExperienced with SharePoint Branding   NoobBuild                                  B...
Example: Branding Sucker Punches HappenExperienced with SharePoint Branding        NoobBuild                              ...
23   | SharePoint Saturday Columbus 2011
•   Review project plan.•   Discuss activities.•   Create glossary.                           24   | SharePoint Saturday C...
Lesson 3: Verify The Problem You Are Solving                                          25 25 SharePoint Saturday Columbus 2...
•   Is branding really going to solve the problem?•   Branding / Styling is the solution when content and functionality ar...
SharePoint – Inspiration Design Analogy  Your result still resembles the original structure                               ...
SharePoint – Inspiration Design Example                                          28   | SharePoint Saturday Columbus 2011
SharePoint – Innovation Example                                  29   | SharePoint Saturday Columbus 2011
Lesson 4: Multiple Designs Require Time to Architect                                           30 30 SharePoint Saturday C...
Multiple Design & Theme Implementation                              •   How would you architect this?• # of master pages  ...
Lesson 4: Multiple Designs Require Time to Architect•   Split into new master page only when necessary.•   Minimize # of m...
Lesson 5: Define how iterations, reviews , and approvals are managed.                          Infinity Symbol            ...
Lesson 5: Define how iterations, reviews , and approvals are managed.•   Inherent in some methodology (agile).•   Define #...
Lesson 6: Define Roles & Responsibilities    Typical SharePoint Project Team     Project Sponsor   Project Manager       S...
Lesson 6: Define Roles & Responsibilities    Typical SharePoint Project Team      Possible Roles with Custom UX     Projec...
Lesson 6: Define Roles & Responsibilities•   Review together as a team (even if it seems to be common knowledge)    verify...
Lesson 7: Mitigate Risk for Highly Customized Sites                                                      38 38 SharePoint ...
Lesson 7: Mitigate Risk for Highly Customized Sites• Custom Site Definitions       •   Proof of concepts• Multiple Solutio...
Lesson 8: Understand and Confirm Skills Required                                                   40 40 SharePoint Saturd...
Lesson 8: Understand and Confirm Skills Required•   Discuss process & identify skills required.•   Make sure you learn exp...
UX Strategists /Designers    UX Architects /     Developers             Creative DirectorFront End    Information         ...
43   | SharePoint Saturday Columbus 2011
Lesson 9: Have Single Contact for Visual Design Decisions                                                   44 44 SharePoi...
Example: Branding Sucker Punches HappenExperienced with SharePoint Branding        NoobBuild                              ...
Lesson 9: Have Single Contact for Visual Design Decisions•   “Design by committee” doesn’t work without risk to timeline.•...
Lesson 10: Start with Good Requirements                                          47 47 SharePoint Saturday Columbus 201120...
Lesson 10: Start with Good Requirements                                          48 48 SharePoint Saturday Columbus 201120...
Lesson 10: Start with Good Requirements1.   Branding meeting with stakeholders.      Walk through examples.      Define ...
•   Migrations (ghosting).•   Fixed-bid branding projects (without templates).•   Undefined/unclear methodology (agile/hyb...
1. Avoid getting sucker-punched by learning from others mistakes.2. Share a common vocabulary.3. Verify the problem you ar...
• And always have a project manager or at least an agreed upon  project plan. User Interface/Branding and UX projects ofte...
My Tools of ChoiceConceptual Site Modeling                   Content Organization & Planning     SmartDraw               ...
Thank YouMy Blog: The SharePoint MuseTwitter @marcykellarLinked in marcykellar                               54 54 SharePo...
Thanks to Our Sponsors!                          55   | SharePoint Saturday Columbus 2011
Upcoming SlideShare
Loading in...5
×

SPSColumbus - A SharePoint Designer’s Lessons Learned

2,482

Published on

My session from SharePoint Saturday Columbus 2011 - focuses on what works and what doesn’t when redesigning a SharePoint User Interface in both SharePoint 2007 and 2010.  You are invited to listen to real life stories of SharePoint Branding and User Interface redesigns--.  You will walk away from this session with some key tips on how to see the red flags that could mean your SharePoint branding project is in trouble and how to manage them.

This session is intended for Project Managers, Business Decisions Makers, Architects, Designers and anyone who’s head will roll when things go wrong. 

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,482
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
69
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SPSColumbus - A SharePoint Designer’s Lessons Learned

  1. 1. Lessons LearnedA SharePoint Designer’s Lessons LearnedBy Marcy Kellar 1 | SharePoint Saturday Columbus 2011
  2. 2. • Lessons Learned from SharePoint Branding Projects• Stories and Lessons• No Code• No Demos 2 | SharePoint Saturday Columbus 2011
  3. 3. • Project Managers• Business Decisions Makers• Architects• Designers• Anyone who’s head will roll when things go wrong 3 | SharePoint Saturday Columbus 2011
  4. 4. • 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 4 | SharePoint Saturday Columbus 2011
  5. 5. Marcy KellarSharePoint• 6 years experience in SharePoint• Branding, Publishing, Intranets, Public Facing SharePoint Sites with Enterprise clients• Touched over 50 intranets• Co-Author, “Beginning SharePoint Designer 2010 (Wrox)Design• Professor of User Centered Design at Art Institute of Indianapolis• Award Winning Photographer & Fine Artist 5 | SharePoint Saturday Columbus 2011
  6. 6. What is Branding? 6 | SharePoint Saturday Columbus 2011
  7. 7. Branding: the use of advertising,distinctive design, and other means tomake consumers associate a specificproduct with a specific manufacturer 7 | SharePoint Saturday Columbus 2011
  8. 8. SharePoint BrandingContent Placement, ContentLayout, Interaction Design,Site ArchitectureBasically - Everything Else 8 | SharePoint Saturday Columbus 2011
  9. 9. 9 | SharePoint Saturday Columbus 2011
  10. 10. 10 | SharePoint Saturday Columbus 2011
  11. 11. SharePoint Branding 11 11 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  12. 12. SharePoint Branding Master Pages Page Layouts Css Content Styling HTML Editor Styling 12 12 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  13. 13. SharePoint Branding /UI Design Customization is Challenging 13 | SharePoint Saturday Columbus 2011
  14. 14. But Not Impossible 14 | SharePoint Saturday Columbus 2011
  15. 15. 1. Unknown Territory (Anything not using a templated design)2. Undefined Vocabulary3. Unclear Scope - Innovation vs Inspiration4. Multiple Designs and / or Variations5. Undefined Design Reviews and Change Management6. Unclear Roles & Responsibilities7. Highly Customized Sites  Custom Site Definitions  Highly Customized Site/Lots of Features8. Team of Independent Contractors9. Lack of Key Stakeholders (Committee Projects)10. Poor Requirements (Non-Requirements) 15 | SharePoint Saturday Columbus 2011
  16. 16. 16 | SharePoint Saturday Columbus 2011
  17. 17. • 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.” 17 | SharePoint Saturday Columbus 2011
  18. 18. • 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.” 18 | SharePoint Saturday Columbus 2011
  19. 19. 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 19 | SharePoint Saturday Columbus 2011
  20. 20. 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 20 | SharePoint Saturday Columbus 2011
  21. 21. 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 21 | SharePoint Saturday Columbus 2011
  22. 22. 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 22 | SharePoint Saturday Columbus 2011
  23. 23. 23 | SharePoint Saturday Columbus 2011
  24. 24. • Review project plan.• Discuss activities.• Create glossary. 24 | SharePoint Saturday Columbus 2011
  25. 25. Lesson 3: Verify The Problem You Are Solving 25 25 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  26. 26. • 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. 26 | SharePoint Saturday Columbus 2011
  27. 27. SharePoint – Inspiration Design Analogy Your result still resembles the original structure 27 | SharePoint Saturday Columbus 2011
  28. 28. SharePoint – Inspiration Design Example 28 | SharePoint Saturday Columbus 2011
  29. 29. SharePoint – Innovation Example 29 | SharePoint Saturday Columbus 2011
  30. 30. Lesson 4: Multiple Designs Require Time to Architect 30 30 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  31. 31. Multiple Design & Theme Implementation • How would you architect this?• # of master pages  3 designs,• Inheritance of branding  14 color variations for each one  2 collaboration elements  1 publishing• Minimize “tweaking”  3 page layouts? impact • How many master pages? • Any inheritance? • What if you find several bugs just before launch? • How many files will you update? 31 | SharePoint Saturday Columbus 2011 31
  32. 32. 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. 32 32 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  33. 33. Lesson 5: Define how iterations, reviews , and approvals are managed. Infinity Symbol 33 33 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  34. 34. 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 34 34 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  35. 35. Lesson 6: Define Roles & Responsibilities Typical SharePoint Project Team Project Sponsor Project Manager SharePoint Biz Analyst / Architect Site Builder 35 35 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  36. 36. 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 36 36 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  37. 37. 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 who owns each task, who does what and when. Project Sponsor Project Manager UX Architect/ 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 37 37 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  38. 38. Lesson 7: Mitigate Risk for Highly Customized Sites 38 38 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  39. 39. 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 39 39 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  40. 40. Lesson 8: Understand and Confirm Skills Required 40 40 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  41. 41. 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. 41 41 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  42. 42. UX Strategists /Designers UX Architects / Developers Creative DirectorFront End Information Platform / ITDevelopers Architects 42 | SharePoint Saturday Columbus 2011
  43. 43. 43 | SharePoint Saturday Columbus 2011
  44. 44. Lesson 9: Have Single Contact for Visual Design Decisions 44 44 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  45. 45. 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 45 | SharePoint Saturday Columbus 2011
  46. 46. 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” 46 46 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  47. 47. Lesson 10: Start with Good Requirements 47 47 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  48. 48. Lesson 10: Start with Good Requirements 48 48 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  49. 49. 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. 49 49 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  50. 50. • Migrations (ghosting).• Fixed-bid branding projects (without templates).• Undefined/unclear methodology (agile/hybrid/waterfall).• Unclear transfer points b/w design & development.• Locked down dev box.• Lack of project management. 50 | SharePoint Saturday Columbus 2011
  51. 51. 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. 51 | SharePoint Saturday Columbus 2011
  52. 52. • And always have a project manager or at least an agreed upon project plan. User Interface/Branding and UX projects often have tough conversations to reset and manage expectations.• If you are a solo resource without a project manager, be sure to have a plan for tough conversations. 52 | SharePoint Saturday Columbus 2011
  53. 53. My 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 53 | SharePoint Saturday Columbus 2011
  54. 54. Thank YouMy Blog: The SharePoint MuseTwitter @marcykellarLinked in marcykellar 54 54 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  55. 55. Thanks to Our Sponsors! 55 | SharePoint Saturday Columbus 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×