SharePoint UX: Styling and Branding. Design strategy

Previous related post:
SharePoint UX: Styling and Branding . Do it right

Kyle Schaeffer presented a nice design strategy that I couldn't resist to share with people who want:

 - prepare SharePoint implementation proposal;

 - present to the clients SharePoint custom design before implementation with less expenses;

 - come up with design solution that suits business needs and feasible to do in SharePoint.

Strategy consists of 4 phases:

1. Discover

Perception vs Expectation.  Kickoff meetings

You goal as an integrator, understand the client. 

Ask the client:

  -  Who are the users?

  -  What are they going to do?

  -  What is your goal?

Check yourself whether you understand the client.

How do you check your understanding?

Use a user persona , journaling. Use these personas for QA, during the whole project life

Example of journaling: 

Joe - a manager- does specific tasks

In QA cycle, ask clients again if "is a Joe satisfied?"

Spend some time on Information architecture 

( 50-100 users for small site -3-4 days for Information architecture)

- gather info about content

 - determine audience, users, personas

 - determine priority of content from the client's perspective

2. Plan

Set design goals:

 - set measures of success

(user adoption, findability (survey to find out))

 - identify and define aesthetic variables

To find out user design preferences here is a way to go without spending to much time and money on design ideas:

     - start with sketching. Just grab a list of paper, split the area of the list into 6 squares and draw your 6 design ideas of the landing page.   Restrict yourself with the space to stick with bigger picture.

One of the creative way to present sketches - printable sketches

      - then look at the sketches, circle the elements that you liked from them, and then combine the components that you like in one list sketch. Here is your prototype!

Once you have done with sketching, proceed with wireframes.  You can draw your wireframe in PowerPoint, or you can go with a popular tool (but not so free - 60-70$) balsamiq

Complement your wireframe with Mood Boards or Style Tiles

Mood Boards\ Style Tiles will serve as visual, understandable contract instead of requirements.

It will give to the client choices, some ideas.

You can evaluate user experience in this early stage via  20 sec gut test. Here is how you do it:

Pick few things (5-10) to show (some sites) and survey the users.

These techniques will allow you get stakeholders involved and get their feedbacks early without spending hours crafting your proposal in photoshop or doing a demo site.

Large group (10 people) will come up with typical design. Try to make the group smaller.

Define level of customization (scope)

 - Based on budget, resources, and design needs

 - Helps define the project scope

Here are the levels of customization in SharePoint from easiest to hardest:

SharePoint Themes

Low-Level Customization

Custom Master Pages

Extend SharePoint

Here are the SharePoint site templates from easiest to hardest to customize:

Enterprise Publishing

Wiki

Team Site

Meeting Workspace

Search Center 

 3. Design

Three C's of designs

 -Components (controls)  (wireframe)

 - Composition (where) (mood board, wireframe)

 - Concept (mood board)

Concepts (what emotions are triggered - tones, styles)

Using moodboards\style tiles and wireframes you will get you three C's of design before you actually has started designer's work. 

While designing, keep in mind that there are design patterns that already exist in the world and widely accepted by users.

Design patterns -an optimal solution for common problem. 

As an example of a design pattern - navigation panel. In SharePoint - item form, where labels on the left, fields are on the right. 

4. Implement

 In SharePoint fixing the display problem is a matter of:

1. Identifying the CSS styles used
2. Overriding those styles to ensure a better and more consistent display.

It's time for HTML, CSS, Javascripts.

Here are resources that help you start with Styling and Branding in SharePoint:

SharePoint blank master page starter. All placeholders that in this master pages are required. If you delete some of them, the SharePoint will not work with this master page.

You can hide easily such placeholders placing them in the hidden panel.

Kyle's valuable contribution in SharePoint branding:

http://www.thesug.org/blogs/kyles/default.aspx

http://kyleschaeffer.com/sharepoint

He mentioned specifically this post to reset CSS - so, I think, it's worth to try it- http://kyleschaeffer.com/sharepoint/css-reset/

And, at last but not  least - http://jqueryui.com/. SharePoint 2013 will include jQuery be default. This is a great insurance for your design now. 

Use jQuery and prosper!

 More on Design implementation valuable sources in the next post:
SharePoint UX: Styling and Branding. Design implementation