Project Summary

I am updating my Every Picture Studio Project where users can interact with all of my outfits and their stories; they can access it through smooth scrolling or by clicking the icons.

Design Strategies

Because my Every Picture project is inspired by Pinterest, I want to ensure that the visual elements in my website feels like something a user would see in the actual Pinterest app. So far, the Pinterest only has two main colors: white (or black if dark mode) and red. In the current version of my project, I included those colors for the Pinterest aesthetic.

I also noticed that on the Pinterest app, when users hover over a post/image, there’s an overlay that grays the image, a short title and a save button. Hence, to update my project, I plan to include the overlay that grays out the image and a short title that describes what the image is; I don’t think I’ll be able to add the save button since we’re not taking any data yet.

For the navigation bar, I want to establish a sense of unity by making the navigation based on the common colors of the outfit. For example, in my 2020 outfit, the overarching color is yellow so I’ll make the nav button for that year pastel/spring yellow.

As for typography, I think I established clear hierarchy by making the title bigger and bolder. I think I still need to fix the positioning of the text though since some parts the use of white space seems awkward.

Experience Goals

For many, Pinterest is a calming and stress-reliever social media app and I hope to reflect that in my Every Studio project. I typically use Pinterest to look for fashion inspiration and style inspiration and sometimes, I even check where they got it from. I hope to become a fashion godmother to those who come to my website.

I hope they can use this project to help find their style and figure out what clothes compliment each other. I also want this to be a fashion journey for me and see how much my style has evolved given the context/situation at that time.

I plan to achieve these goals by staying consistent with my design and also provide a smooth experience.

Project Goals

Fix the jitter when users click on specific clothes (it jitters because users can interact with it by scrolling and clicking and I think the set location from the scrolling function messes up the clicking function)
Add an indicator/instruction that informs users that they can click or scroll to highlight the different clothes
Make transitions and animations smoother such as adding ease in or ease out to enhance user experience
Make all outfits clickable to show full screen in detail where users can interact and also highlight specific clothes
Add a navigation bar to go through all outfits without having to go back to the main page.

Interaction Strategies

For my final project, I want to establish a smooth interaction to create a pleasurable and calming user experience just like how Pinterest makes me feel. I want to remove all instant pop-ups and animation and replace them with ease in.

Also, I’m thinking that when the user first opens the outfit/image, I’ll set a timeout using Javascript to show the instructions first. Though I think I’m still gonna experiment on that behavior because I don’t know if I want to set a timer for the instructions or if I want the users to click on the picture first to clear out the instructions.

Perhaps, I’ll just move the instructions to another place so that users can still access it. I want the all scrolling to be smooth both vertically and horizontally.