Simplifying user flows using an existing design system

Pinko saw a 20% increase in daily sales in the first 3 months since launching their new title.

My role
‍‍
Product Designer

Duration
3 Months

Status
Shipped

The client
‍‍
Pinko Magazine

https://pinko.online

Project Overview

Pinko is a collective for thinking gay communism together that began in 2018. Pinko publishes print issues, books, zines, and host essays, translations and archival material. Pinko’s original site was built by Francis Tseng, with graphic design from virgil b/t taylor.

the client

Project Overview

In anticipation of releasing their new book in September 2023, Pinko wanted to update their user experience. They had an issue with users requesting refunds for items that never shipped when one of their members neglected to respond to orders. As an emerging magazine in a niche intellectual space, how can pinko attract new customers while gaining trust back from their existing audience?

Pinko’s Problem

I interviewed several pinko members to understand how they see the collective growing in the future. I worked closely with them throughout the design process to help bring the brand identity to life.

Building Empathy

Using the established design system from virgil, I redesigned the website based on industry best practices that I observed in a competitive analysis. I created a new Information Architecture to reorganize the flow of Pinko, a new landing page that is more dynamic and gives users more context into what pinko has to offer, and dynamic cards that are the same across each page.

the solution

Since shipping the design changes, and launching their new book After Accountability on September 19, 2023

impact

118%

increase in average daily sales since 2021

62%

decrease in average daily sales compared to 2020

43%

increase in the average sale from $30 to $43

20%

increase in average daily sales since Pinko began in 2019

Research

The Life-changing Magic of Tidying up
When redesigning a website, the information architecture, and how everything flows together, is super important. A sitemap of pinko before / after shows how I combined the “in print” and “magazine” into a “writing” page, as users were confused about the difference, and they both led to articles one could read.

Sitemaps

Iteration

Simplifying the workflow with a grayscale, mid-fidelity design to establish the layout of each page, and the flow of each process, such as purchasing the new book.

wireframes

New cards and button interactions to invite the user

design system

Final Screens

final screens

  • After the new site launched, and my design changes shipped, I am continuing to work with Pinko's developer to fix some of the issues that persist.
  • The Shopping Cart Modal has not been developed, the Search does not function, and a lot of the CSS styling for typefaces, sizing, etc needs adjustment.
  • I am collecting analytics on Pinko User's behavior and conversion rate to track how users are guided through the site.

Reflection

reflection