Creative Design for SharePoint

Posted by Kyle on

Crafting an interface for an electronic medium like the web browser is no easy task. The canvas of the web appears in so many mediums, on so many devices and in so many forms that visualizing the outcome of your work is a tall order, to say the least. Now, consider doing this for a platform like SharePoint. Microsoft offers a plethora of templates and functionality within the confines of its flagship platform. We have blogs, wikis, sites, pages, calendars, lists, libraries, and web parts, oh my. There are also limitations in SharePoint. There are things that are easy and infinitely flexible. There are things that are surprisingly rigid and difficult to customize. Recognizing the difference between the easy, the hard, the possible, and the impossible can be challenging. Quickly, the creative process becomes a minefield of things you can, can’t, should, or shouldn’t do. This is a challenge that everyone faces when introducing themselves to this platform. It is something that we overcome, that we learn over time. We teach ourselves to overcome some obstacles, and to avoid others. We learn the intricacies of SharePoint; we hit roadblocks, discover caveats, and we explore new features that unlock new abilities.

Relenting freedom

Most of us in the creative industry are accustomed to freedom. We work with simple platforms that allow us to do pretty much anything we can imagine. We design and implement without limitation. We have complete control. SharePoint, however, is a different beast entirely. It’s a powerful platform that does many things (perhaps too many). This is not a blog, this is not a website, it’s anything and everything we want it to be. It’s both empowering and infuriating all at once. The power of SharePoint forces us to relinquish control to some extent. We must allow SharePoint to be SharePoint.

While immensely popular in the enterprise world, SharePoint is not entirely known to the masses of the creative industry. You may work with creative designers in your own organization, or perhaps you hire out your creative work to freelance designers and creative agencies. Either way, the people you work with are not necessarily versed in the intricacies that make up the SharePoint interface. This provides a huge challenge for everyone involved. Your creative designers may be accustomed to the level of control they find in simpler blog platforms. They may make creative suggestions for elements that would appear in your SharePoint interface. The most common things that I see from designers are newsletters, videos, or sign-in forms. While it is a great and creative idea, something as simple as a sign-in form can range anywhere from easy to impossible depending on the nature of your SharePoint environment.

Finding balance

Applying creative design to SharePoint is an effort of balance. The best creative work makes full use of the empowering features of the platform, while also providing deviation from the norm to achieve a greater sense of unique identity. We want to “make SharePoint not look like SharePoint,” but at the same time retain the advantages that led us to choose the platform in the first place. Finding this balance can be a challenge. Several characteristics of your SharePoint customization project will determine the balance of your creative design.

  • Defining scope Identifying the scope of your project is one of the easiest and most important ways to help create balance in your SharePoint creative design work. Do you have a day to complete the design, or do you have a year? This question seems obvious, but simply addressing the timeline and resource limit of your project will help to shape vision of what it is that you want to build. Smaller projects will likely resemble the SharePoint product, as it appears “out of the box.” Larger projects with more time and more resources grant added flexibility. In these projects, you can start to challenge the SharePoint norm, and build greater customization into the platform.
  • Discovering new ideas Never assume that you know all the answers. Performing a formal discovery phase in your project helps solidify and refine your vision of the end result, and often unearths new ideas or new requirements that you would have otherwise overlooked. Questions like “Why are we doing this?” may sound silly at first, but the discussion that follows is a valuable insight into the design initiative.
  • Connecting with your audience Talk to everyone. Connect with real users of the interface you’re building. Use surveys, interviews, focus groups, and every user research tool at your disposal in order to create an all-encompassing vision of the project outcome. Talk to stakeholders who have been in the organization for decades, and understand how their unique perspective can shape the interface that you will build. Balance their views with those of new users who are seeing the website interface for the first time. Everyone’s input is valuable, not just the CEO who’s paying the bill. Analyze and interpret the feedback that you receive. Gather quantitative data like “75% of our users are unsatisfied with the search feature in our website.” Balance quantitative data with qualitative feedback like “Quincy thinks finding research articles takes too long.” Build a balanced perspective of your audience, and use that to shape everything that you build.
  • Avoiding popular assumption The enemy of balance is assumption. People often come to me with assumptions like “we want a tiled interface because it’s popular.” This feedback is important, to be sure, but should be taken with a grain of salt. Assumptions made at the beginning of a project are useful to identify the inspiration of your design work, but they should never be treated as direction. Inspiration and direction are two very different things that are often treated as one and the same. Good design is directed. Great design is inspired.

Crafting a vision

With a balanced perspective of the project-to-be in hand, the time comes to craft a vision of the final product that the project team will work so diligently to build. It’s time now for the information architect to analyze and summarize the information gathered during project discovery. This essential step in the creative process polishes your (sometimes divergent) user research into a coherent and singular message.

  • Personifying your audience User personas help humanize and simplify your audience. These documents are simple personifications of your real users. They help define the behavior, characteristics, desires, and frustrations of the people you have researched. The format of these documents is not important. They can be built using word processors, drawing tools, or even sketched on paper.
  • Mapping your content Site maps help define navigation systems that will appear in your creative design. These documents are simple diagrams that show content connections, and methods of moving from one piece of web content to the next. SharePoint, as a product, provides two main navigation systems known as the global navigation menu (often seen as a horizontal menu near the top of each page), and the current navigation menu (often a vertical menu on the left- or right-hand side of each page). Depending on the scope of your project, you may choose to augment or even remove these navigation systems to suit your design.
  • Defining creative aesthetic The creative aesthetic of a design defines the tone, the message, and the emotional context of an entire website interface. Some designs are fun and casual, while others may be stolid and professional. What is the tone of your design? The tone of a design should match the personality of its users. Define a creative aesthetic using color (warm vs. cool, contrasting vs. complimentary, etc.), texture, imagery, and typography. Providing detailed information about aesthetic to your graphic designers helps create inspiration. Avoid creating acronym-driven designs, using words like clean, professional, or modern.

Granting reality

With a polished vision of the creative design in mind, the time comes to provide this vision to a graphic designer, who in turn uses your documents as inspiration to build fully detailed design compositions. You can add even more detail to this process using content wireframes, style tiles, or even detailed interactive prototypes of your SharePoint website. Allow ample time in the creative process for modifications and revisions. Working with graphic designers who have never worked on the SharePoint platform can be difficult. It often takes some time before designers become intimately familiar with the dos and don’ts of the Microsoft world. Review each design revision with a technical eye, identifying common elements that graphic designers add to their work that could potentially alter the scope of your project.

  • Forms Simple forms like sign-in and newsletter sign-up forms are a great addition to any site, but they are not so easy to create in SharePoint. Unless you have a specific solution, product, or authentication method in mind, stick with what you see in the out-of-the-box interface.
  • Video Multimedia and video are a great way to present content to your users. With video, however, ensure that you’ve properly planned for the implementation of video within your SharePoint environment. Ask appropriate questions like:</p>
    • Who is producing the video? Do we have staff and bandwidth to produce quality video content on a regular basis?
    • Where will the video be hosted? Do we have network bandwidth to stream video from our SharePoint environment?
    • What format is the video produced in? Is this format compatible with our supported web browsers?
    • Do we need to support video on mobile devices like tablets and smartphones?
  • Dates and times Even something as minuscule as a date format can be troublesome to overcome in the SharePoint world. By default, many date and time fields in SharePoint display in a proprietary format controlled by the regional settings of your environment. Depending on where and how date information is displayed, you may or may not have control over the specific formats.
  • Pagination, read more, continue reading, more results… Buttons and links that contain text like “continue reading” or “read more” are great additions to any design, but in many cases default SharePoint content does not support pagination or content excerpts. These things can be built, to be sure, the scope of your project may not accommodate the additional effort needed to reflect what is shown in your design.

Build something

With a real design in hand, all that remains is to execute the design within the SharePoint platform. I find that most designers (myself included) itch to jump into implementation at the onset of the project. We want to immediately start designing, building, coding, and solving problems. That’s simply our nature. With proper constraint, however, I find that the outcome of most projects are greatly improved as a result of this formal design process.

Moreover, this process is platform agnostic. It’s something you could as easily apply to WordPress as you could to SharePoint, and that’s a good thing. Applying design to SharePoint is really just a subset of the overall web design discipline. User experience doesn’t dictate the platform it’s experienced upon, and neither should you. Create something unique and polished, and your users will respond with their appreciation and increased adoption of the product.

This article was originally posted on the Protiviti SharePoint Solutions blog.