Final Project Conclusion

Reconsidering the scope of the original project led to he creation of a far more interesting application, and something that I really want to continue working on in the future. From the beginning it was a very challenging process that each time grew but at the same time became more exciting.

The process in my project was one of the very interesting and fulfilling parts of developing this application. I faced a challenge of rediscovering ActionScript 3.0 and work with some robust and powerful code. I built my Application using the Flex Builder which makes it 130% percent dynamic and code-driven. This was a great opportunity for me to work with a scripting languaje that I left behind a long time ago, and that is responsible for me being involved in this major.

As you can read in previews posts, you will find where my project was originally going and how it shifted to a more interesting idea with a lot more potential.

Here is a document to see the original idea and documentation:

http://pixelsandmilk.com/flickromatic/documents/final_document_past.pdf

USER TESTING:

I tested the site with some people I know, close friends from the WDIM program and a couple other people. Thanks to their criticism I was able to fix some of the bugs that were happening and also find interesting ideas of things that could be improved in the Application.

One of the interesting ideas that were a result of the user testing, is to add more information about each user. Information like location, description and other things that are stored in the flickr database.

Flickr-O'matic is born:

http://pixelsandmilk.com/flickromatic/documents/final_document_new.pdf

This flickr-O'matic would be a more powerful and interesting project to work in the future. I see this application having a lot more potential and is definitively something I will be working on in the future.

Here is the link to visit the Beta Prototype of Flickr-O'Matic: (enjoy)

http://pixelsandmilk.com/flickromatic/


For any comments or suggestions please don't hesitate to contact me.

Final Project - Preproduction Progress

Project Specifications:

Main Objective: What it is and What it does?

The main objective of this site is to create a fun and entertaining interface to share content from 2 social networks: Flickr and Twitter. This will be a one-page site where the user will interact and play with different graphical elements to receive a specific visual interaction. The user interacts with the site by finding hidden graphical elements that create some specific animation or interaction that reveal the content of the site.

One goal of the site is to give the user a very graphic and interactive experience by clicking around the different elements within the site. For the graphics of the site, I want to design an unusual mini-world scene where the user can interact with a bunch of elements within that world.

This will be an experimental project where I will be using tools that I am not used to working with and others I stopped using a long time ago and that I want to come back to. I will be playing around with Flash and ActionSript 3.0 to give the site a very dynamic feel and also experimenting with some interesting illustration techniques. I will also be learning how to use different development tools like the Adobe Flex Builder.

Target Audience:

This is an entertainment site that is basically open to anybody that enjoys sharing content in the web and has a Twitter or Flickr Account.

My main target among these people, are people who work and live in the web and have creative careers. Web designers, web developers, programmers, illustrators, photographers are my main focus.

The people are interested in finding people with similar interests to share and expose their work.

Site Requirements:

Technologies used:

• Adobe Flex Builder
• ActionScript 3.0 and XML
• HTML and CSS
• Adobe Flash and Adobe Illustrator for asset creation
• Flickr and Twitter APIs

Stages for site Development:

• STAGE 1 - Broken down into the following steps:
  
  
  
  1. Finish the Graphic interface and define all the visual elements in the site.
  2. Define the interaction and behavior of each visual element that will be dynamic.
  3. Study Technical Needs and Requirements. Listed bellow.
  4. Start putting things together:
     
     • Illustrator to Flash migration and creation of visual assets.
     • Begin interface programming: Visual elements behavior and events.
     
     


• STAGE 2 - Broken down into the following steps: (Time constraints apply)
  
  
  
  1. Test API connections with Flickr and Twitter.
  2. Flickr API implementation:
     
     • Write and implement functionality for connection.
     • Make content animations.
  3. Twitter API implementation:
     
     • Write and implement functionality for connection.
     • Make content animations.
     
     
     
     
• STAGE 3 - Broken down into the following steps: (Most likely will not get here within the scope of this class)
  
  
  
  1. Allow users to input their own Flickr or Twitter names and preview their content with the same functionalities.
  
  

Technical Needs and Requirements:

• Study functionality and define programming required.
• Site Structure research: MVC, directory structure, additional notes.
• Research on programming requirements: Trigonometry, physics, connections, animation, etc.
• Study the Flickr and Twitter APIs - What can and cannot be done?

Final Project User Persona

So even though I don't believe in creating User Personas, and I am still trying to find the positive side of doing them, here is me filling the requirements.

User Persona:

• Jonathan Moss
• Gender: Male
• Average age: 26 (20-35 is my target age range)
• Location: San Francisco, California.
• Occupation: Freelancer.
• Is part of a couple of web communities, Flickr and Twitter are two of them.
• Activities and what he likes:
  
  • Lives 85% of the time in front of his computer.
  • Has some sort of creative Hobby: Photography
  • Likes learning about web design and development.
  • Pages with good content and graphics always end up in his Bookmarks.
  • Enjoys well built web sites, with nice layouts, typography and overall design.

USER PERSONAS - A Pointless Practice

I did a little research on User Personas to try to understand why people find it useful to create them for their user-centered design process. I personally believe that creating fictitious characters is a waste of time and will just communicate the opinions of those people creating them. To prove my opinion, I basically did a research on people that defend this idea, and believe that this kind of practice will improve the design process. I also looked for those who dare to say that creating User personas is just bullshit. So lets see what various people have to say about the topic.

I believe that defining a target group is definitively helpful in a Project Creation Process, in order to help understand and define a demographic towards which your product or service is directed. Accordingly, it will make sense to find people who fit this demographic, REAL PEOPLE, to make user testing for usability, quality assurance and what not.

So lets start with the basics, what are User Personas?

Personas are archetypal users of an intranet or website that represent the needs of larger groups of users, in terms of their goals and personal characteristics. They act as ‘stand-ins’ for real users and help guide decisions about functionality and design.

Personas identify the user motivations, expectations and goals responsible for driving online behaviour, and bring users to life by giving them names, personalities and often a photo.Although personas are fictitious, they are based on knowledge of real users. Some form of user research is conducted before they are written to ensure they represent end users rather than the opinion of the person writing the personas.Understanding the needs of users is one of the most critical success factors for any intranet or website project. Understanding these needs in a rapid fashion has arisen as project timelines have shortened and the pressure has mounted to deliver value early and often.

(Calabria)

Personas are fictitious characters created to represent the different user types within a targeted demographic that might use a site or product. Personas are useful in considering the goals, desires, and limitations of the users in order to help to guide decisions about a product, such as features, interactions, and visual design. Personas are most often used as part of a user-centered design process for designing software and are also considered a part of interaction design (IxD), however they are also used in industrial design.

(Wikipedia)

The first and most important thing you’ll need to do is gather information about your users. Depending on your resources and budget this can be done in various ways and to varying levels of detail.

(Robinson)

So, if User Personas are fictitious and are based on budget, why do we want to spend that time and money on something that is fake? Why not just spending that time and resources in finding REAL people that fit your demographic? So, if you are a smaller company or even a freelancer your efforts will be even more meaningless. These are just some thoughts that come to mind.

The other side of the coin:

Personas seem to go in and out of fashion. Not long ago, people were advocating hyper-researched personas done in painstaking detail, these days designers seem more inclined to leave them out of the process.

So, are personas actually useful or should we stop wasting time and ditch them?

[...] I find personas virtually useless when it comes to design, and I very rarely reference them in making design decisions. For me, personas aren’t about design, but that doesn’t mean they’re not incredibly powerful in other ways.

(Reichelt)

And to conclude my post, here is probably the better explanation of why User Personas are a practice that is outdated and ready to be deprecated. Here is Jason Fried from 37 Signals with his and the companies opinion about this topic:

Do you use formal personas when thinking about the users of a new app?

We don’t use personas. We use ourselves. I believe personas lead to a false sense of understanding at the deepest, most critical levels.

Every product we build is a product we build for ourselves to solve our own problems. We recognize our problems aren’t unique. In fact, our problems are probably a lot like your problems. So we bundle up the solutions to our problems in the form of web-based software and offer them for sale.

Personas don’t talk back. Personas can’t answer questions. Personas don’t have opinions. Personas can’t tell you when something just doesn’t feel right.

People talk back. People answer questions. People have opinions. People can tell you when something just doesn’t feel right.

(Fried)

Sites Cited

Calabria, Tina. "An introduction to personas and how to create them." uiGarden.net. 3 August 2005. 9 March 2009. <http://www.uigarden.net/english/an-introduction-to-personas-and-how-to-create-them#top>

"Personas." Wikipedia: The Free Encyclopedia. 1 March 2006. 9 March 2009 <http://en.wikipedia.org/wiki/Personas>

Robinson, D. Keith. "Practical Persona Creation." evolt.org. 10 February 2003. 9 March 2009 <http://www.evolt.org/article/Practical_Persona_Creation/4090/56111/>

Reichelt, Leisa. "Yes, you should be using personas." uiGarden.net. 5 June 2007. 9 March 2009. <http://www.uigarden.net/english/yes-you-should-be-using-personas>

Fried, Jason. "Ask 37signals: Personas?" Signal vs. Noise. 6 November 2008. 9 March 2009. <http://www.37signals.com/svn/posts/690-ask-37signals-personas>

Final Project Mock-Ups

So here are some ideas I have been working on for my final project. This is the beginning of the illustration process.



This is the main graphic for the different island bases in the mini-world.



Here is some details of the water tank.

THE EXPLORATORIUM - Brainstorming Final Project Ideas

Today we had a good change in routine for my Interactive Design for Entertainment class, we went on a field trip to the San Francisco Exploratorium. In this post you will see some of the interesting things we saw and played with. I will also talk about how this visit brought many ideas and will contribute to to the development and design of my final project for this class.

So first things first.... here are the fun pictures and videos from the visit:



After a little while we joined the rest of the crew.



Here is Neil (@neiltan.NET) drinking water from a toilet... enjoying it too.



Here is our brand new band...



And here is the Startle Machine! Kendra and I tried it and were filmed, but our reactions were not as funny to be uploaded. ON THE OTHER HAND, my friend Justin had a different reaction that was actually worth uploading to this Post. So here you go, enjoy!



Lastly, here are some of my thoughts, and pictures I gathered that will help me find some inspiration for the final project. As I explained in my last post, I want to build a site where I will be designing a mini-world with interesting things to click around. I haven't decided yet on how the graphic is going to look like, but this trip definitely gave me some really good ideas.

One of the things this world will have is some vegetation. Here are some interesting plants that might serve as inspiration for these illustrations:


Another thing I mentioned earlier, is building this mini-world contained in a crystal ball. Here is a picture I thought was interesting, this gave me some ideas on some of the things that might happen in this mini-world.

Assignment 4 - Final Project Proposal

Original Concept:

The idea for this project is to create a web site that will display a fun way of interacting with it. The main goal for the site is to give the user a very graphic and interactive experience while clicking around the different elements within the site. For the graphics of the site, I want to design an unusual mini-world scene where the user can interact with a bunch of characters and elements within that world. It will more less be a little scene full of easter eggs.


Scope:

This will be an experimental project where I will be using tools that I stopped using a long time ago and that I want to come back to. I will be playing around with Flash and ActionSript 3.0 to give the site a very dynamic feel and also experimenting with some interesting i llustration techniques. The final look and feel is still not defined but it will be soon.


Functionality of its elements:

Elements would have different dynamic behaviours based on different variables, like time, mouse events, etc.


Materials/Technologies/Content Required for completion:

My Computer, Adobe Flash CS4, Text Editor, Adobe Illustrator.

Assignment 3 - Transitions - Red Bull

A good transition is an extremely useful way to change from one stage to another in a website, to distract the user from something being preloaded in the background, or just simply as an eye candy. I think a good place where one can implement a transition is in a Flash Developed site where there is a need for a preloader. Preloaders are a perfect and intelligent place to implement a good transition to keep the user interested.

To create this exercise I made three initial sketches of the ideas I wanted to implement, all of them in reloaders. Here they are:

Sketch 01:


Sketch 02:


Sketch 03:


The example that I chose to implement was the Red Bull idea, which I thought was funny, and at the same time a good strategy that will make the user understand what the product is all about. Here is a link to see the live site:

http://sj371.aisites.com/quarter_vii/interactive_des_enter/transition/

Assignment 2 - Interesting Navigation - Jungle Exploration

For this assignment I built an interesting jungle navigation where the user travels from one stage to another. In my opinion this is an interesting solution to make the user stay in our websites for longer periods of time. The user would most likely want to explore what is around the stage or world we have designed for them, prolonging the time they spend in the site.

The content doesn't necessarily have to be the focus of attention but the graphic elements we hide around this small universe we are designing. To enhance this type of navigation I think adding some Easter eggs around the site will improve the user experience and would make the whole purpose of making a moving stage work better.

So visit the site and if you would like drop a message with your opinion.

http://sj371.aisites.com/quarter_vii/interactive_des_enter/navigation/

Hope you enjoy and can learn something. Don't think twice if you need to ask something or if you have any comments.

Assignment 1 - Identifying Modes of Online Entertainment

After exploring the Web for quite a long time I gathered a list of online entertainment sites which are listed by categories and also the reason why they were chosen. To select this sites I was looking for stickiness and good content, and how the entertaining side of the page improved the way an idea, or product was promoted and how this site would encourage me to come back later.

Band Website:
Johnny Hollow Music is a great example of an interesting and interactive way of promoting a bands music. Is a game interesting to complete which at the same time plays the bands music in the back. Also gives free music away if a riddle is completed.
http://www.johnnyhollowmusic.com

Movie Website:
Good movie site that display an interesting interactivity to show the different parts of the movie. Has various ways to get the user interested in watching the movie such as games, trailers, downloads and more.
http://www.007.com/

Short Entertainment or "Short":
Enterntainment at its best with Independent film making. Sundance Film Festival rounds up some of the best independent films one one same location. This is definitely a place too look for a good movie to watch.
http://festival.sundance.org/2009/

Cross-Media Promotion:
This is the official website for PSP - PlayStation Portable. It has an interactive 3d experience to demonstrate some of the features of this device.
http://www.gopspgo.co.uk/

MMOG (Massively Multi-Player Online Game:
Battle field is a multiplayer game "focus on large maps and vehicle warfare over and above traditional first person shooters". One of the big massive multiplayer games out there.
http://www.battlefield.ea.com/battlefield/bf/

Advergame:
Monster Lab is a funny site to promote a video game. This website is sticky because it lets you go around the lab and play around with different games and features that will let you know the game better and even make you want to play it.
http://www.monsterlabthegame.com/en/

Webisodic:
Revision3 is a good place to find entertainment for the mind. Here is The Pixel Perfect show which is actually one of my favorites to learn something new about image retouch and manipulation.
http://revision3.com/pixelperfect/

Blog or Vlog:
Another Blog that serves an entertaining an educational purpose at the same time. NETTUTS is part of the Envato Network and has some of the best Web Tutorials out there on the web.
http://nettuts.com/

Some Extra Links:
The following links are some that I use on a daily basis and are what really keeps me entertain most of the time. These are all Entertaining and Educational websites that can not only keep you tuned for hours but will teach you something for sure. Some of these links are just galleries that show some of the best work that is out there on the web, so you can get some good inspiration.

http://bestwebgallery.com/
http://www.smashingmagazine.com/
http://www.webdesignerwall.com/
http://motionographer.com/
http://www.russellbrown.com/

I hope you can enjoy these websites. There is definitely something to take away from each one of them.