I have now re-implemented my new Flash app (see previous post) in AS3! which has been a great learning curve I must say and I’m actualy very fond of the new way of working, everything is so much faster! tweens are now so sleek and efficient.

This app is still in development and will soon contain another piece of uni work, along with a few freelance portfolio elements in the future too. Roll on AS3.

Check the new version out at the same location:

http://portfolio.chris-boardman.com

As part of our new studio project this term entitled ‘Utopia/Dystopia’ I was tasked to illustrate a series of designs which conveyed either or both of these themes in the form of a book. - Taking ‘Dystopia’ as my topic of choice I drew inspiration from a few personal photos and started experimenting.

I actually really enjoyed this mini task and thought I’d expand on it by publishing a digital version of this book and wrapping some kind of package around the content. I am always looking for a little sideline project that will help push my skill set so I thought I’d develop a dynamic Flash app to allow interaction with these images. Feel free to have a gander at my initial development:

This is still developed using AS2, and the images are sourced using xml all well and good, but there is something niggling at me, something telling me to bite the bullet and start getting to grips with AS3!…….So I’ve decided I am going to use this application as a foundation to develop these skills and implement a larger scale interactive ’surface portfolio’. My intention is for this subdomain to eventually house an interactive version of my work, represented in a much more visual way. - Imagine a surface with different pockets of work, they can be chucked around, transformed and viewed. Right, kool, go.

Click on the image below to launch this version of Re:Scoop. I have now implemented the review feature of the app, which I feel gives the app purpose. Again a feature such as this is limited with the amount of data I have used, however I feel there is lots of scope here to expand if I felt necessary, with larger quantities of data and so providing the user an interface to store and filter relevant information allowing them to get the most out of the application.

At this stage of development I am going to present this app at my review along with a body of visual development work to push the boundaries of the design. Even now I am beginning to understand the regions of experimentation and to move away from usual standards. Notice that in this version of the app, I have redesigned the ‘cancel’ and ’scoop’ buttons to visually illustrate their function in a different way. This alteration is applicable to the app’s current theme and gives it that slight edge whilst maintaining definition and function.

I have been working quite a lot on the app since my last post and have now incorporated an actual ’scoop’ mechanism that I talked about previously. Here the user now has the ability to click an individual node, which in turn reveals more data about the subject line and shows the comment provided by the company. Notice also how I have moved away from my intiial concept of zooming through the space and have instead opted to ground all the other nodes in a way that almost adds gravity. This interface shift occurred because of the physics involved in generating a zooming effect; I ultimately felt the application lost its professional approach and did not convey the result I wanted.

Another major change in the app shows the original filtering panel now empty. I felt that with the limited data I had at my disposal, a filtering system could only accomplish so much, and furthermore this would result in minimal activity on the stage and ultimately a less-engaging experience for the user. Saying this, I think this could be implemented very effectively at a later date with more data, then the results of this facility may be more rewarding and useful.

I have therefore changed this panel to instead become part of the new ’scooping’ interface. When a node is clicked, the user is provided with two options labeled as ‘cancel’ and ’scoop!’ - Clicking the cancel button un-grounds the nodes and resumes the random activity on the stage. However clicking the ’scoop!’ button now adds this node to the scoop panel! At this stage of the app, the user can add multiple nodes to the panel and from here I will move to develop the ‘review’ functionality to show the captured data side-by-side. In a way I guess this still acts similar to a filtering system and gives the user the ability to also compare information and make decisions applicable to them.

In reflection of my feedback and new sketches I felt it was wise to attempt my approach of ‘zooming’ through the nodes when clicked. This experiment can be viewed below and I feel the outcome is a little minimal and one that doesn’t convey my desired result very well. I still wish to maintain a professional approach to this app and so I will now work with an aim to visualising the nodes in a different way. Initial alternatives could maybe include fading the nodes or dropping the nodes from view.

This week I attended a studio feedback session with my tutors and thought it best to record and reflect on the comments to help me develop this application in the right direction.

I felt there were three main areas to focus on:

1. How the individual nodes are represented and how they visually reflect the data.

This comment encompasses my current use of circles to denote individual nodes and I was encouraged to develop this aspect more uniquely. I could perhaps think about a wider range of colours, and also how the open rate could be used to show how successful the subject lines are more graphically, e.g. deterioration of the nodes the less successful they are.

2. Developing the application to better reflect the name of ‘RE:SCOOP’

I came up with the name ‘RE:SCOOP’ to echo how this data was initially collected and gathered, but if I could also provide the user with their own method of gathering and collection, this would allow me to develop the application to another depth (as discussed further below).

3. Adding another level to the application

Even though this application is currently in its initial stages of development, it still only allows the user to interact with the data on a 2D plane. I.e. the user cannot interact with this data any further other than simply hovering and filtering the nodes. Instantly however I could think about what happens if the nodes are clicked…if there was some way to focus an individual node and bring that into prime view, which would enable more information to be shown. E.g. the companies comment on each node.

Here is a rough sketch of how this could work:

To the left are my initial notes after considering how I could convey the name ‘RE:SCOOP’ to the above concept.

I could actually provide a way for the user to collect up all the data that is relevant to them and then at any point in time review these side by side - complete with all data.

I would now like to test this theory out to see if it is a feasible route forward.

I have now developed the app to include individual, randomly-moving nodes as per my previous experiment. These nodes retrieve the MailChimp data from an XML data source. When the user hovers over a node, the subject line is displayed.

My data visualisation application for the company MailChimp is now in its development stage with v0.9 beta. This version can be played below and demonstrates the ability to; move the filtering panel, to minimize it and to also maximize it. The filtering slider also shows how this tool can span a range from 0-100%, which will later be developed to control data.

Before I actually start the implementation stage of the application I feel it relevant to firstly consider the design of its interface. I mentioned previously that for this study, MailChimp analysed over 200 million emails and from these managed to draw these specific conclusions. In light of this, I have thought up the application name ‘RE:SCOOP’, which I feel conveys the process of collecting data from all these sources and compiling them as a resource for other companies to learn from.

My main consideration with this application is to 1. how the data could be filtered and 2. how the data (currently in tabular form) could be shown visually as individual nodes.

This first design below shows the relationships between the data, whereby a visual link is constructed between similar nodes and each subject line node is given a related colour depending on their ‘open rate’ percentage. The higher the percentage, the more distinct and ‘red’ their colour.

On the left, I have considered a possible filtration facility, which would ultimately allow the user to control what data they see, and more importantly to control the data that is relevant to them. The data I have been given to work with includes 1. The open rate of each email, 2. That email’s subject line, and 3. An associated comment on that subject line concluded by the company. However, the filtering panel below also has the ability to filter by category, which I feel I should take into consideration if this application were to be used commercially. For example this application could be linked up to a central email database where the filtering process can be used to its potential with a larger amount of more unique data.

This second design shows the fourth element of information I have available to me for use in this application. This information is written by the company and concludes the year’s statistics. Even though I feel this information is very textual, I still feel it is relevant to include as part of the application as it is still a valuable resource that other companies may find very useful. This panel would ideally be kept hidden as shown in the design above, with the ability to expand only when needed.

Because I am designing and implementing this application for a real world company, I have been given actual data to work with and so I feel it necessary to preliminary analyse this data and consider how I can use this effectively in my application.

The images below show how the data is currently displayed on their website.

This data is currently in a very tabular format and lacks engaging content and stimulating features. However the most important information here is the subject line itself, which I will use to denote the node itself, the open rate and the comment/conclusion by the company. The open rate is a piece of data that I could potentially use to filter the information, which could add a new dimension to the application; allowing the user to control the information they wish to view.

The final element of data available is a lengthy conclusion written by the company which annually concludes their findings from their study.

From here I will take into consideration these factors and the data and begin to develop designs for the application.