Patch: Design Leadership

Design advocacy | Design systems | UX/UI Design | Accessibility | Interaction design | Leadership

Project summary:

Patch.com had never been looked at with a user-centric vision, the entire site and ecosystem of products needed to be reviewed, assessed, and reimagined.

Role:

Product Designer Lead | UX Research Lead

Problem:

Patch.com serves many users and goals. Each of the products within the Patch ecosystem was designed in a somewhat siloed capacity. We are now faced with a fragmented set of services that need to be brought together under a single roof.

Key goal:

Establish a consistent and coherent design language that could flex and adapt to Patch’s diverse needs (UGC, paid content, news, etc)

Overview:

Company Brief:

Patch is an innovative way to find out about, and participate in, what's going on near you (exclusive to the USA). Patch users are able to contribute content, keep up with news and events, learn more about local businesses and the people behind them, and participate in discussions with their neighbours.

My Role in this feature

This Case Study looks at the process I went through as the primary Product Designer to audit Patch’s digital presence and improve the UX maturity within.

It was also my goal to ensure any new changes were made in service of the user.

Solution Details

  • Map existing products

  • Documentation current information architecture

  • Establish a design system library, and socialize it

  • Regular UX benchmarking via moderated user interviews

  • Annual UX whitepaper

  • Inter-departmental design advocacy

continued below

Process detail:

Define & Audit

I began by auditing the existing pages and mapping out where we could make global changes to easily update the site and app to align with the latest brand elements. 

This work was done in Figma and Miro

Establish the Design System

Once the site was fully mapped out, with gaps and opportunities identified, I developed a visual framework.

We needed a system that presented a much-needed consistency, that could communicate what was Local vs Nearby, or UGC vs Editorial at a glance

The new system clearly stated what elements and components can be used where, and why.

Creating the UX Backlog:

Once our system was well-defined, I worked with Engineering closely to develop a UX Debt epic in Jira that could help move us toward our larger goal outside more Product-Driven projects (such as a posting flow rebuild).

This required consistent UX Advocacy at all Engineering touchpoints, in order to ensure everyone understood the value of the work.

I made sure to present design insights regularly in the form of fast, playful decks, and quickly won alignment from both our developers and QA members. 

Topics included: Situational disabilities, AODA compliance, dark UI patterns, iconography, contrast, the value of white space, and more.

Results

Ultimately my team worked closely with Product and Engineering to develop robust user improvements for nearly every aspect of the site, contributing to development roadmaps years long.

This work included

  • Subscription flows

  • Gen AI article creation

  • Events calendar posting and editing

  • Editorial and Advertorial article experience

  • Mobile app onboarding

  • AdTech

  • Information architecture

  • UCG posting, filtering, and moderation

All of which was cleanly and clearly laid out for easy handoff.

Previous
Previous

Canada Post - Find a Rate

Next
Next

Canada Post - Postal Banking