The Wilson Project Blog of UX/Front-End Developer Ivan Wilson

Menu Skip to Navigation

Tag Archive / data visualization

  • The Long Game

    The past is the beginning of the beginning and all that is and has been is but the twilight of the dawn.
    – H. G. Wells

    I’m marking a special anniversary today.

    And all this started because I loved Vancouver.

    After my first visit in August 2008, I decided to plan another trip. Somehow, I found a conference that I hadn’t heard about called IxDA Interaction 09. Never knew anything about interaction design nor was it my first concern. All wanted was to get back to the city again. But instead, I learned from all the talks and people about interaction design.

    That was not only an introduction to interaction design. It was a gateway to me learning about user experience design and later information architecture.

    I decided to return the following year for Interaction 10 in Savannah, Georgia. At that conference, I attended the lecture Designing for the Web in the World by designer Timo Arnall.

    That and his film Wireless in the World a year earlier really influenced me. This is where re-evaluated my work as a front-end developer, viewing my work as dealing with information and not just coding.

    And after years of conferences, events, reading and self-study, I ended up working with an excellent UX team at CQ Roll Call and now the growing team at FiscalNote.

    And all this because I want another trip to Vancouver… πŸ™‚

  • The End of Project Ottawa

    Almost three months ago, prior to me attending the IxDA Interaction 13 conference, I decided to put the project on hiatus for two months.

    Well, that time has passed and I have come to the decision that this hiatus will be indefinite.

    At this point, I am leaving this somewhat open-ended because I do not know when I will come back to this, if at all. Some of the ideas here will return in different situations down the road. But as of now, no further work will be done and there will be no third draft. The previous version will still be online (see Second Draft) but no further revisions will be made in the near future.

    I want to thank everyone who helped me along the way, especially during the craziness of last year. Most importantly, I want to thank all those who let me bend their ears [constantly] about my ideas and gave me some much-needed advice. Right now, Ottawa is at a state where I cannot devote any more time and there are other projects that need my attention. In some respects, Ottawa may have been a solution in need of a problem and I suspect it may be a couple of years before it is fully understood.

    Thank you all,
    Ivan Wilson

    Mobile UX DC - Session board 2012

  • Happy Anniversary, Project Ottawa

    Last year, prior to going to Jonathan Snook ‘s inaugural SMACSS workshop in Ottawa, Canada, I was thinking. There was something that I was on my mind for the past year. Then, [place lightning description here], I got inspiration from looking at some of my old linear algebra books from college.

    What did I do next? I announced it on Twitter:

    Eureka! After months of chaos, finally able to think clearly. Now, it’s finally time to blow up my code. #linearalgebra #optics

    @iwilsonjr (12:10 AM Β· Feb 26, 2012) – https://twitter.com/iwilsonjr/status/173636146688040960

    I spent whatever free time, post-workshop, working on this in my [first] Moleskine notebook. The early sketches look more like algebra proofs that the visual model that exists today.

    IMAG0433

    However, these sketches and some rules that I wrote down became the basis of the project’s First Draft.

    Preview - New Project

    And as they say the rest is history.

    Though currently on hiatus, I am planning a few more sketches and notes in the current year.

    Hopefully, this project will still be around for year two.

    Happy Anniversary, Project Ottawa!

  • Building the Future, Day 1 – The Beginning

    Like all things, every story has a beginning. In this case, [Project] Ottawa started with the concept The Information Layer (2009). But what came before this?

    Well, it all started in Vancouver, Canada (February 2009) where I saw this film by BERG designer Timo Arnall:

    Wireless in the World 2 – https://vimeo.com/12187317

    In Wireless in the World, they were imagining wireless networks available in the surrounding environment. Now, this looks like an interesting film. But to me, it was a pretty eye-opening experience. You see, up until this time, I only viewed the Web as being static. That is, something that was only accessible from the comfort of a chair and a desktop computer.

    Step back for a moment. Now imagine all those dotted circles representing access points just like one of those desktop computers w/chairs. It would look funny at first but the main point is that each one of those access points is accessing data. They are accessing the same content I am through my desktop computer. If your concept of content is something that is seen through a desktop monitor, what does this do? The concept of having the same content available across all sorts of devices, being available at will – without the constraint of the standard web page format. Even without the author controlling how the information was displayed. The user now has the power not only to access the information but to display it in any fashion he/she wanted.

    That idea of information being free, not in the political sense but in accessibility, really changed how I worked. After that film and the lecture, I decided that my job as a front-end developer was not of creating layouts. My job became a person who tried to build products that allowed for easy access to information. Building the layout with excellent code was simply a means to an end. Improving upon the work simple meant improved access to information. Information, in my terms of my work, is equivalent to content.

    At this point, I was trying to find a way to explaining this way of thinking. It was only a few months later that I was looking at XSLT or XML transforms. Basically, it is a method of taking data in the form of a XML format and transforming into a format resembling a HTML web page. Well, XML is an open format, anyone can use it at will and modify the information to display it in any form they want. We have RSS feeds – XML format data streams that user can collect data and use. This is where all the dots began to connect. You see, XML or JSON, can carry content/information anywhere with the user applying the formatting.

    Going back to this point, I wrote some ideas and sketches which later became The Information Layer. What I realized was that the current UI model was not sufficient – it was simple not granular enough to fully describe what was happening at the time. One of the novel things I did was creating a separation of the Semantic (HTML) Layer from the Information (content) Layer. How important was this? It was very important because it depicted the free flow of information /content. It also displayed the fact that HTML has its own sense of meaning, which was further expanded with HTML5 semantic tags a few years later. This was not a new concept but was not fully realized until now.

    And so, that was the beginning. From here, I used this model for building my work.

    As I mentioned in an earlier blog entry, Project Ottawa is simply the first practical application of the model. This was revised recently to deal with the concept of content, which will be the main focus point of Project Ottawa/Third Draft.

  • Why Is Project Ottawa Important?

    We [FEDs*] have tools for building,
    We just don’t have tools for describing what we build.

    FEDs* build things – things called web applications. We use code, graphics, etc. We have tools at our disposal to do this. But there is one problem. Architects and engineers can create blueprints and models to display their project.

    We don’t.

    We have have code and content. But all of this is just words without context. And unless your are willing to search and dig through all the code and comments, its still pretty useless.

    What I did with Project Ottawa was take the patterns of building – views, code blocks, scripts – and create visual symbols with reference to these items. Here, the advantage of Ottawa is giving a visual description of the web application. Not just its parts but also its interactions and their relationships among the various parts. Its not a comprehensive view, it just has to be as concise as possible without losing too much precision. And the possibility of manipulating this data to do more interesting things in the future.

    * FEDs – Front-End Developers