The Challenge

How might we build and maintain diverse communities via digital hyperlocal news delivery?

The Situation

As mainstream media mourns the downfall of local news, Patch continues to improve upon a newsroom product that centers diverse human experience. At Patch, every design task starts with a problem statement validated by user research. As a design team, we perform user research through various methods, including but not limited to surveys, use cases, heatmap analysis (first click testing), and user interviews. After analyzing this user feedback, we rapidly ideate design solutions within the scope of business requirements, technical constraints, and design considerations. A particular design consideration is that our target audience is generally older, ranging upwards from 45 years old, which requires more attention to sizing, contrast, and captioning.

The Problem

How might we identify critical user pain points to prioritize design team efforts and tasks?

The Task

Before my arrival, the design team identified broader themes from recurring feedback to properly prioritize and diagnose problem statements into a comprehensible affinity map, pictured below.

Out of the six most frequent user problems identified, my work focused on the following:

• I get too many emails from Patch.

  • Task: Investigate user behavior on the email subscription page and make design recommendations

• I didn’t get enough leads from my post/ad.

  • Task: Analyze user interviews and re-design the newly launched feature, business posts

• The site is hard to navigate.

  • Task: Consolidate existing site structure and features into a lean, easy-to-understand design system that can support a unified newsfeed

The Ideation

How might we imagine accessible and joyful solutions that can be easily integrated into a design system? 

The Task

Analyze user interviews and re-design the newly launched feature, business posts

The Action

Before my arrival, the design team created a feature to increase revenue and solve for the problem statement, “I didn’t get enough leads from my post/ad,” by allowing users, particularly small businesses owners, to post an ad for $3/day that would be shared directly in the Patch Town newsfeeds of their choice. The feature included the ability to customize a call-to-action button, provide contact information, and review promotion analytics.

After releasing the product, the design team raised the alarm on a few apparent issues:

• Users might be confused by the ability to customize their call-to-action button.

• The heading looked too small after a few words.

• The call-to-action customization featured needed a character limit.

• Some confusion about the arrow on the dropdown menu when posting (did someone say design system?)

With these issues in mind, I rapidly began ideating. Should we change the placeholder text for clarity? Should we add a website url option similar to our “+Add contact information” option? Maybe a tooltip might help? With these questions in mind, I prepared interview questions to explore if our users were experiencing any confusion when trying to post about their business or their local resources - and was very surprised!

Using web-based video conferencing tools, Zoom or Google Hangouts, I recorded individual interviews and I identified some interesting pain points. Out of six interviewed users, only one knew about the promotion analytics feature and all interviewees wanted more granular information about their promotion analytics, especially for checking engagements by their selected Patch Towns. Additionally, all interviewees mentioned the word “dashboard” and “email reminder like Facebook” when describing their ideal promotion analytics experience. Most surprisingly, all users felt the experience of posting was easy to navigate and understand. So now what?

The Result

Analyze user interviews and re-design the newly launched feature, business posts

At first, the Product Manager was concerned that users were not understanding how to customize the call-to-action and the feature’s purpose. I recommended that we keep any additional features consistent with the existing design for Development Team’s sake in terms of time to release. 

As the most senior Product Designer was out of office and Patch does not have a formal design system, I was unable to find the original designs in Figma, and so instead used my front-end web development experience to inspect the anatomical design of an existing business post on our site. I proposed a design with an additional dropdown menu consistent with the existing “Call to action” dropdown menu and bylines to more clearly set user expectations. Using DevTools, I also identified that the heading size was too small because the Development team was using responsive web design units (rem) as opposed to the static font size (px) we had provided (design system opportunity!). The character limit was set to 250 and needed to be decreased to keep from breaking the card design. I raised the alarm that having an arrow-up for collapsed state and arrow-down for expanded state did not meet design standards. This opened up a large investigation into all the other dropdown menus on Patch. Ultimately, upon the more senior Product Designer’s return to the office, we realized that the released version of business post design was inconsistent with her Figma designs and other menus throughout the site. I used this moment as an opportunity to advocate for building a design system in collaboration with the Development team to reduce the possibility of such mishaps.

With rapid changes being made, I noted an absence of discussion around a consistent pain point validated by our user interviews: how effective would it be to redesign the promotion analytics modal if our users couldn’t find it? I pushed back against further redesigning the feature itself and instead advocated for focusing on the feature’s user flow, referring to multiple user quotes from my notes.

We could ditch the modal window and move everything to an independent landing page to meet our users’ expectations for a “dashboard” but then we would have to teach the user how to navigate to that page anyway. A new landing page with more features such as a filter might also add to the Development tasks, potentially detracting resources from other priorities.

We decided on three, small-scale solutions: add a text description to the icon, make the promotion analytics icon bold, and send a business post email reminder to our users with detailed instructions on how to navigate the newly released feature.

I volunteered to design the emails in Sailthru and, to my team’s delight, I was able to make it pixel perfect with my front-end web development skills. Beforehand, my Product Managers would use an external program to create the code to match our Figma designs. You never know when that CSS and Javascript knowledge will come in handy!

The Conclusion

How might we measure success for design iterations?

As Patch continues to grow and iterate upon their hyperlocal newsroom product, design updates need to be prioritized in a sprint cycle. Patch hopes to move forward with a unified newsfeed by 2021 and thus, these features have yet to be released. Once these updates are released, we hope to send out targeted surveys to gauge the significance of our product changes, asking how users knew to find their promotion analytics, if at all.