SharePoint is an industry standard platform for creating a company intranet, but the out of the box styling leaves something to be desired. Even a well-designed site can fail to engage employees if it isn’t visually appealing. In this blog, I will explore several options SharePoint offers to customize the user experience, and explain the pros and cons of each approach.

For this discussion, I will consider each approach within the context of these factors:

  • Design – how much flexibility does this approach have in creating the desired branding?
  • Effort – how time consuming is the approach and what skills are required?
  • Admin – what implications are there for the future maintainability of the site?

SharePoint WYSIWYG page editor

Colored table displaying Design, Effort and Admin pros and cons
At the low end of the spectrum is using SharePoint’s CMS editor. This allows SharePoint users to easily update text, content, images, and links. Users that have used a CMS such as WordPress or Sitefinity will be comfortable with this solution and can generate pages and content with no technical skills required.

There are two downsides to this approach. First, since content is manually put on the page it is static and requires updating anytime that data should change. This increases the admin time necessary. The remaining methods all rely on SharePoint content to allow the pages to be dynamic.

Second, the out-of-the-box options for styling are limited to what you can do within the WYSIWYG. This approach risks producing inconsistent branding across the site, as each editor makes styling decisions on a page-by-page basis.

SharePoint List WebParts and CSS styling

Color coded table displaying Design, Effort and Admin pros and cons
Leveraging SharePoint content items and exposing them through WebParts is typically seen in many organizations. This approach scores high in both the effort and admin categories. Creating new content types and using WebParts is something business users can easily learn how to do. WebParts are designed to expose the underlying content types which allows the page to be dynamic. The SharePoint List WebPart also allows custom views to be created by admin users to fine tune what data is displayed as appropriate for the context.

To apply branding to pages built this way, SharePoint allows for the CSS to be adjusted. This gives you a limited amount of control over the visual appearance of the site. Company brand colors can be applied, fonts can be adjusted, and similar tweaks can be applied.

The advantage of this approach is that once the CSS styling has been applied, users can continue to use the standard SharePoint editor and WebParts. Any new list created on a page will automatically pick up the styling. This also allows designers to ensure more consistency in branding across the site.

I still score this one red for design because the options available for modification through CSS are limited. A designer with any aspirations of using artistic license will quickly run into the boundaries of this approach.

Overall this is well suited for a SharePoint site where ease of administration is a key factor.

SharePoint Content Search WebParts (with display templates & CSS)

Color coded table displaying Design, Effort and Admin pros and cons
Content Search WebParts allows designers to extend the previous approach while gaining access to significantly more styling options.

Using this approach, designers effectively create their own WebParts that are connected to SharePoint content lists and add them to the site. These custom controls give the designer access via display templates to control the HTML markup that is rendered. The level of effort has increased as this method requires more web design skills than before, but in exchange you get a much more visually pleasing result.

Another advantage of this approach is that with a little training, site admins can learn how to leverage these content search parts. Once they are created, non-IT admins can reuse these controls elsewhere on the site. The pages continue to remain dynamic since the components are still connected to the SharePoint lists.

The obvious question is why the yellow coloring for administration then? Mercury has found through our experience that these components rely on behind-the-scenes indexing that SharePoint does to make the data available to the control. This means that when a new item is added or modified in SharePoint, it will not be immediately visible on the control. Once the SharePoint index process picks up that content and puts it in the index, then it is available for display. In the real world, we have seen this take anywhere from a few minutes to almost 24 hours depending on the site. We have found that even a short delay can cause frustration for admin users who can’t see the immediate impact of their changes.

SharePoint API (with JS & CSS)

Color coded table displaying Design, Effort and Admin pros and cons
For a truly custom branding experience, leveraging the SharePoint API is the way to go. This gives the site designer full control over the markup and allows for the creation of a site that approaches a full custom web page experience in appearance. Additionally, the API is not subject to the SharePoint Index limitations in the previous approach, so content changes are immediately reflected on the site.

From an effort perspective, this is the most complex approach and requires the same set of skills required to do true web development. Of course if the goal is a highly branded site the additional effort will be worth it to produce the desired results.

The drawback with this approach is that business user admins are more limited in their ability to change the site. Future changes to page layout or content types would require changing the code that renders the page. The admins no longer have the ability to reuse the components as they do with the content search web parts. On the plus side this also ensures that the integrity of the site design is maintained.

Summary

If you were waiting for the approach that had all 3 boxes green, I’m sorry to disappoint you. As with all implementation discussions, there are always trade-offs. Before selecting an approach, you need to consider your goals for the site, the amount of branding desired, how much budget and time you have available, which skillsets you have at your disposal, and the level of flexibility in making changes. Armed with those answers, my hope is that this discussion will help guide you to select the appropriate approach.

Sketching with computer and a cup of coffee
The career of a designer is often both demanding and challenging. Design is incredibly subjective and each person has their own opinions and interpretations. To ensure your vision is realized you can implement interface prototyping to visually display thousands of words worth of design and development requirements regarding how a system should both look and behave. To take this one step further, RAPID prototyping involves quickly mocking up the future design state of your app or website and validating with a broader team of users (developers, product owners, designers). The term prototype covers a wide range of presentations from rough sketches on notebook paper to full-fledged interactive examples that can often feel like the end product. Getting feedback early can set the stage for the entire project. Responding to feedback in a timely manner and implementing the right approach will allow the rapid prototyping process to accelerate additional productive discussions while ensuring the team is on the same page so they can ultimately deliver an outstanding product.

DO’S AND DON’TS

DO…

  • Set expectations for the scope of the project early on. Inform others that the Rapid Prototyping process is a tool to showcase the design and is by no means the final product.
  • Set yourself up for success by creating reusable elements. Whether it be Photoshop templates, stencils, code widgets, etc.
  • Be open minded and receptive to peers and their feedback. They benefit from your teachings and education.

DON’T…

  • Receive every single comment, change or request to heart and cement it as a needed requirement. Everyone will have an opinion and sifting through the feedback to implement only the critical or productive feedback is an important part of your job.
  • Do not over commit. Make sure you mockup and prototype features that you know are conceivable that can be implemented on-time and within budget.
  • Perfection is not possible. Rapid Prototyping is just that, quick! Which means polishing your design for hours and hours will defeat the purpose. It is meant as a strong guideline and not a pristine creation.

Diagram with Create, Polish and Review

THE ACTUAL PROCESS

Rapid Prototyping essentially consists of 3 main steps:

1. PROTOTYPE/CREATE
Draft and develop the client’s description/wants into a mockup, keeping in mind the UX and best practices.

2. REVIEW
Present your design and prototype to the client and assess if their wants and requests are fulfilled.

3. POLISH
With the feedback in mind, recognize areas that need to be tweaked and refined.

DEFINING THE SCOPE

Rapid Prototypes are not created with the intention to progress into fully functional solutions, they are simply meant to help visualize and craft the user experience of the finished solution. Hence the importance of the next topic, scoping a prototype. Asking yourself a few simple questions can go a long way in solidifying a strong rapid prototype.
Computer with gears and magnifying glass

WHAT?

Decide what actually needs to be prototyped. Choosing large components within the project such as intricate interactions, large scale design features, workflow implementation, are all strong candidates for items that should prototyped out to the client.

HOW MUCH?

Showing off the functionality of key features should be limited to those that play significant roles in the design spectrum. Highlighting small interactions or subtle animations are not useful in Rapid Prototyping since they are time consuming to conjure and will delay the presentation for something with little impact on the overall user experience.

NUMBER OF PARTS?

Typically, the full prototype will have many pieces that form a solid whole at the end. A smart approach would be to start out with a broad view of the project and plant firm roots. The smaller, more detailed items can come later on once the foundation has been established. It’s ok to not know the exact number of working parts that will make up your project, but you should keep in mind, having an outline of sorts that highlights your large bullet points is extremely helpful.

THE PROTOTYPE HEIRARCHY

LOW FIDELITY

The most primitive form of prototyping is merely sketching your ideas with paper and pencil. This is typically an early, Version 1.0, if you will that will evolve into a more formal, detailed design later on. This level is perfect for the raw brainstorming sessions that designers typically have and can alleviate the process of converting ideas to fruition.

MID FIDELITY

In this stage, wire framing and task flows form more comprehensive composites of the end product. A primitive black and white creative can show the intent of an application or website without distraction. These type of renderings are ideal for capturing the needs of the client and give them a fairly clear picture of what you will be generating.

HIGH FIDELITY

These types of rapid prototypes are the most realistic and are a static version of the finished solution. Of course, these are the most labor intensive and without proper planning and a high-level of skill can bog down the “rapid” phase of the prototyping. Even though the majority of these high-fidelity depictions cannot be directly converted to code, they can show the client your clear direction and often instill a higher level of trust with the client.

Fidelity meter gauge

SELECTING THE RIGHT LEVEL

A critical aspect of a project is reading the client and their wishes and in turn selecting the appropriate fidelity grade. It is never a bad idea to begin in the low category as this takes minimal time and can translate your thoughts to a physical being. However, depending on the complexity of the development, you need to identify which stage will convey your design and tailor to the prospective user’s guidelines. Many clients will place a high amount of stock in the look and feel of a product rather than the functional reliability. Knowing your audience is paramount in choosing which fidelity level makes the most sense.

Summary

Prototyping is an unavoidable aspect of interface design and development. It comprises the idea of manifesting ideas and cognitive solutions into a tangible artifact. The idea of Rapid Prototyping takes that one step further and enforces the notion of being both fast and efficient when mocking up a new application or website design. Use any tool that can improve your productivity and effectiveness, just make sure you set yourself up for victory by creating reusable elements for when you inevitably have a large project with a tight deadline.