Patch home page

Creating a modern, user-centered source for local news and events

Overview

Patch is “everything local”, informing readers about what's going on nearby.

While Patch is known for quality local content, the lack of focus on UX over the years paired with Patch’s heavy reliance on income from ads and sponsors, had caused the site’s usability to suffer.

I was hired with the goal of making the Patch app and website centered around quality user experience and reflect a more modern design. This would expand Patch’s user base by attracting a larger more diverse audience, and increase advertising profits through more business link clicks and display-ad views. 

The first major page we tackled was the local homepage. We began with a whiteboarding session that included a Product Manager, UX researcher, front-end developer, and me, the Senior Product Designer. This enabled us to rapidly align our goals, ideas and requirements.

We identified 3 primary problems with the current homepage

  • 1 – Unclear offerings

    Patch readers, both new and existing, were not familiar with all that Patch offered. Navigation of the site’s features were often difficult to find.

  • 2 – Messy layout & design

    The home page contained inconsistent layout and design patterns, leaving it feeling cluttered and disorganized.

  • 3 – Misleading UX

    The page was riddled with distracting ads, many of which were misleading. Dark design patterns could also be found with button styles and labels that didn’t indicate clearly what they led to.

Opportunity

How might we help readers quickly share and receive the most important goings on in their community.

We turned our problems into opportunities

  • 1 – Patch overview

    Quickly familiarize Patch readers, both new and existing, with all that Patch offers–news, events, neighbor updates and local business listings and deals.

  • 2 – Consistent design

    Provide a consistent layout with design patterns that are continued throughout the page/site.

  • 3 – Transparency

    Organize ads to be less distracting, and make it clear they are separate from news and neighbor-generated content. Eliminate dark designs from the page.

Final task

Creating an editor interface

With the reader-facing home page design in place, I moved on to the editors’ interface. This is where editors edited the homepage for their associated Patch (community). Each section on the page acted as a separate component, most of which were customizable by the editor. After interviewing editors and gathering feedback, I designed an interface that included only the editable components, the ability to save by section or as a whole, and the option to preview the page at any time.

User testing

Testing of the home page prototype was a success!

Every user we interviewed was excited about the clarity and modern aesthetic of the new home page design. Even longstanding Patch readers were surprised to learn more about what Patch offers.

Next steps

The homepage and editor interface were set to be developed, QA’d, and sent live in 5 Patch communities as an initial test. Based on the feedback received over 2-3 months, the team would make any necessary iterations and update every Patch homepage in 1200+ communities across the nation.