Patch home page
A modern, user-centered source for news & events
Overview
Patch is “everything local”, informing readers about what's going on nearby. While 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 to redesign the Patch app and website to be more modern and user-friendly. Patch wanted to attract a larger, more diverse audience and increase advertising profits through more business link clicks and display-ad views.
The first 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
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 modified 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
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. We considered the designs a success and were ready to move forward!
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.