We understand it can seem daunting to create a really impressive and impactful homepage design. It can take some practice and a number of iterations to reach the final version so it should be viewed as an iterative journey, not an immediate win – but we can help you simplify the process by providing some insight both from industry best practice and what we’ve discovered has worked well for us and for other clients.
Roles & Responsibilities - Planning
-
Design authority
- Although the design will be worked on collaboratively with various inputs, the final approval of the design and the overall direction it should be taken in should be from a top-down approach, unless formally delegated to someone else who picks up the full responsibility from more mid-level. Steering committees often help with this authority process but gleaning other stakeholder feedback from outside this group can be useful, and often essential. What we would like to avoid is either ClearPeople or the individual responsible for building the design getting final say – it should be pre-agreed who signs-off, but they should be involved in the entire process and conversations from the start so they can be privy to the journey, options, and iterations which come forward.
- Some departments, some clients, some individuals, will already have preferences I,e. no titles, no carousels, no text, coloured text headings, more colour, no colour, image heavy, etc. These design stipulations can help steer some of the smaller details to help improve look and feel little by little to avoid timely re-designs once the design authority finally get their hands on the visual options you present to them.
- Try to avoid 'death by committee' – when too many people have too many strong opinions and either no real progress is made or you get a blurry amalgamation of everything with no clear vision.
-
Requirements authority
- Similar to the above – who is going to have final say over what functions need to be included and in what order of priority? These can be high level explanations, such as ‘it’s important we include a feed of corporate news from our website’, but can also be a more detailed requirement from the Atlas training, i.e. ‘we want to use an in focus webpart which displays both department news and corporate news in the same area to consolidate space, displayed as a carousel, with a vertical button to switch between each option’.
The process
-
Requirements gathering and refinement – if we are breaking the process down into easily manageable chunks, this is the first deliverable.
- Asking different users or stakeholders what they might expect to see on the homepage can be one way of collecting data and gauging their expectations, another can be for the requirements authority and project team to list out all the things they would expect, want, or need to see, prioritising accordingly, and dropping out of scope if not essential.
- Realistically, there’s probably only about 15 or so webparts to chose from, but they can be displayed in different ways and bring in different types of contents or tags, so it’s advisable to draft requirements first and then solutionise with options. Some clients choose to put everything onto a page en-masse, and then remove or deprioritise as they are going through each option.
- Once requirements are confirmed you can of course edit these or add more in if needed, but this will ensure some consistency through the design iterations and ensure the authorities are satisfied before the ‘tweaking’ and fine tuning of the design starts.
- As we discussed, people’s expectations for the homepage, or for any workspace design, may differ for a number of reasons. Trying to push the boundaries of what you can do or what you are used to can require some ‘outside the box’ thinking, but remember we are constrained by Microsoft 365 and SharePoint technologies - for example, if a stakeholders wants to see 'a view of their personal Outlook calendar within their department' (which is a request we often see), it is not easily feasible to do this. So we would ask, is this a priority for the business? Is this really a key requirement for a Department workspace? What are the available alternatives...
- You will likely also have your own examples built both old and new you may want to leverage by transferring over like-by-like or to transform the known requirements to an updated design with our guidance and expertise.
-
Wireframes
- Wireframes can be very useful for establishing a base foundation for the structure of a page, especially when trying to gauge the order in which things should be placed (how far up or down the page they need to be). Please see an basic example of a homepage wireframe design below.
-
- Sometimes it can be easier to skip this process and dive straight into designing pages within Atlas, but if there is a great difference in the design or the requirements between each version, it’s clear that the authority on what needs to be included or how it should be presented or ordered may need to be more involved.
- Even bullet points can act as a wireframe just to help establish priorities, for example;
-
-
-
-
- Corporate spotlight
- News feed (dept & website)
- Knowledge feed
- ‘Personalised’ document feed
- Events
- Wellbeing pages
- People search & profile
- Hoverpoint for something useful
- In focus search experience
-
-
-
-
Sections
- Sectioning is essential for a smooth user experience. Bunching too many webparts up together can be confusing as the user's eye doesn’t know where to focus on – in the end focusing on nothing. When scrolling there should be page breaks, just like paragraphs in a book – no one wants to read or scan a long solid block of text.
- You can do this by inserting imagery, dividers, changing section colours, or just using bigger ‘block’ style webparts that cover a whole one-column section.
- Approaching sections tactically by bringing this consideration into wireframes or requirements can be helpful in thinking what should go in the first section, what in the second, is there too many requirements in the third section etc.
-
Imagery and fine tuning
- This can be done in the final stages of the design, once placement and requirements have been confirmed. This will enhance your design even further but will not make or break a design - a good design will be good with basic imagery, a good design will look great with better imagery, a poor design with amazing imagery will still give a poor experience. This is an ongoing consideration and can be done/improved very late in the process once everything else requirement and design wise has been signed off.
-
Vertical section
- Please try to avoid using the SharePoint vertical section in the homepage – we find this doesn’t help design wise as it creates busyness and a more jumbled approach. It can be used in other workspace designs if there's a need to use it - but there are important implications to the design if the vertical section is used. Something we generally cover off in our Atlas training and onboarding workshops.
This article by ClearBox is useful for explaining best design practices with SharePoint pages - https://www.clearbox.co.uk/great-layout-designs-for-sharepoint-pages/
ClearPeople built examples
-
- During your implementation the ClearPeople team will build some homepage and Department examples to act as inspiration for what can be done, some best practice designs we recommend, but also to provide an example of the kind of quality we are expecting our clients to work to in terms of a clean, purposeful, modern design.
- We also have examples of homepages from our demo tenants, and although not all of these are the 'true' homepage (e.g. some are department, sector, client landing pages), they can provide inspiration for your requirements on what could be included and how things can look.
If you have any feedback or further queries please reach out to your designated Implementation Lead of CSA.
Comments
0 comments
Please sign in to leave a comment.