4 Questions to Kickstart your Service Portal Design
As I walk with my clients through the various pieces and parts of Service Portal to gather requirements and figure out what solution will ultimately solve their problems, the questions regarding design will come up, and here you have the opportunity to really shape and define a unique experience for your clients or organization.
To kick off the conversation, my first questions, without fail, are:
Do you have a brand / style guide?
How do we fill in style gaps?
How do we handle conflicts between style sources?
Who has approval authority?
Today I want to dive into these four initial questions, and show you how to reach that “jumping off point” for designing a custom Service Portal.
Do you have a brand / style guide?
First, a brief review of what a style guide should be, what it usually is, and how it should be used in your Service Portal design. A style guide, or brand guide (as they are interchangeably called), is a document that is available to both internal and external teams that provides a set of rules and standards that defines the look, feel, and voice of a brand, as if to say “as a company, this is who we are, this is how we dress, act, and define ourselves visually.” Think of it as a comprehensive dress code for the brand. Style guides come in all shapes and sizes. For Service Portal implementations, sometimes the only brand guidance I’m given is a set of official colors, or even a single color to work with. A typical brand guide package includes:
Colors
The colors section of a style guide will not only show the primary (main) colors associated with a brand, but also secondary, complementary colors, and sometimes a list of minor accent colors. While it’s not completely required to have this extensive of a color list to create a custom portal design, it certainly helps. This section of the style guide usually also provides guidance as to how those colors should be used. Pay attention to any specific color guidance, to ensure you’re assigning those Bootstrap colors ($brand-primary, $brand-danger, etc) in a way that aligns with their style guide.
Typography
Typography is one of the easiest ways you can set apart your custom Service Portal, and one of the best ways to align the portal more closely with a given brand’s identity. A solid style guide should give you information about what fonts are used and how. This should include the typeface, font weight, and font sizes used in different circumstances. Usually, you’ll get one set of typefaces for all uses. Some guides though, get really detailed, with specific guidance for different media (print products like business cards, white papers, and other marketing paraphernalia vs. digital usage on websites, slide decks, and social media posts).
As an additional step, research the fonts in the brand guide before the meeting. Are they Google fonts you can easily grab yourself? Are they (expensive) proprietary fonts? If so, always make sure to ask them to send over those font files so you can easily incorporate them into both your design as well as your implemented portal.
Approved Logos
Most style guides begin with rules regarding the display of the organization’s logo, including use of alternate versions of the logo. Most of these rules are just common sense, such as “do not stretch the logo” and “do not recolor the logo.” Of special interest to us is any guidance regarding the use of full color vs. inverted (all white) logos, and use of alternative versions of the logo. Alternate logos can include condensed “icon” versions (which make great favicons), or logos specific to a particular department or team.
Extras
I’ve worked with companies that provide incredibly detailed documents over 100 pages long, detailing exactly how every aspect of the brand should be portrayed. While most of the style guides I’ve received from clients have at the very least the above three items, these more substantial guides can contain detailed guidance regarding the use of images, icons, and tone of voice for any written copy.
What’s usually missing
Some really well-developed brands will have their own CSS stylesheets, icon sets, and design systems, which will really make designing a portal to fit their brand an absolute breeze. Sadly though, even the most thorough brand guides I’ve used more often than not will contain little to no guidance on UI styles. So you’ll have to figure that out another way, which leads to my next question: How do we fill in the gaps?
How do we fill in the (style) gaps?
Client SME
Sometimes, you will be blessed to work with a design-savvy stakeholder from your client’s team that can help you interpret the brand assets and help you address any style needs that aren’t addressed by the provided assets. In this case, lean on their guidance and look to them to help ensure your Service Portal design fits the brand. If this person is not on your initial project team, always ask if a resource with this expertise is available. Even a few 30 minute review calls over the course of the design process can be immensely helpful.
Align to public website
Most of the time though (at least in my experience) the stakeholders you’re working with are part of a department team, with little to no knowledge of how their company’s brand is managed, and you’ll have no access to their internal marketing / design team. In this case, the easiest way you can begin to determine how to fill in those style gaps is to ask them about their public website. This will be an established site that represents the organization out in the wild. By asking “How closely do you want to emulate your public website?” you’ll get some of the best insight on the direction your stakeholders want to take the visual aspects of the site. If they want to mirror or closely align to the public site, you can pretty readily browse the various pages to find hints as to how you could execute certain styles, such as buttons, links, hover effects, and navigation.
Get creative
80 percent of the time, the above will get you where you need to go. Be ready though, for organizations that look at their outdated public website and tell you they want something new and different. Maybe they are trying to update the styles to differentiate from the public site. They may need to differentiate from some other internal portal that already closely aligns with the public site. In this case, an additional workshop will be needed. You’ll have to work carefully with the project stakeholders to ensure your design meets their expectations (is it too modern or too traditional? Do they want it colorful or more muted?). Multiple variations and iterative design will be the name of the game. Either way, determining the design direction will lead you to ensure you know how to handle not only gaps in the style guidance, but conflicts in the guidance provided.
How should we handle conflicts in style sources?
Whether your clients have an SME available to you, want to follow their public site, or forge a new design path, there will inevitably be times when the sources for your style guidance come in conflict with each other. Most notably, this comes when style guides are written for print, with no guidance for digital experiences, and the website is built using different colors, fonts, or themes.
I’ve especially noticed a difference (usually slight) in the colors provided in the brand guide vs. implemented on a public site. Sometimes, this is done to better accomodate color contrast ratios for accessibility. Either way, be ready to point out the conflicts you noted in your review of the brand assets, and ask the clients which versions they want you to more closely align to. This includes the client’s provided brand SME; sometimes, they suggest things that don’t exactly line up with the published styles. Dig into their reasoning for the departure from the established brand styles and ensure the client stakeholders approve any conflicting guidance provided.
Who has approval authority?
You would think the matter of who has final approval authority over a portal design would be pretty cut and dry. On any given project, approval for the work done usually rests with whatever client stakeholders are regularly involved with your implementation. Service Portal (or any visual end-user experience really) is special though, and requires a pointed conversation.
Why?
Because people (us as designers / developers, client stakeholders, anyone that will be looking at it) tend to have a stronger emotional reaction to the visual elements of an implementation. Sometimes this reaction to a Service Portal is so strong that the success of an entire implementation can hinge on whether or not the designed portal is well received. Even if the client stakeholders love the portal you’ve designed and built, if a higher authority doesn’t like it, that rejection can endanger your ability to successfully push the site live.
This happens for a multitude of reasons, some legit, some… not so much. I’ve had higher-ups on a project reject an approved design simply because their picture wasn’t somewhere on the front page, or because they personally didn’t approve the design and wanted to more readily take credit (this can sometimes mean changes to the site, for better or worse, to allow that authority to put their own mark on the site), or because the designed portal legitimately did not match their expectations (resolving pain points and meeting their objectives) for what they thought was going to be built.
Regardless of the reason, I always recommend asking who will have final approval or veto authority over the portal: to protect your client, their project deadlines, and your relationship. I want the highest level pair of eyeballs that is going to care about how this site looks to take a look at the site, even if it’s just a fifteen minute meeting to bore them with an overview of the designs that have been approved by your client project team, or even a set of mockups submitted to them via PDF. Ideally, these higher authorities are given a heads-up of what the site will look like and do BEFORE you begin development, to ensure that all development time is spent on an implemented product and eliminate any setbacks as you move toward go-live. I’d rather change a mockup ten times than have to recode an entire site two weeks before deadline. This one question can help alleviate so much pain; your project manager will love you for it.
Jumping off into your Portal design
At this point, you should have a solid idea of what expectations your clients or internal team have for their new Service Portal’s look and feel. There are more in depth questions you can ask depending on the complexity and needs of your project, but these four questions are the ones I always use to get the conversation started. From here, you can confidently dive into their brand assets to determine what styles you’ll use for your new portal.
Take this, it’s dangerous to go alone
If you’re able to plan ahead, ask your stakeholders to send you any and all brand guidance they have on hand. Ideally, you want enough time before your requirements gathering workshops to review the materials and prepare any questions you want to ask as you review the materials with the client. Below is my checklist of assets I ask clients to provide before workshops for review and use during the design and development of a new Service Portal.
Logos
Ensure all logo files are high resolution and have transparent backgrounds (no white square around the artwork).
Full color standard logo
PNG: Full color standard logo
SVG: Inverted (white) standard logo
PNG: Inverted (white) standard logo
PNG: Full color icon / alternate logo(s)
SVG: Full color icon / alternate logo(s)
PNG: Inverted (white) icon / alternate logo(s)*
SVG: Inverted (white) icon / alternate logo(s)*
* Alternate or icon logos are usually shortened or condensed versions of your organization’s logo that can be used as an icon, such as on mobile views or for browser tab icons.
Brand / Style Guide
Includes PDFs of all available full style / brand guide documentation, and access to design system / design guidance websites / internal documentation
Fonts
For font files, propriety font files should be provided in as many of the following formats as is available: TTF, OTF, WOFF, WOFF2. Font files should be supplied in all weights provided in the style guide (light, regular, bold, black, etc) for EACH typeface (example: Arial, Times New Roman, etc).
Relevant websites and applications
Provide a list of the following sites along with access information (as needed), screenshots, and reasoning for the relevance to the project at hand.
Main public sites
Organization-adjacent sites (special projects / teams, sister companies that share branding, etc)
Social media handles
Internal portals / intranet sites (both for design direction to emulate and avoid)
Other relevant applications (legacy systems being replaced, etc)
Non-organization sites matching the desired design direction or functionality
Staff
Please provide contact information for any members of your team that will be able to speak to your organization’s brand strategy. This can include members of your internal marketing and design teams or specialists that oversee the execution of your public brand presence (website, social media, etc).
Images and Icons
We assume that all images and assets provided by you for use on this project have proper licensure / use requirements secured.
Access to your organization’s image repository
high-quality images for use in your Service Portal design
Icon sets: stylesheets to implement, images, etc.