The problem

We were building similar e-learning projects with thousands of pages of content, but starting from scratch on their design and engineering every time. Within tight project timescales, this resulted in poor design and little thought for responsiveness.

My pitch

Research and develop a studio standard for the common plumbing that underlies responsive web content, and build it into a framework appropriate for educational content.

Planned features
  • Responsive grid system and pre-set layout options
  • Web typography standards per grade-range
  • Colour palettes to make contrast compliancy easier
  • Common icon set
My role

Lead Designer undertaking UI and typographic research and development with a small team of designers, a business analyst and engineers.

The process
  • Research of typographic best practice appropriate to different age groups. Developing web prototypes with testing and iteration of line lengths, leading and hierarchies.
  • Research of content layout configurations for educational content. Designing a layout scheme with multiple container types, each with their own responsive rules and a common grid system. Prototyping and iterating on the layout scheme. Testing using a variety of program lesson content until an optimal framework was developed that could be used across projects.
  • Designing a series of colour palettes with shades tested against WCAG 2.0 colour contrast standards.
Result

Clear standards and Sketch templates for designers, plus an engineered master template from which all new web-content projects are now created.

The next pitch

The new studio standards allowed for consistent design of static page elements, but did not cater for interactive content. We pitched for a new project to work with our Learning Architect colleagues to develop standards for interoperable interactions that could be used between projects. This became the Experience Library.