Upload
marcy-kellar
View
105
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Presented at SharePoint Saturday Richmond 11-5-11
Citation preview
1 | SharePoint Saturday Richmond 2011
Lessons
A SharePoint Designer’s Lessons Learned By Marcy Kellar
Learned
2 | SharePoint Saturday Richmond 2011
• Lessons Learned from SharePoint Branding Projects
• Stories and Lessons
• No Code
• No Demos
3 | SharePoint Saturday Richmond 2011
• Designers • Architects • Project Managers • Business Decisions Makers • Anyone who’s head will roll when things go wrong on branding
project.
4 | SharePoint Saturday Richmond 2011
• Intro
• What Is Branding
• What Is UI Customization
• 10 Lessons Learned
• Q&A
5 | SharePoint Saturday Richmond 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
The Best Tool for
Branding UI
6 | SharePoint Saturday Richmond 2011
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
6
Marcy Kellar, Solution Architect
7 | SharePoint Saturday Richmond 2011
What is Branding?
8 | SharePoint Saturday Richmond 2011
Branding: the use of advertising, distinctive design, and other means to make consumers associate a specific product with a specific manufacturer
9 | SharePoint Saturday Richmond 2011
What Does It Take To
“Brand SharePoint?
10 | SharePoint Saturday Richmond 2011
What Does It Take To “Brand SharePoint?
Minimum
• CSS
• HTML
General
• Page Layouts
• Master Pages
• Custom Feature(s) to Deploy Branding
11 | SharePoint Saturday Richmond 2011
What is a Custom User Interface?
12 | SharePoint Saturday Richmond 2011
Branding
Content Placement, Content Layout, Interaction Design, Site Architecture Basically - Everything Else
13 | SharePoint Saturday Richmond 2011
14 | SharePoint Saturday Richmond 2011
15 | SharePoint Saturday Richmond 2011
16 | SharePoint Saturday Richmond 2011
17 | SharePoint Saturday Richmond 2011
SharePoint Branding / UI Customization
is Challenging
18 | SharePoint Saturday Richmond 2011
But Not Impossible
19 | SharePoint Saturday Richmond 2011
What is Risk?
20 | SharePoint Saturday Richmond 2011
The ISO 31000 (2009) /ISO Guide 73 definition of risk is the
'effect of uncertainty on objectives'.
21 | SharePoint Saturday Richmond 2011
• No one wants to be responsible for it?
• Gotchas
• Skills
• Experience
• Concept Is Fairly New - Skinning CMS’s is a new Web Skill
22 | SharePoint Saturday Richmond 2011
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)
23 | SharePoint Saturday Richmond 2011
24 | SharePoint Saturday Richmond 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.”
25 | SharePoint Saturday Richmond 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.”
You WILL get sucker punched.
26 | SharePoint Saturday Richmond 2011
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
27 | SharePoint Saturday Richmond 2011
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
+ 8 hours SharePoint Sucker Punch
58
28 | SharePoint Saturday Richmond 2011
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
+ 8 hours SharePoint Sucker Punch
58
Noob
Build 32 Hours to Build Master Page & CSS
8 hours for Jquery & CSS Webpart
+16 Hours to Ramp Up______________
60 hours
Test 10 hours for testing & bug fixes
_________________________________
70 hours total
29 | SharePoint Saturday Richmond 2011
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
+ 8 hours SharePoint Sucker Punch
58
Noob
Build 32 Hours to Build Master Page & CSS
8 hours for Jquery & CSS Webpart
+16 Hours to Ramp Up______________
60 hours
Test 10 hours for testing & bug fixes
_________________________________
70 hours total
+ 8 hours Sucker Punch + 12 hours Sucker Punch + 6 hours Sucker Punch
86
30 | SharePoint Saturday Richmond 2011
31 | SharePoint Saturday Richmond 2011
• Review project plan.
• Discuss activities.
• Create glossary.
32 | SharePoint Saturday Richmond 2011 32 | SharePoint Saturday Columbus 2011
Lesson 3: Verify The Problem You Are Solving
33 | SharePoint Saturday Richmond 2011
• 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.
34 | SharePoint Saturday Richmond 2011
SharePoint – Inspiration Design Analogy
Your result still resembles the original structure
35 | SharePoint Saturday Richmond 2011
SharePoint – Inspiration Design Example
36 | SharePoint Saturday Richmond 2011
SharePoint – Innovation Example
37 | SharePoint Saturday Richmond 2011 37 | SharePoint Saturday Columbus 2011
Lesson 4: Multiple Designs Require Time to Architect
38 | SharePoint Saturday Richmond 2011
Multiple Design & Theme Implementation
• # of master pages
• Inheritance of branding elements
• Minimize “tweaking” impact
• How would you architect this? 3 designs,
14 color variations for each one
2 collaboration
1 publishing
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
39 | SharePoint Saturday Richmond 2011 39 | SharePoint Saturday Columbus 2011
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.
40 | SharePoint Saturday Richmond 2011 40 | SharePoint Saturday Columbus 2011
Lesson 5: Define how iterations, reviews , and approvals are managed.
Infinity Symbol
41 | SharePoint Saturday Richmond 2011 41 | SharePoint Saturday Columbus 2011
Infinity Symbol
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.
42 | SharePoint Saturday Richmond 2011 42 | SharePoint Saturday Columbus 2011
Lesson 6: Define Roles & Responsibilities
Project Sponsor Project Manager
SharePoint Architect
Biz Analyst /
Site Builder
Typical SharePoint Project Team
43 | SharePoint Saturday Richmond 2011 43 | SharePoint Saturday Columbus 2011
Lesson 6: Define Roles & Responsibilities
UX Architect/ Branding Lead
Developer(s)
UI Designer Front End Developer
Project Sponsor Project Manager
SharePoint Architect
Biz Analyst /
Site Builder
Typical SharePoint Project Team Possible Roles with Custom UX
44 | SharePoint Saturday Richmond 2011 44 | SharePoint Saturday Columbus 2011
Typical SharePoint Project Team Added Roles with Custom UX UX Architect/
Branding Lead Developer(s)
UI Designer Front End Developer
Project Sponsor Project Manager
SharePoint Architect
Biz Analyst /
Site Builder
Lesson 6: Define Roles & Responsibilities
• Review together as a team (even if it seems to be common knowledge) verify with stakeholder.
• Define who owns each task, who does what and when.
• Ensure you have source control if multiple folks in same file (Subversion for Photoshop).
45 | SharePoint Saturday Richmond 2011 45 | SharePoint Saturday Columbus 2011
Lesson 7: Mitigate Risk for Highly Customized Sites
46 | SharePoint Saturday Richmond 2011 46 | SharePoint Saturday Columbus 2011
Lesson 7: Mitigate Risk for Highly Customized Sites
• Custom Site Definitions
• Multiple Solutions and Features
• Public Facing Sites
• Proof of concepts
• Code reviews
• Multiple check points
• Define assumptions
• Define stakeholder responsibilities
47 | SharePoint Saturday Richmond 2011 47 | SharePoint Saturday Columbus 2011
Lesson 8: Understand and Confirm Skills Required
48 | SharePoint Saturday Richmond 2011 48 | SharePoint Saturday Columbus 2011
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.
49 | SharePoint Saturday Richmond 2011
Designers UX Strategists / UX Architects / Creative Director
Developers
Front End Developers
Information Architects Platform / IT
50 | SharePoint Saturday Richmond 2011
51 | SharePoint Saturday Richmond 2011 51 | SharePoint Saturday Columbus 2011
Lesson 9: Have Single Contact for Visual Design Decisions
52 | SharePoint Saturday Richmond 2011
Basic WCM & Branding Project (Waterfall)
53 | SharePoint Saturday Richmond 2011 53 | 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”
54 | SharePoint Saturday Richmond 2011 54 | SharePoint Saturday Columbus 2011
Lesson 10: Start with Good Requirements
55 | SharePoint Saturday Richmond 2011 55 | SharePoint Saturday Columbus 2011
Lesson 10: Start with Good Requirements
56 | SharePoint Saturday Richmond 2011 56 | SharePoint Saturday Columbus 2011
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.
57 | SharePoint Saturday Richmond 2011
• 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.
58 | SharePoint Saturday Richmond 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.
59 | SharePoint Saturday Richmond 2011
• 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.
60 | SharePoint Saturday Richmond 2011
Best Tool for SharePoint Branding
Use Paper and Pen to communicate Visual Design
61 | SharePoint Saturday Richmond 2011
Other Tools of Choice
Conceptual Site Modeling
SmartDraw
Mindjet
Wireframes / Functional Design
Illustrator (make your own UI set)
Mockflow.com
Visio
Intranet Factory
Content Organization & Planning
Jumpchart.org
PowerPoint
Visual Design / Mockups
Photoshop
Illustrator (for lots of text)
62 | SharePoint Saturday Richmond 2011 62 | SharePoint Saturday Columbus 2011
Please Fill Out Session Forms
Thank You
My Blog: The SharePoint Muse Twitter @marcykellar Linked in marcykellar
63 | SharePoint Saturday Richmond 2011 Special Thanks to Our Sponsors