SPSRIC - A SharePoint Designer’s Lessons Learned

1 | SharePoint Saturday Richmond 2011

Lessons

A SharePoint Designer’s Lessons Learned By Marcy Kellar

Learned


• Lessons Learned from SharePoint Branding Projects

• Stories and Lessons

• No Code

• No Demos

Presenter

Presentation Notes

This session 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 This session is intended for Project Managers, Business Decisions Makers, Architects, Designers and anyone who’s head will roll when things go wrong. This session also offers time for Q&A at the end so bring your own questions.


• Designers • Architects • Project Managers • Business Decisions Makers • Anyone who’s head will roll when things go wrong on branding

project.


• Intro

• What Is Branding

• What Is UI Customization

• 10 Lessons Learned

• Q&A

Presenter

Presentation Notes

them. Who Has Had A SharePoint Branding Project Go Bad? And Then Tell Us Your Lesson Learned at End.


?

• 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

Presenter

Presentation Notes

Besides Knowledge, I’m going to Bribe You with Prizes Reveal


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

Presenter

Presentation Notes

My Story on How I got involved with SharePoint


What is Branding?

Presenter

Presentation Notes

First let’s define the domain. What are we talking about here. First Prize -


Branding: the use of advertising, distinctive design, and other means to make consumers associate a specific product with a specific manufacturer


What Does It Take To

“Brand SharePoint?

Presenter

Presentation Notes

First let’s define the domain. What are we talking about here. First Prize -


What Does It Take To “Brand SharePoint?

Minimum

• CSS

• HTML

General

• Page Layouts

• Master Pages

• Custom Feature(s) to Deploy Branding


What is a Custom User Interface?

Presenter

Presentation Notes

Anything that changes the UI from the default And The Lesson Is it Changes User Experience Content Look and Feel Interaction Structure / Layout


Branding

Content Placement, Content Layout, Interaction Design, Site Architecture Basically - Everything Else

Presenter

Presentation Notes

Branding Is Just the Tip of the Iceberg This is often uncovered through visual Design mockups.


Presenter

Presentation Notes

What do you think goes in each section as it relates to SharePoint?


Presenter

Presentation Notes

Understand how many layers there are in Branding/UI Customization


SharePoint Branding / UI Customization

is Challenging

Presenter

Presentation Notes

Branding can be high risk


But Not Impossible

Presenter

Presentation Notes

High Risks =


What is Risk?


The ISO 31000 (2009) /ISO Guide 73 definition of risk is the

'effect of uncertainty on objectives'.

http://en.wikipedia.org/wiki/ISO_31000


• No one wants to be responsible for it?

• Gotchas

• Skills

• Experience

• Concept Is Fairly New - Skinning CMS’s is a new Web Skill

Presenter

Presentation Notes

No one wants to be responsible for it? Gotchas (“Sucker Punches”) Skills / Experience Concept Is Fairly New - Skinning CMS’s is a new Web Skill


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)


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

Presenter

Presentation Notes

SharePints Talk openly about what works and what doesn’t Identify and Mitigate Risk


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

Presenter

Presentation Notes

SharePints Talk openly about what works and what doesn’t Identify and Mitigate Risk


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

Presenter

Presentation Notes

Here’s the story with someone familiar with SharePoint Estimate



Experienced With SharePoint Branding



40 hours


_________________________________

50 hours total

+ 8 hours SharePoint Sucker Punch

58



Experienced with SharePoint Branding



40 hours


_________________________________

50 hours total


58

Noob


8 hours for Jquery & CSS Webpart

+16 Hours to Ramp Up______________

60 hours


_________________________________

70 hours total



Experienced with SharePoint Branding



40 hours


_________________________________

50 hours total


58

Noob


8 hours for Jquery & CSS Webpart

+16 Hours to Ramp Up______________

60 hours


_________________________________

70 hours total

+ 8 hours Sucker Punch + 12 hours Sucker Punch + 6 hours Sucker Punch

86


Presenter

Presentation Notes

You may be communicating using the same words but not saying the same thing - Hired as UX Lead They Meant UI Designer No intention of having me in front of clients. Another story – Dev Wiki (Functional vs Visual Design)


• Review project plan.

• Discuss activities.

• Create glossary.

Presenter

Presentation Notes

You May Be communicating something but not saying the same thing

32 | SharePoint Saturday Richmond 2011 32 | SharePoint Saturday Columbus 2011

Lesson 3: Verify The Problem You Are Solving

Presenter

Presentation Notes

Unclear Scope - Innovation vs Inspiration Is the problem functional design or visual design Are we coloring a built house or building a custom house. Painting a shantytown won’t solve the problem if content is the issue.


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

Presenter

Presentation Notes

Unclear Scope - Innovation vs Inspiration Is the problem functional design or visual design Are we coloring a built house or building a custom house. Painting a shantytown won’t solve the problem if content is the issue. Decide whether you are there for inspiration or innovation


SharePoint – Inspiration Design Analogy

Your result still resembles the original structure

Presenter

Presentation Notes

Limited by structure Always fighting SharePoint�Bottom Up You start with what you have and redesign it


SharePoint – Inspiration Design Example

Presenter

Presentation Notes

Design around SharePoint Basic structure of SharePoint remains Design just styles current structure.


SharePoint – Innovation Example

Presenter

Presentation Notes

True UX design Blank Canvas; Design based on what you want, not on constraints Top Down Approach


Lesson 4: Multiple Designs Require Time to Architect

Presenter

Presentation Notes

When you have multiple Designs with multiple master pages and page layouts, you have an issue


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

Presenter

Presentation Notes

How do you architect a site like this>?


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.


Lesson 5: Define how iterations, reviews , and approvals are managed.

Infinity Symbol

Presenter

Presentation Notes

Infinity = How long you will be doing iterations if you let them.


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.

Presenter

Presentation Notes

Recommend 2 iterations for most branding projects


Lesson 6: Define Roles & Responsibilities

Project Sponsor Project Manager

SharePoint Architect

Biz Analyst /

Site Builder

Typical SharePoint Project Team

Presenter

Presentation Notes

Typical Roles Project Sponsor Senior decision maker who is responsible for overall project scope, and timeline, and financial decisions. Project Manager Manages the overall timeline, scope, and day to day administration for the project. The project manager is the central point of contact for SharePoint Soapbox. Solution Architect Provides the overall technical design and structure of the site and its supporting systems. Business Analyst Defines the business needs and requirements Technical Architect Provides expertise and support for the infrastructure and technical architecture.



UX Architect/ Branding Lead

Developer(s)

UI Designer Front End Developer



Biz Analyst /

Site Builder

Typical SharePoint Project Team Possible Roles with Custom UX

Presenter

Presentation Notes

Creative Types UX Architect Performs user experience and SharePoint branding architecture planning. Serves as liaison between Creative Agency and SharePoint Soapbox technical team. UI Designer/Design Firm Creates Design(s) Partner Sponsor Senior project decision maker from Creative Agency Partner who is responsible for overall project scope, and timeline, and change requests. SharePoint Developer(s) Lead developer responsible for implementation of back end custom development SharePoint Branding Expert Specialist Experienced in implementing Creative Design on SharePoint. Gotcha knowledge; manages MP, Page Layout & Process Front End Developer User Interface Developer working closely on custom development components that are implemented in presentation layer; Good with Scripting


Typical SharePoint Project Team Added Roles with Custom UX UX Architect/

Branding Lead Developer(s)

UI Designer Front End Developer



Biz Analyst /

Site Builder


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

Presenter

Presentation Notes

All Roles Project Sponsor Senior decision maker who is responsible for overall project scope, and timeline, and financial decisions. Partner Sponsor Senior project decision maker from Creative Agency Partner who is responsible for overall project scope, and timeline, and change requests Project Manager Manages the overall timeline, scope, and day to day administration for the project. The project manager is the central point of contact for SharePoint Soapbox. Solution Architect Provides the overall technical design and structure of the site and its supporting systems. Business Analyst Defines the business needs and requirements Technical Architect Provides expertise and support for the infrastructure and technical architecture. UX Architect Performs user experience and SharePoint branding architecture planning. Serves as liaison between Creative Agency and SharePoint Soapbox technical team. UI Designer/Design Firm Creates Design(s) SharePoint Developer(s) Lead developer responsible for implementation of back end custom development SharePoint Branding Expert Specialist Experienced in implementing Creative Design on SharePoint. Gotcha knowledge; manages MP, Page Layout & Process Front End Developer User Interface Developer working closely on custom development components that are implemented in presentation layer; Good with Scripting


Lesson 7: Mitigate Risk for Highly Customized Sites

Presenter

Presentation Notes

Who has experience with Highly Customized Site Redesigns? What are the risks? Code No Documentation


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

Presenter

Presentation Notes

Custom Site Definitions Multiple Solutions and Features Public Facing Sites


Lesson 8: Understand and Confirm Skills Required


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.


Designers UX Strategists / UX Architects / Creative Director

Developers

Front End Developers

Information Architects Platform / IT

Presenter

Presentation Notes

RWDW = Regular Web Design World


Lesson 9: Have Single Contact for Visual Design Decisions

Presenter

Presentation Notes

Ensure that one person is responsible for Creative Decisions


Basic WCM & Branding Project (Waterfall)


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”

Presenter

Presentation Notes

If you are stuck with Design by committee, make sure meetings are formal, iterations are defined. Impacts resources on other projects.


Lesson 10: Start with Good Requirements

Presenter

Presentation Notes

SharePoint Requirements – People don’t know what they want. They want you to tell them what they want. This takes skills and you should map back to business need.



Presenter

Presentation Notes

Unclear Scope - Innovation vs Inspiration

http://www.thesharepointmuse.com/wp-content/uploads/2010/07/cool-cartoon-19720594.png



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.

Presenter

Presentation Notes

Don’t DECORATE!! Make design purposeful

http://www.thesharepointmuse.com/wp-content/uploads/2010/07/cool-cartoon-19720594.png


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

Presenter

Presentation Notes

Fixed-bid branding projects (without templates).


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.


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

Presenter

Presentation Notes

Best to have a project manager At the 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.


Best Tool for SharePoint Branding

Use Paper and Pen to communicate Visual Design


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)


Please Fill Out Session Forms

Thank You

My Blog: The SharePoint Muse Twitter @marcykellar Linked in marcykellar

http://thesharepointmuse.com/

http://twitter.com/marcykellar

http://linkedin.com/in/marcykellar

63 | SharePoint Saturday Richmond 2011 Special Thanks to Our Sponsors

SPSRIC - A SharePoint Designer’s Lessons Learned

Technology

Transcript of SPSRIC - A SharePoint Designer’s Lessons Learned