Valuables Project Process

valuables

A co-creative interface for sharing treasured items.

Table of Contents: PROJECT INTRODUCTION

Project Overview ...................................................1 Site Research .........................................................3 Site Concepts .........................................................5 Selected Concept .................................................11 Modular Layout ...................................................15 Wireframe Sketches ............................................17 Sitemap .................................................................19 Wordmark Studies ...............................................21 User Submissions ................................................23 Prototypes ............................................................25 Homepage Studies ..............................................27 Color Studies ........................................................29 Final Design ..........................................................31

Project Overview The Valuables Project is an interface that persuades an audience to submit photos of a valued personal item along with a brief story expressing human connection to objects. Through a co-creative, accessible environment, users can interact socially in a web platform to understand and drive interest in exploring tangible meaning of items received by a family members or friends. The overall goal of the project is to successfully communicate a direct and coherent message through the development of vocabulary, research, and process. By analyzing collected data, we can identify emerging insights that are pertinent to visual representation.

Page 1

SITE RESEARCH

Beginning research, in a contemporary digital environment where we can interact in a co-creative context, the question becomes: What is possible? By focusing on three key words: Co-create, collaborate, and crowd-sourcing, an interaction can be formed and connected within a system. By understanding the narratives these sites convey, we can recognize the presence of human experience. The goal to engage an audience to take something personal and communicate that within a public realm.

Through my early research I began asking myself questions such as : How do you engage an audience? How do you set a stage for a story? How do you document your outcomes? What are the site’s module functions? These are necessary questions for collecting information and revealing relationships within a digital platform.

While collecting existing evidence of sites that convey a sense of co-creation and collaboration between users, I analyzed the context of these digital environments.

Beginning with sites that urged users to explore playfully in the outside environment to simply looking up food recipes, each had a distinct personal quality that allowed users to connect as well as document their activity within these sites. From here, I began to interpret the modular architecture of these interfaces to create a deeper understanding for how they each communicate a message through visual information.

Page 3

SITE CONCEPTS

After researching, my next step was to propose three or more concept that demonstrate the idea of “What is Possible”. Through a series of lists and evaluations, I narrowed my ideations to five potential directions. When developing these concepts, I began to address if they were feasible in both a visual and syntactical demonstration. Working out the modular flow of each concept, I also targeted an audience and created a user experience diagram to get a feel for the atmospheric essence the interface’s would provide upon visit.

In small group critiques, we discussed each of these concepts. Finding that one stood out as the most intriguing, we made an overall decision on pursuing ideation five, “Behind the Surface”. From here, I began to further research and strategize the functionality and visual representation of the site.

CONCEPT ONE:

Virtual Children’s Book As technology plays a larger role in younger generations, we are looking for ways to stimulate children to tell stories through interaction on screen. Since technology can limit the active participation of self-expression and creation, this platform can provide accessible tools that encourage a form of play. This interface allows children to be guided through a series of steps that allow them to create their own content and images.

First, they would be directed to choose the page orientation of their book and how many pages. Next, they can upload images or simply draw right onto the pages. Another feature offers the flexibility of inputting their own text. There would be images and sample text provided as a tutorial example.

Once the user is done, they can submit, it is then entered into a viewable library of other user books. It is a way for a younger audience to explore imagination in a digital world.

AUDIENCE

The age of the audience would be young children from ages 5 - 12. However for this study, adult participants will be involved.

ENGAGE

Users will have ability to create and publish within a controlled series of steps/metrics. It begins by targeting a specified user and displays in an album.

STAGE

Provides base for an audience to invent through the idea of traditional storytelling in digital form. Users can then interact with piece and provide feedback. The user will also have the option to print their book.

CREATE AND DOWNLOAD The user begins, navigating through a series of screens and steps to complete a virtual children’s book.

First screen displays page orientation and amount of pages. The second screen prompt text/title, where they can enter onto the page directly.

The third screen will allow the user to draw/upload images or use the sample images provided. After that, users can submit the book.

Once the book is submitted, it is seen in a library along with other user books where they can be viewed and rated.

HOW

HTML5, CSS, jQuery, Isotope

Storytelling

Accessibility

Self-Expression

USER EXPERIENCE Imagination

Interactive

Page 5

CONCEPT TWO: Global Mash Up

The world of music is defined through collaboration and talent. As the music world is becoming more digitized, users are more intrigued by the idea of sharing and downloading music from a web source. Aside from buying songs, beats or existing sound bits, this interface will allow users on a global scale to submit a short sound file of an instrument or sound effect. The sounds are then organized by instrument, recent, and genre. Within that page, other users can download files and compose a song in a mixing program such as Garageband or Logic. After editing files, the user is prompted to submit the finished piece which credits the original artists and can be reviewed by others. The user will be notified when their file has been used so that they can rate and review the finished product.

AUDIENCE

The audience will target ages 18 - 35. User does not have to be a musician to be involved.

ENGAGE

Users will have ability to mix something original and have it finished or edited by a complete stranger, introducing the idea of collaboration. It focus’s solely on the user and then builds onto co-creative content.

STAGE

Provides a platform for users to connect through music, prompting social interaction through finished pieces archive.

UPLOAD, CREATE, PUBLISH User begins by creating and uploading short sound files such as mp3, mp4, etc.

Once uploaded, anyone can access and download multiple files of interest to complete their song.

The user then creates a multilayer file song in a mixing program outside of the site.

From there, the user can re-upload the edited file so that other users can comment and rate.

HOW

HTML5, CSS, jQuery, Isotope

Pursuing Talents

Accessibility

Inventive

USER EXPERIENCE Collaborative

Co-Creative

CONCEPT THREE:

Unexpected Treasures Philly is a large city that is well known for it’s cultural and historical richness. As city residents, they observe that there are many parts that are unsightly and with that many parts that are also breathtaking. Sometimes we stumble upon an unexpected treasure or location that inspires a memorable moment. This interface is an opportunity for residents and visitors of Philadelphia to share images or sketches of a place they have never heard or been to, but unexpectedly encountered. It communicates by highlighting the city’s distinct features and exploring them.

The user can then plot the location, once found, on a map where other users can interact with their findings, (recreational, sculpture, a hidden street, etc) things that fascinate us.

AUDIENCE

The audience targets users ages 18 - 40.

ENGAGE

BROWSE, FIND, UPLOAD Users begin browsing the site, viewing found locations on an interactive map that is user generated.

Audience will have ability to upload and publish their findings from a specified location to inform others about the uniqueness of Philly through found experiences.

User should then adventure throughout Philly and document findings through photo and/or sketch.

STAGE

Upload files from user phone or computer and plot location on the interactive map.

Provides a platform for an audience to tell stories through documentation and self-expression. The user can view a map of the locations, connecting with other users.

Comment, rate, write about your experience.

HOW

HTML5/CSS/jQuery/Google Maps

Exploration

Accessibility

Creative

USER EXPERIENCE Interactive

Sharing Stories

Page 7

CONCEPT FOUR:

Observing Humans Every moment, people are constantly moving in rhythm and interaction. We do not realize what we can uncover through watching human behavior. The mind consciously and subconsciously responds to it’s surroundings, influencing our culture significantly. This interface prompts users to choose from 3 locations where they can observe human interactions/ movements and recording footage with their phone. They can then upload their videos and write a “journal” entry to record personal observations. The videos for each location will then be compiled into a main video that will display all videos from locations. This experience will help make us more aware of ourselves and how we naturally interact within a space.

AUDIENCE

OBSERVE, RECORD, PUBLISH

ENGAGE

Users can choose from 3 provided locations within their city. Pick one and observe in space for as long as needed.

The audience targets ages 20 35.

Users will have ability to upload and publish their observations, connecting with other user generated footage. The idea is to limit the user within specified boundaries so that they can find experience changing moments within environmental spaces.

STAGE

Provides a platform for an audience to learn about human behavior and to transform their journals into a larger video collaboration.

Document evidence of human behavior using phone and write journal entry about findings.

Upload videos/journal observations to site where others can view personal observations as well.

Footage is then generated into a main video that captures the essence of human movement/interaction within chosen space - creating a visual piece.

HOW

HTML5/CSS/jQuery

Observation

Behavioral

Accessibility

USER EXPERIENCE Stimulation the Senses

Interactive

CONCEPT FIVE:

Behind the Surface We fill our dwellings with objects that create meaning and sentimental value in our lives.

Over time, they mold with us, becoming part of our character.

As humans we are emotionally drawn to tangible material that can retain personal memories or history. This interface acts as a platform for users to share and experience a glimpse into another’s life through the uploading of images and stories about their favorite personal objects. From there, the user can connect with those who share similar stories through the function of a sorter. The sorter will then categorize the user uploads into tiled images that can be filtered by recent, location, type, and color. The goal is to display an album of memories that are contained within a web page and conveying that with the aid of user generated and user to user interaction.

AUDIENCE

The audience will target users between ages 20-40 who are avid collectors or want to share a personal treasured object/ item.

ENGAGE

Users will have a sorting functionality to interact with as well as commenting, uploading, and posting. It begins by targeting a broad audience and then transitions to a more personalized experience once the user initiates this.

UPLOAD AND SHARE First the user is directed to a main page where they can browse and sort through different metrics of display to view content.

The user will be directed to an upload screen where they can share their objects and type in content.

After, the user can upload their photo which will be added to the album archive.

Other users can then interact through commenting and sharing of there personalized entries.

STAGE

Provides a platform to share what is considered valuable and memorable through the uploading of photos and content.

HOW

HTML5, CSS, jQuery, Isotope

Sharing Meaningful Stories

Accessibility

Stimulate the Senses

USER EXPERIENCE Communication

Interactive

Page 9

SELECTED CONCEPT

During the early stages of concept five, I created a mind map to gain an overview perspective of the different targeting and personal attributes the interface would have.

Once the essence of the site was solved, I went forward to cover the experience of the site. This included target audience, functionality, tools, goals, and features.

At this stage, I visualized the visual context of the site and some of it’s functions, how the user will be guided through the different structures and worked out the linking of pages within the interface.

connection

personal

unique

accessible

customizable

concise

Co-Creative

organized

content storytelling

interaction

Engaging many ages

Beyond Surface

diverse

many cultures

Nostalgic

conscious

experience sentimental imagery

feedback

Crowd-Sourcing

memories

user-generated

photos

text reflection

meaningful individual

vivid

Page 11

BEYOND SURFACE Beyond Surface is an online community focused on providing an individualized experience for those who feel connected to a treasured object that was received by family member or friend. Users can glimpse into another’s life through uploading and shared entries of personal photos and stories, documenting them in an online album.

From a simple friendship ring to a hand-me-down car, Beyond Surface is a place to interact with others through personal memories.

AUDIENCE

Beyond Surface targets users between ages 20-40.

A.

B.

FUNCTIONS

Beyond Surface is a blog platform where users have accessibility of uploading personal photos, storytelling, and a gateway to sharing on social media sites.

FEATURES

- User-generated content.

- Gallery display.

- Commenting/Sharing.

- Sorting function.

- Filtered similar photos.

GOALS

A. Conceptual wireframe of Beyond Surface’s homepage screen. Users are invited to sort through a fluid gallery of submissions that reveal brief descriptions and user when rolled over.

B. Conceptual wireframe of the gallery viewing of an activated image where user can display name, activity, share, and comment.

Beyond Surface will build a co-creative community that serves as a vessel for public sharing and reflection on memories that are provided by personal objects.

TOOLS HTML5, CSS, jQuery, Isotope

Posted by Will Tock | 5 seconds ago “My good luck snake ring was given to me by my best friend on our trip in Woodstock, NY. Little did I know, later that afternoon, the car I was riding in with friends was pulled over for speeding. After frantically pulling over the officer asked a few questions, looked at us, cocked his head, smiled and told us to go on our way, but be more careful about the speed limits. Since then the little snake ring has become infamous as my good luck charm.”

Comment | Share

Interface positioning

Interface character

Essence

Who is it?

Beyond Surface

What is the goal?

Providing a platform that documents human connection and experience to personal objects.

What is special about this?

• Users can voice true stories with an online community that is interested in the sentimental value of personal items.

• Sorting function - provides customizable options of viewing content.

• Focus on nostalgic experiences to inform cocreative content.

• Connects people of many ages and cultures on a national scale.

What does it provide for user?

Co-Creative

BEYOND SURFACE This interface positioning chart highlights an overview of the key features and goals of the site that make Beyond Surface distinct through a strategized brand essence.

This platform emphasizes unique experiences for the user. They can create in an interactive environment.

Nostalgic Content provided reflects on past memories that offer a sense of longing and meaning beyond the surface of objects.

Engaging Connects diverse users, informing an audience on current digital interactions and referring back to own content.

Crowd-Sourcing

Interface for sharing valuable items.

Notes: - Breakdown of the site’s intentions and how that translates to the user.

- The essence simply states the interface is a platform for sharing personal objects.

Defines a specific task to collect user generated images and brief description.

An individualized experience connecting users with the power of storytelling.

Page 13

BEYOND SURFACE While the interface is under construction, the screens provided illustrate a rough visual prototype and walk-through of the site’s modular flow and key features.

HOMEPAGE

Beyond Surface’s main hub features a thumbnail gallery view. In this view, the user will be able to scroll infinitely in horizontal motion like a photo album.

GALLERY VIEW

When image is activated, gallery Lightbox view will appear similar to Facebook layout where the user can display story, comment, and like. username would not be included. 2-3 comments will be displayed at a time. The user can also sort through a thumbnail carousel of all images within gallery in successive order underneath the enlarged version of the image.

MODULAR LAYOUT

UPLOAD/SUBMIT FORM

As the user uploads a photo/description, they are prompted to enter in information such as name, location, object, description, and color. Each of these entries act as “tags” so that the photos can function with sorting.

View of Isotope function

jQuery Lightbox Plug-in display

BEYOND SURFACE The backend of Beyond Surface will be completed using a collaboration of HTML5, CSS, jQuery plug-ins, and Isotope.

User text fields would be created with raw HTML and CSS and submitted in a form that will update right into the album.

A Lightbox feature will also need to be coded into the large screens of photo submissions.

Beyond Surface’s goal is to create an originally developed and functional environment.

Page 15

SITEMAP

At this point in the development process, I renamed the interface to “Valuables”, with emphasis on the “u” to express the personal motive of the site through playful and current language. The message of what the site is about is more apparent in this new name rather than in “Beyond Surface” which was more focused on the materiality of the objects and the memories behind their surfaces.

Valuables is more coherent and relatable to its audience.

After several revisions, I designed a sitemap to understand the functions as I walk through the site. My goal was to make the site simple and accessible so that the user does not have to navigate through many pages since the gallery is the main focal point. On the otherhand, the idea of making a site that was simple would be more beneficial to the syntactic design process.

Homepage

VALUABLES This site map provides an overview of the flow and multiple levels of Valuables.

Gallery Lightbox

Gallery

- Scrollable gallery - Commenting - Social Media Likes

Notes: - Site will have horizontal scrolling and fixed header.

- Lightbox would have scrolling as well, where user can comment and scroll through previous comments, like photo or add to favorites.

Sorter - Recent - Location - Family/Friend

Challenges - Presents challenge - Displays previous - Sorting

Submissions - Text Fields - Radio Buttons - Uploading Images

My Drawer

Login/Sign Up

- User’s Submissions - Favorites - Like/Commenting - Sign Out

- When submitting photos/ description, text fields/radio buttons will filter into tags organized within the sorter.

Page 17

valuables

valuables

valuables

valuables

Baskerville

WORDMARK STUDIES

Bembo Std

Hoefler Text

Frutiger LT Std

valuables

valuables

Sabon

Avenir

valuables

valuables

Stempel Garamond

Alongside the color studies, I took a brief moment to look at type studies to solidify the wordmark. Trying an array of serif and san serif typefaces, I felt that the serif fonts was more cohesive in conveying time and preciousness.

Akzidenz Grotesk

valuables

Avant Garde ITC

valuables

valuables

valuables

Today Shop

Gotham HTF

Rockwell

Adobe Caslon Pro

valuables

Helvetica Neue

valuables

valuables

valuables

valuables

valuables

valuables

valuables

Scala

Univers

Myriad Pro

Lucida Sans Std

Scala Sans

Whitney HTF

valuables

valuables

valuables

valuables

Formata

Palatino

Adobe Garamond Pro

Times

Narrowing down the two best weights and serif fonts, I was choosing between Adobe Garamond Pro and Times.

Though Times is more of the expected route, the curvatures and terminals of the “a� letterforms contrasting the bold/regular weights seemed to work best with the tone of Valuables.

Page 19

“Send me a photo of a treasured object that has been passed on or given to you by a family member or friend”

USER SUBMISSIONS On the side of my design of Valuables, I began collecting images from friends and family members through the use of a Facebook group and Tumblr. Over the course of the semester I accumulated roughly forty images from different people, some submitting more than once. In order to adjust to the natural algorithms of submissions, I held a challenge prompt each week to further define the language and scope of the site’s intentions through user testing and collection.

When starting this process, beginning with a more generalized prompt, I envisioned the site to be filled with precious items that were quite beautiful in presentation.

I had to alter my focus in order to allow the users to respond in a way they interpreted the language. Looking back on this process, I would extend the length of the weekly challenges for it wasn’t enough time for the users to reflect on the subject matter. This study helped inform other aspects and decisions made within the development of the project.

The point of this study was to understand the user, exposing data and identifying commonalities and interpretations of the subject matter. From here, this testing has influenced resonating ideas, implications, and collaboration, creating a more intimate and relatable experience.

CHALLENGE ONE: “Send and share an object that does not incorporate animals”

CHALLENGE TWO: “Send me an object that has the essence of time”

CHALLENGE THREE: “Send me a photo of your most valued toy”

Learned: - Don’t use negativity in a prompt.

- Received a plethora of various objects following prompt.

Learned: - Prompt used a language that was a bit less relatable though did receive object that fit the challenge.

Learned: - Received more precious objects that had the essence of time.

- Interpreted as more precious objects.

Page 21

WIREFRAME SKETCHES Before any digital renderings of site wireframes, I had sketched out several thumbnail layouts of each function and page within the site, beginning with the home page and ending with the submit page.

In each sketch, I focused how I can organize information in different ways that were practical while still reflecting the sites’ intentions. My first thought was to try a horizontal scroll because I wanted the gallery to resemble movement of an actual photo album.

The addition of the submission page would offer a seamless upload of content provided by the user and entered into the home page gallery database of images. Tags would help sort all content.

Page 23

CONCEPT ONE: HORIZONTAL

CONCEPT TWO: VERTICAL

PROTOTYPES Once the wireframes were a bit more finalized, I designed prototypes based on the functions I had been defining.

The site was explored in both a horizontal and vertical scroll gallery that has a hover state that reveals text over each item. Here the sorter can also be accessed so the user can view multiple categories of organized objects.

For most of the functions within the site, the user will remain on the homepage to access and scroll through the gallery while the header and navigation is fixed.

The submit page is the only page that remains separate.

The four sorting categories were chosen based on the overall collections of items that I had been collecting from friends and family, alongside the process of creating this interface. This would be implemented by the use of tagging when the user submits an item.

Page 25

HOMEPAGE STUDIES Through exploration, I designed a series of homepage studies based on different grid structures. The objective was to display user images at a comfortable size to allow for lower image quality.

Though the grids that allowed images to be scaled larger, the most successful grid was the smaller thumbnail display. This way, the page is rich with imagery and also has a welcome panel that disappears when scrolled through.

The welcome panel eliminates the use of an about page.

Page 27

COLOR STUDIES

Observing all of these studies, the lighter background iterations were least effective and too close in value to the imagery. The wordmark also proved to b e more effective when using a white rather than a gray. The atmosphere of the site is meant to convey a sense of warmness so I felt that the deep blue-charcoal and golden-orange combination was most successful in capturing the warm tonality as well as the element of time.

To figure out the color system of the site, I designed a series of color studies, implementing the use of the color accent in the wordmark to be reflected in the welcome panel and throughout activated links within the site.

Page 29

FINAL DESIGN In the final design process, I added in a login/sign in page as well as a challenges page and a personal “my drawer� screen that is the equivalent of a user profile. I wanted to take this site to the next level, giving it more personal context for the user. Together, the addition of more screens give the site more dimension and also bring the challenges that were completed off screen, onto the browser screen.

In these final screens the user can sort, view images in Lightbox gallery, submit challenges, and access and sign up for their own account where they can view their own submissions as well as submissions made by others. The next step in this site is to make it fully functional with code and to add in a search bar so that reaching other users and objects would be more easily interconnected in this system.

Page 31

Marisa Bohlmann GDES 402 03 Interface Project FA’ 2012 Dick Felton