W3C Website redesign: vendor selection & plan

W3C Website redesign:
vendor selection & plan

Coralie Mercier, Head of W3C Marketing & Communications

February 2020

smart phone, open book with empty page, laptop, pencil and eye glasses on a table — © Photo by JESHOOTS.COM on Unsplash

W3C is looking to incrementally redesign its Website and revise the information architecture,

to show the world who we are and what we offer,

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.

(Quoted from the project summary of our RFP)

Timeline

stop-watch — © Photo by Agê Barros on Unsplash

↓ November 2019 - February 2020: RFP
- Open Q&A period; Meeting with vendors
- Review; Project awarded; kick-off
→ February-July 2020
- February-March: Discovery phase
- April: Design & production phases
↑ July 2020 - Private beta
↑ August-October 2020 - Public beta
- Site effectively complete; testing; iterations
↑ December 2020 - New website full launch

RFP

Goals & scope

coffee mug on table — © Photo by Danielle MacInnes on Unsplash

New CMS • New information architecture • Modern visual design

W3C homepage
• /Standards • /Participate • /Membership • /Consortium
W3C Blog & Blog article
Business ecosystem landing pages
Work Groups 'profile' pages (new)
/TR homepage
Account pages
Others as determined by Information Architecture

Bids

Collaborative review took place in a google document, and I recorded everything in a team+AB Overview page.

32 proposals (34 bids total, but 2 rejected after the deadline)
Over 1,500 pages
Price range: US $ 40,000 - 484,000
From: USA, Canada, France, UK, Germany, India, China
Excellent quality overall (except 4 or 5 bids)

Bids Evaluation

Evaluation team

note taking — © Photo by The Climate Reality Project on Unsplash

Coralie Mercier, project owner
Léonie Watson, volunteered Tetralogical time to do a11y review
fantasai, who had contributed to draft RFP review
Vivien Lacourba, Head of systeam and critical party
Alan Bird, W3C Business Development Lead
Jeff Jaffe, W3C CEO

Evaluation criteria

check list — © Photo by Glenn Carstens-Peters on Unsplash

Criteria	Application/expectation
Accessibility	Strong, convincing
Technical recommendation	Sound, reasonable
Schedule	Realistic
Multi-dimensional engagement	Acknowledged, sanctioned
Text-heavy vs. graphic-oriented design	Right balance
Past work	High-grade, attractive,
Price	Affordable
Overall suitability	Meeting scope, requirements and needs per RFP

Evaluation notes

Overall	3 eliminated (careless comment; proprietary solution)
Accessibility	10 ignored a11y or mentioned it too briefly 12 were weak 7 were strong
Technical	Most recommended a headless CMS
Multi-stakeholder	17 ignored it

Shortlists

	top-6	top-3	winner
Camp Pacific	✓	✓
Clever Age	✓
DXW-CDL	✓	✓
Ecedi	✓
Oonops	✓
Studio 24	✓	✓	✓

Award

About Studio 24

studio24.net • @studio24 • github.com/studio24

Based in Cambridge, UK
Founded in 1999 by current
managing Director Simon R. Jones
Multidisciplinary team of strategic, design,
technology, content and marketing experts

Budget

piggy bank — © Photo by Fabian Blank on Unsplash

W3C Management having approved a budget that was smaller than Studio 24's pricing. To match the budget, Studio 24 agreed to the following:

10% discount in exchange for joint marketing
Discounts with third-party vendors in exchange for joint marketing:
- Zoonou - 10% discount
- Digital Accessibility Centre (DAC) - 50% discount

Review of Studio 24 (1/4)

Proposal:

The proposal sounds great, thorough, clear, appealing.
Proposal is good: clear and well-written.
Impressive understanding of W3C's current state, needs, and values. Considered the state of existing content, seriously considered our longevity requirements, values core Web fundamentals and using them correctly, willing to dig into our unique requirements. I think of all the applicants they had the best understanding of our technical requirements. Overall a very good proposal.

Review of Studio 24 (2/4)

Accessibility:

“meeting WCAG 2.1 Level AA is a shared responsibility between us and you." (p. 31)
"We can also undertake real-world user testing with disabled users as part of accessibility testing." (p. 15)

Schedule:

Available from mid-February 2020, can meet the December deadline. (p. 14)

General:

They made an excellent impression during phone meetings pre-bidding and during.

Review of Studio 24 (3/4)

Technical aspects:

Wordpress headless + Symfony for front-end.
The integration between WordPress and Symfony is a plugin they developed and made available on GitHub.
They are transparent and list possible issues related to our requirements (so I see this as a plus):
Versioning "incredibly challenging to achieve in a traditional CMS. WordPress"
CMS strategy and experience looks good.

Review of Studio 24 (4/4)

Design approach

To avoid graphics/text trade-off, will use typography, modern CSS (e.g., CSS grid and variable fonts), clean layout, leverage white space, etc.
Will make affordable and easy to maintain visual recommendations, will create design elements (e.g. icons, illustrations, web-based timelines, animations).

Past work:

Sites were excellent - good speed, usability, readability. At least one seems to use the styles/templates from gov.uk.

Plan

Key objectives

Create a redesign for the W3C website that reflects the brand authority, meets user needs, and has a consistent and uniform appearance across different types of pages.
Undertake user research, identify key users and user needs.
Audit and improve the information architecture of the website.
Create a content strategy that meets W3C’s goals and user needs.
Increase engagement on the site, focussed around membership and funding.
Possible archiving of content and a redirect strategy to accompany this.
Deliver a CMS per W3C’s key aims (versioning, usability and longevity of platform).
Create a long-lasting partnership with a digital agency to iteratively improve the W3C website and work on other digital projects in the future.

Studio 24's key tasks

Discovery phase
Content strategy
Visual design
CMS strategy
CMS setup & configuration
API integration
SEO & redirects strategy
Front-end HTML/CSS build
Accessibility & Security testing
Custom development where required
QA & device testing
Launch and support

Workplan

hourglass — © Photo by Nathan Dumlao on Unsplash

Discovery phase: 20 days, Team of 6
Private Beta (alpha): 4 production sprints
- Note: 16 days per sprint
Public Beta: 2 production sprints
- Note: 15 days per sprint
QA testing via specialist third-party providers
- Browser and device testing: 8 days
- Accessibility testing and user testing: 9 days
Live launch phase: 5 days
Post-launch support: 5 days

Discovery

"We review, research and plan your project."

Discovery, led by Simon Jones, will explore the entire content in more detail to narrow-down a firmer set of requirements for this project, and be aware of the overall content and the possible implications on the rest of the project (e.g. CMS choice).

New user research spanning our 5 target audiences will also be conducted using Digital Accessibility Centre (DAC).

CMS strategy (including multi-lingual and versioning), work on the most appropriate Information Architecture, content strategy also start during Discovery.

Discovery Deliverables

Risk register
Technical specification
Creative brief
Content strategy & Information Architecture report
Project exclusions i.e. out of scope items
Project schedule plan outlining key project milestones and dependencies
Responsible, Accountable, Consulted, and Informed (RACI) chart outlining key team members and responsibilities

Design goals

"We unite design and technology together to create digital products that work for real people."

Studio 24's user-centered approach will be led by Creative Director Ian Axton.

Building on research, user personas, sketching, moodboards and wireframes, they will design for mobile first, thus giving priority to our message and then scaling up for larger screens.

Component-led design will afford flexibility in the CMS to adapt what we publish to interesting and engaging layout, while not compromising performance.

Accessibility

"Accessibility and inclusive design is at the heart of everything we do."

Led by Studio 24's in-house accessibility specialist, Carlos Eriksson, accessibility & inclusive design work will leverage a number of tools, to meet level AA of WCAG 2.1:

A11y Command-line Tools
Tenon
WAVE Evaluation Tool
NoCoffee Vision Simulator
VoiceOver for iOS X and OS X
Chrome Accessibility Developer Tools + Accessibility Inspection (experimental feature)

Zoonou will perform browser & device QA testing, Digital Accessibility Centre (DAC) will perform accessibility testing.

Design & development

"Users first, Mobile-first, HTML-first."

Studio 24 will build simple custom HTML/CSS focussing on accessible, robust markup and high-quality, engaging design.

Proposed technical approach (to be verified during Discovery): Headless CMS + performant, secure, accessible front-end site (built in Symfony) reading the content over APIs, only using JavaScript via progressive enhancement to add functionality, and a template layer to provide Front-End developers with a clean, understandable way to build standards-based HTML/CSS.

Data Privacy

"Data privacy and ethics are important on the modern web."

Studio 24 will advise us on how to best achieve data privacy for our site.

Cognizant of our current approach, they will recommend a privacy-first, opt-in method to cookies and analytics whereby people will not be tracked by default.

Note: They recommended a similar approach to Heathrow Airport, this meant analytics tracking only activated on user consent. This is more in keeping with EU guidelines and ICO’s advice on analytics cookies, however it did result in a loss of around 80% of analytics traffic.

Methodology

"We are happy to work in the open on this project."

Studio 24 work in a number of ways, normally either a hybrid agile or fully agile approach – allowing for flexibility within constraints of a project.

No-downtime deployment with minimal disruption to the existing site during Private Beta, Public Beta and Live website.

Their robust redirect strategy aligns with the W3C URI persistence policy.

diagram showing studio 24 methodology and
related tasks

Example

Thank you!

open
book with empty page, laptop, pencil and eye glasses on a table — © Photo by JESHOOTS.COM on Unsplash