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.
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.