Redesigning Pinch

TimeframeFeb 2019
Duration2 Months
RoleSole Designer
linksWebsite
00. Overview

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

Platforms
  • Pinch has a responsive website, an iOS app and an Android app.
  • The mobile website is compiled into the native platforms.
Results & impact
  • The number of paid members grew more than 230% after the redesign.
  • Pinch iOS app won App of the day after the redesign.
01. Context

Pinch is a women's content platform in Korea, with scope that is similar to Refinery29.

I was the one who designed the original Pinch web platform in 2015. As the only designer in a small startup team, I got the opportunity to design a whole website for a content platform from scratch.

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.

02. Discovery

Understanding the users

Methods

  • As the only designer in the team, a crucial part of my role was to address the usability issues and define what needs to be done in the redesign.
  • Because of the time constraints, I had to move fast to discover and define the problems.
  • I chose research methods that can give me the results as fast as possible.
Survey

I asked to add design related questions in the team's periodical reader survey.

Google Analytics

I got my hands on the Google Analytics data to discover the patterns of how the customers use our platform.

From the data


  1. Pinch users are 90% women.
  2. Around 80% of the users are in their 20s and 30s.
  3. Around 50% of the users work at tech companies.
03. defining

Problems

Discoverability

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

Inconsistency

  1. A lot of the features looked out of place, as they were implemented as needed without a designer.
  2. The tone of the brand and the tone of the contents didn't match.
    (Serious content vs. playful brand)
Screenshots from the previous version

Goals for this redesign

Optimize Reading Experience
  • Protect the sacred space between the reader and the content.
  • The illustration and content should get the spotlight.

Emphasize New Content

New content should grab attention so that the subscribers find something new to read every day.


Improve discoverability

It should be easy to jump to older articles to find undiscovered content.


Seamless Design
  • Fill all the loopholes in design, as some features were added after the initial 2015 design.
  • Carefully design every element and deliver a clear, unified voice.

04. Design

Iterations

Due to the vast scope of the project and limited time, I made sure I fail fast and think through the flow before committing to the final design. Here are some of the messy sketches I drew along the way.

Information Hierarchy


Competitive analysis


Rough sketches




Lo-fi wireframes


Explorations

Once I had alignment with the team around the basic framework, I moved into high fidelity and populated the wireframes with Pinch's existing content. I explored what the layout would look like with all of the different types and length of our content. These are some of the explorations I did for the article header.

Constructing a new visual identity

I had an extensive talk with the editing team about the tone and voice that we wanted to convey. I made three abstract blobs and assigned colors that symbolize the three main content categories.

UI Elements

I designed components and UI elements to maintain a unified design voice across the devices. Pinch is a small team without an in-house designer, so I made the components easily accessible so that the Pinch team can reuse the components after the project is complete.

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. 🥰


Check out Pinch Tarae

A Brand New Experience

Guerrilla usability testing &
internal validation


I tested the prototype with both people who have visited Pinch and people who were completely new to Pinch. I also showed and tested the prototype with the teammates to get internal feedback and reach alignment.



Note

This project was done entirely in Korean. Here, I translated some of the content for presentation.

Sub-category Page
Purchase History
Membership Landing Page
Series Page
Creator Page
Inside Hamburger Menu

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.
  • A pattern I saw from the analytics data was that a lot of times, our readers binge-read, reading 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.

Optimizing Reading Experience

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).

Providing A Seamless Experience

Loader animation

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

Play with the articles with animation interaction

I used animations as a way to incorporate an element of fun within the website while maintaining the reserved visual tone. I designed and prototyped interactive animations to make the website appear as tangible and dynamic.

05. Impact

The number of paid members grew more than 230% after the redesign.

The number of Pinch Club members (paid subscribers) grew from 300 to more than 700. It was a collaborative effort with our amazing marketer who did a fabulous job in promoting the redesign. 🥰

Pinch iOS App was selected App of the Day after the redesign! It was even at the first place for Magazines & Newspapers category above the New York Times app.

06. Reflection

That feeling when your work meets the real audience.

Pinch redesign was a monumental project for me as I had command over a large-scale design project that was shipped to meet the real customers. It helped me gain experience from diagnosing the problems to delivering a product. I was able to grow as a holistic designer in a wide range of aspects. It was also thrilling to see our customers like and talk about my work, and it has become my driving force to pursue product design.

(...) Pinch is a full-on beauty for women who want to expand their horizon. Even the design of small details in the website is beautiful. Pressing subscribe button again...

User's Facebook post (translated)

07. Next steps

If I had more time, I'd...

Even though I'm proud of the project, there are still some aspects that I want to explore further.

More extensive user studies

Due to time constraints, I had to skip a lot of primary research and make a lot of decisions based on assumptions and guerrilla testings.

If I had more time, I'd conduct interviews and observations to deep dive into underlying motivations and needs.

Design for tablet devices

The number of tablet device users is increasing every year, and there is a large opportunity space for text-heavy content platforms like Pinch.

If I had more time, I'd explore how to harness the full power of tablet devices. (e.g. split screen in iPadOS)

Build a comprehensive Design System

I'll build Pinch a more comprehensive design system and documentation so that the Pinch team can continue implementing new features and expanding the platform after this project.

Credit
IllustratorEomju