(...) Pinch is a full-on beauty for women who want to expand their horizon. Even the design of the small details in the website is beautiful. Pressing subscribe again...
— A subscriber's Facebook post (translated from Korean)y
Redesigning Pinch
y[
Feb 2019 - Mar 2019
[
[
Role
[
Solo Designer
[
Tools
[
Figma, Framer
t
n
q
[
Overview
[
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 that are 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.
Pinch's old branding
[
Discovery
[
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
Protect the sacred space between the reader and the content. The illustration and content should get the spotlight.
New content should grab attention so that the subscribers find something new to read every day.
It should be easy to jump to older articles to find undiscovered content.
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.
[
Foundation work
[
A new visual identity
Constructing the identity
I worked with the editing team to flesh out the tone and voice that we wanted to deliver.
Tying the identity to the content hierarchy
The three blobs represent the three main content categories.
Translating the identity into the product
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. 🥰
[
Goal 1
[
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.
[
Goal 2
[
Optimizing the reading experience
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).
[
Goal 3
[
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 - 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.
[
Reflection
[
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 in a short period of time.
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.