Visual design between greatly differs between cultures. What works for a group of audience in the States may not work for another group of users in Hong Kong. The environment and upbringing one is accustomed to in turn shapes what works and what does not. Something as simple as the amount of whitespace between pictures affects the way content is read and digested.
User Experience, User Research, Wireframing, Scenario Mapping, Rapid Prototyping, Visual Design, Motion Design
In an article published on April 2016 in WIRED Magazine, Jessi Hempel talks about the upcoming Pinterest engineering and design overhaul. One section in the article about an employee relocating from the Tokyo office to San Fransisco caught my attention: "the Pinterest homepage inspired that feeling you get when someone tries to overcome a language barrier by talking louder."
While Pinterest is based in the States, the platform's audience is global. I have been using Pinterest for well over 5 years and though I had my issues, Pinterest served its purpose for me. Reading this quote however, I began to look at the platform with a designer's mind and slowly began to understand what the employee was talking about.
The use of the grid layout is becoming widely popular in web and mobile design. Pinterest has made a name for themselves with their staggered grid layout as it prompts one to explore. Yet what I realized is how little breathing room there is between pictures. This lack of space gives an overwhelming feeling, almost similar to someone shouting at me. With this in mind, I began this project to redesign the UX/UI of Pinterest with a focus on creating a breathable design.
A total of 10 interviewees (7 females, 3 male - age 21 - 29) were asked a series of questions pertaining their thoughts on the platform.
A competitive analysis was conducted across platforms that employ a similar grid layout. Sites used in this analysis includes: Creators Project, Behance, Dribble, and Adam.
Wireframe and hi-fi prototype of first design. Interactive prototype can be found below.
In March 2017, Pinterest released an updated version of their algorithm that directly impacts the pins the appear on a user's feed. During the design process of this second design, it was taken into consideration how this update can directly impact the type of tags that are shown to users.
USER TESTING AND FEEDBACK
WHAT I LEARNED
I began my initial research by re-reading some of my favourite books on "white" design.
“The blackness of typescript doesn't mean that the letters are actually black; they merely appear black in contrast to a white sheet of paper.” - Kenya Shiro
If we were to apply a similar train of thought to Pinterest, the pins stand out because of the white background. Can whitespace be further increased in the current version?
I conducted a series of user interviews in order to establish a better understanding of what users currently think of the Pinterest platform.
The user interviews revealed an interesting issue pertaining the filter system. All 7 users expressed concerns for how irrelevant pins would often show up in their search. While keywords are suggested, it is difficult to not fall down a rabbit of pins.
Based on user research, the initial intention of a breathable design turned into exploring how the placement and interaction of filter tags can inspire a more holistic experience. Several layouts were explored but it was keeping in mind of Pinterest's aesthetics, it was decided a more organized approach would be best for this project.
Upon first glance, this first design follows a similar layout as the current Pinterest but with an emphasis on uniform containers for all pins and an increase in whitespace in-between. The current UI triggers an expanding grey box around the pin on hover. In this version, pins were purposely made smaller to allow for the pictures themselves to expand on hover.
A second design was created where three unique filter tags appear on hover beside the pin. As opposed to having a list of new tags appear at the top, the choice of showing three is designed to funnel the experience to a specific endpoint as opposed to a rabbit-hole.
The first iteration of both designs was sent to 10 users. The first 2 users were only told that the prototype was to test how the tags appear and its functionality. Both users mentioned that it was difficult to figure out what was suppose to happen and if anything changed after clicking the tags. While a blue outline was added to indicate new tags in the first prototype, it was clearly not enough when compared to what Pinterest currently does.
For Prototype 1, the color and order of tags were changed at each level.
For Prototype 2, the color of the tags were changed at each level.
With these changes made, the remaining 8 participates were briefed on what the experience is before given time to explore.
This project revealed a lot of insights in both the function of Pinterest (and why it is popular) and in testing MVPs.
On exploring Pinterest and its UI/UX, the company has created a unique experience in terms of how users search and find relevant content through the tags. Though aesthetically it leans towards being minimal, the search experience on Pinterest is highly intuitive. Yet what this project allowed me to gain insight on is how being "intuitive" is highly dependent on the user. Even with clear instructions, introducing a new form of engagement requires deep understanding on a range of different users.
While I set out to redesign the visual interface to create something more breathable, the research process geared my designs towards using whitespace as a means to develop a sense of curation. With my Hi-Fi prototypes, I realized it was potentially not fault on the algorithm but how the pictures are arranged. The increase in spacing and uniform containers demonstrates how accurate Pinterest's algorithm is when finding relevant content. This helped me understand the importance of design and how it can inform a business' intention.
With limited time and resources, it was about getting results and adapting accordingly when testing the two prototypes. Partly because I did not have access to concrete metrics, I had a lot of fun taking the research and drawing the right insights from it to drive the design process. Being bold while staying analytical is something that I intend on continuing doing with my future projects.