SPSColumbus - A SharePoint Designer’s Lessons Learned
Upcoming SlideShare
Loading in...5
×
 

SPSColumbus - A SharePoint Designer’s Lessons Learned

on

  • 2,689 views

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 ...

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. 

Statistics

Views

Total Views
2,689
Views on SlideShare
2,008
Embed Views
681

Actions

Likes
1
Downloads
66
Comments
0

3 Embeds 681

http://www.thesharepointmuse.com 667
http://www.linkedin.com 13
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SPSColumbus - A SharePoint Designer’s Lessons Learned SPSColumbus - A SharePoint Designer’s Lessons Learned Presentation Transcript

  • Lessons LearnedA SharePoint Designer’s Lessons LearnedBy Marcy Kellar 1 | SharePoint Saturday Columbus 2011
  • • Lessons Learned from SharePoint Branding Projects• Stories and Lessons• No Code• No Demos 2 | SharePoint Saturday Columbus 2011
  • • Project Managers• Business Decisions Makers• Architects• Designers• Anyone who’s head will roll when things go wrong 3 | SharePoint Saturday Columbus 2011
  • • 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
  • 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
  • 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 specific manufacturer 7 | SharePoint Saturday Columbus 2011
  • SharePoint BrandingContent Placement, ContentLayout, Interaction Design,Site ArchitectureBasically - Everything Else 8 | SharePoint Saturday Columbus 2011
  • 9 | SharePoint Saturday Columbus 2011
  • 10 | SharePoint Saturday Columbus 2011
  • SharePoint Branding 11 11 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • SharePoint Branding Master Pages Page Layouts Css Content Styling HTML Editor Styling 12 12 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • 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 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 | SharePoint Saturday Columbus 2011
  • • 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
  • • 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
  • 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
  • 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
  • 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
  • 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 | SharePoint Saturday Columbus 2011
  • • Review project plan.• Discuss activities.• Create glossary. 24 | SharePoint Saturday Columbus 2011
  • Lesson 3: Verify The Problem You Are Solving 25 25 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • • 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
  • SharePoint – Inspiration Design Analogy Your result still resembles the original structure 27 | SharePoint Saturday Columbus 2011
  • 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 Columbus 20112011 | | SharePoint Saturday Columbus
  • 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
  • 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
  • Lesson 5: Define how iterations, reviews , and approvals are managed. Infinity Symbol 33 33 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • 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
  • 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
  • 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
  • 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
  • Lesson 7: Mitigate Risk for Highly Customized Sites 38 38 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • 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
  • Lesson 8: Understand and Confirm Skills Required 40 40 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • 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
  • UX Strategists /Designers UX Architects / Developers Creative DirectorFront End Information Platform / ITDevelopers Architects 42 | SharePoint Saturday Columbus 2011
  • 43 | SharePoint Saturday Columbus 2011
  • Lesson 9: Have Single Contact for Visual Design Decisions 44 44 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • 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
  • 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
  • Lesson 10: Start with Good Requirements 47 47 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • Lesson 10: Start with Good Requirements 48 48 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • 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
  • • 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
  • 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
  • • 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
  • 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
  • Thank YouMy Blog: The SharePoint MuseTwitter @marcykellarLinked in marcykellar 54 54 SharePoint Saturday Columbus 20112011 | | SharePoint Saturday Columbus
  • Thanks to Our Sponsors! 55 | SharePoint Saturday Columbus 2011