Project approach
Docs Planning
Table of contents
- Project goals & objectives
- Project phases
- Project Management approach
- Information Architecture approach
- Design approach
- Content strategy approach
- Technical approach
W3C is the standards body of the web. Their mission is to “lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.”
W3C celebrated its 25th anniversary last October and plans to incorporate as a legal entity in 2022.
The current W3C website was last redesigned in 2008 and needs redesigning. In February 2020, Studio 24 won the contract to incrementally redesign the W3C website, w3.org.
Project goals & objectives
The brief W3C came to Studio 24 with for this project is:
W3C is looking to incrementally redesign its Website and revise the information architecture, to show the world who we are and what we offer, to improve the organization and usability of the website for key audiences, communicate the W3C brand more effectively, and motivate people to participate in the organization.
Key business goals are to:
- Clearly communicate who W3C are and what they offer
- Update the Information Architecture to ensure the site is easy to use for key audiences
- Review content to ensure it meets user needs, is up-to-date and effective
- Communicate the W3C brand more effectively
- Create a set of design styles to use across the W3C site, focussing on high-level pages
- Motivate people to participate in the organization
- Work in the open to bring the W3C community along in the project and increase stakeholder buy-in
The key deadline for this project is:
W3C wants to launch the newly redesigned website by January 2021.
Successful outcomes for this project are:
- Increase usability of the website for a wide range of users
- Modern, redesigned website that reflects W3C brand
- Meets WCAG 2.1 AA or ideally AAA accessibility guidelines
- A fast-loading website that works reliably across a range of devices and browsers
- A CMS to allow non-technical staff to manage content
- A documented set of HTML templates to help create future web pages
- A platform the W3C Systems Team is able to maintain and develop on
- Launch by Jan 2021
Please note we need to confirm these outcomes with W3C and whether we can identify any KPIs to measure on the new site.
The desired outcome is to define the direction and approach of the project so we’re moving in the right direction and have agreement across the team. The output is this document and a number of other documents summarising our research undertaken to date.
Project phases
The project will be split into a number of phases, that represent different areas of work.
Discovery phase
March to April.
Initially Studio 24 will be focussed on research and planning to help define the project and give us the right direction. Please note design thinking continues throughout the process and isn’t just constrained to Discovery.
Information Architecture phase
April to May.
The team is next focussed on a detailed review of your users and content to define the Information Architecture for the site.
Design & Production phases
May to August.
The team will then move into design and development work throughout the project. Some of this work will start early, we prefer an iterative approach where we research, design, test and repeat this process as necessary.
In the project brief W3C referred to the alpha site as an “internal/private site”. We normally refer to an alpha as something to test with users, for example a rough prototype. We won’t formally use the term alpha in this project, but we may create static HTML prototypes to help test our work with users.
In August we plan to create a Private Beta, which will be a selection of fully-built out web pages integrated with the new CMS and the updated design. This will allow us to undertake user testing with a small group of users from W3C.
Public beta phase
October.
The Public Beta will be a public version of the private beta already created, intended to publish on beta.w3.org to gather public feedback on the work-in-progress.
Iterative improvement phases
October to December.
After the private and public beta sites are published we expect to iterate the website based on user feedback. Other sections of the site will be built to ensure we build enough to relaunch the website with. This may require assistance from the W3C Systems Team to build out pages.
Launch
January 2021.
Where we launch the new website on www.w3.org
Further information on our approach to different phases appears below. More detailed information on specific elements of each phase will be delivered in separate, dedicated documents.
Project Management approach
Led by the PM.
We run projects using an iterative approach - we plan, build, test and improve.
We recommend solutions that we feel best fit the project. We iterate those solutions with you throughout the project – to make the final product the best it can be.
The web is an infinite place – there are always new ideas to try and ideas to tinker with. But project scope is limited by time and budget.
We will work with you to define priorities through the project, so we deliver the most important parts in time and budget.
We use the following priority order (MoSCoW):
- Must have (MVP – minimum viable product)
- Should have
- Could have
- Won’t have at this time
Alongside the project work a number of PM deliverables will be worked on throughout the project, these include:
- Defining project stakeholder roles and responsibilities
- Risk register
- Test strategy
Information Architecture approach
Led by the Design & Content team.
Websites fundamentally are about content, that’s why users come to a site. W3C has a huge volume of content on its website, spanning back the entire lifetime of the web. There are a mix of pages from more corporate, high-level pages to working groups, technical specifications, blogs, original HTML documents from the early days of the web and far, far more.
This represents a huge challenge in how to review and analyse how best to make changes to what is an industry-leading website. Like all websites, with age comes organic growth, and the current W3C site is large and unwieldy.
We use a technique called “job stories” to help identify specific tasks that users want to achieve. These are similar to user stories, but are more specific and useful to us when designing your site. They are in the form:
When [there’s a particular situation]
I want to [perform an action or find something out]
So I can [achieve my goal of]”
https://contentdesign.london/content-design/user-stories-and-job-stories/
For example: “When I am building a website, I want to check how to meet accessibility guidelines for tables so I can ensure my website content is AA compliant.”
Our approach to IA is:
- Research what content you have
- Identify user needs
- Undertake user research to help prove what people want
- Write job stories to communicate why people come to your site
- Use these to make recommendations on site structure and how to organise content
- User testing to help validate our decisions are sensible ones to move forward with
Work in this phase will include:
- Content audit (high-level, since the w3.org site is so large)
- Analytics review - review data to help learn how users use your current site
- Identifying user groups - different audiences for the site, what they want to do on the site
- Stakeholder interviews
- Exploring business goals
- User surveys
- Job stories - identify user tasks, why people come to your site
- Identifying core content - important content that meets user needs
- Diagrams - to help illustrate information hierarchy (e.g. site map, content grouping)
- Wireframing - visually simple page layouts to help communication site navigation and content groupings
- Mapping user journeys
- User testing (e.g. navigation tree testing)
The output of this phase will be:
- Information Architecture report which confirms site structure and content organization, along with a number of design artefacts that support this (e.g. diagrams, wireframes).
- Decision on what content is in and out of scope.
Design approach
Led by the Design team.
Studio 24 takes a human-centred approach to design and development on the web. Our aim is to create websites that work for everyone, regardless of device, internet connection speed or ability. This is often described as user experience design and inclusive design.
We plan to take a layered approach to design on this project. Design starts with understanding the users and your content, defining what they want to do, helping design a website structure (information architecture) and content design that works for your users. We aim to take decisions informed by user research.
We design and build all sites to be responsive, understanding we cannot make assumptions about how people use your website. Performance is an important factor in this.
We work with wire framing and high-level prototypes to help illustrate how users move through your site. On this project we want to move into HTML as soon as possible, to help with the user and technical testing process.
Visual design work will happen alongside and we’ll layer on visual design to the prototypes as we move through the project.
Design is an iterative process, it will continue through the project and we’ll make changes as work is built and tested. The aim is to test in the browser as early as possible and to create the best user experience we can deliver.
Work in this phase will include:
- Establish design direction
- Building HTML prototypes to explore design (starting with typography, moving to basic page layouts to illustrate user journeys)
- User testing
- UX design - user-experience design work to design page layouts and content components (e.g. Blog article, Homepage)
The output of this phase will be design artefacts (e.g. design direction, visual designs, lists of page templates).
Content strategy approach
Led by the Content team.
Content strategy work helps define how content meets business and user goals. This phase builds on the Information Architecture work to help define content structure, how page content is managed in a CMS, how we can help W3C effectively write new content and manage the workflow of adding new content in a CMS. We also look at how Search Engine Optimisation (SEO) can help make content more effective and searchable.
Work in this phase will include:
- Define list of page templates and components that make up content
- Define content structure
- Define how content needs to be modelled in a CMS
- Content migration strategy
- Review editorial and workflow processes
- Content writing guidance
- SEO planning
- How analytics are integrated into the site
- How to deal with legacy content on the site
- URL strategy - review how high-level URLs should be structured and a redirect strategy to support this
The output of this work will be documents that outline our recommendations in these key areas. Guidance on writing content will be added to the Design System.
Technical approach
Led by the Technical team.
The technical work is focussed on how we deliver the work. Given the size and age of the W3C site, there are a number of challenges
Research
Most of this work has happened in the Discovery phase.
- Audit of existing systems - to help understand technical constraints, existing W3C systems, hosting options
- CMS strategy & requirements, including:
- Internationalisation
- Versioning content changes
- Front-end standards - define standards we plan to meet when building the HTML/CSS templates, including accessibility, performance, progressive enhancement, and browser support
- Identify CMS solutions - shortlist solutions based on CMS requirements
- Search - review search options given current constraints
The output of this work is a number of documents to help outline what we’ve learnt and what we believe we need to do to achieve W3C’s aims.
Front-end development
The Front-end team will work alongside the Design team as early as possible, to build out HTML pages which allow us to test early.
The build process starts with the more generic items and progresses to more specific components and templates:
- Building basic content pages with typography
- Building global header, footer and navigation
- Building components
- Building basic page layouts based on wireframes
- Testing user journeys
- Testing for performance, accessibility, browser & device testing
- Layering on visual design
Progressive enhancement is an important part of our work, we aim to build accessible, performant HTML and CSS experiences and layer on JavaScript to enhance the user experience.
Design system
The output of the Front-end development work is to create a documented HTML Design System that allows W3C staff to create and maintain their website. This will be used to build working web pages integrated with the CMS.
The aim of a Design System is to give our team (Studio 24 and W3C Systems Team) enough information to deliver the end product, in this case web pages.
The Design System will include:
- Style guide: typography, colours, branding, any global design rules
- Example global HTML page (header, footer, content area)
- Component library: examples of re-usable blocks that can be used to build web pages
- Example page templates to cover all core templates we agree to redesign as part of this project
- Code that can be used to build web pages
- Documentation to illustrate how to use the code
During the project we will need to prioritise what elements are built within the Design System to ensure we can meet the timeline and budget.
CMS development
- Test CMS solutions - short timeboxed sprints to test CMS solution against a set of agreed criteria
- Content modelling - working with the Content team on how we model content in the CMS
- CMS setup & configuration - once CMS platform is chosen, setup CMS and configure it to manage the agreed set of content
- Define how to migrate content, if required, and who is responsible for this
The output of this work will be a setup CMS deployed to the staging site.
Front-end integration
This work is building the actual web pages, integrated with the CMS or other third-party systems to create a working, usable web page.
Things we need to consider as part of this work:
- Review how new pages sit alongside legacy content & what strategies we can come up with to help
- Ensuring pages are optimised for full page caching
- Analytics integration
- Data privacy
- Security
Code management and licensing
Project source code will be stored in the W3C GitHub account at https://github.com/w3c/
All software used for this project will either be under an Open Source license, or custom code developed for W3C will have Intellectual Property (IP) assigned to W3C upon project completion and payment.
Hosting
The hosting infrastructure for W3C is managed by the W3C Systems Team. A new server will be made available for development work, which the Studio 24 team will have access to. If possible, Studio 24 will use Deployer to manage deployments for development work.
For staging and production work (the Beta and Live website) deployments will be managed by the W3C Systems Team, likely using Puppet.
Work will include:
- Setting up access to development server
- Any setup work on the development server
- Agreeing how deployments to the staging server will work
- Reviewing page caching and static asset caching
It is expected that this work is undertaken by the W3C Systems Team and will require support from Studio 24.
Launch
This phase is likely to be managed by the W3C Systems Team, we normally create a launch plan to help manage this step of the project. Our aim is to always have zero downtime deployments, which is normally possible with modern web technology. Our team will support the W3C Systems Team in the launch phase.
We also recommend communicating to existing users the site design is to be updated. Once the public beta is live this can be done via a website message or banner informing users of the beta site and, when appropriate, the upcoming launch.