Frontend DDaT plan presentation

Matt Hobbs Head of Frontend Government Digital Service @TheRealNooshu This is a title side

DDaT for the Frontend Community Update on DDaT ● Plan moving forwards ○ Sort out GDS first, then release into x-gov ● Built off the back of the UR work that Tom B conducted

What is the DDaT Profession Capability Framework? DDaT stands for Digital, Data and Technology. The capability framework covers the roles in government and also the skills that are required to do them.

● ● ● ● ● ● ● ● ● ● User centred design: graphic designer User centred design: interaction designer User centred design: user researcher Technical: software developer Technical: technical architect Technical: data architect Data: data scientist Product and delivery: business analyst Product and delivery: delivery manager Product and delivery: product manager GDS Some of the current roles in the framework are: ● graphic designer ● user researcher ● data scientist ● product manager

Technical: frontend developer 😢 GDS So where is frontend? Good question. Apparently according to Louise Downe… missed meeting.

GDS So the plan is to get FE development added to the capability framework. I personally see FE development sitting between Interaction Design and Software Development, a mixture between the two. So using these as a foundation, as well as the UR that Tom conducted that’s where I’ve started. UR asked 69% of the community, with at least one developer from each programme to cover all GDS products.

What work is involved? So what does this really mean in terms of the work to be done?

● Role description ● Roll skill levels (summary of below) ● Separate seniority “skills they need”: ○ Principal ○ Lead ○ Senior ○ Mid ○ Junior ○ Apprentice GDS Well all the roles are structured in the same way (like so):

● For senior, lead, and principal it contains two paths ○ technical specialist career path ○ management career path ● Just because a seniority is listed in DDaT doesn’t mean it will exist in practice (x-gov requirement) GDS From senior upwards it contains two paths. It is worth noting though that the actual skills are just duplicated for both paths. Description, skill level and what it means may change between the two.

Skills table GDS Here’s an example of the skills table from Software Developer. Columns in red don’t change per seniority level. They are the same from apprentice up to principle. Columns in green change depending on seniority level. These will be adjusted as required depending on expectations for the specific level.

Interaction Designer Software Developer Essential skills ● Communicating information ● Digital perspective ● Evidence and context-based design ● Prototyping ● Understanding constraints ● User focus ● Prototyping in code ● Leadership and guidance Essential skills ● Development process optimisation ● Modern standards approach ● Programming and build (software engineering) ● Service support ● Systems design ● Systems integration ● User focus Desirable skills ● Agile working ● Community collaboration ● Strategic thinking Desirable skills ● Availability and capacity management ● Information security ● Prototyping GDS And here you can see the skills listed for Interaction Designer and SD here.

Interaction Designer Software Developer Essential skills ● Communicating information ● Digital perspective ● Evidence and context-based design ● Prototyping ● Understanding constraints ● User focus ● Prototyping in code ● Leadership and guidance Essential skills ● Development process optimisation ● Modern standards approach ● Programming and build (software engineering) ● Service support ● Systems design ● Systems integration ● User focus Desirable skills ● Agile working ● Community collaboration ● Strategic thinking Desirable skills ● Availability and capacity management ● Information security ● Prototyping GDS Looking at both sets as well as Tom’s user research, I’ve pulled out the skills that seem most relevant to FE. A large number of these were mentioned in the user research sessions with the community.

Frontend Developer Essential skills ● Communicating information ● Modern standards approach ● Programming and build (software engineering) ● Prototyping ● Systems design ● Systems integration ● User focus ● Leadership and guidance Desirable skills ● Agile working ● Community collaboration ● Strategic thinking GDS Bringing it all together gives this:

Frontend Developer Essential skills ● Accessibility Desirable skills ● Web Performance Optimisation GDS But there are two skills exclusive to FE development that I also want to add. ● I feel accessibility is a core part of the work a frontend developer does at GDS, and this should also apply to developers across the whole of government. ● Web performance I have as a desirable skill. The Performance Golden Rule states that between 80-90% of end-user response time is spent on the frontend. So I’d like FE developers to at least be aware of the impact of performance on users (you don’t have to be an expert)

Frontend Developer Essential skills ● Communicating information ● Modern standards approach ● Programming and build (software engineering) ● Prototyping ● Systems design ● Systems integration ● User focus ● Leadership and guidance ● Accessibility Desirable skills ● Agile working ● Community collaboration ● Strategic thinking ● Web Performance Optimisation GDS So the final list I have looks like this. So this is the base that I’m working from at the moment. Each of these skills needs a skill description that is both relevant to a FE developer working in GDS (and ultimately x-gov), and vague enough that they can be moulded to fit a wide variety of FE developers doing slightly different jobs in different programmes and departments. It’s a balancing act between being too specific so nobody meets the requirements, or not specific enough and it becomes useless for FE developers.

What do the skills mean? So let’s break down what each skill means:

Essential skill: Communicating information Currently in DDaT: Yes for Interaction Designers. Description of skill for ID’s: Able to communicate effectively across organisational, technical and political boundaries, understanding the context. Makes complex and technical information and language simple and accessible for non-technical audiences. Able to advocate and communicate what a team does to create trust and authenticity and can respond to challenge. Tweaked description of skill for FE’s: Able to communicate effectively across organisational, technical and political boundaries, understanding the context. Makes complex and technical information and language simple and accessible for non-technical audiences. Able to advocate and communicate what a team does to create trust and authenticity and can respond to challenge. Able to collaborate effectively with other organisational disciplines. GDS Essential skill: Communicating information - part 1

Essential skill: Communicating information Mentioned in community user research: Yes ● mention of x-gov conversations between individuals and teams ● supporting colleagues across government to make work more accessible ● raising capability of others to do accessibility work in GDS and across government ● community support for the Design System ● multiple instances of working with other disciplines Practical FE examples: ● working on a team with multiple disciplines to solve problems ● creating clear and concise PR’s for other developers to review and future context sharing ● creating and editing documentation to be shared with your team, department or across multiple departments (open source) ● knowledge sharing internally at show / tell sessions, huddles, tech community meetups ● presenting work externally (outside government) including non-technical audiences ● working with a BE developer to manipulate data into the right shape for the interface GDS Essential skill: Communicating information - part 2

Essential skill: Modern standards approach Currently in DDaT: Yes for Software Developers. Description of skill for SD’s: Uses a modern standards approach throughout automation and testing. Tweaked description of skill for FE’s: Uses a modern standards approach throughout development as well as automation and testing. If there’s a need to deviate from standards, they can evidence reasons for doing so, based on how the system is used and how that differs from the approach advocated in the standard. GDS Essential skill: Modern standards approach - part 1

Essential skill: Modern standards approach Mentioned in community user research: Yes ● consultant advising on accessibility needs detailed understanding of WCAG standards, including the reasoning behind the approaches they describe ● head of community responsible for defining approach to technical subjects so is required to understand detail of standards involved ● interpreting WCAG standards to ensure Design System code will be compliant when integrated into multiple products ● developer on Design System writes guidance and documentation used across government Practical FE examples: ● share information and best practice across communities, departments, disciplines ● consulting W3C standards and specifications for information on how a technology is expected to be implemented ● contribute to modern standards in the form of feedback on relevant PR’s, reporting bugs to browser vendors and involvement with the open standards team GDS Essential skill: Modern standards approach - part 2

Essential skill: Programming and build (software engineering) Currently in DDaT: Yes for Software Developers. Description of skill for SD’s: Uses agreed security standards and specifications to design, create, test and document new or amended software. Tweaked description of skill for FE’s: Uses agreed security standards and specifications to design, create, test and document new or amended software. GDS Essential skill: Programming and build (software engineering) - part 1

Essential skill: Programming and build (software engineering) Mentioned in community user research: Yes ● almost all the community interviewed are writing code ● most of those who write code mentioned writing tests for it ● some in the community are involved in backend work ● two people in the community mention code quality ● three people in the community talk about building code artefacts Practical FE examples: ● writing code on a day-to-day basis ● participating in code reviews both in-person and and via PR’s ● debugging code and code refactoring ● cross-browser / cross-device development and testing ● mentoring and pair programming ● technical decision making around use and application of a technology ● using data to inform decision making GDS Essential skill: Programming and build (software engineering) - part 2

Essential skill: Prototyping Currently in DDaT: Yes for Software Developers and Interaction Designers. Description of skill for both: Able to apply technical knowledge and experience to create or design workable prototypes, both programs and physical outputs. Understands parameters, restrictions and synergies. Tweaked description of skill for FE’s: Able to apply technical knowledge and experience to create or design workable prototypes, both programs and physical outputs. Understands parameters, restrictions and synergies. Notes: Point for discussion, is this something that a FE developer does? Wasn’t really mentioned in user research. Could this be a desirable rather than essential? GDS Essential skill: Prototyping - part 1

Essential skill: Prototyping Mentioned in community user research: Yes ● One person mentioned prototyping in their work ● Mainly done because the designer wasn’t technical, becomes the default person ● Mocking of API’s. Need to go in the DB sometimes to mock the data into a usable format ● Creating prototypes to test new technologies Practical FE examples: ● Prototyping to look for the feasibility of a design and to test assumptions ● Prototyping to test a standard against its implementation in browsers and operating systems (e.g. number input field) ● Prototyping for testing a new technology for guidance (e.g. service workers) ● Prototyping for user testing to get useful results from user research settings ● Mocking of API data from Backend to Frontend ● Technical investigation into programme level changes / requirements ● Prototyping to test how a user interface pattern works across operating systems / assistive technologies / devices / browsers GDS Essential skill: Prototyping - part 2

Essential skill: Systems design Currently in DDaT: Yes for Software Developers. Description of skill for SD’s: Creates the specification and design of systems to meet defined business needs. Has the ability to work with business and technology stakeholders to translate business problems into technical designs. Able to visualise the ideal user service, come up with design ideas and possible design approaches. Explores different approaches to solving problems. Tweaked description of skill for FE’s: Incorporate the specification and design of user interface systems to meet defined business needs. Has the ability to work with business and technology stakeholders to translate prototypes into technical designs. Able to visualise the ideal user service, come up with design ideas and possible design approaches. Explores different approaches to solving problems. GDS Essential skill: Systems design - part 1

Essential skill: Systems design Mentioned in community user research: Yes ● ● ● ● ● two participants mentioned systems design in the UR sessions “Data coming in from the DB, modify the UI to fit the data” “Work with a BE developer to make the data fit the UI” “how you write CSS in a way that it doesn’t come back and bite you later on” “how you version this stuff, what is a breaking change for the code’s consumers?” Practical FE examples: ● ● ● ● ● ● works with the designer to identify any accessibility issues and help them make better decisions important to understand how the data flows in and out of the system so can work with a BE developer to map this on the frontend understands the advantages / limitations of any templating language in use and adapt accordingly prototyping and testing different solutions to influence any system design decisions to be made communication and documentation around the reason for the user interface being developed the way it has been feedback into the specification (either design or technical) to take into account frontend considerations that should be made. GDS Essential skill: Systems design - part 2

Essential skill: Systems integration Currently in DDaT: Yes for Software Developers. Description of skill for SD’s: Integrates and tests components, systems and their interfaces to create operational services. Tweaked description of skill for FE’s: Integrates and tests components, systems and their user interfaces to create operational services. GDS Essential skill: Systems integration - part 1

Essential skill: Systems integration Mentioned in community user research: Yes ● mentioned by three users in the user research sessions ● integration of frontend components (from various GOV.UK libraries) into the application ● integration of third-party payment platforms into our existing codebase ● writing of integration tests to check see if the application works as expected Practical FE examples: ● integration of frontend components into a backend stack ● writing integration tests to test for proper functionality and to monitor regressions ● integration of third-party systems into an existing codebase (e.g. Google Pay) ● working with colleagues in other disciplines to create and execute integration into a system ● documentation around the process and learnings of a system integration ● structure data for other developers to follow, create API mocks to simulate an integration ● involvement in a backend language / pair programming with a software developer to aid integration GDS Essential skill: Systems integration - part 2

Essential skill: User focus Currently in DDaT: Yes for Software Developers and Interaction Designers. Description of skill for both: Understands users and can identify who they are and what their needs are based on evidence. Able to translate user stories and propose design approaches or services to meet these needs and engages in meaningful interactions and relationships with users. Puts users first and can manage competing priorities. Tweaked description of skill for FE’s: No tweaks, also seems to fit the FE requirements GDS Essential skill: User focus - part 1

Essential skill: User focus Mentioned in community user research: yes ● mentioned multiple times by most participants ● “understand what users need to do and how they use their web browser” ● “make it easy for users to update and to avoid frequent breaking releases” ● “frontend developer needs to pair with designers and get into the space of the users, seeing things from their perspective” Practical FE examples: ● participate and run user research sessions to collect data to inform decisions ● active consideration of users in design and build ● focus on accessibility testing across a range of devices ● performance considerations made and how these can affect the user ● use of progressive enhancement to maximise access to for our users ● creation of prototypes for users to collect evidence and inform design / build ● identification of a specific user problem, collaborate with a multidiscipline team to solve ● consideration of our users demographic & technology to inform the build process GDS Essential skill: User focus - part 2

Essential skill: Leadership and guidance Currently in DDaT: Yes for Interaction Designers. Description of skill for ID’s: Interprets vision to lead on decisions. Creates a continually collaborative environment and sustains a good service. Understands and resolves technical disputes across varying levels of complexity and risk. Solves issues and unblocks problems. Drives teams and sets the pace, ensuring teams are delivering. Manages risk including effectively managing and tracking the mitigation of risks. Manages various dependencies across teams, departments and government as a whole. Tweaked description of skill for FE’s: No tweaks, also seems to fit the FE requirements GDS Essential skill: Leadership and guidance - part 1

Essential skill: Leadership and guidance Mentioned in community user research: yes ● guidance was mentioned by two users ● leadership mentioned by one user ● “Good guidelines on building things so they’re accessible and robust.” ● “Writes guidance and documentation to give instructions and explain decisions made” Practical FE examples: ● resolve technical PR’s and unblock problems for other colleagues ● leadership displayed in setting the direction of a programme / team ● recruitment and influence others to set teams priorities ● collaborate across teams / programmes to meet a common goal in the frontend space ● clear and concise guidance written for both users and developers ● contribution to department / community wide guidance ● cross-community / cross-department / cross-government guidance given in various formats (email, slack, presentations, meetups) GDS Essential skill: Leadership and guidance - part 2

Essential skill: Accessibility Currently in DDaT: No, specific to Frontend Developers. Description of skill: Able to apply technical knowledge and experience to create accessible user interfaces that put the users needs first. Understands users have different accessibility needs and is willing to become an advocate for users. Tests components and pages against accessibility standards across many devices and is able to fix issues discovered. GDS Essential skill: Accessibility - part 1

Essential skill: Accessibility Mentioned in community user research: yes ● mentioned by almost everyone interviewed ● “test using assistive technologies and with users with access needs” ● “moved to GDS to work more on accessibility” ● “We prioritise accessibility and well-understood technologies” Practical FE examples: ● use the empathy lab to test for accessibility issues ● use an external device lab to test for accessibility issues ● create prototypes and test pages to investigate accessibility issues across different browsers and devices ● run accessibility sessions within GDS and across other departments ● present accessibility findings via presentations and blog posts ● work to prioritises accessibility testing at a team / programme / department level ● automate the testing for accessibility issues ● writing accessibility guidance for internal and external people GDS Essential skill: Accessibility - part 2

Desirable skill: Agile working Currently in DDaT: Yes for Interaction Designers. Description of skill for ID’s: Is aware of and understands agile methodology and how to apply an agile mindset to all aspects of their work. Has the ability to work in a fast paced, evolving environment and utilises an iterative method and flexible approach to enable rapid delivery. Unafraid to take risks, willing to learn from mistakes and appreciates the importance of agile project delivery for digital projects in Government. Able to ensure the team has a situational awareness of what each other is working on and how this relates to practical government objectives and user needs. Tweaked description of skill for FE’s: No tweaks, also seems to fit the FE requirements GDS Essential skill: Agile working - part 1

Desirable skill: Agile working Mentioned in community user research: Yes ● Mentioned by 2 participants in the user research: ● “Work done in either Agile or Kanban lifecycle.” Practical FE examples: ● Face-to-face communication is used to communicate information across the team(s) ● Working as part of an agile multidisciplinary team ● Involvement in agile ceremonies like daily standups, sprint planning, retrospectives etc ● Working in sprints to deliver work ● Ability to fail fast and iterate quickly to solve problems GDS Essential skill: Agile working - part 2

Desirable skill: Community collaboration Currently in DDaT: Yes for Interaction Designers. Description of skill for ID’s: Contributes to the work of the community, building successful teams through understanding team styles and influencing as well as motivating team members. Gives and receives constructive feedback, facilitating the feedback loop. Facilitates conflict resolution within teams, ensures the team is transparent and that the work is understood externally. Able to help teams maintain a focus on delivery while being aware of the importance of professional development. Tweaked description of skill for FE’s: No tweaks, also seems to fit the FE requirements GDS Essential skill: Community collaboration - part 1

Desirable skill: Community collaboration Mentioned in community user research: yes ● Two people mentioned working across the community ● “work will filter down through the frontend community to project teams” ● “Contributes to planning of future work in the forms… of work around community” ● “supporting code and/or guidance contributions from members of the community” Practical FE examples: ● Contribution to the GOV.UK Design System ● Constructive feedback on the work of others in the community (e.g. PR’s, guidance, documentation etc) ● Sharing of knowledge and learning at Frontend community meetings ● Contribution to the GDS Way ● Managing contributions to the GOV.UK Design System ● Working with other teams to solve a specific problem ● Presenting at huddles and meet-ups (both internal and external) GDS Essential skill: Community collaboration - part 2

Desirable skill: Strategic thinking Currently in DDaT: Yes for Interaction Designers. Description of skill for ID’s: Able to have an overall perspective on business issues, events, activities and an understanding of their wider implications and long-term impact. This could include determining patterns, standards, policies, roadmaps and vision statements. Can focus on outcomes rather than solutions and activities. Tweaked description of skill for FE’s: No tweaks, also seems to fit the FE requirements GDS Essential skill: Strategic thinking - part 1

Desirable skill: Strategic thinking Mentioned in community user research: yes ● Mentioned by three participants in the user research ● “documents to describe a strategy for the topic and research to evidence chosen decision” ● “help them make decisions and plan a strategy around it” ● “Working with Tech Lead and Product Manager on strategy and decisions.” Practical FE examples: ● Working with other members of the team to plan future sprints and work ● Creating a plan for adoption / implementation of a component into a system ● Adapt work to due to shifting priorities and create a strategy to maximise output ● Understand dependencies in a system and work within those constraints ● Evaluate previous team work and build strategies to remedy issues found GDS Essential skill: Strategic thinking - part 2

Desirable skill: Web Performance Optimisation Currently in DDaT: No, specific to Frontend Developers. Description of skill: Understands the delivery of assets can have a large impact on user experience. Can apply technical knowledge and experience to remove bottlenecks to improve performance. Can use various sources of data to monitor and identify performance issues. Explores different approaches to solving performance problems. GDS Essential skill: Web Performance Optimisation - part 1

Desirable skill: Web Performance Optimisation Mentioned in community user research: yes ● Five participants mentioned web performance in user research ● “…did research around performance impact” ● “…use certain functions over others due to performance gains” ● “…handles the performance and accessibility of the interface” ● “Start with what is perceived by users” Practical FE examples: ● Make considerations about assets on the performance of a page ● Optimisation of the workflow / asset pipeline to minimise page weight ● Suggest / research / test performance optimisations ● Considers the users need to get to content, no matter what device / connection speed ● Auditing of a page / component to suggest and implement optimisations ● Use of third-party tools (Lighthouse, WebPageTest, Speedcurve) to evaluate current performance GDS Essential skill: Web Performance Optimisation - part 2

Capturing user research themes So do the selected skills cover the themes that Tom’s user research found?

GDS So Tom created this handy spreadsheet to capture all the overarching themes mentioned in the user research sessions.

Identified User Research Themes Shared ● Planning ● Code quality ● Writing code ● Building code artefacts ● Testing code ● Accessibility ● Performance ● Working with other disciplines ● Deploying code ● Researching ● System design ● Responsibility for others work ● Knowledge of design subjects ● Doing backend stories Related to software products ● Releasing code to users ● Community support Around accessibility consultancy ● Helping colleagues at GDS produce more accessible work ● Supporting colleagues across government to make their work more accessible ● Raising capability of others to do accessibility work in GDS and across government Around Head of Frontend ● Where cross-GDS frontend work comes from ● Deliverables of cross-GDS frontend work ● Consumers of cross-GDS frontend work ● Using influence to get work done ● Identifying risk GDS Here are the themes that Tom’s research found. Can these be mapped to the DDaT skills?

GDS This is the result of the mapping. Full sheet can be seen here. An example of how to read this sheet: “Planning and working with other disciplines can be considered part of the Communicating Information DDaT skill” Each of the UR themes can be mapped to one or more DDaT skills. I’d consider this a good fit.

Creating a narrative So is it possible to create a narrative about what a frontend developer does at GDS?

A Frontend developer (at GDS) is someone who uses a modern standards approach to software engineering. They lead on decisions, can unblock problems and solve issues. They pride themselves on creating accessible user interfaces that are performant and serve user needs. They build working prototypes to test with users. Once tested, these prototypes are translated into production ready user interfaces for integration into services. They collaborate closely with other disciplines and can analyse technical information and make it digestible for all audiences. Ideally a frontend developer has experience working in an agile manner. They are willing to contribute to the work of the community. This includes understanding the wider implications and long-term impact of their work and that of the community. GDS By combining these skills together It is possible to create a narrative to describe what the DDaT definition of a Frontend developer could look like at GDS. Note the “at GDS” can hopefully be removed to cover all Frontend developers across government. One step at a time…

Next Steps So what are the next steps in this process?

1. Lean coffee discussion, a. Agree on the essential & desirable skills b. Multiple sessions if required 2. Populate the “skill level” and “what the skill level means” for each seniority level 3. Pass back to Frontend community for internal review 4. Completed documentation passed to DDaT 5. DDaT works with x-gov community for validation GDS ● ● ● ● We’ll have a lean coffee session after this to discuss topics. I’d like to agree the top level skills, or atleast rule out any blockers today. I’ll then populate the “skill level” and “what the skill level means” across all levels. Looking for input on this. Once done, Internal review Once agreed pass back to DDaT for x-gov input / validation

Thanks! Matt Hobbs @TheRealNooshu This is your end slide