Yahoo! Templating & Translation System

Yahoo! Europe required a system that would allow the engineering team to build and maintain cutting-edge media sites for multiple markets. As lead of the Tools UI team, one of my team and I joined the project to design and build a UI which would facilitate code re-use and debugging across multiple sites.

Split between the U.S. and the UK, the team used a scrum-based process with daily stand-ups on IRC. Design ran concurrently with development. I conducted user interviews and contextual enquiry to determine user needs which were prioritised and evaluated for feasibility in full-team workshops. I then proceeded to sketch solutions and performed user testing with the target developers. In-progress designs were posted to a wiki for commentary, and formal design reviews were held every two weeks.

The system used a hierarchical inheritance scheme with multiple dimensions to determine which bits of code (‘templates’ ) were used on which page. Effective code reuse required developers to know which templates a page used and which other pages used those same templates. The team was initially wary of the technical difficulty of tracking tens of thousands of templates, but I used research and user comments to convince them of its necessity.

I designed sparkline-inspired graphics to show where in the inheritance chain a template existed. Colours highlighted templates that were inherited from elsewhere or overridden lower in the chain. Markers in the navigation showed where files had been changed to help developer see unexpected knock-on effects from the changes they made.

When the designs were presented to the intended users in a tech talk, the developers were surprised and delighted by the sophisticated GUI. They praised it as being a tremendous time-saver, and a radical improvement on the existing tool.