At SymSoft Solutions, we have successfully implemented Azure AD B2C across multiple projects, leveraging both standard user flows and custom policies to enhance the identity user experience. Azure AD B2C enables seamless integration with external identity providers such as Microsoft, Google, GitHub, and more via Single Sign-On (SSO). Additionally, it serves as a cloud-based user directory, securely storing local user information within the b2c-extension-application. 

Integration with Applications 

Azure AD B2C is easy to integrate with JavaScript-based front-end frameworks using the MSAL (Microsoft Authentication Library). This allows applications to redirect users or present authentication forms in a popup for a smoother login experience. 

At the end of any user flow, Azure AD B2C issues a JWT (JSON Web Token), which serves as an identity token. Additionally, it can provide access tokens for API authentication. These tokens allow web applications to securely interact with backend APIs using MSAL or OpenID Connect (OIDC) authentication in .NET-based applications. 

User Flows and Custom Policies 

Azure AD B2C offers two approaches to defining authentication experiences: 

User Flows (Predefined Policies) 

User flows are built-in, configurable policies that define common authentication scenarios. They allow developers to: 

• Customize branding (company logos, themes, UI styling). 
• Modify authentication attributes collected during sign-up or sign-in. 
• Configure claims returned in the JWT token. 

These predefined flows are ideal for applications that require quick setup and basic identity management without extensive customization. 

Custom Policies (Identity Experience Framework – IEF) 

For more complex authentication requirements, custom policies offer greater control over every step of the identity journey. Unlike user flows, these policies are defined using XML files that refer to each other in a hierarchical structure. 

Custom policies allow: 

• Fine-grained control over authentication logic and user interactions. 
• Integration with legacy identity providers (IDPs) via SAML, OAuth2, and REST APIs. 
• Implementation of advanced security measures, such as risk-based authentication. 

While both user flows and custom policies support attribute customization, session management, and UI customization, custom policies provide significantly more flexibility at the cost of increased complexity. 

A Few Interesting Custom Flows 

Here are a few unique custom flows we implemented in Azure AD B2C to solve specific business challenges: 

Impersonation for Customer Support

Some business scenarios require customer support agents to impersonate users for troubleshooting and better assistance. Since impersonation is not a built-in Azure AD B2C feature, we implemented a custom policy to enable this. 

Implementation: 

• Customer support agents log in via an external IDP (Microsoft). 
• The system verifies their credentials and retrieves their role and permissions from the b2c-extension-app. 
• Agents enter the email address of the customer they want to impersonate. 
• The system fetches customer information from the user directory and grants access via a modified JWT token. 

This solution ensures security, traceability, and compliance while maintaining a seamless support experience. 

Legacy IDP Authentication via REST API

Organizations migrating from a legacy identity provider often need to validate users against the old system before transitioning to Azure AD B2C. 

Implementation: 

• We built a REST API integration with the legacy IDP. 
• During login, Azure AD B2C calls the API to verify legacy user credentials before issuing a token. 
• Once validated, users are migrated to Azure AD B2C seamlessly. 
• Optionally, you can have the users forcefully reset their password after migration to Azure AD B2C to meet the standard password policies. 

This method enables a smooth and secure migration without disrupting user access. 

Custom Email Verification via SendGrid

By default, Azure AD B2C uses Microsoft’s email verification for account sign-ups. However, some businesses prefer using third-party email providers like SendGrid for greater control over branding, analytics, and deliverability. 

Implementation: 

• We replaced the built-in email verification process with a custom SendGrid integration via a RESTful API call. 
• It requires to have a SendGrid account setup in advance along with an API key stored in the Azure Policy Keys which is used to authenticate any HTTP requests made to it. 
• This allowed personalized email templates with the help of dynamic templates and place holder variables. 
• SendGrid supports multiple languages, improves tracking of email delivery and provide analytics regarding the engagement. 

This approach ensures better user engagement and customized user experience through email. 

Advantages and Limitations

Advantages 

• Azure AD B2C is cloud-native solution which makes it highly scalable to handle millions of users while meeting the industry standards of compliance and security. 
• User management and authentication is easier as Azure B2C handles most of it for you and provides you with the options of integrating with identity federations and enterprise providers. 
• Azure AD B2C requires no on-premises identity management solutions and requires minimal setup and development effort as it provides easy to configure authentication flows. 
• Azure AD B2C is cost efficient as you are charged based on Monthly Active Users (MAU) and is easy to integrate with applications developed using the modern technical stack. 

Limitations 

• Azure B2C provides limited customizations within the user flows and restricts the developers to use at most one external API call. 
• Working with custom policies requires deeper understanding of XML configurations, orchestration steps, technical profiles and claim transformations. 
• Debugging any errors within XML or issues during the user journeys is very difficult due to limited and non-descriptive error messages and logging. 
• Documentation from Microsoft do not talk in detail about the advanced and more complex scenarios, making Azure B2C seem more like a black box.

Conclusion 

Azure AD B2C is a powerful, scalable, and secure identity management solution for B2C applications, providing SSO, API security, and seamless integrations with third-party providers. 

For simple authentication needs, user flows are quick and easy to implement. However, for businesses requiring advanced customization, custom policies offer greater flexibility—but at the cost of higher complexity and longer development time. 

By carefully choosing the right approach—user flows for standard implementations and custom policies for unique identity experiences—organizations can maximize the benefits of Azure AD B2C while mitigating its limitations. 

Global Accessibility Awareness Day (GAAD) is an annual event celebrated on the third Thursday of May, dedicated to raising awareness about digital accessibility. It’s a day to reflect on the importance of creating inclusive digital experiences that cater to individuals of all abilities. As we mark GAAD, let’s delve into one of the fundamental aspects of accessibility: color contrast.

Understanding Color Contrast

Color contrast refers to the difference in luminance or color between two elements in a design. It plays a crucial role in ensuring readability and usability for everyone, especially for individuals with visual impairments, color vision deficiencies, or other disabilities. For these individuals, insufficient color contrast can make content difficult or even impossible to perceive.

Impact of Color Contrast

According to the 2024 WebAIM Million report, lack of sufficient color contrast is one of the leading causes of accessibility barriers in digital content. Consider this: for someone with low vision, reading text with poor color contrast can be akin to trying to decipher blurred or indistinguishable characters. Similarly, individuals with color vision deficiencies (color blindeness) may struggle to differentiate between certain colors, further complicating their interaction with digital content.

Tips for Ensuring Adequate Color Contrast

Fortunately, there are simple yet effective measures we can take to address color contrast issues and enhance digital accessibility:

• Use Contrast Checking Tools: There are numerous online tools available that can help assess the color contrast of text and background combinations. Tools like WebAIM’s Contrast Checker or the Color Contrast Analyzer by The Paciello Group can quickly determine if your design meets accessibility standards.
• Follow WCAG Guidelines: The Web Content Accessibility Guidelines (WCAG) provide specific criteria for color contrast ratios that ensure content is perceivable by all users. Aim for a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to meet WCAG standards. Use color contrast tools such as those mentioned in this article to ensure text meets the requirement.
• Choose Colors Wisely: Opt for color combinations that provide sufficient contrast. If you struggle in this area, tools like Accessible Color Palette Generator will generate an accessible color palette based on a starting color.

Need More Help?

At SymSoft Solutions, we understand the importance of accessibility and are dedicated to helping businesses and organizations create more accessible digital experiences. Whether you’re seeking guidance on color contrast optimization or comprehensive accessibility audits, full accessibility solutions, or looking to establish an accessibility program in your organization, Symsoft is here to support you every step of the way.

Together, let’s strive to build a digital landscape where everyone can access and engage with content without barriers. Happy Global Accessibility Awareness Day!

Date: May 9, 2024

WHAT YOU NEED TO KNOW: Leading companies will utilize cutting-edge technology for five specific challenges, working with state teams on how GenAI can enhance customer service, improve health care facility inspections for better care, reduce highway congestion, improve safety for vulnerable roadway users, and improve language access.

SACRAMENTO – California is continuing to implement Governor Gavin Newsom’s Executive Order on Generative Artificial Intelligence (GenAI), entering into agreements with five vendors to test, iterate and evaluate GenAI through proofs of concept (POCs). Vendors will utilize GenAI technologies developed by OpenAI, Anthropic, Google, Meta, and others to develop these solutions. The cloud environments used will be Amazon (AWS) Cloud, Google Cloud, Microsoft Azure and ServiceNow (SaaS).

The state will pay each proof-of-concept vendor $1 to test in the “sandbox”, a secure and isolated testing environment. This gives the state and the vendors time to see what works, what doesn’t, and make necessary adjustments during a 6-month window.

“We are now at a point where we can begin understanding if GenAI can provide us with viable solutions while supporting the state workforce,” said Amy Tong, Secretary of the California Government Operations Agency. “Our job is to learn by testing, and we’ll do this by having a human in the loop at every step so that we’re building confidence in this new technology.”

Download the complete GovOps press release for additional information.

SymSoft is thrilled to have been selected for the GenAI POC for the California Department of Tax and Fee Administration (CDTFA). As quoted in the press release:

“SymSoft is enthusiastic about the potential of Generative AI to elevate Customer Service and Customer Engagement,” said Savita Farooqui, Director of Research, SymSoft Solutions. Our approach not only enhances operational efficiency but also enriches the customer experience. By implementing robust AI governance and effective safeguards, we are dedicated to delivering AI solutions that genuinely benefit our customers.”

For each best-practice pattern that we identified, we provided an example website and elaborated on why it works. While many top websites share the same attributes, some are especially good examples that everyone in the public sector of digital services should look up to. These websites, which represent some of the best in government UX design, are examined in the article below. 

If you want to jump to a specific website review, click the corresponding link:

1. Simple design: The White House
2. Clear interaction cues: California DMV
3. Easy navigation: Gov.uk
4. Engaging visual design: Save Our Water
5. Plain language: U.S. Department of Veterans Affairs
6. Interactivity: U.S. Small Business Administration
7. Graphic design and branding: U.S. Department of State

When evaluating website user experience, we use a framework common in expert reviews, for instance design award competitions such as the Webby Awards. We looked at content quality, interaction, ease of navigation, attractiveness, cleanliness, and simplicity of the layout. We also assessed the quality of visual design and if websites featured custom design outside of the standard and generic templates. 

We took note of details such as a modern design, distinctive branding, and authentic and engaging photography. We wanted to evaluate how, if at all, a more custom solution has an impact on the user experience scores and if the two are correlated. (It turns out they are, as our selected websites are all custom designed.)

While there are many other aspects and attributes of great user experience websites, we focused on these common patterns that you can hopefully take away and implement on your website. However, when considering implementing patterns like the ones we present here, always regularly research user needs, validate any updates with your target audience, and review the website analytics data. What works in one case might not work in another, so use the examples below as inspiration and a starting point in your own project, and customize it to your project’s objectives.

Without further ado, let’s dive into reviews!

1. Simple design: The White House

What is whitehouse.gov?

Whitehouse.gov is the official website of the White House owned and managed by the United States government. It provides a means for the general public to learn about the operations of the current administration. It contains information about the administration and executive offices,  as well as press releases, the history of the White House, and overviews of the critical issues the administration aims to solve.

What stands out in the White House website?

The White House website is straightforward and easy on the eye. Information is broken down into bite-size pieces and laid out in a streamlined single-column layout. This makes it easy for visitors to read the information on a range of devices, from mobile phones to tablets and large desktop monitors. Web forms are also laid out in a streamlined fashion and accessible on mobile devices too, like for instance the newsletter form at the bottom of each page.

The website navigation (displayed both in the header and footer) is easy-to-follow with a focus on the administration that contains biographies and a list of key offices, personnel, and presidential priorities. (At the time of this writing, the top priority is COVID-19 mitigation.) The briefing room section includes topics such as Legislation, Presidential Actions, Press Briefings, Speeches and Remarks, and Statements and Releases. Such simple and straight-forward navigation helps visitors find all the information they need with just a few clicks.

We especially like the White House section that provides general information about the past presidents, their families, the grounds, and the educational subsection about how the government works.

Subtle choices like the photography selection and cropping, rounded instead of sharp corners, typographic detail such as the consistent use of uppercase for run-in headers, captions, metadata, and interface elements, as well as exceptionally balanced white space make this simple website quite interesting to explore and read. The color hues are very delicate (we like the light yellow as an alternative color to white), but in combination with the first-class typographic treatment they establish a very clear hierarchy of information.

What can we learn?

The whole minimalistic approach reflects the administration’s simplicity in communication. The lack of ornamentation spotlights the high-quality photography and copy-text and aids navigation and user orientation around the website. However, they avoid oversimplification by introducing typographic detail reminiscent of print optimized to work well on screens, and make things interesting with strategic photography art-direction.

Key takeaway

The simple design usually comes off as attractive. But more importantly, using fewer attention-grabbing elements on the page reduces memory strain and choice overload, making the communication and messaging clear and easy to follow.

View the White House website

2. Clear interaction cues: California DMV

What is dmv.ca.gov?

Dmv.ca.gov is the official website of the California Department of Motor Vehicles, which regulates motor vehicle usage and sales. It offers online services for the public including licensing drivers, registering vehicles, issuing identification cards, etc. Besides, it provides online resources of driver education, safety guidelines, studies and reports, and DMV local offices. 

What stands out in the California DMV website?

The California DMV website is well-rounded with a great blend of clear communication, illustrations, and interaction cues. It packs a number of calls to action on the homepage but in a very balanced way. The user is encouraged to complete transactions that DMV offers online.

What stands out is the cleanliness of the layout once the visitor enters the digital transaction process. Such an unobtrusive layout helps users focus on the task at hand and removes any unnecessary distractions. Any extra white space is balanced out with relevant illustrations that additionally provide visual anchors to hold your attention.

The basic idea of digital transactions is replacing physical office visits, saving time and reducing workload related to in-person transaction processing. For this to be successful, websites need to walk the user through the process and leave no stone unturned when it comes to exceptions and special conditions. 

In such cases, the breakdown of steps is beneficial, and we saw this technique in many successful digital transaction websites, including Gov.uk, mentioned later in this article, and our projects for California Community Colleges and California Department of General Services.

We like the intelligent user experience design, instructional copy and lists on service pages, such as “Before you begin…” and “What to expect?,” that makes the user feel comfortable and prepares them before they begin the transaction. Trust is an incredibly important factor when asking people to complete a digital transaction, so any extra effort to put the users at ease and relieve some of that uncertainty is always appreciated. 

What can we learn?

Interaction cues are not only about how the buttons and links look like or what the labels read. Often, great interaction cues include a conversational approach to communication, easy-to-follow instructions and checklists, and aligning the digital service with the users’ mental models (the ways people perceive the world).

Key takeaway

In the user-interaction world, affordances are hints and cues to the user on how to use an interface element. Well-designed websites offer many affordances, such as navigation cues, interface graphics, and linguistic and pattern affordances. 

View the California DMV website

3. Easy navigation: Gov.uk

What is gov.uk?

Gov.uk is the central information website representing all government departments and many other agencies and public bodies of the United Kingdom. The public can find government services and information through the website, as well as news, communication, statistics, and consultations. 

What stands out in the Gov.uk website?

Gov.uk is the industry standard when it comes to government digital services. It’s a favorite case study for digital government teams worldwide who improve digital transactions at the country, state, and local levels. And rightly so, the Gov.uk website saved £61.5 million ($85.9 million) in 2015.

Many things are great about this website, from the extremely fast loading speeds to well-organized services and content, to consistency in communication, but most importantly, to the way they prioritize user experience. To successfully onboard all constituents, they removed quite a lot of barriers, including the main website navigation, the mission statement, administrative updates, key facts, and other organization-focused content still seen on too many government websites.

But let’s talk about the brilliant service navigation. Technically the whole homepage is the main navigation. It organizes services and information into logical categories without forcing the user to think about the government organizational structure and which service belongs to which department or office. Constituents can get things done without having to learn the ins and outs of different government offices.

Each top category link takes you to the next level in the content organization, but to set the right expectations, the website also provides a clear list of subtopics with the minimal necessary verbiage under each link. Such concise descriptions give users the confidence to select the right category because they have a mini-preview of what to expect when they start drilling deeper.

Another user-centered concept that the team behind the Gov.uk pioneered is breaking down tasks into bite-size steps. This technique helps users get a good sense of the process’s length and the effort required to complete the job. It works almost like a to-do list, helping you make progress and ultimately achieve clarity about the task at hand.

Many Gov.uk pages are free of any sidebar content. When there’s nothing to add to the page, the website doesn’t try to use up the available space. We do, however, think that a simple survey widget found at the bottom of many service pages is a smart move to help improve each page further. It asks a simple question, “Is this page useful?” and offers a couple of answers. If the answer is:

1. “Yes,” they politely thank you for the feedback.
2. “No,” they direct you to a 2-minute survey.
3. “There is something wrong on this page,” they ask you for specific feedback.

What can we learn?

As a consumer, if you don’t like the customer experience with one brand, you have at least a few more alternatives to choose from and take your business there. However, with the government, people don’t have other options than to use government websites or visit government offices. 

So, why not remove all possible barriers for them? Gov.uk demonstrates how a government website shouldn’t attract users with creative artwork and elaborate layout, but instead should provide quick access to information and services. Government website branding should be defined by convenience and effortless navigation, instead of graphic design elements and entertaining copy.

Key takeaway

Easy navigation steers the user toward the correct information they are looking for. This includes providing breadcrumbs and intuitive dropdown options, as well as matching navigation and link labels to destination page titles. On the topic of easy navigation, as long as the user can follow a clear information scent, they don’t mind exploring multiple pages.

View the Gov.uk website

4. Engaging visual design: Save Our Water

What is saveourwater.com?

Saveourwater.com is a website for a statewide water conservation program launched in 2009 by California Water Agencies and the California Department of Water Resources. The website serves as a communication tool to encourage Californians to adjust their water use by offering water conservation tips, guidelines, news, and resources regarding drought and climate impact.

Full disclosure, SymSoft delivered the Save Our Water website for the California Department of Water Resources.

What stands out in the Save Our Water website?

The Save Our Water website combines graphical shapes, colors, and typography that are less mechanical and rigid and more humanistic and organic. This selection of visual design elements supports the main message of the campaign about water use for outdoor irrigation. 

What is the connection between the design decision and the content of the website? In California, about 50% of household water is used for outdoor irrigation, so transforming a lawn with drought-resistant native plants saves money, and is good for the environment. The difference between perfectly trimmed green grass lawns and yards incorporating native plants is in maintenance and water consumption. By selecting organic shapes and soft colors for the design instead of perfectly straight lines and fully saturated colors, the design is aligned with the message that low maintenance native plants lawns are better for the environment. The website uses its own design to subtly get the message across that you don’t need a perfectly rectangular lawn with razor-sharp edges to have a beautiful, gratifying yard.

The website’s photography is saturated with colors, so the pastel shades of blue, yellow, brown, and green used on the website create a perfect backdrop, instead of drawing too much attention. Randomized organic shapes that resemble drops of water help photography stand out and double as bulleted-list symbols. 

The same organic shape is combined with iconography, making even generic icons look fresh and new because they are a part of a comprehensive visual design system. A simple trick like this can help you achieve variance in a cost-effective way.

Even though there is only slight variance in organic shapes, when combined with clean typography, rich photography, and a vibrant color-palette, they create interesting combinations. The user doesn’t feel overwhelmed, because each new page and page element is built upon one another. In other words, even simple elements when combined together can create a virtually infinite number of visually interesting options. 

What can we learn?

It is possible to stretch the norms of government aesthetics. When it comes to digital transactions like in the above examples of gov.uk and dmv.ca.gov, it’s all about usability, but to get people’s help and get them on board with an important initiative, campaign websites should entertain their visitors with a more elaborate design, storytelling, and fun ways to engage.

Key takeaway

In most of our top performers, visual design is accomplished through appropriate iconography, authentic photography, and overall contextual backdrop. An excellent graphic design directs the user to the task they need to complete and contributes positively to content findability. Great design will also engage with the visitors on the emotional level, especially to facilitate engagement and change of behavior.

View the Save Our Water website

5. Plain language: U.S. Department of Veterans Affairs

What is va.gov?

Va.gov is the website for the U.S. Department of Veterans Affairs that aims to provide support to veterans in healthcare, education, home loans, life insurance, and many other aspects of their lives. Users can access information through its official website about different benefits veterans receive, the history and innovation of the Veterans Affairs Department, as well as local Veteran Affairs locations. 

What stands out in the U.S. Department of Veterans Affairs website?

Starting with a prominent list of actions visitors can take to manage their benefits and health care services, the website uses a simple yet active voice, making it very clear what the visitor can do and accomplish.

We especially like the avoidance of explicit user persona definition in the interface and navigation. Asking the visitor to self-identify can sometimes confuse them or make them feel uncomfortable by forcing them into a specific persona bucket, such as, for instance, homeless, women, or minority veterans.

While personas are useful to frame design thinking and help organizations to focus on the target audiences, we should always open up the website content, for example, by focusing on Job Stories, rather than User Stories. The difference between the two is that Job Stories focus on the context and desired outcome, regardless of the user group, while User Stories focus on the outcomes for a specific user group. The Veteran’s Affairs website focuses on the former removing the user self-identification step.

Even with a breakdown by topics lower on the homepage, the website is still focused on providing as much relevant context as possible, so that the user can decide whether they are following the right scent of information. Apart from embellishing each topic with an icon, topics are additionally color coded (each has a different designated color), a practice that can result in some repetition of colors especially when you run out of them. In Veterans Affairs’ case it works well, because the colored circles with icons are juxtaposed against the black and white photography above.

Drilling down further into content pages, it is obvious that every effort is made to keep the reader in control. Content is structured into bite-size pieces of information with sections such as eligibility, simple-to-follow how-tos and checklists. We like the useful headings, placing the main idea before exceptions and conditions, the use of lists, as well as the concise, approachable, and conversational style. 

If you are familiar with the plainlanguage.gov guidelines, you will notice that the Veterans Affairs website follows many of the suggestions included there. Other useful plain language guidelines include the 18F Content Guide, Gov.uk Content Design, and MailChimp’s Content Style Guide.

What can we learn?

It is easy for government website content managers to write in plain language if they focus on users’ needs, levels of expertise, and interests. By prioritizing common actions and topics of interest, we can decide what information to provide, how to explain it, and where to place it for easy access.

Convenient ways to understand how visitors describe or conceptualize things include reviewing customer support forums and application reviews, as well as conducting a card sort. Card sort is an end-user activity that tasks participants (end-users) with organizing information cards into logical groups and naming those groups using labels that make the most sense to them. By observing how people talk about your content, you can improve the content and align it with their way of thinking. 

Key takeaway

Plain language writing allows users to easily read, understand, and use the website. Other good patterns include using pronouns to speak to the audience, active instead of passive voice, and simple verb forms.

View the U.S. Department of Veterans Affairs website

6. Interactivity: U.S. Small Business Administration

What is sba.gov?

Sba.gov is a website for the U.S. Small Business Administration, a government agency that helps small business owners and entrepreneurs by providing its expertise in counseling, capital, and contracting. Its official website contains information about business guidelines, funding programs, federal contracting, local assistance, and learning platforms. 

What stands out in the U.S. Small Business Administration website?

Apart from an attractive business guide for first-time business founders, the U.S. SBA website features a number of useful interactive tools that help new small business founders and more experienced owners alike to manage and grow their businesses. 

But this is not all. Tools and guides are packaged in a minimalistic interface free of any unnecessary embellishment, with a very similar approach to the above-mentioned White House website. Such a simple design makes interacting with the website much more streamlined because ambiguity levels are very low, and it’s very clear which elements are a part of the interactive interface and which elements are content and information.

The navigation interaction is easy to use, and the interface always keeps you in the know about where you are in the website structure, including guide-specific navigation that enables sequential (step-by-step) as well as non-linear (free-form) exploration. The table of contents at the top of each page provides the visitor with a convenient overview of the different sections of each page, the feature we also spotted at the Gov.uk and Veteran Affairs websites. 

The website features a number of convenient interaction patterns. In addition to providing multiple ways to navigate and explore, the website is optimized for keyboard use, with plenty of helpful interactions that make the keyboard navigation convenient and fast. The printable step-by-step infographics are a nice addition to the detailed instruction, and the sidebar examples expandable by the user utilize the power of storytelling to additionally explain specific steps in the guide.

Among many useful tools, we liked the Assistance Locator, Break-even Calculator, and business plan templates that are clear and simple to follow. The Assistance Locator includes administrative offices, as well as loan centers that can help you invest into the location, equipment, or other assets. 

The Break-even Calculator helps you understand hidden costs, set revenue targets, and limit financial strain. Because the calculator asks critical questions that a startup owner might not be aware of, it can also be considered an educational tool.

Lastly, the SBA website offers around 250 short video lessons—including transcriptions—on planning, launching, managing, marketing, and growing a business. Coupled with guides, tools, stories, examples, and templates, these video lessons make SBA.gov an extremely well-rounded interactive website.

What can we learn?

Breaking down complex tasks into smaller steps and providing useful tools can help users (in this case small business founders) navigate the complexities of starting, owning, and growing a business. By providing different structured ways to interact with the website and learn information, the website visitors get a comprehensive understanding of the topic. Because of the logical organization of the content, the website can be used as a reference for startup founders and help them easily pick up where they left off during their exploration and learning process.

Key takeaway

Interactivity and interactions between the users and the website are encouraged with every interactive element, dropdown, button, and link. In successful websites, animations are used in moderation, and only to provide meaningful user interface feedback. But more than interface effects, great interactivity is accomplished when the user can interact with the system by changing their input and query to retrieve customized and personalized information.

View the U.S. Small Business Administration website

7. Graphic design and branding: U.S. Department of State

What is state.gov?

State.gov is a website for the United States Department of State. The Department leads America’s foreign policy and international relations. It’s mainly responsible for fighting terrorism, protecting U.S. interests abroad, and implementing foreign policy initiatives, as well as many other policy issues. 

What stands out in the U.S. Department of State website?

Apart from being a portal to many useful resources for international communities, including travelers, visa applicants, job seekers, students, and businesses, state.gov is aesthetically a well-designed website. It marries the best of both design mediums — typography, layout, and color from graphic design, and interactive elements and responsive design from Web design. It is aesthetically the most sophisticated of all websites featured in this article.

Careful typography choices, color scheme, iconography, and texture all work well together, but we especially like the high-quality graphics, photography, and illustrations used across the website, whether as persistent visual elements or as content images. Classic typographic elements like divider lines, white space, and layout breaks are combined with interactive components, like navigation, links, buttons, and tabs, to great visual effect. 

The whole website is inviting to explore and read. We like how the interchange of different page sections feels natural, even though they use only a few distinctive elements. As with the above-mentioned Save Our Water, the website combines multiple simple elements in creative combinations, adding visual variance that is very pleasing and comfortable to look at.

Branding is reinforced with colors and typography too. There is great attention to detail. For instance, the Department of State’s seal is hidden to save screen real-estate on mobile screens. This is yet another example of how branding goes beyond the logotype, something that graphic designers know all too well. One of the best-kept secrets in graphic design circles is that, to establish a visual brand, you only need a font, color, and space. 

Another secret is keeping the logomark simple in shape and texture. Elaborate logotypes are especially troublesome on mobile screens because of the impact on legibility when reduced to such a small size. Some logotype designers mitigate this problem by providing a simplified, small-size version of the logomark that can replace the full version on small screens or low resolutions, but if the visual language for the brand is established with type and color, like in the state.gov case, the reduced logo version can be skipped.

What can we learn?

Attention to detail is important and it can be achieved and maintained at a high level of quality. But attention to detail is most noticeable if it’s applied consistently. This is where strong visual design fundamentals are important. By creating a design system that accounts for multiple different content types and layouts, the website’s aesthetic details feel like parts of a whole and leave that pleasant impression of fit-and-finish.

Key takeaway

Good quality websites pay attention to details such as optimizing the user experience on mobile or selecting appropriate and authentic graphics. For example, the state.gov website drops the seal from the header on mobile devices and offers convenient mobile navigation. Another website, usaspending.gov, features an animated illustration of budgetary details in the hero area, which is both attractive and useful.

View the U.S. Department of State website

What are other examples of a great government website user experience?

In conclusion, there are many great government websites out there, and we hope that the above review has given you a good idea about best practices, as well as how to review and assess government or any other websites. We encourage you to visit a few other notable examples and identify the patterns we highlighted in this article:

1. California Public Utilities Commission
2. Smoke Spotter Mobile Application
3. San Joaquin County Economic Development
4. City of Boston
5. Covered California
6. New Zealand Government
7. USA Spending
8. Information and Services for South Australians
9. Visit California
10. California Conservation Corps

Many of the featured websites share common patterns, but they also share the same level of detail, or what we like to refer to as fit-and-finish. When all different aspects, from Information architecture, and navigation design, to page layouts, typography, color, and photography come together, the website feels engaging and easy to use. The same is true of our award-winning websites for California Energy Commission, California Community Colleges, and Sacramento Municipal Utility District.

What you should do next?

1. Follow us on LinkedIn or subscribe to our newsletter for more insights like this.
2. Read the Government Website Best Practices: User Experience and Performance articles.
3. Contact us for a free consultation. Let’s discuss your next project!  

Kevin shares his perspective—and we further elaborate—on:

1. Forming partnerships up, down, and across the organization.
2. How to select the right vendor partner for the intranet project?
3. How to deliver a project in 90 days by accelerating the project timeline?
4. How can rapid prototyping be incorporated into a time-constrained project?

Watch the video starting at about 3 minutes in, or skip to specific parts using the links above.

DWR’s intranet project was successful in large part because of the stakeholders’ attention and the team’s dedication. To deliver the project in such a short timeframe (90 days), we needed to form strong partnerships:

Kevin See: Now, here comes the fun part. How did we do it? We had to form partnerships — the partnership with the business, the partnership with technology, and of course, our vendor partnership. The first really big piece is — our director was in full support of this initiative, but we also had executive sponsorship from our deputy director of business operations, which runs the horizontal business. So everything from HR to IT is run under business operations.

The next part is the partnership between the director’s office, where Bianca is at, and the technology office [Kevin’s office]. Bianca represents the policy, the content, and the features people want. I represent the technology in terms of how we did it.

The last very important piece is that partner engagement. We had to find a partner that met the speed we wanted to go with, that also shared the same values, vision, and goals that we wanted to share. And have the flexibility to dynamically shift where we needed to to get the job done. And that was really [the case] with our SymSoft partner and working with Bhavik.

[The transcript was edited for clarity and brevity from the original audio recording. References to the slides were removed from the transcript.]

Forming partnerships up, down, and across the organization is crucial for the success of an intranet project.

In a typical project, vertical communication between supervisors and their reports is a natural extension of a regular reporting routine. Many times though, that same routine and reporting frameworks can steal attention from the project at hand, because other things may take priority or urgency, and meetings may be repurposed for other pressing topics. Also, while it makes perfect sense to include stakeholders from across different divisions and offices, oftentimes their attention is elsewhere, and their calendars are difficult to coordinate.  

In short, partnerships require dedication, structure, and excitement, which is in many cases much easier to accomplish if the team is nimble and focused and the communication is direct and candid, instead of managed and indirect.

Not everyone has the opportunity to form small teams as we had at the DWR’s project. This is why in large organizations, we often suggest inviting divisional representatives with decision-making power delegated by the division’s head. And especially if the division executives are stretched too thin by directly participating in the project. A useful model for defining stakeholder roles and responsibilities is the RACI matrix, which describes who is Responsible, Accountable, Consulted, and Informed.

To secure resources and bandwidth across divisions get executive support with a clear vision for the project’s success. Equip your leadership with talking points and clear engagement requirements, so that they can relay the message with better clarity about the timelines, efforts, expectations, and specific action items. It’s much easier for divisions to commit resources when expectations are clear.

How to select the right vendor partner for the intranet project?

To identify whether the vendor partnership will be successful, it’s useful to ask a few questions:

1. What type(s) of vendor contributors are you going to collaborate with during the course of the project? Will you work with the experts directly, or will someone be a liaison between you and the expert? Are you looking for a vendor that can participate in strategic decisions, or are you looking at the production partner only? 
2. What is the team’s availability for the length of the project? Who is engaged at different stages of the project? What will the handover from discovery, to design, to development, to deployment look like? Is there any quality control to ensure a smooth transition between different stages of the project?
3. What are some other functions inside the client organization that might contribute to the project? What will be their availability? Will we get reviews and approvals in a timely manner? How will the project team present work in progress to internal stakeholders and seek feedback?

Asking these questions from the perspective of the project goal will help you realistically allocate internal resources, budget for external help, and set timeline expectations. 

Now that we identified partnership considerations, let’s explore some practical tips and tricks that can help us accelerate project delivery. 

How to deliver a project in 90 days by accelerating the project timeline?

Let’s start with Kevin’s insights from the intranet project:

Kevin See: The “how” part is the agile delivery model. We had 90 days to get it done. Why 90 days? We had to get it done by Christmas time. That was our goal. Our time and our resources were tightly controlled. Our scope was to build an awesome and engaging intranet that employees love. It is very broad in scope in terms of what it’s going to be delivered.

Our time, as I mentioned, 90 days, got to get it done by Christmas time. Our resources? Well, that was our team. We had the resources that we had, and that was it. So we had to do all that within this very short and tight scope and build the intranet that people would use.

Decision- and policy-makers were a part of the product team. It wasn’t where we had a decision- and policy-makers that met once a month to talk about where the challenges are. The typical process in terms of how it goes is a steering committee. [But] they were actually a part of the team on a day-to-day basis. Bianca and I met literally every day or every other day. Between Bianca, Bhavik, and myself, we saw each other more than we saw our families within this 90-day timeframe. We shared a single vision, the vision of building the intranet that employees love, the vision of building the intranet within 90 days. And to get it done.

How did we apply agile delivery to the DWR’s intranet project?

To help us accelerate the project timeline, we used the agile delivery model and rapid prototyping (more about rapid prototyping below). We were able to utilize agile delivery because we met a couple of important essential ingredients:

1. We worked as a small, fast team. While it is possible to apply agile delivery to a much bigger team of teams, it would require some preparation time to organize decentralized communication between smaller teams that follow the agile approach. We didn’t have the luxury to step back, so individual team members instead prioritized this project and focused on fully understanding the ins and outs in order to make informed decisions. By keeping the team small, we completely removed any overhead.

2. We communicated daily. Granted, daily communication wouldn’t be possible with a much larger team spread across multiple projects. The cost of task and project switching would be too high, and it would require additional effort to maintain the common vision and priorities.

3. We provided feedback instantly. When the team is focused on the project with little to no distractions, feedback and decisions are made on-the-fly and based on shared understanding and common knowledge of the project.

4. We made quick adjustments and shortened release cycles. Because the team was very intimate with the technical platform (Sitecore), it was possible for us to update and compile features and to try different options. This wouldn’t be possible without both content and platform owners’ expertise in content publishing on the Web. 

5. We trusted one another. To develop trust, it is important to have a vision of the outcome that is attainable as well as assemble a team that shares that vision. A clear vision also helps with prioritizing features.

6. We prioritized features based on the project goals. As we were developing and implementing features, we developed a good sense of how much each addition or change would impact timelines and efforts. Instead of only focusing on development time, we also considered organizational policies and content governance. A good method for feature prioritization is the MoSCoW analysis that identifies Must-have, Should-have, Could-have, and Will-not-have features.

If your organization hasn’t already adopted an agile methodology, we suggest trying it with a small team that can operate within the framework described above. It is also useful to start implementing agile in your organization by following the agile manifesto:

Individuals and interactions over processes and tools.

Working software over comprehensive documentation.

Customer collaboration over contract negotiation.

Responding to change over following a plan.

How to prepare for a tight deadline project?

Even if you don’t follow agile methodology, or are not sure if you’d end up applying it, any project can move quickly and meet deadlines with some basic preparation:

1. Commit to the minimum projects requirements.
2. Define project goals and success criteria.
3. Secure executive sponsorship.
4. Book important meetings far in advance.

How to keep the project moving?

There are also a number of simple practices teams can implement and stick to in order to keep making good progress and avoid pitfalls:

1. Appoint a project manager who will attend all meetings, track decisions, and serve as an information hub. Best results are accomplished when they work closely with the vendor’s project manager.

2. Show something tangible early. It’s much more cost-effective to course-correct a proof of concept or a prototype than a fully developed project. Depending on the fidelity level, and stakeholder experience, it’s a good idea to present progress in a broader context of project requirements.

3. Keep key decision-makers in the loop by presenting small changes often. This will make it easy for them to recall the previous decisions and ask questions early, rather than approving a major milestone without enough context.

4. Contain the scope by always going back to the minimum project requirements. Any additional ideas and opportunities should be moved to the backlog and revised after the must-have features are designed, implemented, and tested.

How can rapid prototyping be incorporated into a time-constrained project?

DWR’s team is a huge fan of rapid prototyping, especially since they were deeply invested in the project and excited about the possibilities. 

The line between rapid prototyping and agile methodology is sometimes blurry. Rapid prototyping focuses on the software design from the user and business stakeholder perspective, while agile methodology applies to software development. The confusion stems from the fact that both are iterative methodologies with short release cycles, and both can be performed in the software environment. Still, it’s important to remember that prototypes are not production-ready. 

For example, before committing to a full-blown web form that connects to various systems and databases, you might embed a Google Form into a page to validate the user flow. Or, before committing to a custom developed data-dashboard, you might embed a Tableau prototype as an iframe. Yet another example is prototyping a widget without actually connecting it to the database. None of these examples would be shipped to production, but would give everyone a good idea of whether the feature makes sense to develop further or not.

Compared to the waterfall approach, which includes detailed planning and rigid requirements outside of the development environment, rapid prototyping enables quick validation of scaled features and provides a short feedback loop. In short, rapid prototyping boosts decision-making processes, dramatically reducing refactoring in the actual development phase.

Kevin See: We’ve done a lot of things in terms of rapid prototyping, meaning: what we saw in the morning could be dramatically different by the evening time. It can be 180 degrees. “You know what? That feature worked. [Or] it didn’t work.” What was the benefit behind that? We might have lost a couple of hours. In a typical development timeframe, a feature might take weeks or months to get done, and you lost all that time. But we worked with a partner, with a business that really was aligned with what we were trying to do, and that is to get the job done, and course-correct and shift, as fast as we want to shift and course-correct.

I think this was pivotal in terms of getting the platform that can do that, finding a partner that’s willing to do that with you, and a business that is truly engaged and is a part of that process. “Yep, that didn’t work. Let’s move on. Yep, that worked. Let’s move on.” And I think this is key in how we got this thing done within this very tight and short timeframe of building the Department of Water Resources’ intranet.

As previously mentioned, rapid prototyping goes hand in hand with the agile methodology, because it streamlines quick adjustments and shortened release cycles. However, it is the most suitable for experienced teams who can make such quick changes, validate options with stakeholders, and make informed decisions. This can also be a disadvantage, since rapid prototyping requires the most knowledgeable and experienced personnel.

Lastly, rapid prototyping is also effective in MVP (minimum viable product) development, where the PoC (proof of concept) is more important than a specific implementation approach. When the timeline is short, rapid prototyping results in a tangible output very early. Once approved, the MVP can be moved into the development phase.

Conclusion

While large-scale capital projects can be delivered in a very short timeframe, they require an experienced team, executive support, and dedicated stakeholders. By applying methodologies and frameworks, such as RACI stakeholder roles, MoSCoW prioritization, agile project management, and rapid prototyping, even the most challenging projects can be delivered on time and budget.

Have a massive project that needs to be delivered fast? Contact us and let’s start the conversation.

In over 15 years of redesigning websites and implementing Web content management systems for our enterprise and government clients, we have identified five essential activities that are often missed in the project planning. In such cases, the whole project might be at risk because time and internal resources are not allocated. Of course, when this happens, there are still ways to deliver a project, but it might require readjustment that could have been easily avoided altogether.

Before you plan for your next Web design or Web CMS implementation project, we suggest you consider the following five activities of a successful redesign:

1. Content Production, Editing, and Migration
2. Web Content Accessibility Support
3. Application and System Integration
4. Organizational Change Management (OCM)
5. Maintenance and Support

1. Content Production, Editing, and Migration

Whether you are redesigning a site or launching a completely new website, content migration and new content production are critical activities that require careful planning and consideration. 

Content updates and organization typically require engagement of the content owners and subject matter experts, such as program managers or communication teams. Failure to plan for their involvement results in low engagement and unanticipated workloads that nobody allocated for. It is common for organizations at that point to step back and re-identify project stakeholders, which in many cases results in inconvenience and delays.

To avoid surprises down the road, ask the following questions:

1. How much content is currently there on the existing website?
2. Will all the current content be migrated to the new website?
3. Can content be archived?
4. Does some content belong to the Intranet or Extranet rather than the public-facing website?
5. What is the legally required content that needs to be migrated over to the new website?
6. Do you need to create any new content, or update any existing content for the new website?
7. Will you introduce new content formats, such as photography, illustrations, or video?
8. Who will produce or edit content?
9. Who will migrate the content?
10. Who will review and approve content editing and migration? 

Answering these questions prior to starting the project will help you define a more realistic scope, and identify additional resources needed to ensure the delivery of a comprehensive website solution.

2. Web Content Accessibility Support

Accessible websites combine accessibility compliant platforms (e.g. content management systems or document filing systems) and accessibility compliant content.

While most public sector website redesign or implementation projects require an accessibility compliant platform, software, and design system, content accessibility compliance workflows and procedures are often overlooked. This can create challenges after the project is completed and the website content continues to evolve, so it is essential to establish and adopt processes to monitor and ensure accessibility compliance moving forward.

When planning your next accessibility compliant project, ask the following questions:

1. How will you test and validate website accessibility after the project is completed? How will you keep the website accessible? This is especially important in public sector websites that need to self-certify for accessibility compliance (AB 434 in California).
2. Are there any files and documents that need to be remediated for accessibility compliance before publishing on the website? (In many cases the answer is yes.) How many of such documents are already remediated? Do you have a strategy set in place to conduct remediation of the non-compliant files and documents? In our experience, the volume of documents that require at least some accessibility remediation comes as a surprise to many organizations.
3. Do you have the technical resources and expertise to maintain an accessibility compliant website? If not, how do you plan to address the gap?

3. Application and System Integration

Many organizations, especially in the public sector, provide website visitors access to business applications through their websites. These applications help with self-service tasks and therefore significantly optimize business processes, digital transactions, and time required to serve thousands and millions of users. Such applications are often the main reason users visit the website, so consider business application integration while planning for a website redesign or implementation project.

To help identify tasks and resources that should be part of your project, review all applications currently available to the users through the website. Consider engaging the business application owners and technical support groups in the planning.  

In our experience, there are a few common scenarios:

1. Business applications are kept as-is. They retain their look-and-feel and are hosted in the existing environment. Applications are not integrated with the main website but are merely hyperlinked. In this case, the user experience and accessibility could end up being suboptimal, but the project timelines are more predictable.
2. Existing application rebranding and visual design alignment. This is a common option for organizations that are able to dedicate technical staff who can apply the main project’s design system to the business application.
3. API development and integration. This is the most future-proof solution, depending on the CMS and how much development effort is required by the complexity of the business application. Benefits of API integrations include a unified brand and user experience because the user stays within the same website, which opens up possibilities for additional features such as content personalization or user profile functionalities.

Sometimes, the rebranded applications are embedded through iframes. However, we strongly suggest avoiding this approach as it may create accessibility challenges that are expensive to address. Typically, video embeds are somewhat easier to maintain, but custom data dashboards might create more problems than benefits when embedded through an iframe.

As always, there are multiple solutions to a problem, but we recommend at least high-level planning, well in advance, to avoid surprises later in the process.

4. Organizational Change Management (OCM)

Implementing new systems and tools may require changes to the organization’s internal processes, procedures, and day-to-day operations. Planning and managing the change is sometimes omitted from the project planning process, resulting in low stakeholder engagement and slow adoption.  

When planning the project, changes and challenges that need to be identified include:

1. Changes in roles and responsibilities.  
2. Implementation of new processes, policies, and procedures.
3. New resources, skills, or abilities required within the organization.
4. Legal requirements for implementing the changes.
5. Impact of the changes on the organization’s workload.  

We have partnered with many of our clients to help lead organizational change management throughout our projects, which has been vital for successful implementations and enduring solutions.

5. Maintenance and Support

Although most website redesign or implementation projects include a knowledge transfer deliverable, some miss the option of engaging the implementing partner to provide ongoing maintenance and support after the project is complete.

Having maintenance and support in place allows organizations to gain additional knowledge of the solutions by monitoring issue resolution procedures, collaborating with the vendor to resolve real-life situations, and learning by doing. Having maintenance and support in place frees up internal resources to focus on more strategic tasks than day-to-day monitoring.

When planning the project, thinking about the organizational capabilities will provide you with a general idea of the maintenance and support requirements that should be included in the project’s scope. Consider:

1. Your organization’s familiarity with the platforms and technologies used in the project.
2. What resources will be available to support the solution after the new website is launched.  

Conclusion

We hope this list of considerations will give you a better idea on how to scope website redesign or Web CMS implementation projects in your organization.

For further questions, and help in scoping projects, please contact us.