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.
2. • Lessons Learned from SharePoint Branding Projects
• Stories and Lessons
• No Code
• No Demos
2 | SharePoint Saturday Columbus 2011
3. • Project Managers
• Business Decisions Makers
• Architects
• Designers
• Anyone who’s head will roll when things go wrong
3 | SharePoint Saturday Columbus 2011
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. Marcy Kellar
SharePoint
• 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
7. Branding: the use of advertising,
distinctive design, and other means to
make consumers associate a specific
product with a specific manufacturer
7 | SharePoint Saturday Columbus 2011
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. • 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. 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
19 | SharePoint Saturday Columbus 2011
20. 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
20 | SharePoint Saturday Columbus 2011
21. 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
21 | SharePoint Saturday Columbus 2011
22. 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
22 | SharePoint Saturday Columbus 2011
25. Lesson 3: Verify The Problem You Are Solving
25 25 SharePoint Saturday Columbus 20112011
| | SharePoint Saturday Columbus
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. SharePoint – Inspiration Design Analogy
Your result still resembles the original structure
27 | SharePoint Saturday Columbus 2011
30. Lesson 4: Multiple Designs Require Time to Architect
30 30 SharePoint Saturday Columbus 20112011
| | SharePoint Saturday Columbus
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. 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. Lesson 5: Define how iterations, reviews , and approvals are managed.
Infinity Symbol
33 33 SharePoint Saturday Columbus 20112011
| | SharePoint Saturday Columbus
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
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. 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
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. UX Strategists /
Designers UX Architects / Developers
Creative Director
Front End Information
Platform / IT
Developers Architects
42 | SharePoint Saturday Columbus 2011
44. Lesson 9: Have Single Contact for Visual Design Decisions
44 44 SharePoint Saturday Columbus 20112011
| | SharePoint Saturday Columbus
45. 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
45 | SharePoint Saturday Columbus 2011
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. Lesson 10: Start with Good Requirements
47 47 SharePoint Saturday Columbus 20112011
| | SharePoint Saturday Columbus
48. Lesson 10: Start with Good Requirements
48 48 SharePoint Saturday Columbus 20112011
| | SharePoint Saturday Columbus
49. 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.
49 49 SharePoint Saturday Columbus 20112011
| | SharePoint Saturday Columbus
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. 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. • 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. My 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
53 | SharePoint Saturday Columbus 2011
54. Thank You
My Blog: The SharePoint Muse
Twitter @marcykellar
Linked in marcykellar
54 54 SharePoint Saturday Columbus 20112011
| | SharePoint Saturday Columbus