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!

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!  

By approaching the digital transformation project with the business mindset, the award-winning GOV.UK website saved £61.5 million in 2015. They focused on streamlining digital transactions in order to help users accomplish as many digital transactions as possible online, instead of visiting offices and filling out paper forms. In the Government Transformation Strategy (PDF), the government of the United Kingdom stated:

Services must work for the whole of society – not just the 77% of people who have basic digital skills, but for the 12.6 million adults who don’t. This is particularly important as financial exclusion and digital exclusion often go hand in hand.

Improving accessibility and page speed performance in turn improves audience reach and digital service adoption.

A few examples of digital services that benefit from page speed improvement include:

1. Online account registration and switching to paperless correspondence.
2. Vehicle registration and driver’s license renewal.
3. Benefit or retirement account self-management.
4. Consumer complaint filing and resolution.
5. Business registration, and business license applications and renewals.

So, let’s talk about how to improve performance of your carefully crafted digital services.

In January 2021, we evaluated over 300 California, U.S., and international government websites for page speed performance using Google’s PageSpeed Insights, which measures website performance on a scale of 0–100. As you probably assumed, 100 is the best score, and one that is beyond reach even for the most popular websites out there. Go ahead and test a few websites that you visited this week to get a better idea about how they perform, and to see how various scores correlate with actual usage.

In our test, we discovered that about 3% of tested government websites score 90–100 points for mobile performance, and 18% of government websites score 90–100 points for desktop performance (median mobile: 50, average mobile: 38, median desktop: 64, average desktop: 68). 

Given the median and average values above, and the fact that many popular non-government websites’ scores linger in the 30s for mobile and 50s for desktop performance, it’s worth looking at our top performers’ examples to see what they did right. 

Continue reading below to learn why performance matters, and how to immediately improve your website’s performance with a few practical tips. In this article, we will cover:

1. Why does website performance matter?
2. What is an excellent level of governmental website performance?
3. Five simple improvements for better website performance.

Please note that when we evaluate page speed performance, we do not cover the quality of accessibility, interface design, usability, content design, or information architecture. We plan to cover these other topics in separate articles. Subscribe to our newsletter and connect with us on LinkedIn to receive future updates.

Why does website performance matter?

Time is a universal commodity, so everyone values fast performance in every aspect of their lives. Whether streaming HD video, waiting in line in a grocery store, or trying to accomplish a task on the website, getting things done as quickly as possible is an implicit user expectation.

But what are some practical reasons? Years of observation of conversions in e-commerce combined with studies about how people perceive the speed of the websites and internet content availability in general, demonstrate that speed performance does benefit the users and the organizations. 

Human-computer interaction research shows that speed perception thresholds are really short, at about 50–300 ms (0.05 to 0.3 seconds). For example, Dr. Lindgaard showed that people can make a decision about design quality based on a 50 ms long exposure to a picture. With such fast perception, it is no wonder that people cannot wait more than a couple of seconds before they lose patience and abandon a website.

Here are a few examples:

• Professor Ramesh Sitaraman’s study shows that people begin abandoning videos if they don’t load within two seconds (PDF). This finding impacts not only retail websites, but also government websites that are providing video guides that walk the audience through a self-service process.
• Akamai reported that page load times significantly impact conversion rates (PDF). 53% of visits to mobile sites are abandoned if pages take longer than 3 seconds to load.
• For Walmart, website speed correlates to business metrics. Walmart.com’s engineers found that conversion rates declined as load times increased. The average site load speed was significantly lower for the converted population (3.22 seconds) than the non-covered population (6.03 seconds).
• In 2018, Google published industry benchmarks for mobile page speed performance. Their analysis found that as page load time goes from 1 to 5 seconds, the bounce probability increases to 90%.
• Finally, Google Search uses website speed performance as a signal when ranking websites. It is not the most important Google Search signal, but, all else being equal, faster websites are ranked better.

Considering the above research, it is clear that government websites’ improved performance can broadcast critical information to constituents faster, help them more efficiently utilize government digital services, reduce the server and data bandwidth costs, and increase the likelihood of users completing the goals around which the sites are built. Also, for millions of Californians, faster websites mean more equitable access to digital services, especially in communities where blazing internet speeds are not accessible or affordable.

What is an excellent level of government website performance?

When evaluating website performance, we use two industry-standard tests, Google PageSpeed Insights, and the WebPageTest. Both come with actionable results accompanied by practical instructions on what to improve to achieve better performance. Another often used tool is Google’s Lighthouse audit, that evaluates specific metrics such as TTI (time-to-interactive), which is useful in optimizing web and mobile applications.

Specific to government website performance, any website that measures in the 80s and 90s for either metric in Google PageSpeed Insights can be considered a well-optimized website. When evaluating performance, we can stop there and follow the guidelines provided in the PageSpeed Insights results. However, the WebPageTest features a more elaborate scoring system that grades the implementation of individual best practices and provides the actual loading times. The most significant load time metric in WebPageTest is the Speed Index, the average time it takes for a website to display visible parts of the page. 

Our test’s top performers achieved a Speed Index of 3–4 seconds, and fully loaded in 8–10 seconds over a Regular 3G Mobile test configuration.

Top 10 performing government websites

The top-performing websites above combine server and infrastructure-based best practices, such as:

• Keep-alive enabled. This means that they enable persistent connection between the browser and the server, reducing CPU and memory load on the server, allowing for faster delivery of content to website visitors.
• Compressed data transfer. Enables data size reduction by compressing data before transferring over the internet from the server to the browser. Compressed files have a smaller file size, which means less bandwidth is needed to move them from the server to the browser.
• Compressed images. Same benefits as compressed data transfer, except that the images can be stored in an already compressed state on the server. This can be achieved through automated compressing on the server, or by applying content authoring best practices (see below).
• Effective use of a Content Delivery Network (CDN). Typically, each web page is composed of a few files, such as the main HTML file, CSS, JavaScript, and images. To render the interface that the visitor sees, the browser needs to download all these files. To optimize this multi-threaded download process, we can serve website files through a CDN. This results in more servers sending files to the visitor at the same time, distributing the request.

While upgrading to a new platform and technology or switching to a cloud server infrastructure may improve performance, you can improve your website’s performance within your routine website management workflows.

Five simple improvements for better website performance

1. Optimize photography. Before uploading photographs and illustrations to the website, ensure that images are correctly sized and cropped. For example, hero images should be as wide as the website layout for full effect. News / blog feed thumbnails can be reduced to a smaller size, significantly improving visitors’ loading speeds. Simple tricks to compress images include converting PNG images into the JPG format and running images through image optimization tools, such as TinyJPG (available as a plugin in popular content management systems), Image Compressor, or if this is available to you, Adobe Photoshop’s “Save for Web” option.
2. Combine multiple CSS and JavaScript files into one of each type. You probably regularly update your website’s CSS and JavaScript libraries to the latest versions. Next time the libraries are due for an upgrade, combine them into single CSS and JavaScript files. Combining files will reduce the number of requests to the server and the number of files the visitor’s browser needs to download, thus reducing latency.
3. Minify and compress HTML, CSS, and JavaScript files. After combining files into a single file of each file type, use that opportunity to minify code. Most of the popular code libraries, such as Bootstrap or jQuery, already come with prepackaged minified versions, so it might be just a matter of replacing the current version with the minified one. For extra performance, utilize Bootstrap CDN and jQuery CDN options, which allow you to serve these files from a CDN (content delivery network) server instead of hosting them on your website. For any visitors who have downloaded the CDN version on another website, they’ll already have these files downloaded when visiting your website.
4. Disable plug-ins and features you don’t use. Regular pruning of the add-on features and functionalities may also help. Removing commonly overseen elements, such as map APIs,  leftover YouTube code, legacy analytics code, or captcha code in pages that don’t include web forms can dramatically optimize web pages that don’t utilize these case-by-case functionalities.
5. Enable caching or install a caching plug-in. If your content management system or web server supports caching, ensure that caching is enabled and properly configured. While caching won’t help visitors on their first visit, it will improve page loading speeds for visitors who frequently revisit your website.

Conclusion

Website performance is easy to improve but also easy to miss. We hope that this simple list helps you understand how to improve your website’s performance, allowing  for faster access to information and the ability to better reach your audience.

For all questions or advice on website performance, please reach out to our team of experts.

The benefits of creating a cohesive, yet reusable system are endless. Be it a full-blown design system, a style guide, or a pattern library, thinking systematically means thinking future proof.

Systematic approaches to design require tighter collaboration and sharing between different functions, primarily the brand managers, designers of all stripes, and technology folks, but also product owners, program managers, and executive stakeholders. Thankfully, there are a few solid software solutions to choose from that can make the process more seamless.

What follows is not a comprehensive list of tools, but rather a list of selected tools that we anticipate will soon become mainstream digital product design tools if they aren’t already. In this article, we will take a look at:

1. Adobe XD
2. Figma
3. InVision Studio
4. Sketch

(Other existing tools might be as valuable as the ones that made it to our list. We would definitely like to hear about your experience and learn about the advantages of other solutions.)

Before we dive deeper into why we like each tool, it’s important to remember that we are a tool-agnostic design team, which means that everyone gets to choose the best tool for a job, as long as they can export it to a common format and share it with the rest of the team. And yes, sometimes we will go into Keynote to quickly mock up a series of screens, or even design a high fidelity interface.

Overview of Tools

Adobe XD

Why we love it?

Adobe XD is the newest among the four tools mentioned in this article. It easily made its presence known because it was originated by Adobe, probably the most well-known design software ecosystem. We have built products in Adobe XD for previous projects that include websites and design systems, even for large organizations like CalPERS. It’s useful for communicating with clients and building design systems, and also easy to learn and adapt to.

Convenient client communication

All the design software mentioned in this article has a sharing option. Adobe XD supports two types of sharing — Share for Review and Share for Development. We use the Share for Review to receive client feedback, especially because they can annotate the prototype screens and add comments, whereas the Share for Development is intended for developers to view the code.

Adobe XD stands out for us as the most convenient for client communication because it’s the only one of the four that allows users to comment without signing up for an account. Another welcome feature is passcode protection, which keeps our projects more secure.

XD also has the most convenient prototype recording capability — accessible through a button in the top right of the preview window, with which designers can easily record the interaction and send it to the client for review.

Good for building design systems

The assets panel of Adobe XD makes it unique compared to the other three tools by having reusable components as well as colors and character styles all in one place. As a result of utilizing this, we can easily build a component library and a style guide consisting of the color and type systems.

Moreover, Adobe XD supports linked assets. This enables designers to import assets from an Adobe Cloud document and simultaneously use and update those assets across different projects. This was especially helpful when we were building the aforementioned design system for CalPERS. The ability to import linked components, colors and typography styles altogether into documents dramatically improves the workflow and keeps all the styles up-to-date.

Zero learning curve

We found Adobe XD the easiest to learn and adapt to, especially for those designers who have experience using other Adobe products, namely Illustrator and Photoshop. With almost identical shortcuts and a very similar look-and-feel (for example, tools panel on the left, in vertical order), it reduces the learning curve for any experienced designer.

What we miss?

While XD is great for easy client communication and feedback, building design systems, and is easy to learn, there is room for improvement in the prototype mode.

Advanced interaction

Currently, XD only supports basic interactions such as tap and drag (by mouse). It doesn’t allow more advanced triggers like mouse over, double click, or swipe to different directions.

However, one thing to note is that XD is the only tool among the four that has a voice trigger, which is handy for prototyping conversational user interfaces. For example, Siri, Alexa, Google Home, and many more applications and devices are using the voice user interface to improve the overall customer experience.

Better connected design and prototype modes

Another potential issue with XD is that it separates the design and prototype modes in a way that sometimes stifles the workflow and makes our process disconnected.

For example, imagine this task — we want to create a menu bar component in the design mode that directs us to the same artboards wherever we use this component. In XD, it’s hard to accomplish that because when we switch to the prototype mode after we designed and used this component, we need to link everything over and over again.

Better artboard organization

XD only supports a single page with multiple artboards, whereas other design software usually supports multiple pages with multiple artboards. This could work for smaller projects, but for larger projects that need to be more organized, a single page might not be sufficient. Keeping a large number of artboards in one place could make it difficult to organize and navigate.

Figma

Why we love it?

Figma stands out from other design tools by offering access on different platforms — Mac, Windows, Linux, and most importantly, the Web. According to its CCO, Amanda Kleha, Figma actually originated from the idea that “design should live on the Web.” Figma is unique in its ability to store everything in the Cloud so that the team can always find the latest version. It also offers a few other benefits that we don’t find in other tools including live collaboration, interaction preview, and instant code mode.

Highly collaborative

Unlike other design tools that follow the share-comment structure for collaboration or communication purposes, Figma takes a different approach by offering the live collaboration feature. In other words, it allows multiple users to work on the same file at the same time. This feature may seem strange for some users, but it could be useful for projects that need several designers working on the same file.

We are under the impression that Figma is striving to build a highly collaborative environment for users because the Comment feature is built into both design and development modes —  it’s even highlighted in the top tool panel to make communicating handier. Commenting can be “live” too. When multiple users are working on the same document, they are able to give feedback and respond to comments with a single click.

Animation preview

We simply love this feature! When comparing the animation and interaction features among these tools, we realized most of them have very similar capabilities and logic. But what makes Figma unique is that it offers previews for animations. This increases the learnability of this tool and is especially helpful for those who are relatively new to the animation terms.

Three unique modes

While other design tools primarily have two modes for users to work in — Design Mode and Development Mode, Figma also incorporates a Code Mode. In the Code Mode, when we click on an element, we are able to see its CSS, iOS, and Android code without an additional step.

In this case, designers and developers have a chance to learn from each other – designers getting more familiar with code, and developers can always have the most up-to-date design file to build the product from.

What we miss?

In general, Figma is a very powerful design tool because I cannot say there is one thing about it that significantly bothers me, so here I would like to mention several aspects in which it can be improved.

Local copy

Unlike other design tools that allow users to save files into local drive, Figma takes a different approach by storing everything on the Web. This is good because everything is auto-saved and the teams always have access to the updated files. However, for teams working only in the Cloud, this could be problematic because everything is based on the Internet. Basically, if there’s no Internet connection, there’s no progress.

Privacy

Figma’s emphasis on the Web could also be a potential issue in terms of privacy. Organizations might fear that putting their projects and collaborating in the Cloud would be less private.

Another issue is that some designers might prefer working on their own and don’t want others to see what they are working on currently. In this case, Figma’s live collaboration feature might not work for this group of designers.

Layers Organization

The pages, artboards, and layers panel on the right of Figma’s design interface could be a little clearer and more legible. There could be a more obvious separation between pages and artboards. Also, Figma doesn’t have the option to search for specific layers, as XD does. For a large project that involves multiple pages and artboards, searching for specific layers to make a change could save us some time.

InVision Studio

Why we love it?

InVision has been extensively used as a powerful prototyping tool combined with other interface design tools to help design teams achieve intended results. It released its own design tool, InVision Studio, in 2018, so now we can design and prototype on the same platform. Since InVision was famous for being a prototyping tool originally, InVision Studio keeps this advantage by offering many powerful animations and interactions. Moreover, InVision has developed its own design collaboration suite, which makes it the most complete solution on the market today.

Rapid prototyping

InVision Studio is no doubt the best in terms of prototyping among all the design tools on the list. It allows interactions triggered by mouse, finger, keyboard, and timer. More options, such as hold tap and double-tap, which are not seen in other design tools, are also available in InVision Studio.

Prototyping has been made simpler in Invision Studio also because we can add interaction at any point without switching to a prototyping mode. Another convenient feature is an automatic frame (iPhone, iPad, etc.) when we prototype screens, unlike Adobe XD that needs us to manually add frames.

Advanced animation

Besides rapid prototyping features, InVision Studio also offers advanced animation capabilities. For example, after we set up a motion transition to an artboard or layer, we can take a step further by using the Edit Timeline function to have more granular control over the speed and timing of each component that we want to animate. In this case, it allows us to create more customized animation to fit our needs.

InVision ecosystem

InVision has developed its ecosystem by offering a complete solution including design, prototyping, workflow tracking, design handoff, and advanced animations. For teams working on a complete product building cycle, InVision offers complete support from planning, to design, to communication, to delivery.

In the early stage of the product cycle, we can use InVision Boards for inspiration and ideation. When we want to create storyboards, low-fidelity prototypes or collaborate with other team members, we can use Freehand to help with the workflow.

What we miss?

With powerful design prototyping features all in one mode, InVision Studio’s interface appears to be more complicated than other tools. Thus, it can be improved in its usability and performance.

Relatively low learnability

InVision Studio is different from other design tools, first, in its look-and-feel: it features a dark theme and a futuristic style, which might be hard for some users to adapt to. The tool icons are also not very intuitive so it takes time to learn how each of them functions.

Better panel usability

InVision Studio somehow sacrifices its usability for the sleekness of its interface. For example, it doesn’t have a very clear tools panel like other design software does; rather, we need to perform an additional step by clicking on the “add” icon first to see what tools it has.

Another example is that it only has an alphabetical list of components. You have to click on each component to see what it is, whereas all other software provides previews of the components.

Interaction indicators

Unlike other design tools that separate design and prototype into two different modes, InVision Studio has only one mode that incorporates the interaction feature. Some people think this is more convenient because you don’t have to switch between the two modes. However, InVision Studio doesn’t provide enough indication for already created interactions – we need to click on each layer or artboard to see if it has interactions that have been previously set up.

Sketch

Why we love it?

Sketch revolutionized the way we design user interface when it was first launched in 2010. After that, a number of different design and prototyping tools inspired by it appeared on the market. Although there are many tools out there that have their own advantages, Sketch still keeps its place as the top-used user interface design tool today, according to UXTool’s Design Tools Survey. Sketch not only has robust functionalities for interface design but also has the most extensive plugins and resources on the internet.

According to UXTool’s 2019 Design Tools Survey, Sketch was rated as the most used tool for user flow, wireframing, UI design, prototyping, and design systems.

Customizable Toolbar

One feature that sets Sketch apart from other design tools is its customizable toolbar. The other tools on the list all have a default toolbar either on the top or to the left of the interface. This convenient feature allows designers to choose what tools are in the toolbar, providing a custom fit to different design habits, and the ability to tailor it to different design needs.

For example, a UI Designer might stay with the default toolbar options, but a Graphic Designer or Icon Designer might want different toolbar options that are more suitable for vector arts.

Extensive Resources

Since Sketch is the very first design software that’s created for user interface design, it has the most extensive resources on the Internet for us to learn and use. There are many different websites focusing on providing Sketch resources to download, including Sketch App Resources, Sketch Repo, etc.

Not to mention, it also has massive third-party plugins to improve its functionality and performance. For example, we can combine Sketch with advanced animation plugins to make better prototypes and we can use third-party plugins like Zeplin for design handoffs. This advantage is very important because we can mix and match plugins to create our own Sketch to best fit our needs.

Templates

Sketch has another convenient feature called Templates, which allows us to create new files from a template, including Android icon design, iOS app icon, material design, prototyping tutorial, smart layout tutorial, and web design. Using a template to create designs can save time when figuring out the correct dimensions, grids, layout options, etc.

What we miss?

Although Sketch has powerful design features and is the most-used interface design tool, it’s still not perfect. There are multiple ways it could be improved in order to be used by more people and to create a more seamless user experience.

Other platforms

Unlike other design tools on the list that support at least two platforms, Sketch is a Mac-only application. Its strongest rival, Figma (Figma was rated number two in the top-used user interface design software survey in 2019),  supports four platforms: Mac, Windows, Linux, and the Web, which makes it accessible from almost all platforms available.

Version control

Another feature we miss in Sketch is version control. It’s highly dependent on third-party plugins, such as Abstract and Plant, for versioning. On the other hand, Figma has a built-in feature called Version History, which allows users to see all the auto-saved versions and enables the retrieval of earlier versions. And for those who prefer intentionally saving a version of the file, Figma also allows for manually saving a version.

Collaboration features

Although Sketch has a powerful plugin library, it’s still easier to have built-in collaboration features. Currently, Sketch doesn’t support sharing, commenting, real-time collaboration, or design handoff, whereas other design software has these features built-in. However, according to “What’s Next for Sketch in 2020?” it plans to launch built-in collaboration features this year.

Conclusion

The launch of Sketch has inspired more creation and development in design software. Each tool has its own pros and cons, so organizations can choose what tool to use by analyzing the budget, project scope, and design need. Hopefully, this article can provide a new perspective to your understanding of these design tools and help you choose the right tool for you. Please let us know what you think of these tools. We’d love to hear your opinions!

FYI, SymSoft is currently hiring Interaction Designers. If this is you, our team is eager to meet you!

(md, cm, yk, ma, xl)

Resources

1. Best UI Design Tools 2019: Your Guide
2. Figma vs InVision Studio
3. Adobe XD vs Sketch, InVision Studio & Figma (2019’s In-depth Comparison) Which one?
4. Figma vs InVision in 2019 – Comparison UI Design Tools
5. 2019 Design Tools Survey
6. Learn and Master Adobe XD
7. Figma Best Practices
8. Learn Sketch
9. Master the Power of InVision Studio

This article will provide you with a few examples of the advanced search experiences that are integrated with the Sitecore-based solutions we deliver to our customers, such as SMUD, DWR and DGS.

Sitecore Content Search API is responsible for communicating with search engine software such as Solr, a popular enterprise-level platform built on Apache Lucene™. Out of the box, the Content Search API retrieves the basic list of results, which works perfectly if the end user knows exactly what they are looking for. It’s a little less convenient for people who are not quite sure what they need, or simply don’t even know how to phrase the query.

SymSoft improves the original Sitecore Content Search API by adding methods that can retrieve other information — such as alternative query suggestion, or query term highlights in the list of results. This creates the user experience similar to the one provided by Google Search.

Let’s see them in action.

Alternative Query Suggestion

Alternative query suggestion will attempt to search content with the original keyword. In case there are no results to display, it will suggest an alternative query results based on similar existing words or phrases. Below is an example of the alternative query suggestion on a live website for the California Department of Water Quality.

Stemmed Search

Stemmed search improves user experience by expanding query to include all results that are related to the base form of the word used in the query. In the example below, using keywords with the same root — university and universities — will retrieve the same list of pages and documents (the root of the word university is universit).

Query Term Highlighting

Query term highlighting is useful in cases when the search query refers to multiple different contexts. Highlighted query terms help users understand the context around the keyword they were looking up. In the example below, it is easy to find documents that are related to different water management plans.

Conclusion

This post hopefully illustrates how different advanced search functionalities can improve search experience for the end user. Furthermore, it demonstrates that a Sitecore-based website can be set up and customized to include advanced search features, especially when paired with a powerful search platform such as Solr.