Applications The 2000 Olympics where held in a land "far far away". So far away in fact that the time difference is near intractable for people. The goal of this interactive application was to allow people to traverse the globe with their mouse and see what time differences are like throughout the world. 2009-03-11T06:50:33Z 2000-09-01 1 Originally the site had a Java applet which showed the current time in Sydney, and days left until the games, which lived in the upper right hand corner of each page. Having an applet on each page proved to be too costly to page performance, so we replaced the content in the corner with text, and a link to this applet which opened in a new window. The applet allowed people to mouse over anywhere on the map and see what the current time was, along with the current time in their location and the time in Sydney. <img src="/images/timemachine-full.png"/> Sydney 2000 Olympics - IBM /images/timemachine-thumb.png 2009-10-08T17:19:54Z Community Leadership The U.S. is graduating far too few engineers and scientists in relation to the rest of the world. Research has suggested that if you don't get kids interested and excited about science before middle school, they are likely to not explore one of the STEM (science, technology, engineering, mathematical) disciplines. There is an annual program called "e-week" (formerly National Engineering Week) which takes place in February. It pairs engineering professionals with schools so the professionals can talk about engineering to students. To bolster that effort I organized and "e-week in the summer" program which was held approximately 6 months after e-week so that STEM disciplines where kept in the front of students minds as much as possible. The event was arranged like a school science fair where engineering professionals from IBM and other local companies led children in performing various experiments. 2009-03-11T06:53:36Z 2005-08-01 2 This event was held at the Museum of Life and Science in Durham, NC. My role was project manager and organizer. Each year I would negotiate with the museum staff for time and space, gather a group of willing volunteers, find the funds needed to buy supplies, and manage the budget. I organized the event annually for 4 years from 2005 - 2008 before handing it off to a new organizer. The event has consistently been the one of the museum's most popular, attracting over 1,200 visitors (1.5 times normal attendance) each time it was held. <object width="590" height="460"><param name="movie" value="http://www.youtube.com/v/o-OJsQvVHEQ&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/o-OJsQvVHEQ&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="590" height="460"></embed></object> Museum of Life and Science - Durham, NC /images/ncmls-thumb.png 2009-10-08T17:27:49Z Visual Design After getting a number of holiday cards from friends with families, I wanted to make light of the tradition. The result was a various pictures of me, with various cartoon hairstyles, overlaid on a traditional family style holiday cards. 2009-03-11T22:52:58Z 2007-12-01 3 The card uses stock images, stock vector art and was assembled in both Adobe Photoshop and Illustrator. The card was printed at <a href="http://qoop.com">QOOP.com</a> and mailed out directly from the printer. <img src="/images/holiday-card-2007-full.jpg"/> My personal holiday card for 2007 /images/holiday-card-2007-thumb.png 2009-10-08T17:22:55Z Visual Design The <a href="http://frankjania.com/portfolio/entries/3">2007 holiday card</a> was going to be a tough act to follow given it's reception among the ~80 recipients. After a good deal of ideation, I chose the Facebook theme based on the recent growth in the number of people I know who use it to keep in touch. Rather than my own page, which they were familiar with, I went with a holiday theme and constructed a fictitious "Santa's Facebook Page" 2009-03-11T23:04:45Z 2008-12-01 4 The card was created using stock photos, custom vector art and content developed from scratch in Adobe Illustrator in order to be able to resize it according to the final print size. The card was printed at <a href="http://qoop.com/">QOOP.com</a> and mailed out directly from the printer. <img src="/images/holiday-card-2008-full.png"/> My personal holiday card for 2008 /images/holiday-card-2008-thumb.png 2009-10-08T17:22:37Z Applications Imagine being at a trade show and having a customer come up to you and ask a question that is completely out of your area of expertise. So far in fact that you're not even sure who to ask, or where to ask it. If you were in a large room of varied experts you'd just call out and hope that your request reached someone. The idea behind the IBM Community Tools client was to prototype the idea of broadcast messaging -- sending messages out to large groups of people and letting them filter out messages that they are not interested in. By default, users of the tool would send messages to a specific channel, or to "everyone". More information behind our experience with people using the broadcast messaging tools can be found in the ACM Queue article - <a href="http://queue.acm.org/detail.cfm?id=966719">Messaging to the Masses</a> 2009-03-11T23:05:52Z 2002-09-01 5 The broadcast client was written as a plug-in to a larger framework, all written in Java using the SWT library from the Eclipse project for a native platform look and feel. <img src="/images/ict-full.png"/> Internal messaging software prototype - IBM /images/ict-thumb.png 2009-10-08T17:19:38Z Applications While working as a manager in a distributed organization of about 450 people we found a problem keeping all of our distribution lists up to date. This problem was compounded by needing various permutations of the list, say "all users in Raleigh and Tucson that are part time or supplemental" To help solve this problem I wrote an application that requests a top level manager as input, and builds a org chart in real time. The org chart can be filtered by a faceted browsing control which allows the user to pare down the chart to only certain people. The user can then create a distribution list, with a single click, which includes only the people intended. 2009-03-12T04:52:56Z 2005-06-01 6 The application was written in DHTML and Javascript. It uses Ajax calls to query the enterprise directory and recurse through the organization from the top level manager to include every employee. The final org chart page is created through a GET request, so a user can bookmark the chart for a frequently used organization and still get the most up-to-date chart. <img src="/images/org-chart-1-full.png"/> Faceted browsing tool for org charts /images/org-chart-1-thumb.png 2009-10-08T17:18:52Z Design Explorations After writing the first version of <a href="http://frankjania.com/portfolio/entries/6">organizational tools</a> I wanted to see how I could display the org chart in a more compact and impactful way. The traditional view of an org chart, one with a tree structure that builds out horizontally, is typically only good for manual creation and doesn't scale very well for even modestly sized organizations. In this design exploration I looked at ways to build the chart such that it could display as many employees as possible and be navigated easily. The result is the layout above that uses space as efficiently as possible while still showing every employee. It also displays a mini chart in the left hand corner for quick navigation to a particular manager's organization. 2009-03-12T04:55:29Z 2007-08-01 7 The chart's data was collected in the same way as the <a href="http://frankjania.com/portfolio/entries/6">previous version</a>, using Ajax calls to the enterprise server. The chart display is now created using XSLT to transform the data from the server, and to filter the tree when the user performs a faceted browse operation. <img src="/images/org-chart-2-full.png"/> Compact, navigable org chart /images/org-chart-2-thumb.png 2009-10-08T17:21:24Z Visual Design A group of GLBT technologists was forming in the Research Triangle Park area in NC. They needed a logo which indicated the members were all technologists, and GLBT people. In general I find most GLBT logos that include a rainbow to be dominated by the rainbow colors which force a visual dissonance and also make the logos seem too similar. The concept behind this logo was to include a rainbow that did not dominate the image, while also conveying the idea of technology. 2009-03-12T04:57:57Z 2008-10-01 8 The final image was based on stock vector art of circuit board. I modified the color of a series of circuit channels to show the rainbow colors, using the same yellow as the rest of the circuit channels. This resulted in a rainbow that is clearly visible, but does not dominate the scene. The circuit also conveyed the concept of "technology" while camouflaging the rainbow. <img src="/images/ht-alliance-full.png"/> Alliance of high tech employees - RTP, NC /images/ht-alliance-thumb.png 2009-10-08T17:22:08Z Applications There was a time when many of the photos in the IBM enterprise directory were often sized incorrectly and squeezed into an inappropriate aspect ratio. Most of the people in the 400,000 person company didn't have access to or skills required for photo editing software. To help users crop their photos properly I created a tool that does few things, but does them well. The user uploads photo and is presented with a cropping tool that is constrained to directory placeholder's aspect ratio, while also providing a real time preview. 2009-03-12T04:59:37Z 2003-11-01 9 The tool was implemented as a Java applet on the front end. The front end passed along the cropped image to the directory's back end for storage. <img src="/images/image-resize-full.png"/> Intranet enterprise directory - IBM /images/image-resize-thumb.png 2009-10-08T17:19:24Z Information Design The IBM process for filing intellectual property is comprehensive by design, but not terribly intuitive for an inventor new to it. To help demystify the process I developed an image that borrows from the 'subway map' genre and shows the flow of intellectual property from conception to filing with the US Patent and Trademark Office. 2009-03-12T05:03:16Z 2005-12-01 10 The diagram was created using Adobe Illustrator, and later incorporated into a variety presentations (by myself and others) about the IBM patent process. <img src="/images/ip-lifecycle-full.png"/> IBM IP legal department /images/ip-lifecycle-thumb.png 2009-10-08T17:23:58Z Visual Design After sending out the <a href="http://frankjania.com/portfolio/entries/12">farewell note</a> I wanted to make light of the whole resource action situation by showing that any event is only as happy or sad as you let be. This called for a video that spoke to my tendency to organize and present information in a new way. 2009-03-12T05:05:34Z 2009-02-01 11 I hacked my Cannon camera with the <a href="http://chdk.wikia.com/wiki/CHDK">CHDK</a> to allow me to run a time lapse script on it. While packing up my workspace I used the camera to capture one image every five seconds. I took the resulting set of images into <a href="http://boinx.com/istopmotion/overview/">iStopMotion</a> and built the time lapse video. After the video was complete I brought it into iMovie to add the "Yakety-Sax" theme music an uploaded it to YouTube. <object width="590" height="460"><param name="movie" value="http://www.youtube.com/v/7j1K5NCv7qs&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/7j1K5NCv7qs&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="590" height="460"></embed></object> Saying good bye with a smile - IBM /images/leaving-ibm-video-thumb.png 2009-10-08T17:26:06Z Visual Design After working somewhere for 10 years and making a lot of great friends and contacts, I wanted to say goodbye in as memorable a way a possible. Being known for "doing things differently" and a love for displaying information graphically I wanted to eschew the common "farewell note" that is entirely text, and show off my unique personality. 2009-03-12T05:42:51Z 2009-02-01 12 Trying to sum up all the work that I've done, and people that I was impacted by would have been a tall order in text anyway, so I took the graphical approach and let people know that for the most part my time at IBM was wonderful, and that they had a hand in that. The note was received by ~600 people and commented on by ~200 of them. Many felt flattered to receive the wishes, and commented on the design. One person remarked: "Typical of you, that was the best goodbye email I've ever seen." The graphic was created in Adobe Illustrator, using a public domain handwriting font. <img src="/images/leaving-ibm-full.png"/> How do you say goodbye in a memorable way? /images/leaving-ibm-thumb.png 2009-10-08T17:22:23Z Information Design While working at IBM I was charged with improving the performance of a product that included several web applications, all of which were developed and designed by separate teams. The designs for the applications were created by a variety of graphic and interaction designers, most of whom where not familiar with the details of web performance. Without centralized control of the teams, I needed a way to unify them behind a performance goal, and help them identify the the major areas that needed improvement. 2009-03-12T05:45:59Z 2008-11-01 13 The way I went about unifying the teams behind a goal was to publish "the performance formula" to each of them. This formula showed how our application would perform on the type of network that we were targeting. I also called out particular aspects of the formula in plain language so that the goal was as tractable as possible to both technical and non-technical people. This formula helped unite all of the teams behind a goal, while allowing each team to determine how best to improve their particular application. The plain language helped communicate the impact of certain design decisions (e.g. heavy background graphic use) to the graphic and interaction designers. <img src="/images/performance-explaination-full.png"/> Explaining web performance to a wide audience /images/performance-explaination-thumb.png 2009-10-08T17:23:17Z Visual Analysis In conjunction with the <a href="http://frankjania.com/portfolio/entries/13">performance formula</a> that I generated for improving performance in an IBM product, there was a need for each web application team to assess their current performance and predict how much improvement they could get from compressing and consolidating static files. This was a task for a tool that would let them play with values and visually analyze the how those changes would effect their application. 2009-03-12T05:48:37Z 2008-12-01 14 To produce this visual analysis tool I build a spreadsheet in Microsoft Excel which allowed each team to modify the number of static files they planned on using, and see how much that would contribute to performance improvement. For some teams this showed them that simple changes would suffice, for other teams it highlighted the fact that their application was doing far too much computation on the client side, and that they needed to make greater changes in their application to meet the target. <img src="/images/cnxns-static-files-full.png"/> Using visual analysis to help web developers /images/cnxns-static-files-thumb.png 2009-10-08T17:26:41Z Design Explorations This design exploration asked the question "What would audio alerts look like on a computer when the user cannot hear them?" Most operating systems have an accessibility option that allows a user to see that an alert was issued, but most don't differentiate between the types of alert. 2009-03-12T05:59:56Z 2007-02-01 15 The solution presented allows users to associate graphics or waveforms with alerts, along with their titles, in a visual form in the lower part of the user's screen. When active, this solution would hook into the OS and intercept alerts when they are issued and display the alerts according to user preference. In the case where a user has not predefined images that associate with certain alerts, the system will show a waveform of the sound so that the user, over time, can become familiar with it's shape and thus infer the message it's trying to convey. The mock-up images were produced in Adobe Photoshop and Illustrator and were later used in an application for patent protection. <img src="/images/audio-access-full.png"/> What would an alert look like for the deaf? /images/audio-access-thumb.png 2009-10-08T17:21:37Z Design Explorations This design exploration asks the question "How could a user control a VOIP stream to handle a phone call most efficiently?" Inspired by Tivo, we looked at ways that the user could timeshift the conversation to catch parts that he had missed. This could be particularly useful on conference calls where you're not always actively talking or listening. 2009-03-12T06:21:15Z 2008-02-01 16 In addition to manually timeshifiting the voice stream, we considered automatic triggers which would initiate a time shift. For instance, if your name is mentioned and there is a period of silence (e.g. someone on the call says "what do you think about that, Eric?) then the application would shift back 15 seconds and play back the conversation at 2x speed to help you catch up. Controls were also designed to allow the playback stream to be presented "on top of" (louder than) the live stream so that the user could pay attention to both. The mock-up images where produced in Adobe Photoshop and Illustrator and were later used in an application for patent protection <img src="/images/voip-tivo-full.png"/> How could a user control a VOIP stream? /images/voip-tivo-thumb.png 2009-10-08T17:21:07Z Design Explorations In this design exploration, we asked the question "If they've built an online social network, what kind of novel ways could people address their contacts?" Assuming you've build an online presence with sites that allow you to list your contacts and friends a system can produce an ego-centric sociogram (a picture of all the people you know, how well you know them as a graph with you at the center) for you. This graph will look like the picture above, where you are in the center and your friends radiate out from the center, with their distance being proportional to how often you communicate (or any other metric that has been defined) 2009-03-12T06:22:56Z 2009-01-01 17 Based on this type of sociogram we designed a UI control that would allow users to select the "radius of influence" as a way to capture the people closest to them, with varying degree of inclusion. This control could be used to address an email or provide access to content. The measure of distance could be modified based on the type of communication. E.g. the distance could measure how long you've known someone, and the control could be used to invite people to a class reunion, or anniversary. The mock-up images where produced in Adobe Photoshop and Illustrator and were later used in an application for patent protection <img src="/images/ego-addressing-full.png"/> What would a new addressing control look like? /images/ego-addressing-thumb.png 2009-10-08T17:20:21Z Design Explorations In this design exploration we asked the question "How could a voice recording feel like generating a document in a word processor?" In response to the proliferation of individual podcasts, we wanted to see how we might make the process of creating an audio recording feel more familiar to the average user. 2009-03-12T06:25:26Z 2009-01-01 18 We focused on two particular aspects of document creation that are very familiar to word processing tools: pagination, and styling. For pagination we designed an interface that showed the waveform in it's familiar style, but wrapped the waveform at a specified point such that it wrapped and grew vertically like lines of text in a document. We also allowed users to indicate by the "enter" key that they were starting a "new paragraph". For styling we carried over the familiar concepts of "bolding", "italicizing" etc into the voice recording. A possible implementation of bolding in a voice recording might mean making the voice louder or playing bold backgroud music. The mock-up images where produced in Adobe Photoshop and Illustrator and were later used in an application for patent protection. <img src="/images/podcast-tool-full.png"/> How could voice recording feel like word processing? /images/podcast-tool-thumb.png 2009-10-08T17:20:53Z Visual Analysis Mostly out of spite for the Bush administration's move to change the time of year that daylight time in the US starts and ends, I wanted to get a better sense for what effect the change has on day to day life. What it called for was a tool to show the daylight curves for a certain place throughout the year. The curves should be interactive so that you can change when DST starts and ends, then see how much benefit it had. The benefit was measured in the amount of "Sleeping Light" that is saved. That is to say that the biggest impact we can have on energy is to limit the amount of time that we sleep while it is light out. You'll see from the way that the daylight curves change during DST, that the focus is to "push" daylight into the waking hours. 2009-03-15T21:23:17Z 2005-10-01 19 Partially as an experiment in using the first release of the HTML <code>&lt;canvas&gt;</code> tag, the tool is written in DHTML and Javascript using the <code>&lt;canvas&gt;</code> tag for all of the drawing. To use the application, click on the "Activate Daylight Time" checkbox. This will change the curves to account for the one hour shift in time due to DST. The vertical bars that indicate the start and end of DST have square handles which allow you to modify time of year that DST starts and ends. Move the bars and see the amount of sleeping light that is saved as the start and end times change. </center><link href="/stylesheets/daylight-style.css" rel="stylesheet" type="text/css" /> <script src="/javascripts/daylight-data-boston.js" type="text/javascript"></script> <script src="/javascripts/daylight-script.js" type="text/javascript"></script> <div id="container"> <div id="titlebar" style="color: #000000;">The Effect of Daylight Time<br/>Boston, MA, USA <div> <table> <tr id="wmidRow"> <td id="wmidTitle">Waking Darkness</td><td id="wmidCount"></td><td id="totalSavingsTitle">Total Savings</td> </tr> <tr id="smilRow"> <td id="smilTitle">Sleeping Light</td><td id="smilCount"></td><td id="totalSavingsCount"></td> </tr> </table> </div> </div> <div id="visualization"> <canvas id="canvas">You'll need to use Firefox 1.5+ to see this...</canvas> <div id="startdst"></div> <div id="enddst"></div> </div> <div> <div id="dstData"> <div id="startDSTData"> <span id="startDSTTitle">Daylight Time Starts: </span><span id="startDSTDate"></span> </div> <div id="endDSTData"> <span id="endDSTTitle">Daylight Time Ends: </span><span id="endDSTDate"></span> </div> </div> <div id="controls"> <span id="label" style="color: #000000;">Activate Daylight Time</span> <input type="checkbox" id="showdst" onclick="changeDSTSetting()"></input> </div> </div> <script type="text/javascript">init();</script> </div><center> What kind of real difference does changing daylight time make? /images/daylight-time-thumb.png 2009-10-08T17:26:55Z Applications Memoreact is a both a reaction and memory game. Each level of the game offers 15 seconds of touch screen action. You'll be presented with prompts of 1 or 2 touches to match. As you play the game you'll see your hit percentage in the upper left hand corner. If your hit percentage is 65% or greater you'll be allowed to move to the next level. As you level-up the speed with which the prompts appear gets progressively faster. If your hit percentage is less than 65% you'll be given the chance to replay that round. If you're having trouble keeping pace, you can try remembering the plays for that round. When you replay a round, the same plays are shown in the same order. 2009-10-28T12:41:15Z 2009-10-01 20 The application was built using the iPhone SDK 3.1.2 and XCode. All graphics are drawn as vector paths on the device. The application is <a href="http://itunes.apple.com/us/app/memoreact/id337913839?mt=8">available for download</a> on the iTunes App Store. <img src="/images/memoreact-full.png"/> A reaction / memory game for the iPhone /images/memoreact-thumb.png 2010-01-04T01:23:45Z Applications The online word cloud generator, <a href="http://wordle.net">Wordle</a> has become an internet favorite for generating pictures of words. The layout algorithm for Wordle is however not shared outside of IBM. Given Wordle's success in offering a tool for <a href="http://www.research.ibm.com/visual/papers/wordle_final2.pdf">participtory visualization</a> I've wanted to create an open implementation of a word cloud generator, with user generated and pluggable layout algorithms, additional manual tweaking of layout, and other visual display controls. 2009-11-13T19:31:07Z 2009-11-01 21 This on-going project is currently under construction. A demo version is available, but I am still working on some of the controls for manual manipulation of text and font size as well as further optimizing hit-testing and sample layout algorithms. The platform is written in Adobe Flex and ActionScript. If you're interested in contributing to this project, please contact me fjania [at] gmail [dot] com. <img src="/images/wyrdle-full.png"/> Opening up an internet favorite /images/wyrdle-thumb.png 2009-11-13T19:31:44Z Design Explorations During a design exploration of how to further enhance the instant messaging experience the I came up with an interface for presenting supporting content (photos, sounds, links, etc) during an instant messaging exchange. The supporting content presented to the user based on (1) the users involved in the chat and (2) the content of the chat. 2009-11-17T23:06:10Z 2006-03-01 22 In a proposed implementation of this design (patented as US 7,503,007) the users would initiate an IM session and begin a conversation. As the conversation progresses an intelligent system scans for keywords, which it then uses to search local content for relevance. When relevant content is found it is presented to the user as an additional part of the IM window. The user can choose to add this additional content into the chat if they choose. <img src="/images/context-aware-chat-full.png"/> How could we further personalize the IM experience? /images/context-aware-chat-thumb.png 2009-11-17T23:06:10Z Design Explorations In this design exploration we asked "How could we use technology to prompt healthful eating?" We noticed new online services that were collecting information about the nutrition in foods and allowing people to log what they've eaten, along with existing online services that allowed people to rate restaurants and yet other online services that stored people's health information. We considered one place to aggregate this information in context was the menu itself. 2009-12-06T23:55:25Z 2006-05-01 23 The proposed implementation is a menu made of digital ink which displays the dishes being offered by the restaurant and connects to the network for more information. The menu allows the user to log in and retrieves his personal information. It compares his nutrition goals with the amount of food he's already logged as eaten today, and shows what his allotment is for the rest of the day. It takes his health conditions into account and potentially disables menu options for him that are too risky, and highlights others that are among the best choices. It contains a section that displays reviews which can prompt him to make choices based on the community's review of certain dishes. <img src="/images/smart-menu-full.png"/> How can we prompt healthful eating choices? /images/smart-menu-thumb.png 2009-12-22T15:40:56Z Applications After seeing that twitter collects trends based on words frequently used in tweets, I wondered what those trends would look like over time. I believe that a visualization which animates the trends over the period of a year will serve both as a platform for nostalgia and an opportunity to show how the concerns of people are twitter may be skewed from those of people who do not use the platform. The <a href="http://labs.digitalanalog.net/twitteryear/">current implementation</a> animates the most popular trends for each 24 hour period in increments of 12 hours. As I work on this more I'm looking to incorporate feed from news services, additional data visualization for frequent trends, an interactive component that allows the user to follow particular trends of interest, and additional forms of trend word visualization. 2010-03-08T04:11:47Z 2010-03-01 24 The application is written in Flex/Actionscript with all controls custom made. The layout engine is extensible and will be the basis for testing how different layout algorithms may convey meaning to the trends over time. The data is collected directly from twitter using a daily cron script written in python, and another script written in python which arranges the data in a compact CSV format for the application to use. <img src="/images/twitteryear-full.png"/><br/>(See a <a href="http://labs.digitalanalog.net/twitteryear/">live version</a>) How does the twitterverse tell the story of a year /images/twitteryear-thumb.png 2010-03-08T04:13:39Z