Microsoft SharePoint is an extremely popular platform for intranets and it is becoming more frequently used for public facing (digital marketing) sites as well. Ed Lloyd-Williams, Creative Director at cscape, looks at how to get the most out of branded SharePoint platforms.
There is a large demand for both intranets and internet sites to be individually designed and branded as digital strategies become increasingly focused on the overall experience of the user.
User experience (UX) is driving enterprises to take the design and branding of both their internal and external site more seriously. This can require the use of customised or unique interfaces (UI’s) to establish engaging content and functionality, presented within an online corporate identity. Creating these custom-designed UIs for Microsoft SharePoint Server 2010 is known as website branding, which is the focus of this article.
It is a large subject – and there are many books and sites out there, but this article simply describes a process and mindset for creating branded SharePoint environments. It is not a technical guide, it is a description of an approach that can be used for creating successful creative implementation.
Fig 1 – Illustration of a site designed for Microsoft – it is called Adventure Works. It is a fictional company aimed at the youth travel market. The site allows Microsoft’s international sales teams to demonstrate that SharePoint can be used for creating content managed websites with exciting built-in features such as blogs and wiki’s out of the box.
As with all web platforms/ technologies, it is vital that there is an understanding of the technology from the designer’s point of view. A designer being a ‘creative’ not a technical architect. It is possible for the designer to gain a mental model of the design possibilities by thinking along the lines of a ‘scale of customisation’. On one end of this scale there is a ‘custom’ or ‘bespoke’ approach to the design and the other end is a ‘theme’ or ‘out of the box’ approach. Each have their benefits – but the scale is worthy of discussion.
The scale in mind
As with any design and build project for any platform you need to understand the business and audience requirements / objectives. This step is no small task, but not the focus of this article so for arguments sake, I am going to assume that audience and stakeholder interviews have taken place, personas and use cases have been produced – surveys, competitor analysis and technical workshops etc. have all been drawn up and we are ready to proceed with an architecture, wireframes and creative concepts!.
It is at this point in the process that the mental model of the ‘scale’ of customisation comes into play. Having this scale in mind allows for the differing teams, technical and creative, to work alongside each other. Knowing there is a shared appreciation of the kind of effort required to achieve the end design.
To illustrate the idea of this scale and discuss approaches to designing sites for SharePoint I am using examples. However, and I can’t stress this enough – the best results and designs are a result of teamwork and collaboration between creative’s who understand this scale and the developers who embrace and collaborate on the creative.
Fig 2 – The scale allows a team of developers and designers to share a vision of what the end site may look like – it is this collaboration and shared vision which is the key to any successful branding project.
When technical teams, Information Architects, UX consultants and designers get together to discuss the first steps in creating a branded SharePoint site, knowing how far ‘off piste’ a design can go from the outset helps to clearly define a vision for the rest of the project. There are two ends to this scale – with a multitude of mid points, but the scale is a mindset, not a technical diagram. On one end of the scale, there is the fully customised interface, which would involve creating wireframes, design concepts, and creating functioning HTML and .css file versions of key pages. The other end of the scale is a Theme which is merely the selection of some colours within a given set of perimeters that can change text and background colours to web parts. The mid points are points in-between the too ends which incorporate different levels of custom code and custom css.
Wireframes
A wireframe is an illustration of content and functionality (with placement as a guide). It can be done within a multitude of applications with Microsoft Visio being one of the more popular choices, but having worked with dozens of UX professionals, I still don’t think there is a consensus of what application is best to use.
Wireframes can be created in the normal fashion of producing areas of content and functionality that should be designed, but what I have found as a great technique for information architects to pass on interface requirements to creative’s is to screen shot ‘out of the box’ SharePoint web parts and have these screen shots broken into their respective parts and simply placed into the relevant wireframes for representation by the designer.
Elements within these screen shots can then be either added or deleted as necessary to make up the new interface. Combine these elements with your custom parts – and you then have yourself a set of pages or user journeys. The more alteration to the ‘out of the box’ screen shot, the more to the left of our ‘scale of customisation’ you move.
Fig 3 – A wireframe with SharePoint out of the box elements incorporated into the interface. The header is custom, but the body of the page will be out of the box functionality, which would end up with a custom css applied to it.
Creative concepts
Once the wireframes are complete the designers can represent them in terms of creative concepts. Again team collaboration plays it’s vital role here. Designers are designers – not SharePoint tech leads or frontend specialists with SharePoint integration experience behind them. So that being the case there is a creative phase where the creative’s design concepts at a high level, and a phase which allows for collaboration between the front end and back end developers. Basically teamwork – but an understanding from parties that there is a need for a beautiful, engaging design – that fit into the agreed ‘scale’ at the beginning of the project.
There are a multitude of ways to get to an agreed creative – you may be following a brand guidelines document or you may be creating a new look and feel from scratch, but either one, will need to approach the design with a sense of reality as to what can be achieved.
This said, there is no reason why you can’t do whatever it is you want to do – Microsoft have created a site to showcase what can be done on the web and of course SharePoint is Microsoft’s recommended web platform for web content management.
Fig 4 – All these creative concepts were done for Microsoft’s Adventure Works.
As said, research tells us that online strategies are focused on the overall experience of the user and that the biggest business driver for Web Content Management being taken up by enterprises is Customer experience. And there is no reason why this can’t be achieved using SharePoint.
By Ed Lloyd-Williams
Creative Director
www.cscape.com
cScape Strategic Internet Services Ltd
