W3C Website redesign:
vendor selection & plan

Coralie Mercier, Head of W3C Marketing & Communications

February 2020

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,

(Quoted from the project summary of our RFP)

Timeline

stop-watch
© Photo by Agê Barros on Unsplash

RFP

Goals & scope

coffee mug on table
© Photo by Danielle MacInnes on Unsplash

New CMS • New information architecture • Modern visual design

  1. W3C homepage
  2. • /Standards • /Participate • /Membership • /Consortium
  3. W3C Blog & Blog article
  4. Business ecosystem landing pages
  5. Work Groups 'profile' pages (new)
  6. /TR homepage
  7. Account pages
  8. 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.

Bids Evaluation

Evaluation team

note taking
© Photo by The Climate Reality Project on Unsplash

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

studio 24 logo and colour

studio24.net@studio24github.com/studio24

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:

Review of Studio 24 (1/4)

Proposal:

Review of Studio 24 (2/4)

Accessibility:

Schedule:

General:

Review of Studio 24 (3/4)

Technical aspects:

Review of Studio 24 (4/4)

Design approach

Past work:

Plan

Key objectives

Studio 24's key tasks

  1. Discovery phase
  2. Content strategy
  3. Visual design
  4. CMS strategy
  5. CMS setup & configuration
  6. API integration
  7. SEO & redirects strategy
  8. Front-end HTML/CSS build
  9. Accessibility & Security testing
  10. Custom development where required
  11. QA & device testing
  12. Launch and support

Workplan

hourglass
© Photo by Nathan Dumlao on Unsplash

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

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:

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