Making things more Pinteresting…

Victoria Ivy Powell
6 min readMay 28, 2020

--

When I was young, I was the child that absolutely hated when I accidentally drew outside of the lines. I would immediately have to redraw my picture and be more careful with my markers. Seven-year-old Victoria’s design process was very meticulous — my markers had to be laid out in the order of the colors of the rainbow. Needless to say, I have an appreciation for things that look orderly and nice.

If I’m browsing through any social media app, chances are I will probably be there for a while. Other than regular eye strain from staring at my 4-inch screen for too long, the last thing that I want is an app that is overloaded with information that’s hard to decipher. Being the type of person that racks up a ridiculous amount of screen time, UX and UI are something that I didn’t know I appreciated until I started learning about them. Now, I feel myself scrutinizing every app that’s part of my daily routine.

I realized that by coloring outside the lines or making my butterfly wings uneven, I was ruining my UI drawing experience. I did not feel the satisfaction of completing my task cleanly so I would start it all over again.

So for Pinterest, I thought it best to start over from the very beginning.

Loading animation for Pinterest with new icon.

A fundamental fix

Pinterest’s UI and UX desperately needed changes that would simplify and unify the app. To do that, I asked myself what core design principles needed to be addressed.

I drew up many a sketch of what a better and more unified Pinterest layout would look like, but to find out what that would look like I had to ask myself. What do I like? Why do people use Pinterest? What makes people love Pinterest? What is unique about Pinterest? What is Pinterest’s personality? What is a Pinterest?

I realized that just like anything else we could possibly do on our computer phones, is that users care about putting pieces together that represent themselves to create their own little world. An oasis. You can set goals (pinboards), be inspired by other people and see what others like to form other ideas. It’s like a jump-start cheat sheet to learning what you like. And the best part is when you open the app again, everything you created is still there.

Starting over

With a new “P” for a logo and a cleaner more active loading screen, it incites movement when the application is waiting to open on the user’s device. In Steve Krug’s “Don’t Make Me Think,” he explains that the goal of the design process when creating a product or service is ensuring that all aspects of the product are self-evident or self-explanatory. For Pinterest, this means that there should not be clutter or confusion when looking at the app — there should be symmetry and content shouldn’t cause stress or any reason to navigate away from the app in search of an alternative.

To ensure that these two points were included in my redesign, I decided to focus on:

  1. Streamlined navigation.
  2. Shapes and colors.

I walked through what I would do if I was trying to use Pinterest. When taking it step by step, I realized what visual aspects were lacking and what features needed to be included to keep symmetry while using the app.

  1. U.N.I.T.Y.

Queen Latifah should be the spokesperson for Pinterest because it is desperately what the app needs. Functionality and making it as easy as possible to peruse an application without having to call on help or guess and check which clicks you make is a good way to determine whether an app’s interface is conducive throughout all of the pages.

To create a feeling of unity, you have to make the user feel powerful. That is, the decisions that they make have to feel like their own. To understand this, I created a journey map.

This map detailed a user’s unsatisfactory experience with the previous Pinterest application. I wanted to map why and where the previous app failed to understand what choices I had to make to ameliorate the app experience without changing too much of its familiarity and integrity to its continued users.

Journey mapping wasn’t very fun — it was hard trying to distance my own personal wants and needs to design for the masses. It felt like thinking while having an out-of-body experience. There are pieces of myself in my redesign, but not enough to sorely stick out.

2. Visuals

Clean transitions from one action to another create a calmer flow from one page to another, a pop-up text box and even from the loading page to the home screen. The more motion there is, the more time is created for contents to load while the user’s attention is distracted with another action. In the beginning of this article was an example of the animated GIF I created for a loading animation. Clicks throughout the app have soft animations to transition from one action to the next.

Color palette from style guide.

Color choice is usually an indicator for who the app is “for.” The biggest issue with redesigning Pinterest was making gender-inclusive color choices. The red (#ED4137) was slightly lightened and I added a color range of grayscale for actions, backgrounds, and icons throughout the layout. This article by NPR talks about Pinterest being a woman’s world. From the beginning, Pinterest was targeting a specific audience. However, a simple rebrand of color choices and navigational options and animations created an asexual layout that is suitable for unified use.

White space

Another silent main goal of my redesign was aspiring to make using Pinterest a calming experience. I read up on what makes white space a good design tool and why I should incorporate it into my design. In the old Pinterest interface, there were lots of strong borders: around buttons, names and many containers that led to more containers (kind of like the Tupperware inception that’s going on in your kitchen somewhere when all the big containers hold the baby ones).

There was a lot of division and shades of the same color that didn’t compliment the app’s functionality. Introducing white space and empty areas in the app exudes of more natural and elemental separation without having to add more clutter to a page. It gives the user time to breathe and makes them not want to quit the task they are trying to achieve in your app’s design. Remember, users are lazy and don’t want to think. The end result is balance and gives Pinterest a neutral and calming personality.

Example of grayscale in animation and use of white space.

To tie up the gift, the next step for a redesign like this would be a rebrand. Making sure that Pinterest’s guidelines and mission reflect the personality of its face are important. Although the new design is a bit different than the old and has different pathways to perform similar actions, it doesn’t take away from Pinterest’s goal to make people feel good.

Adobe Xd Protoype: https://xd.adobe.com/view/0766ca07-ab10-46c5-4931-af3da35d0c13-7157/

UXPressia Journey Map: https://uxpressia.com/w/kyIOt/p/ti8HQ/m/eKnb2

--

--

Victoria Ivy Powell

storyteller @espn. daughter, ex-track athlete, & aspiring cat lady