Feature Story Template

My Role

UX Design

Team Members

Chris Combs, Tom Shafer, Manyun Zou

Overview

The purpose of this project was to create a reusable template to display Washingtonian magazine’s feature stories online.  For the visual design of the template, we accomplished this by utilizing as much screen space as we could and giving the high-quality images that go along with each feature a place to shine. Two “musts” from stakeholders were that images needed to be impactful and there shouldn’t too many distractions from the main story text.

I led the UX efforts for this design, making sure the layout of the template felt cohesive as a user scrolled through the story. Not only did the template layout need to be cohesive, it needed to give users a feeling that these stories were “big,” “important,” and “worth their time.” I also wanted to make sure users were able to easily go back to the homepage (something that was not inherent in the design for custom,  hand-coded features in the past).

Another important user our team needed to consider while building this template was the Washingtonian editorial team and web producers. This template needed to be something that web production staff and editors could easily build off of to create aesthetically-pleasing longform stories without relying on the digital team and developer to create custom code for every single feature story.

Lastly, our team needed to take into account the advertising opportunities available in this feature template. Washingtonian feature stories tend to get a lot of traffic, and as a business, we needed to make sure there was: A) space for advertising and B) a way for web producers to move advertisements if they disrupt the flow of the story.

UX Process

Research methods: I conducted stakeholder and user interviews. Manyun, who designed the interface, was responsible for studying case studies, evaluating competitor websites, and conducting Heuristic evaluations of the Washingtonian feature stories compared to other media publications’ feature stories.

Ideation: Worked with Manyun to create user flows that detailed how a user would get to our feature stories and the actions they could take while or after reading the story.

Wireframes and design: Manyun worked with me in Figma to draft low-fidelity wireframes and designs for the feature story. After reviewing and discussing new features with our developer and digital director, Mandy created high-fidelity designs we could present to stakeholders and internal users (web production and editorial staff).

Prototype: We moved Manyun’s final designs over to a testing development environment where we could test the design and usability before launching. We tested the functionality of the template from a reader’s perspective as well as from a web producer or editor’s perspective, making sure that the Washingtonian team could easily use this template in our content management system. We received user and stakeholder feedback, iterated upon the design to launch the MVP template, and continued to iterate until we have the site design we have today. There are still features from Manyun’s designs that we have yet to implement, and we continue to work on these features.

Project challenges and lessons learned: For me, the biggest challenge during this project was leading the UX Design efforts and not being as involved in the research process as I’m used to. My responsibilities shifted from being the researcher, the UX designer, and the UI designer, to guiding Manyun through the research, ideation, and wireframing steps of the process and testing. This gave me the valuable experience of looking at the UX design process holistically and I am now able to take a step back and better critique my own work within the UX process.

Leave a Reply