Entertainment News Article Experience
Creating an engaging and flexible article experience to be used across news brands
Role / UX Designer
Methodology / Design Studio, Research, Usability Testing, Wireframing, Interaction Design
Platforms / iOS, Android, Tablet, Desktop
Overview
Inside Edition is an investigative news source for the latest uplifting news, investigations, and human interest stories and videos. The long-running broadcast series, which premiered in 1989, has been able to draw interest online; however users' consumption, browsing, and discovery patterns have changed. In order to improve the experience of current users and address the needs of the next generation of users, the team sought to revisit the most critical touch point in the user journey: the article experience.
A proposed design for the new article experience with a hero video, parallax scrolling, social embeds, pull quotes, and related/trending content blocks
Delivered designs for the new article experience on mobile with unique templates for video and photo hero content types
The Opportunity
As the article experience gained longevity, the need to update to increase engagement and promote related content grew. Our team sought to reevaluate the current Inside Edition experience against the newly and rapidly conceived Drew Barrymore Show article design to iterate towards an enriched Inside Edition article experience.
How might we leverage current and recent designs to increase user engagement and site page depth?
Areas of Interest
Understand browsing and discovery to encourage
engagement and comprehension
Identify features that work and validate transferrable features from other brands
Develop an effective and flexible template that can be applied to other related news brands
Requirements & Constraints
-
Must be optimized for responsive, mobile, and tablet.
-
The editorial team is the chief content creator; we must not add time or complexity to their workflow
-
Template must adhere to ad commitments and optimize for SEO requirements
-
Template must be "transferrable" and have the flexibility to be used for other brands
-
Design needs to accommodate for different types of article types (ie photo, video)
-
Limited data tracking and historical metrics
-
Limited asset quality
-
Resources unavailable to elevate content creation tools
Methodology
In the spirit of Inside Edition, I investigated the business, comparative, and competitive landscape. As this initiative was to affect multiple brands, I also coordinated intensively with the product owners to strategize for next steps. To focus our efforts, I led a collaborative cross functional design studio with the product, design, development, and editorial teams prior to the Drew Barrymore article redesign.
Artifacts from the cross functional and collaborative design studio
In addition to the design studio, I coordinated usability sessions to identify design successes and any pitfalls from related brands' designs; including the newly designed article design for Drew Barrymore. These sessions were 15-20 minutes and included 10 remote unmoderated participants via Usertesting:
-
3 male 7 female
-
Age: 18-64
-
Devices: desktop; mobile
-
Web Browsers: Any
-
Must visit entertainment news websites at least once a week
Sample study insights distilled by research.
Informing Design
The design studio and usability study were very informative to our strategy and design. The design studio allowed different disciplines to propose and iterate upon each other's ideas. As the team revisits article templates across brands, the workshop provided guidance to the team on feature priority and initiatives in subsequent quarters.
Usability sessions validated design hypothesis, decisions, as well as highlighted points of friction-- scannability, content organization, visual complexity, and sticky player behavior. Sessions also illuminated motivations and journeys for news entertainment which aided the team to converge and understand design decisions.
The news article design for Inside Edition before this update
Combining the feedback from the design studio and usability sessions, I created several wireframes that met stakeholder needs and utilized the successes from previous designs to create a more easily scannable and simplified template. After a wireframe was approved by the team, I provided critique, feedback, and guidance to our UI designer who delivered the final design to developers.
Example iterations of article wireframes on desktop and mobile
Reflection & Next Steps
In comparison to other previous initiatives, the advantage to this project was that I was able to leverage previous iterations of article designs from a sister property. Usability testing with early ideation collaboration afforded me and the design team noticeably more buy-in from the product teams and stakeholders-- specifically the Inside Edition editorial team who was eager for an updated news article experience.
Research & Business Insights Tracking
As the brand moves forward, one of the most significant challenges is the lack of in-depth historical data and data tracking. In the next steps of iteration, I would supplement site metrics and tracking to capture vital user journey metrics to measure the efficacy of changes and make further UX refinements.
Secondary User Critical User Journey
This project focused on the primary user experience. In the future, the user flows and tools impacting the editorial team need attention. A major constraint impacting the design moving forward is that templates need to be compatible with the tools available to the editorial team. As the chief content creators for content consumed by visitors, visitors will not only benefit from optimized templates, but editors will benefit from having tools that empower them and do not increase the complexity of their workflow.