James

PCMag.com

Feature Page/Slideshow Redesign


Design Direction, User Research, Competitive Analysis, Product Design

The Problem

PCMag.com, a leading tech media site, needed to reface their feature/slideshow template based on continuous negative feedback from users and a desire to increase various business goals including ad impressions and page views.


My Role

My role was Design Lead, I worked collaboratively with stakeholders from Engineering, Product and Sales.


Process/Research


- Met in groups and 1 on 1 with key stakeholders.

- Oversaw the work of a Jr. Designer.

- Worked on a daily basis directly with the head of Product.

- Created wireframes, low and high fidelity mocks for review. 

- Worked with the Engineering to ensure designs fell within all technological restraints.

- Created both functional and design specs, writing up tickets and ensuring each portion of the project moved along according to deadlines.

- Iterate & test: User test where possible.


Tasks


UX: User Testing, User Interviews, Feature Analysis, Prototypes/wires

UI: Mid Fidelity Mocks, High Fidelity Mocks, Asset Library Creation, QA



Visual/

Technical Issues


The original design was a segmented and visually non-uniformed slideshow experience, with no clear design language.  Due to the many requirements from departments such as Ad Sales and Commerce, the template had slowly become slow responding and busy, focusing on monetization and not user experience.  However, the continued growing negative feedback started to strongly affect outcomes and ultimately led to an all hands on deck redesign and rethinking.



First Mocks


Upon getting approval of layout from stakeholders, we moved to high fidelity mocking.  The final decision was to roll out a template tat offered both “slide” and “list” view, with list being the default on load.  Several elements, such as the sticky sub-nav,  were adding in this stage but ultimately were pushed back into a later development cycle.  The MVP for the project included slideshow article template and slideshow template merging,  slide/card view creation, social integration and product review linking.   In addition to creating the new layout, it was also decided that the template would serve as guide to updating site-wide assets, including H1 type, commerce text style, article social buttons, commerce buttons and card attributes.


Product MVP and Results

Initial rollout included new template creation, Slideshow Article Template and Slideshow Template merging, design updates, commerce integration and Review Page linking.  Post launch, several updates were rolled out on a weekly and sometimes daily basis, including visual button tweaks, enhanced Review page link visuals, slide number visual updates and functionality including the ability for Editors to reverse number orders or hide numbers completely.


Post launch analytics showed a dramatic uptick in both ad impressions and page views.  User surveys showed a 40% increase in satisfaction, and almost no sign of negative feedback pertaining to the slideshow experience.


Increased functionality on this template allowed Editors to utilize it for stories and write-ups beyond simple image slideshows.  within a month it had become the most popular and utilized template across the site.