New Opinion Site


content, ui

Tribtalk is an opinion website – a sister site to the main Texas Tribune news website – launched in May of 2014. Given that our main site was in need of much auditing, we used this project as an experiment in agile development. As technical lead, I implemented a mobile-first design/development process, and used it to break away from the Photoshop mockups we’d been using previously.

The Problem(s)

At this point, our organization’s process was strictly waterfall: the Art Department would make a beautiful mockup, which would get thrown over the wall to the coders. There was no style guide to speak of, and the organic growth of styles had produced a mishmash on our main site. As technical lead, I was all too aware of the technical and design debt (which I was reducing at the time) and with this project I wanted to set us on a path towards better web development processes.

I also wanted to address the frustration our internal users felt with limits of the generic Django CMS we were using; it was overcrowded with options, and required many clicks to get get to any given task. Given the technical debt on the main site, this provided us with a clean slate to try for a better outcome.

The Solution

I began with a paper prototyping process, working with the art department.

TribTalk_HomePage_Paper

We moved on to low-fidelity sketches, which allowed stakeholders to ideate with low stakes.
TribTalk_storypagewireframe_draft

 

Eventually, we moved on to more sophisticated wireframes.

TribTalk-wires-landing-page-browser001
Note: I didn’t make these; as we hadn’t yet incorporated Balsamiq into our process, so the Art Department was in charge of any mockups.

In the meantime, I worked with our terrific web designer to create modular styles which were reflected in our CSS. The individual topics had color variables that made developing new features much easier. The end result was a much cleaner look, with documented, extensible styles.

TT-tribtalk

 

At the same time, we used this as an experiment to see how much we could improve the administrative interface. Given our users’ frustration with the limits of the generic Django CMS, I developed the UI using custom templates, and addressing the very specific tasks they had to perform. One of the drawbacks of the generic interface is that it tends to include every single object in the system.) For example, it was the editor’s job to adjust the lineup of articles on the front page. The generic CMS made this particularly user-unfriendly, so I built an admin for just that.

TT-lineup-admin

The Result

I achieved my goal of setting our team on the path towards agile development and better design practices, and the team was happy with the improved collboration. The editor thanked me personally for the new interface, and I was happy that we had overall improved the workflow of the organization.