July 3, 2020

PATCH

As the leader of hyperlocal news, Patch delivers everything local from news to events to classifieds. My primary role at Patch has been to lead and design for our Core Product features.

The Challenge

"How can we build and maintain vibrant communities?"

At Patch, every design task we tackle starts with identifying the problem statements. Problems statements are collected via many different resources, and it was the design team’s responsibility to identify the root cause of the issue under discussion.

The Problem

We were getting consistent feedback from users that varied from navigational difficulties to content moderation. I have tagged and filtered recurring feedback and categorized them into a broad filter, to diagnose the problem statements accurately.


The 6 most frequent user problems were:  

  • I didn't get enough leads from my post/ad
  • The site is hard to navigate
  • There are too many ads, or ad-like content
  • There are too many mean comments
  • There is not enough content
  • I get too many emails from Patch

The Research


Our 4 - way navigation was cutting up the traffic, resulting in users getting only a fraction of the engagement, even if they posted in the correct feed—and getting the impression that their town patch was simply not active. They were being punished for doing what we asked them to do.

Based on these findings, I have gathered a new design direction that will serve our users the best.

"Does it make it easy to get around?"
"Does it facilitate vibrant interactions?"
"Does it promote neighborly compassion?"

Ideation

We brainstormed a range of features that can solve the six problems users face, listed above (or as I like to call it, the sinister six!), as well as the feed structure that would support them. We also discussed the possibility of leaning down the complicated product and the urgent need for a sustainable design system across all pages. I decided to explore the idea of a centralized UGC feed, aiming to boost both the traffic and the activity. I then drafted appropriate updates to serve the new navigation.


Home

The current top navigation is cluttered and needs disciplined prioritization. I've labeled each section by how often it is used, and numbered them out accordingly. The posting box on top of the news feed is sending out the wrong signal that the new post should show up on top when composed—when, in fact, they are posted on other UGC feeds...which was leaving the posters confused and lost. The click rate on the compose box in the article page is about 2.3%, while the click rate on the user profile is 6.36%. The new compose menu will show up on the UGC feed —which is where the users will actually be posting—and as a top menu in the user profile. I’ve updated the top navigation to skip the brand logo and start from the town name, and suggested the brand logo as a 'Home-menu.'  


Editor Card + Comments

One of the difficulties that weren’t directly a design issue but still a big turn-off for the users was the comment section. As my design direction stated, I wanted to suggest a design solution that could promote neighborly compassion. The news articles should be fair and un-personalized. However, I still wanted to remind our neighbors that there are people behind these news articles by putting more focus on the journalists at Patch, who are working tirelessly to cover hyperlocal news. A customizable bio that shows up before the engagements ( Like / Reply / Share ) could make people think twice before they post a mean comment, which will lift significant weights from the moderation team.

*This segment will need vicious testings until enough data is collected before any steps towards the implementation since it will push down the recirculation section, which is directly related to the pageview counts. Are we to prioritize moderation efforts before pageviews per session? Meeting for another day.

The current comment engagement opens up a new page dedicated for composing a new comment—and starts an inconvenient hierarchy that begins with the community guideline. I suggested the new comment section to be attached to the content which will enable the users to refer to the content directly without entering the comment page back and forth.

Design Library

Early in the phase, I realized that there was no style guide for the elements. Design decisions were made on the spot differently from project to project, resulting in a cluttered site with no visual hierarchy or clear prioritization, and it was in dire need of rules. I set one of my quarterly goals to create a unique and sustainable style guide for Patch.

I have been obsessed with Brad Frost's Atomic Design and believe it is a simple yet effective method for designers and developers alike, so I started gathering elements to create a Patch Design library of atoms, molecules, and organisms.

To make the design process more transparent and collaborative, I advocated to switch the design tool from Sketch to Figma and opened the design library up so any Patch employee would be able to check the progress & growth.

Other Updates

  • The current primary color does not meet the accessibility standard, so I have suggested a new primary color that does. - However, discussions with banding experts will be necessary.
  • For the new design library, I have decided to stay away from designing XS cards or XS buttons to serve the user personas ( for the majority of Patch users who doesn't identify as 'tech-savvy').



No items found.