Through Your Lens Process Book
Highlight Reel In the beginning of the project, I started by analyzing my own image galleries. Images were really chaotic but what I found really interesting in looking at my own database (which I keep in google photos as Iâ€™m an android user and it helps me access my images across my mac, school computers, my phone, share them with my parents, etc.) is that smart object recognition and ai are already at play. Google has done a great job at paving the path for categorizing and on a very peripheral level, curate categories and experiences from images.
Lists & Patterns
After collecting my images, I started to organize them; shown is some of the organization I did. Rows are to location as columns are to category (people/pets, food, landscape/architecture, type/art). My images were fitting into a few categories mainly location based and image theme based. Images are colorful and have a wide variety of compositions.
Interest // Story Taking my organized images, I took it to the next level and tried to interpret the story of my database. My story was representing the story of color and how you convey trips on social media or convey an aesthetic that may group pieces of multiple stories. How can images be shared in a way that is curated, thoughtful, and insightful.
Leveraging Technology Utilize the ability to organize and categorize the special stories that already exist and give social media influencers the ability to preview preset stories and trips using smart object recognition and AI.
Inspiration // Mood Board Importance of simplicity, web brutalist techniques, active white space and modularization. Looks to an active and flexible grid and purposeful and trendy typography. Also looked into hover elements that are common in web brutalism and the stripped away web design that is very popular today.
Sketching Sketching included exploring flow and page design and possible animations - also explored different ideas and concepts that tie back to my overarching idea. Interest in space between images and idea of category before images and then flowing through options prior to making a concrete decision.
Flow // Peer Crits At this stage, we met in small groups and broke down user flow from the wireframes we hand sketched prior. In my instance, I ended up sketching some new pages and really broke down how my interface could flow in new and unique ways.
1st Digital Draft My first file was pretty messy, I was playing with styles and really massive type. Images were disorganized and lacked the backing of a grid to help guide the system as a whole. Some pages made little to no sense and a lot of the buttons didnâ€™t look clickable.
2nd Digital Draft Little changed between the first and second drafts. I built out some more pages and changed some pages to feel out the kinks that my class noted on. I also built out some hover states and clickability.
User Testing User tester 1: Luke Leissring Emphasis on type size and orientation of grid screens as well as overall flow of interface. Additionally made notes on overall layout and underlying grid
User tester 2: Anthony Lopez Emphasis on motion and confirmation of effects on the screen (ie rollover motions etc.).
3rd Digital Draft Third draft included complete revisions. The entire project was put on a grid and type was made substantially smaller. Screens were built out with pop-ups and thoughtful grid placement. Images were made bigger and smaller. Type was more thoughtful and less directions were put into interface. More hover states were built out. Eventually, I was told that these pop-ups were working against my ideas. Grid was effective but type was too loud against images.
4th (and last) Digital Draft Final draft consolidates typography and modularizes the main function of the interface. The interface becomes inevitable more interactive and friendly. It has more web brutalist elements like the lime green highlight and fun buttons with hover elements. The grid was also redesigned to be slightly wider and bread crumbs were added to the top to show the user where they were in context of the sequence of the interface.