Exploring factbox page's responsive behaviour

Factbox Pages

An internal publishing tool project that leverages the popularity of existing feature within article editor, turning them into elements that can be re-populated

Assignment:

Working alongside Mail Online’s internal publishing tool developers and stakeholders, the assignment was to: 

Leverage the popularity of existing fact boxes within articles, turning them into fact box pages that can be re-populated seamlessly across different articles as well as indexed on the MOL website for Google exposure. Ensuring the scalability of fact box pages across different article layouts (i.e. narrow, wide, extra wide). 


Outcome:

Despite working remotely at the time when the project kicked off, I was able to quickly sketch up the rough idea to adequately support developer colleagues prior to the full exploration of wireframes. Stakeholders can then easily comprehend how the existing static fact boxes would eventually behave responsively within the internal publishing tool.

The wireframes further supported and visually demonstrated how these fact boxes would responsively flow into different sizes across different article widths.

Since its introduction to the publishing tool, 10,477 fact box pages have been created.


Approach:

  1. Begin assignment with sketches and questions
  2. Using grayscale flow wireframes to collaborate with team (walking through on screen) and clarify the technical functions within the internal publishing tool, how different sized fact boxes can seamlessly resize into a different width article
  3. Collaborate with developers and understand the relationship of the changes within internal publishing tool on the front end public facing UI
  4. Come up with internal publishing tool UI mockups for developers

Team:

  • Project Manager
  • Developers
  • UX Architect – June Lim
  • Product Owners (stakeholders)

UX Activities & Deliverables:

  • Project scoping/ briefing/ kick-off
  • Technical feasibility discussions
  • Sketches & UX Questions
  • Grayscale flow Wireframes for internal team walkthrough
  • UI mockups
  • Implementation UX acceptance testing
If you're interested in finding out more about this project, just drop me a message and I'll be in touch soon.