Mobile views in examples

What

Explore ways to make mobile views of our patterns and components more visible in the Design System.

Why

Performance analytics data across public-facing DWP services suggests an average of 80% of visits are on mobile phones (not including tablets).

However designers will most often see our coded examples as they would appear on a desktop view. This default extends into design practice within teams, where screenshots and prototypes are usually presented in a desktop view. Making our examples more mobile-focused will bring them closer to the typical user experience.

Assumptions

The high proportion of mobile users observed in Universal Credit is also true in other benefit lines and services -- Update: Performance analytics data across public-facing DWP services suggests an average of 80% of visits are on mobile phones (not including tablets).
The current responsive coded examples are not meeting this need

Done when

Research

[ ] Collect examples from other services and design systems
[x] #266
- [ ] Get analytics on devices / user agents from as wide a base as possible (Data Analytics / Data Science?)
[x] #267
[x] Test assumptions
[x] #268

Design

[ ] Draft content and sketches for candidate approaches
[ ] Feedback from UCD community
[ ] Feedback from accessibility team
[ ] Test against user needs, operational needs and technical constraints
[ ] Decide on preferred approach

Build

[ ] Finalise content
- [ ] Content design crit
- [ ] IxD crit
- [ ] User research input
[ ] Coded examples
[ ] Accessibility audit
[ ] Publish

Promote

[ ] Show and tells

Maintain

[ ] Plan for review
[ ] Criteria for retirement

Outcomes

Mobile views of patterns and components are more prominent in the Design System

Who needs to know about this

UCD community Data Analytics Data Science Design System team Accessibility team

Anything else

What should our approach be for internal services?

dwp / design-system