SPSColumbus - A SharePoint Designer’s Lessons Learned

Transcript of SPSColumbus - A SharePoint Designer’s Lessons Learned

1 | SharePoint Saturday Columbus 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 them. 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.

• 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 • A Copy of Beginning SharePoint

Designer 2010 • Branding Rockstar

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

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

SharePoint 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

The User Experience Iceberg

Presenter

Presentation Notes

Understand how many layers there are in Branding/UI Customization

11 | SharePoint Saturday Columbus 2011 11 | SharePoint Saturday Columbus 2011

SharePoint Branding

Presenter

Presentation Notes

I have found in SharePoint branding has come to mean : Make it pretty, make users adopt it, make it usable

SharePoint Branding

Master Pages Page Layouts Css Content Styling HTML Editor Styling

Presenter

Presentation Notes

Master Pages Page Layouts Css Content Styling HTML Editor Styling

SharePoint Branding / UI Design Customization

is Challenging

But Not Impossible

1. Unknown Territory (Anything not using a templated design) 2. Undefined Vocabulary 3. Unclear Scope - Innovation vs Inspiration 4. Multiple Designs and / or Variations 5. Undefined Design Reviews and Change Management 6. Unclear Roles & Responsibilities 7. Highly Customized Sites Custom Site Definitions Highly Customized Site/Lots of Features

8. Team of Independent Contractors 9. Lack of Key Stakeholders (Committee Projects) 10. Poor Requirements (Non-Requirements)

Presenter

Presentation Notes

Tell story of bad project for Book. And Then Tell Us Your Lesson Learned at End.

• 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

40 hours

_________________________________

50 hours total

+ 8 hours SharePoint Sucker Punch

58

40 hours

_________________________________

50 hours total

58

Noob Build 32 Hours to Build Master Page & CSS

8 hours for Jquery & CSS Webpart

+16 Hours to Ramp Up______________

60 hours

_________________________________

70 hours total

40 hours

_________________________________

50 hours total

58

+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

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?

31

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

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

• 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

• 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

40 hours

_________________________________

50 hours total

58

+16 Hours to Ramp Up______________

60 hours

_________________________________

70 hours total

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

86

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

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.

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

My 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)

Thank You

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

http://thesharepointmuse.com/

http://twitter.com/marcykellar

http://linkedin.com/in/marcykellar

Thanks to Our Sponsors!

SPSColumbus - A SharePoint Designer’s Lessons Learned

Design

Transcript of SPSColumbus - A SharePoint Designer’s Lessons Learned

Static Timing Analysis Using Designer’s Timer

Principal Designer’s Handbook - APS

The- Designer’s- Illustrator- Book- - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780321772879/samplepages/... · The- Non-Designer’s- Illustrator- Book- Essential vector techniques

A Designer’s Guide to KEMs

DESIGNER’S CHOICE - Burton James

Designer’s Choice CollectionDesigner’s Choice Classics & PowerRecline Designer’s Choice Classics Assembly Instructions Designer’s Choice Classics & PowerRecline Designer’s

Hard learned SharePoint development tips

Luxury interior designer’s solution

PRT375 SharePoint Products & Technologies: Performance and Capacity Planning, Best Practices, and Lessons Learned Joel Oleson Technologist Microsoft Corporation.

Андрій Доценко “Game Designer’s Journey”

Designer’s experience of Finnish Railway projects

WELCOME SHAREPOINT SATURDAY OTTAWA · WELCOME SHAREPOINT SATURDAY OTTAWA October 28, 2017 Learn what we learned on Office 365, SharePoint ... Live data connection from Power BI

The Designer’s Guide to Tungsten Carbide

Designer’s Manual

Content Governance & Writing for the Web Everything I Know About SharePoint Governance … I Learned From My Mother.

The Non-Designer’s Design Book

WordPress Themes - From Designer’s Perspective

2020 Designer’s Handbook

The Designer’s Guide to Creating Churn

A Designer’s Dream - Allan Block