Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
This section serves as a checklist for assessing quality of a service by following the points in this guide
Usability testing allows you to observe firsthand how users interact with your product. You can identify any challenges they encounter and understand the 'why' behind their behaviour. This improves user experience and can prevent costly redesigns later on.
Further reading and resources for usability testing include:
Continuously improve services to meet the needs of users. GovStack applications may involve users in several different roles and affiliations with several organizations.
Understand needs and requirements
Involve others in the design process
The cloud-based analytics solution, such as Google Analytics, is a straightforward and easy-to-setup method that offers robust data about your users' behavior. It's a beneficial choice for those who want to get started quickly and without much technical setup.
Setup: Begin by creating an account on the platform of your choice. You will then add the tracking code they provide to your website. Ensure this code is embedded on each page you wish to monitor.
Configuration: Within the platform, you'll set up goals or events that align with your Key Performance Indicators (KPIs). This allows the software to track specific user actions that are of interest to your business.
Monitoring: Once the setup is complete, you can start monitoring user behavior data through the platform's dashboard.
Remember to respect user privacy throughout this process, which involves informing users about the data you collect, why you collect it, and offering an option to opt out.
Self-hosted analytics, such as open-source platforms like Matomo or Plausible, offer more control over your data and are often favored by businesses that place a high emphasis on data privacy and security. This is particularly important if you value keeping data in-country due to regulatory or compliance requirements.
Setup: You'll need to set up these platforms on a server, which could be owned by you or rented from a hosting provider. After this, you'll add the platform-specific tracking code to your website.
Configuration: As with cloud-based solutions, you will need to define the events or goals that align with your KPIs.
Monitoring: Once configured, you can use the platform's dashboard to track user behavior and monitor your KPIs.
Server space considerations for self-hosting depend on several factors, including the amount of traffic your website receives and the level of detail in the data you are tracking. As a starting point, 1GB of space could handle over a million simple page views, but more complex tracking would reduce this. Consulting with a server or IT professional could provide a more accurate estimate based on your specific needs.
It is also possible to start with a cloud-based solution for quick setup and immediate insights, then transition to a self-hosted solution as it's being set up. This allows you to benefit from analytics data right away, while your more robust, privacy-centric solution is being prepared.
Find opportunities to collaborate closely with users, stakeholders, and other , throughout the design process.
Empower users to take an active role in co-creating and co-designing public services.
Involve stakeholders early on to understand their expectations and objectives.
Get feedback from stakeholders to review and comment on design decisions and findings.
Conduct workshops or brainstorming sessions for diverse input.
Have peer reviews to get the perspective of different roles in the design.
Emphasise user needs and project goals within the team.
Carry out user research activities, like interviews and surveys, to understand user needs.
Hold co-design sessions with users, for them to participate directly in the design process.
Conduct with real users to identify issues and opportunities for improvement.
post-launch.
Build services that are usable and equitable for all.
Accessibility is important because it allows services to give equal access to all citizens, comply with legal requirements, foster inclusivity, enhance user experience, avoid discrimination, and contribute to government credibility, cost savings, innovation, and international reputation.
There could be significant interdependencies between UI components for different accessibility requirements. The World Wide Web Consortium and Web Accessibility Initiative have developed standards for considering the needs of developers (), authoring tools, accessibility evaluation tools, and guidelines on how to make user agents (browsers, browser extensions, media players, readers) accessible to users.
Start by understanding the needs and requirements of the solution, including users' needs, expectations, and pain points. Consider the "Person" and the "Role" are not the same. For example, the same person may use a health care application as a doctor and also as a patient but the needs of a doctor's UI/UX are different from that of a patient, and while the doctor may work on the data of multiple patients, a patient can access only self-data. You can find more examples of how to understand user needs in the implementation playbook.
Understanding user needs begins with user research. This includes techniques like surveys, interviews, user testing, and analysis of usage data. The goal is to understand the tasks users are trying to complete, the problems they face, and the goals and motivations of users in specific roles.
Always question assumptions about what users need in specific roles. Just because something is commonly done or seems like a good idea doesn't mean it is what users need. Validate every assumption with data.
Before jumping into solutions, make sure you have correctly framed the problem. Ask: What user need is this solving? Why is this a problem for our users? How do we know this?
Not all user needs are equally important. Use data from your research to prioritise features and improvements based on what users need most.
Analyse user demographics data to determine the languages spoken by your users. This data can be obtained through user surveys, usage data analysis, or from market research. You may also find legislation for languages the government must support.
Read more about using data to make decisions.
Consider the feasibility and utility of providing multilingual support. This includes the translation of key content, interface elements, instructions, and forms into the most commonly spoken languages of your user base. Automated translation services can be a cost-effective starting point, but human review is essential to ensure cultural appropriateness and accuracy.
Even in the primary language of the service, avoid using complex jargon and technical terms. Use plain, simple language that can be easily understood by a broad audience. This will also facilitate more accurate translations.
Implement language detection based on the user's browser or system settings and offer the option for users to manually set their language preferences.
Use the Accept-Language
HTTP header to detect the language preferences set by the user in their browser or device settings. This can give you a default language to serve to the user initially.
Store the user's language preference (in cookies or user profiles) so that you can load the website or app in their preferred language in subsequent visits or sessions.
Options to switch languages are clearly visible and easily accessible across all pages of the service. Users should not have to search or dig deep into settings to find this option. See the design pattern for switching languages.
If you're offering support for languages that are read right-to-left (like Arabic or Hebrew), make sure your user interface can handle that transition seamlessly. This is not just about text direction; UI elements and navigation should also mirror to offer a consistent RTL experience.
Read more about using frontend frameworks.
Share research findings with team members, senior members or strategic leaders, and even the general public whenever practical.
The aim is not just to share information but also to generate dialogue and collaborative action based on the findings.
Organise Your Findings
Begin by grouping your user insights, key takeaways, and suggestions. This could be grouped by themes, user groups, and stages in the user journey.
Create a Simple Presentation
Document your findings. Each slide could represent a key finding or insight. Remember to use clear, simple language and include visual aids where possible to increase understanding.
Schedule a Playback Session
Invite team members and stakeholders to a meeting where you'll share your findings. Make time for discussion.
Document and Share
Share the presentation along with any additional notes from the discussion. This ensures that everyone has access to the information and can refer back to it in the future.
You might even consider publishing findings openly through a blog or similar format.
Once you're ready to go live, continuously monitor and evaluate the performance and usability of the service, and iterate the design accordingly to drive continuous improvement and optimise user experience.
At a basic level, all services should be tracking metrics such as:
User Satisfaction - Overall, how satisfied are users with your service? This can be measured through surveys, feedback forms, or by analysing user behaviour (e.g., how often they return to your service).
Task Completion Rate - What percentage of users successfully complete the tasks they set out to do on your service?
Error Rates - How often do users encounter errors or difficulties when using your service?
In addition to these basics, each service will likely have specific KPIs relevant to its unique goals and user tasks. Identify what these are and how you can measure them.
Run a session with your team to create a performance framework.
Use analytics tools to collect data on these KPIs. Google Analytics is a popular choice, but there are many other tools available. Make sure to set up your analytics tool to track the specific actions and events that correspond to your KPIs.
Implement a mechanism to collect user satisfaction data at the end of key user journeys. This could be a survey or a simple rating system.
See the pattern for collecting feedback
Do not wait until the end of the journey to collect feedback. Implement feedback mechanisms at key points throughout the user journey. This could be feedback forms on individual pages, live chat options, or proactive prompts asking users if they need help.
See the pattern for collecting feedback
Set a regular schedule to review your KPIs and user feedback. Use this data to identify issues and opportunities for improvement, and take action accordingly.
Foster a culture of inclusivity within the team and encourage ongoing education and awareness of inclusivity and diversity's best practices. [resource on co-design]
Accessible design isn't just for users with disabilities - it enhances usability for all users. Simple features like captions or clear language can help everyone.
Accessibility isn't just about permanent disabilities. Users may experience temporary or situational impairments, like a broken arm or a bright environment, where accessibility features can improve their experience.
Accessible design is particularly important for older adults who may experience changes in vision, hearing, and motor skills. Designing with accessibility in mind ensures your service is user-friendly for all age groups.
In many places, accessibility is not just an ethical duty but also legally required. Providing accessible services ensures everyone can use your service, regardless of their abilities.
Accessible design often results in more robust and flexible services. By prioritising accessibility, you make your service more resilient to future changes and adaptable to different technologies or platforms.
Incorporating accessibility from the start of the design process is efficient. Retrofitting accessibility features later can be more time-consuming and costly. Make accessibility a foundational part of your design process, not an afterthought.
Ensure your user testing and feedback collection includes a diverse range of users. Include users with disabilities and those from various backgrounds and experiences. This approach helps identify potential accessibility and inclusivity issues that might be overlooked by individuals without these experiences.
Inclusive Design Toolkit from Microsoft
To create a service that caters to all users, you must understand their unique capacities. Consider factors like:
Time available
Financial situation
Ease of access to an interface (device or person)
Interface capability and confidence
Service process-related confidence
Awareness of the service, its purpose, and access options
Ability to comprehend information
Mental health/emotional capacity
Trust in service robustness, security, reliability
Ability to provide required information
Willingness to use the service, at all or in the most cost-effective way
With this understanding, identify the potential barriers users might face when accessing and using the service. These barriers could be,
Physical: Disabilities that affect a person's ability to interact with interfaces.
Technological: Limited access to high-speed internet, up-to-date devices, or the latest software.
Cognitive: Cognitive impairments, learning disabilities, or language barriers that make the service hard to understand or use.
Economic: Economic limitations that restrict access to necessary technology or internet access.
Geographical: Limited internet access in rural or remote areas, or cultural or language differences in different regions.
Privacy and Security: Concerns about personal data usage or protection.
Having understood user capacity and potential barriers, you should design your service to be as inclusive as possible. This could involve simplifying processes, offering alternative access methods, or providing additional support where needed.
While digital public services offer many benefits, they may not be suitable or preferred for all users. Some users may lack the necessary technology or digital literacy, while others may simply prefer traditional methods. In these cases, consider offering alternative mechanisms for accessing the service, such as phone support or physical locations.
In all aspects of your design process, ensure principles of Gender Equality and Social Inclusion (GESI) are adhered to. It means your service should be accessible and fair to all users, irrespective of their gender, age, ethnicity, disability status, income level, etc.
Example
In a public healthcare service, implementing GESI principles led to the development of a more inclusive appointment scheduling system.
It was noticed that many women, especially from lower-income backgrounds, were unable to attend appointments during standard working hours due to their caregiving responsibilities. By extending service hours to evenings and weekends, and providing childcare services, the service became more accessible to this demographic, significantly increasing attendance rates.
Further reading:
A frontend framework, also known as a CSS framework, is a package consisting of pre-written, standardised code in files and folders. They give developers a base to build upon while still allowing flexibility with the final design. Essentially, a frontend framework provides a structured, reliable, and reusable template.
Efficiency: They save developers a significant amount of time by providing a foundation.
Consistency: By using the same framework, teams can maintain consistency across projects.
Responsiveness: Most frontend frameworks are built to be fully responsive right out of the box.
Community: Popular frameworks have a large community, which can offer support, additional tools and plugins to extend functionality.
Setting up a frontend framework largely involves downloading the framework's files and incorporating them into your development environment. The specific steps may vary depending on the chosen framework.
Considerations for choosing a frontend framework include the framework's community support, ease of use, performance, and compatibility with your project's requirements. One crucial aspect to consider is the level of support for accessibility and right-to-left (RTL) language support.
Here's a comparison of three popular frameworks:
Choose a frontend framework fitting your needs as the foundation for a reusable design system. This system, combining the framework's technical foundation with your specific visual styling and design guidelines, will ensure uniformity and accessibility across projects within your organisation. Regular updates to this living system will accommodate evolving needs and interaction patterns, solidifying an efficient and inclusive digital experience throughout government services.
\
React
Strong, with a lot of focus on making the web accessible.
Large and active community, many third-party libraries.
Native RTL support isn't included but libraries such as react-with-direction
can be used.
Moderate, requires knowledge of JavaScript and JSX.
Vue.js
Strong, with dedicated sections in the documentation about accessibility.
Growing rapidly, plenty of resources and libraries available.
No native RTL support, but possible with additional CSS and libraries.
High, simpler syntax and structure compared to React and Angular.
Angular
Strong, built-in accessibility features in Angular Material.
Large and active community, backed by Google.
No native RTL support, but can be implemented with additional CSS.
Low, steep learning curve due to complexity and depth of the framework.
Bootstrap
Good, most components are designed to be accessible.
Very large community, many templates available.
Built-in support with Bootstrap v4.0 onwards.
High, easy to integrate and get started with basic HTML and CSS.
Chakra UI (React based)
Very strong, all components are accessible and WCAG compliant.
Growing community, becoming a go-to choice for accessible component library.
Built-in support with RTL-friendly components.
High, easy to use with good documentation but requires understanding of React.
Style Guide: A style guide is a reference tool that establishes design and writing standards. It includes branding elements (logos, colour schemes), UI components, and coding standards, ensuring consistency across a product or set of products.
Frontend Framework: This is a structured package of standardised code (HTML, CSS, JS documents, etc.) that forms the foundation for designing a website or web application. Examples include React, Vue.js, and Angular.
Design System: A design system is an overarching guide that includes the style guide and coded UI components (often from a frontend framework). It houses design principles, visual design rules, coded components, and other standards guiding the creation of a range of products or services.
Creating a style guide is a crucial first step in building a comprehensive design system. It defines the visual aspect of the system which can later be expanded to include coded components, UX patterns, and more.
If a style guide does not exist already, here are the steps for its creation:
Audit Existing Designs - Review current services to identify common components and styles.
Create and Document Components - Develop reusable design components (like buttons or headers) and write clear guidelines for their use.
Define Visual Styles - Document your colour palette, typography, grid system, spacing, and other visual styles.
Ensure Accessibility - Incorporate guidelines to ensure your digital services are usable by all citizens, for example, colour contrast between text and backgrounds.
If you do not have a consistent style guide across government the creation, usage and, contribution to a common style guide should be included as a requirement for suppliers. This ensures the supplier's work aligns with the existing style guide and contributes to its improvement or expansion, leading to a more collaborative, efficient, and cohesive design ecosystem. As part of the RFQ:
Include a copy of the style guide if it exists - Make sure that suppliers have a copy of the existing style guide to understand its current state and requirements.
Require adherence to the style guide - Suppliers should demonstrate an understanding of the style guide and show how they will adhere to it.
Encourage contributions - Request that suppliers identify potential improvements or expansions to the style guide during their work, and include a process for proposing and implementing these changes.
Design the service to work well with other government services, systems, and platforms.
Identify potential integration points within your journey. Collaborate with relevant government agencies and stakeholders to align with broader interoperability initiatives and Building Block recommendations.
Making decisions based on needs
Choose the right level of security
Optimise load times and page performance
Account for connectivity issues
Make sure that the implementation of the Building Blocks and the overall digital government service meets the Web Content Accessibility Guidelines (WCAG) standards for accessibility.
WCAG provides a set of internationally recognised guidelines for creating accessible web content. Familiarise yourself with the guidelines to ensure your service meets the necessary accessibility requirements.
Web Content Accessibility Guidelines (WCAG)
Test the service using accessibility tools to identify and address any accessibility issues. These tools help simulate the experience of users with disabilities and uncover potential barriers.
Consider using screen readers, keyboard navigation, and colour contrast checkers, among other tools, to ensure your service is accessible to all users.
Service manual from the United Kingdom's Government on how to test for accessibility.
If you encounter complex accessibility challenges or require specialised knowledge, consider seeking expert assistance or consultation. Accessibility experts can provide guidance and support in ensuring your service meets the highest accessibility standards. They can help identify and address accessibility issues specific to your service and provide valuable insights throughout the design and development process.
Further reading:
The notion that citizens expect governments to use formal language may not be entirely accurate. Using consistent, simple, and clear language is a core principle of user-centric design.
By adopting simple language:
You enhance accessibility - Not everyone has the same reading level. Using simpler language makes your content accessible to a broader audience, including those with learning disabilities or for whom English is a second language.
You improve clarity and understanding - Using complex or technical language can be a barrier to comprehension. Simpler language ensures all users can understand the information being communicated.
You save time - When citizens can quickly understand the information they're reading, it reduces the time spent on misinterpretations and questions, leading to a smoother user experience.
Research exercises like highlighter testing have shown that simple language is more effective for comprehension. In these tests, participants highlight parts of the text they find difficult to understand, revealing areas where simpler language could improve comprehension.
Following guidelines like the United Kingdom's government Content Design guidance can assist in creating accessible and easy-to-understand content. Simplicity in language is a tool that enhances inclusivity and usability, reflecting a government that values its citizens' diverse capabilities and time.
Further reading: Testing for UX writers - know when your words are working.
Transparency: Working in the open allows stakeholders, other teams, and even the public to understand how decisions are made and progress is tracked. This transparency can build trust and enable informed discussions.
Collaboration: By making your work accessible, other teams can provide input, learn from your approach, and possibly contribute, fostering a collaborative ecosystem.
Reusability: Openly sharing your work means other teams can reuse and adapt your processes, tools, or code, avoiding duplication of effort and accelerating development across the board.
Feedback and improvement: Working in the open invites feedback from a wider audience, which can bring different perspectives and promote continual improvement.
Open source your code: Where possible, and with the necessary security considerations, share your code repositories publicly. This allows other developers to learn from, reuse, or contribute to your code.
Share your processes and decisions: This can be done via blog posts, open meetings, or shared documents that detail your working practices, decision-making processes, and project progress.
Invite feedback: Provide channels for feedback on your work, whether that's through comments on a shared document, feedback on a blog post, or interactions on a code repository.
Promote open standards: Adhere to and advocate for open standards in your work. This not only aids in compatibility and interoperability but also supports a wider culture of openness.
By working in the open, government services can not only build more efficient and user-centric digital services but also foster a culture of collaboration and learning that extends beyond individual teams or projects.
GovStack offers a robust set of well-tested patterns for common user journeys. These can serve as a foundational structure for your services, presenting an outline for the necessary pages within your user journey and providing guidance for the content on each page.
While these patterns offer a solid starting point, it is important to note that they do not provide coded or designed components. For implementing these aspects, refer back to our guidance on setting up a front-end framework.
Whether employing GovStack patterns or creating your own, maintaining consistency across your government services is key. After establishing your patterns, make sure to test the end result with users. This will ensure that your service is not only consistent but also user-friendly and effective.
Consider potential integration points and interoperability requirements early in the design process, involving relevant stakeholders, including the Building Blocks development team.
Identify functionalities that can be provided by other services, for example, departmental registries.
Integrate these services using their APIs.
Test the integrations to ensure they work correctly.
Be prepared to handle any downtime or changes to these services.
Follow established standards and guidelines for multi-modal design, ensuring consistency and usability across different interaction modes.
Consider user expectations and preferences for different interaction modes, ensuring inclusivity and accessibility for all users.
Account for potential limitations and constraints of different platforms, systems, and devices, while maintaining interoperability and multi-modality.
Make sure your technology, infrastructure and systems are accessible and inclusive for all users.
Identify the various channels through which users will interact with your service (for example, web, mobile, SMS, call centre, physical location, etc.).
Consider the strengths and limitations of each channel. For instance, certain tasks might be more easily accomplished on a desktop than on a mobile device, or vice versa.
Design your service so that users can easily switch between channels as needed. This might involve making certain data or functionality available across multiple channels, or designing the service so that progress made on one channel can be saved and continued on another.
Consistency is crucial across all platforms. Keep a consistent design language (colours, fonts, layouts) and user experience (navigation, interaction patterns) across all channels.
Consider the use of responsive or adaptive design to ensure your service is usable on a variety of screen sizes and device types.
In many contexts where GovStack Building Blocks are being used, internet bandwidth may be slow, therefore it is essential to optimise load times and minimal data transfer.
Use Google Lighthouse to test your web application's performance.
Identify areas for improvement based on the test results.
Implement improvements such as using compressed images, optimising front-end code, leveraging CDNs, etc.
Retest and continue to optimise as needed.
From a design perspective, only use necessary images, optimise images for the web, use CSS and SVG instead of images where possible, minimise the use of different font families, and optimise font loading if custom fonts are used.
Use AJAX/Fetch mechanisms for asynchronous and partial updates of the UI.
Choose proportionate security to control and monitor your technology programme. Security should protect your information technology and digital services, and enable users to access the data they need for their work. GovStack offers specific guidance for designing a secure system.
Evaluate the sensitivity of the data you're handling.
Based on the evaluation, choose appropriate encryption methods and robust user authentication systems. Use the OWASP Cheat Sheet Series as a guide:
Authentication Cheat Sheet: This provides guidance on implementing secure authentication systems, which is a fundamental aspect of security.
Session Management Cheat Sheet: This covers the best practices for handling user sessions securely.
Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet: CSRF is a common web application vulnerability that your users should be aware of.
Cross-Site Scripting (XSS) Prevention Cheat Sheet: XSS is another common vulnerability, and this cheat sheet provides guidance on how to prevent it.
Transport Layer Protection Cheat Sheet: This covers how to use SSL/TLS, which is vital for encrypting data in transit.
Input Validation Cheat Sheet: Input validation is an essential measure for preventing many types of attacks.
SQL Injection Prevention Cheat Sheet: SQL Injection is a common and dangerous vulnerability, and this cheat sheet provides guidance on how to prevent it.
HTML5 Security Cheat Sheet: If your users are using HTML5, this cheat sheet covers many of the new security considerations that come with it.
Implement the security measures in your system.
Test and adjust the security measures to ensure they provide the needed protection without overly impeding usability.
Make sure citizens’ rights are protected by integrating privacy as an essential part of your system.
Define the data you need to collect for your service.
Use the Privacy by Design framework to integrate privacy controls into your system.
Create a transparent privacy policy that outlines what data you collect, why you collect it, and how it's used and stored. You can use the privacy policy design pattern.
Ensure compliance with any applicable data security and privacy protection laws.
Account for connectivity issues in different regions, considering the deployment options provided by the Building Blocks.
Assess Connectivity Conditions and User Needs: Understand the network conditions under which your users will be accessing your service.
Optimise Web Performance: Minimise the size of your resources and fix performance issues.
Implement Progressive Loading: Design your service so that it loads the most critical content first.
Use a Content Delivery Network (CDN): If your users are spread across a wide geographical area, using a CDN can speed up load times.
Utilise Service Workers for Offline Functionality: Service workers can intercept network requests and serve cached responses. Google's Workbox can help with this.
Choose the Right Caching Strategies: For instance, you might cache static resources for faster loading and implement a "network first, then cache" strategy for dynamic content.
Implement Local Storage: Consider storing some data locally on the user's device.
Test Under Low-Connectivity Conditions: Use browser developer tools or network throttling tools to simulate various network conditions.
Test the service, verifying its compatibility with different devices, browsers, and assistive technologies
Identify the range of devices, operating systems, and browsers your users may use.
Use testing tools like BrowserStack or LambdaTest to test your service on these platforms.
Make necessary adjustments to ensure compatibility across platforms.
Continuously test new versions of your service on these platforms.