Redesigning Pinch

About this project

I redesigned Pinch’s website as a freelance product designer, starting with a refreshed identity.

Impact

• The number of paid members grew more than 230% after the redesign.
• Pinch iOS app won App of the day after the redesign.

About Pinch

• Pinch is a women’s content platform in Korea, with scope and audience similar to Refinery29.
• I designed Pinch’s original web platform in 2015.
• After the initial design, Pinch pivoted directions and the tone of the content has changed.
• Pinch team reached out to me again for a complete redesign of the platform.

Note

This project was done entirely in Korean. I translated the text in the UIs for this case study.

Problems

Discoverability

• It was hard for readers to know when the new content is updated.
• It was hard for readers to find the old content.

Inconsistency

• A lot of the features looked out of place, as they were implemented as needed without a designer.
• The tone of the brand and the tone of the contents didn't match. (Serious & thought provoking content vs. playful brand)

Project Goals

A new visual identity

Constructing the identity

I worked with the editing team to figure out the guiding principles of the brand: what do we want people to feel from our product?

Tying the identity to the content hierarchy

The three blobs represent the three main content categories.

Translating the identity into the product

I designed the components and UI elements to maintain a unified design voice across the devices. Pinch team didn't have an in-house designer at the time. I documented the components and made them reusable so that the Pinch team can continue to use the components after this project is completed.

Fun fact!

Pinch team was able to launch a brand new product several months after the redesign without an in-house designer, using the components I created. 🥰

Improving Discoverability

For the binge-readers

• One of the insights from the survey was that the readers want to quickly skim through the titles of the content at once.
• We saw that our readers read through a lot of articles per visit.
• To make that experience more seamless and comfortable, I designed a page where users can browse all of the content and quickly jump to past articles.

Latest updates at the front

To improve the discoverability of the new articles, the latest articles are placed at the top of the home page.

Navigating the series article

Context

• 80% of Pinch's articles are series articles.
• A lot of our readers enter our platform from social media, often in the middle of a bigger series.

Design rationale

I designed this section to help people get a better sense of:

• where they are in the series,
• which one's next,
• how many articles there are in this series,
• and which ones they haven't read before.

Dark mode

• I brought dark mode into this update to make nighttime reading more comfortable.
• Pinch became the first content platform in South Korea to adopt dark mode.
• Now about 50% of the active users are using Dark mode (Aug 2019).

Loader animation

• I prototyped a loader animation with the three brand identity elements.
• This loader design intends to minimize the loading area - the loader only stays on for the image since text loads faster than the image.

Article interaction

I designed and prototyped interactive animations to make the website appear to be dynamic and tangible, while maintaining the reserved look.

When your work meets the real audience

This project has a special place in me since it was the first large-scale design project I worked on that was shipped to real customers. I got to lead the project from defininig the goals to defining the interaction details in a short period of time. I was still a student at the time so I'm grateful for the Pinch team for trusting me with this project.

It was thrilling to see the business impact but seeing our customers liking and talking about my work really made this project meaningful.