Pinterest is a web and mobile application that allows users to curate and exchange ideas, primarily through the usage of images called Pins.
I chose Pinterest as my redesign focus for the 2019 Kleiner Perkins Design Fellowship application.
Getting a start on this project was challenging for me because I have never attempted a redesign before. Trying to make valuable design changes to the application without deviating too far from the core essence of the current product was a constant battle for me as I progressed through this redesign assignment.
I quickly realized that I needed to establish a clear scope for my redesign in order to make informed design decisions in regards to the current user experience. For this particular redesign project, I decided to concentrate on the Pinterest mobile application.
Through talking to other Pinterest users and analyzing my own research of and experience with the current product, I was able to identify aspects in the current user experience that invoked a sense of confusion. My ultimate goal for this redesign challenge is to address and refine those aspects in order to create a more intuitive experience for Pinterest users.
Clicking a Pin from anywhere in the application opens the Pin closeup; this page holds information about the Pin’s source/uploader, along with the Pin’s title and caption. This page also contains the number of times a Pin has been saved, and allows the user to save or send the Pin.
Analysis of the Current Pin Closeup
As seen above, the current Pin closeup page is rather congested, especially the area below the actual image. My personal experience with the current Pin closeup page echoes one of the user testimonies I received when I was conducting my research; the current design, which allows up to four lines for the title of a given Pin, serves as a distraction especially because the title is given a larger and bolder font style.
The feed contains a collection of pins, organized in two vertical columns. The feed is also responsible for displaying results from a user’s search query.
In between sections of pins are horizontal carousels that contain other query suggestions, labeled as Ideas You Might Love. Another form of horizontal carousels highlights various Pins uploaded by a single account, as shown below with the Behance example.
Analysis of the Current Feed
The tags below the search bar are keywords that can be added to the current search; this was not immediately clear to me as I thought clicking on a keyword would replace my current query.
The most apparent change I made to the Pin Closeup is the reorganization of information beneath the Pin. In the redesign, the source/uploader of the Pin is displayed first; the title of the Pin is reduced in size and limited to two lines. This design choice was made to mitigate the confusion and distraction caused by long and irrelevant Pin titles.
Current Design (L) and New Redesign (R)
An icon is also added next to the source, in cases where clicking on the source will open a new browser window for the user.
The Pin amount has been moved to the left and above the section that displays user activities associated with the Pin. In the current design, it is not immediately clear that the number mapped to the total Pin amount.
The send and save buttons are moved below the pin, while the options menu is pushed to the right side above the pin. This design choice was made so that all user actions relevant to the current Pin are now located on one side of the screen.
Analysis of the Pin Closeup Redesign
I also separated all of the information relevant to the current Pin from the More Like This section, which displays other similar Pins. This design choice serves two purposes: first, it enhances the level of separation between the different sections of the Pin Closeup page. Second, it maintains visual consistency with my Feed redesign.
Final Redesign for the Pin Closeup
To address the issues I found in the current feed, I made several visual changes to the individual elements within the feed. In the current feed design, only promoted Pins have text located below the image. The current spacing makes it difficult for the user to determine which pin (top or bottom) the text is addressing.
Current Feed (L) and Redesigned Feed (R)
I decided to include the source/uploader for all the pins in the feed. This design change serves two purposes: first, it eliminates the confusion as to why some Pins have accompanying texts and why some do not. Second, the user can now have access to the source/uploader of a given pin directly from the feed.
Analysis of the Feed Redesign
In addition, I increased the spacing between pins in a column and decreased the space between a Pin and its source/uploader. This eliminates ambiguity as each Pin (along with its source/uploader) is clearly distinct from one another.
I also slightly enlarged the options menu and placed it further away from a Pin; this decreases the chance of a user accidentally opening a Pin closeup when the original intention was launching the options menu from the feed.
Analysis of the Feed Redesign
Lastly, I decided to give horizontal carousels their own panel, which enhances the level of separation between the carousel and the columns of pins. Visually, this was accomplished by overlaying the carousel and the sections of pins above a gray background.