CASE STUDY

Overview

Microinteractions can really make or break an interface. For this project, I decided to redesign the microinteractions that Pinterest already had on their site. I believed the current site had amazing content, but it was missing a little pizzazz to really bring life to the content.

Since the site is a platfrom for people to share designs, crafts, recipes, and much more, I thought it would be interesting to make microinteractions that had a fun feeling like all the shared content.

Context & Challenge

BACKGROUND

In my major, Interactive Digital Media at Drexel University, I was taught the fundemenatls of diffrent coding and scripting langues before this class. In my Scripting for Interactive Digital Media II(IDM241) class, I was assigned to strengthen existing microinteractions or design completely new ones that would enhance the experience of an interface. I was given a total of nine weeks to complete this project. This project was split into three assignments: Alpha, Beta, and Final. We were given two weeks to describe and develop our Alpha assignment, two weeks to describe and develop our Beta assignment, then the rest of the time to work on our Final assignment.

The problem

Microinteractions can really make or break an interface. The problem was that Pinterest did not live up to my personal expectations. For this project, I decided to redesign the microinteractions that Pinterest already had on their site. I believed the current site had amazing content, but it was missing a little pizzazz to really bring life to the content.

Since the site is a platfrom for people to share designs, crafts, recipes, and much more, I thought it would be interesting to make microinteractions that had a fun feeling like all the shared content.

goals & Objectives

My ultimate goal was to create multiple microinteractions that all worked well with each other. I wanted to create and enhanced website surfing experience that did not stray too far from the current experience. If Pinterest were to update their site with my interactions, users would still be able to feel that the site is the same just with an updated feel, instead of seeing the new microinteractions as something completely foreign to Pinterest's brand.

Process & Insight

At first, it was difficult for me to come up with what I wanted to change about the site. I noticed that each pin was just displayed on the site, with a simple hover that showed a save button and nothing else to it. I thought I could add microinteractions to the pins in order to make it more interesting.

I decided to turn each pin to a "pin card" so that each pin card could expand to show more info about the pin. This idea was derived from a previous project that I worked on.

I used my previous project to create a pin card that would fit with Pinterest's brand. This includes a hover trigger. This hover would expand the pin card to reveal the title, subtitle, and caption and/or hashtags of the pin. The hover also triggers the image to have a red overlay that revealed two functional buttons.

I added functional buttons that would fit with the task flow of Pinterest. The first button I worked on was the SAVE button. Currently Pinterest's SAVE button has a microinteraction that I thought worked fine, but it was missing a bit of information as to where a Pin was saved.

Once the SAVE button is hovered over, the button turns white and the text turns red as feedback to lets users know that they have hovered over it. The curser also chnages to a hand cursor to signal that the button is clickable.

Once the SAVE button is clicked, a thumbnail of the image is dreived form the card and it travels to the board icon in the upper left corner. Feedback is provided as "SAVED TO BOARD" text underneath the board icon to confirm the action. This text fades in once the thumbanil image goes into the board icon and fades our after a few seconds.

The second button I worked on was the VIEW SIMILAR button. This button was a bit more difficult to create. The trigger is a click. When "VIEW SIMILAR" button is clicked, the image card flips over to show clickable arrows and exit "X" button. When arrows are clicked, images advance.When "X" button is hovered over, it turns red.When "X" button is clicked, the card flips back around.

The code that I munipulated was originally code for an online shopping interface. I took inspiration from the online shopping interface and combined it with Pinterest's branding to get to my final design.The code was a combination of HTML, CSS, and JavaScript.

Click here to see my code for my design.

Solution

Click here to see my final design.

As a final design, I believe all the separate elements developed at different times really came together nicely. A defining feature of my design is the easy navigation that he two new buttons provide. The buttons are larger and more apparent. Once they are clicked on, it is obvious what each button does. This redesign allows users to enjoy saving pins and surfing through Pinterest with content that is similar to their saved pins.

Results

This project was a success. I completed my initial idea in the nine weeks given as a timeline. My idea for my final design was successfully coded and implimented more useful information for a platform as broad as Pinterest. The best piece of feedback I recieved from a user is, "You better call Pinterest and show them this."