Valuables Project Process

34
valuables A co-creative interface for sharing treasured items.

description

The Valuables Project is an interface that persuades an audience to submit photos of 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.

Transcript of Valuables Project Process

Page 1: Valuables Project Process

valuablesA co-creative interface for sharing treasured items.

Page 2: Valuables Project Process

PROJECT INTRODUCTION

Table of Contents:

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

Page 3: Valuables Project Process

Page 1

Project Overview

The Valuables Project is an interface that persuades an audience to submit photos of a val-ued 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 under-stand 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 coher-ent 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 4: Valuables Project Process

SITE RESEARCH Beginning research, in a contemporary digital environ-ment 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-sourc-ing, an interaction can be formed and connected within a system. By understanding the narratives these sites convey, we can recognize the presence of human experi-ence. 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 ques-tions 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.

Page 5: Valuables Project Process

Page 3

While collecting existing evidence of sites that conveya 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 un-derstanding for how they each communicate a message through visual information.

Page 6: Valuables Project Process

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 demonstra-tion. 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 intrigu-ing, we made an overall decision on pursuing ideation five, “Behind the Surface”. From here, I began to further research and strategize the functionality and visualrepresentation of the site.

Page 7: Valuables Project Process

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

ENGAGEUsers 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.

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

HOWHTML5, CSS, jQuery, Isotope

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 pro-vided 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.

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

First screen displays page orien-tation 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 oth-er user books where they can be viewed and rated.

CREATE AND DOWNLOAD

Self-Expression

Storytelling

Accessibility

Interactive

Imagination

USEREXPERIENCE

Page 5

Page 8: Valuables Project Process

Inventive

Pursuing Talents

Accessibility

Co-Creative

Collaborative

USEREXPERIENCE

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 inter-face will allow users on a global scale to submit a short sound file of an instrument or sound effect. The sounds are then or-ganized 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.

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

ENGAGEUsers 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.

STAGEProvides a platform for users to connect through music, prompt-ing social interaction through finished pieces archive.

HOWHTML5, CSS, jQuery, Isotope

UPLOAD, CREATE, PUBLISH

User begins by creating and upload-ing short sound files such as mp3, mp4, etc.

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

The user then creates a multilayer file song in a mixing program out-side of the site.

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

Page 9: Valuables Project Process

Creative

Exploration

Accessibility

Sharing Stories

Interactive

USEREXPERIENCE

BROWSE, FIND, UPLOADAUDIENCEThe audience targets users ages 18 - 40.

ENGAGEAudience will have ability to upload and publish their findings from a specified location to inform oth-ers about the uniqueness of Philly through found experiences.

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

HOWHTML5/CSS/jQuery/Google Maps

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 breathtak-ing. Sometimes we stumble upon an unexpected treasure or location that inspires a mem-orable 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, (recreation-al, sculpture, a hidden street, etc) things that fascinate us.

Page 7

Users begin browsing the site, view-ing found locations on an interac-tive map that is user generated.

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

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

Comment, rate, write about your experience.

Page 10: Valuables Project Process

AUDIENCEThe audience targets ages 20 - 35.

ENGAGEUsers 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.

STAGEProvides a platform for an audience to learn about human behavior and to transform their journals into a larger video col-laboration.

HOWHTML5/CSS/jQuery

CONCEPT FOUR:Observing Humans

Every moment, people are con-stantly moving in rhythm and interaction. We do not realize what we can uncover through watching human behavior. The mind consciously and sub-consciously responds to it’s surroundings, influencing our culture significantly. This inter-face prompts users to choose from 3 locations where they can observe human interactions/movements and recording foot-age with their phone. They can then upload their videos and write a “journal” entry to record personal observations. The vid-eos 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.

Behavioral

Observation

Accessibility

Stimulation theSenses

Interactive

USEREXPERIENCE

OBSERVE, RECORD, PUBLISH

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

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

Upload videos/journal observations to site where others can view per-sonal observations as well.

Footage is then generated into a main video that captures the es-sence of human movement/interac-tion within chosen space - creating a visual piece.

Page 11: Valuables Project Process

Stimulate the Senses

Sharing Meaningful Stories

Accessibility

InteractiveCommunication

USEREXPERIENCE

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

ENGAGEUsers will have a sorting func-tionality to interact with as well as commenting, uploading, and posting. It begins by targeting a broad audience and then transitions to a more personal-ized experience once the user initiates this.

STAGEProvides a platform to share what is considered valuable and memorable through the upload-ing of photos and content.

HOWHTML5, CSS, jQuery, Isotope

CONCEPT FIVE:Behind the Surface

We fill our dwellings with ob-jects 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 memo-ries 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 convey-ing that with the aid of user generated and user to user interaction.

Page 9

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.

Page 12: Valuables Project Process

SELECTED CONCEPT During the early stages of concept five, I created a mind map to gain an overview perspective of the different tar-geting 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 link-ing of pages within the interface.

Page 13: Valuables Project Process

Beyond SurfaceEngaging

content

accessibleconcise

organized

many ages

many cultures

conscious

sentimental

photos

meaningful

individual vivid

reflection

text

unique

diverse

feedback

user-generated

customizable

connectionpersonal

storytelling

experience

memories

imagery

interaction

Nostalgic

Crowd-Sourcing

Co-Creative

Page 11

Page 14: Valuables Project Process

A.BEYOND SURFACE

Beyond Surface is an online community focused on provid-ing 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, document-ing 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.

AUDIENCEBeyond Surface targets users between ages 20-40.

FUNCTIONSBeyond Surface is a blog plat-form where users have acces-sibility 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.

GOALSBeyond Surface will build a co-creative community that serves as a vessel for pub-lic sharing and reflection on memories that are provided by

personal objects.

TOOLSHTML5, CSS, jQuery, Isotope

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 com-ment.

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

B.

Page 15: Valuables Project Process

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.

Notes:

- Breakdown of the site’s inten-tions and how that translates to the user.

- The essence simply states the interface is a platform for shar-

ing personal objects.

Interface positioning Interface character Essence

Co-CreativeThis platform emphasizes unique experiences for the user. They can create in an interactive environment.

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

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

Crowd-SourcingDefines a specific task to collect user generated images and brief description.

Interface for sharingvaluable items.

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 co-creative content.

• Connects people of many ages and cultures on a national scale. What does it provide for user?An individualized experience connecting userswith the power of storytelling.

Page 13

Page 16: Valuables Project Process

BEYOND SURFACE

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

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

GALLERY VIEWWhen 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 includ-ed. 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.

UPLOAD/SUBMIT FORMAs the user uploads a photo/de-scription, 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 func-tion with sorting.

MODULAR LAYOUT

Page 17: Valuables Project Process

BEYOND SURFACE

The backend of Beyond Sur-face will be completed using a collaboration of HTML5, CSS, jQuery plug-ins, and Isotope. User text fields would be cre-ated 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 cre-ate an originally developed and functional environment.

View of Isotope function

jQuery Lightbox Plug-in display

Page 15

Page 18: Valuables Project Process

SITEMAP At this point in the development process, I renamed the interface to “Valuables”, with emphasis on the “u” to ex-press 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 “Be-yond 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 under-stand 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 other-hand, the idea of making a site that was simple wouldbe more beneficial to the syntactic design process.

Page 19: Valuables Project Process

Page 17

Homepage

Gallery

Sorter

- Recent- Location- Family/Friend

- Text Fields- Radio Buttons- Uploading Images

- Presents challenge- Displays previous- Sorting

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

- Scrollable gallery- Commenting- Social Media Likes

VALUABLES

This site map provides an over-view of the flow and multiple levels of Valuables.

Notes:

- Site will have horizontal scroll-ing and fixed header.

- Lightbox would have scrolling as well, where user can com-ment and scroll through pre-vious comments, like photo or add to favorites.

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

SubmissionsChallenges My Drawer Login/Sign Up

Gallery Lightbox

Page 20: Valuables Project Process

valuables

valuables

valuablesSabon

Baskerville

valuables

valuables

Hoefler Text

Avenir

Akzidenz Grotesk

valuables

valuables

Bembo Std

Frutiger LT Std

valuablesStempel GaramondWORDMARK STUDIES

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.

Page 21: Valuables Project Process

valuables

Adobe Garamond Pro

Adobe Caslon Pro

valuables

valuables

valuables

valuables

Avant Garde ITC

Formata

Myriad Pro

valuables

valuables

valuables

valuables

Gotham HTF

Helvetica Neue

Lucida Sans Std

Palatino

valuables

valuables

valuables

valuables

Rockwell

Scala

Scala Sans

Times

valuables

valuables

valuables

Today Shop

Univers

Whitney HTF

Page 19

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 curva-tures and terminals of the “a” letterforms contrasting the bold/regular weights seemed to work best with the tone of Valuables.

Page 22: Valuables Project Process

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.

“Send me a photo of a treasured objectthat has been passed on or given to you

by a family member or friend”

When starting this process, beginning with a more gen-eralized 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 develop-ment of the project.

The point of this study was to understand the user, ex-posing data and identifying commonalities and interpre-tations of the subject matter. From here, this testing has influenced resonating ideas, implications, and collabora-tion, creating a more intimate and relatable experience.

Page 23: Valuables Project Process

Page 21

CHALLENGE ONE:

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

Learned: - Don’t use negativity in a prompt.- Received a plethora of various objects following prompt.

CHALLENGE TWO:

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

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

CHALLENGE THREE:

“Send me a photo of your most valued toy”

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

Page 24: Valuables Project Process

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 hori-zontal scroll because I wanted the gallery to resemble movement of an actual photo album.

Page 25: Valuables Project Process

Page 23

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

Page 26: Valuables Project Process

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.

CONCEPT ONE: HORIZONTAL

CONCEPT TWO: VERTICAL

Page 27: Valuables Project Process

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

For most of the functions within the site, the user willremain 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.

Page 28: Valuables Project Process

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.

Page 29: Valuables Project Process

Page 27

Though the grids that allowed images to be scaled larger, the most successful grid was the smaller thumbnail dis-play. 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 30: Valuables Project Process

COLOR STUDIES

Page 31: Valuables Project Process

Page 29

Observing all of these studies, the lighter background it-erations 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 32: Valuables Project Process

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 person-al 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, ontothe browser screen.

Page 33: Valuables Project Process

Page 31

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 interconnectedin this system.

Page 34: Valuables Project Process

Marisa BohlmannGDES 402 03Interface ProjectFA’ 2012Dick Felton