The folio of Monash University graduate and award winning User Experience Developer, Keegan Street.

This folio requires Adobe Flash player.

Get Adobe Flash player

Canadian Tourism Commission

XML, XSL, XPath, XHTML, JavaScript, CSS, Flash Canadian Tourism Commission
Website Canadian Tourism Commission Deloitte Canada Tribal DDB Canada www.canada.travel]]> A worldwide multilingual consumer website for the Canadian Tourism Commission. The website was launched in 2009 as Canada prepared to host the Vancouver 2010 Winter Olympics. I worked on the user interface of the website while I was employed by Deloitte in Ottawa. I was responsible for developing cross-browser compatible XHTML / JavaScript / CSS user interface components with XSL transformational stylesheets.
This is a screenshot of the page for the province of Québec. The image shows two components that I developed: the gallery widget at the top right, and the packages and events widget below it. The components both feature animations that I wrote with JavaScript (no libraries). The gallery widget is constructed by an XSL stylesheet which resides on the server. The XSL parses an XML list of photos and displays them in an XHTML component with interactive affordances such as rollover states and cursor changes. When the user clicks a thumbnail, a large version of the photo is loaded into the page. The Canadian Tourism Commission website contains a vast database of videos. This screenshot shows the video gallery. The website is localised for seven different languages, so we had to be careful not to hard-code in any English language captions. In this image you can see all of the labels are in French. This is a screenshot of the Flash video player I developed. When a video is clicked in the gallery, this video player is loaded up as an overlay above the page (and it works in all the browsers including IE6 and FF2). We used DD_BelatedPNGFix to display PNGs in IE6, and during development I discovered and fixed a bug in it.

Join Me @ Deloitte

Facebook Platform, social media, PHP, MySQL, XHTML, JavaScript, CSS, JSON, rapid prototype development Join Me @ Deloitte
Facebook Application Deloitte Australia Deloitte Australia apps.facebook.com/join-me-at-deloitte]]> I developed this Facebook application for Deloitte in Australia when I was employed there and have since been contracted to develop an upgrade. The application has been very successful in helping Deloitte to reach potential recruits through their employees' social networks. Employees of Deloitte in Australia install this application to allow their friends to ask them for a referral to Deloitte.
This is a screenshot of the homepage of the application. It shows a list of the user's friends who work at Deloitte. This screenshot shows the Facebook profile of a Deloitte employee. There is a box on his profile that informs his friends that he can refer them for a position with Deloitte. You can also see a short story on his Wall saying "Hafeez can refer you for a position with Deloitte". That story will potentially reach his friends’ news feeds. After somebody asks their friend to refer them for a position with Deloitte, the employee will receive an email with the potential recruit's resume attached. It contains a link to the internal employee referral form and a link to the Facebook application where the employee can engage in a conversation with the potential recruit. This screenshot shows a part of the Content Management System for the application. This allows the Deloitte Human Resources department to make changes to the application without requiring a web developer. The backend of the application also includes a comprehensive statistics and reporting section so that HR can monitor its effectiveness.

Op Shopper

iPhone, mashup, Google Maps, Google Local Search, Facebook Connect, PHP, MySQL, JSON, XML Op Shopper
iPhone Application Sebastian James Op Shopper is an iPhone application that enables people to find op shops near their location at any time. Users can rate the op shops on four key categories, and these ratings help customers to find op shops stocking the goods they like. The application leverages Facebook Connect for user authentication and distribution.
The op shops are presented as markers on a Google Map based interface. The map is automatically centered on the user's location and nearby op shops are loaded. We use Google's Local Search API to retrieve the op shops and their contact details. We have a web server that acts as a proxy between the client (iPhone) and Google's Local Search API. This enables us to strip out unnecessary data from Google's response to speed up the data transfer to the iPhone. It also lets us combine Google's response with out own ratings data. This way, the client only has to make one HTTP request to receive data from two services. Leveraging Facebook Connect really made sense for this application because we had to ensure that people only rated each op shop once. The integrity of a Facebook account is much greater than any custom account management system we could develop in the project timeframe.

Introduce Me

Facebook Platform, social media, PHP, MySQL, XHTML, JavaScript, CSS Introduce Me
Facebook Application One of the first Facebook applications (launched one month after the platform) apps.facebook.com/introduceme]]> In May 2007 Facebook launched their application platform, allowing third party developers to create add-ons for the popular social utility website. Shortly after its launch, I developed Introduce Me, an application that lets people introduce their friends to each other. The application has been used to introduce over 200,000 people.
This screenshot shows the homepage of Introduce Me. Some of the functionality offered by Introduce Me is a 'friend matchmaker' which suggests introductions that the user could make and shows them what the two friends have in common. The Facebook platform gives us access to information such as peoples' favourite music, their high school and their marital status, so it is easy to find people who have a lot in common. Introduce Me has been used in almost every country in the world. It was most popular in the US, the UK, Australia and Canada. I was really happy to receive this message from Dave Morin, the Senior Platform Manager at Facebook, saying he loved my application.

Global U

PHP, MySQL, XML, JSON, XHTML, AJAX, JavaScript, CSS, Google Maps, Facebook Connect, rapid prototype development Global U
Web 2.0 Website Carleton University globalu.sourceforge.net]]> I was a user experience designer on the open source project Global U led by Randy Zadra at Carleton University, Ottawa. Global U is a Google Maps based tool for searching and viewing a universities international relationships. I was involved with: concept design; building a communication layer between the database and the map with PHP, XML and JavaScript; leveraging Facebook Connect for distribution; and building a custom CMS to insert entries into the database.
Users can apply different filters like Alumni, Projects and Exchange Agreements, or enter a search keyword, to find the information they are looking for. I implemented Facebook Connect on this website to give us a distribution stream. If somebody finds content they would like to share, they can click the 'Like' to publish the item to their Facebook Wall. I wrote a PHP script which queries the database and generates an XML document for the client. I developed a custom content management system for Global U. It uses AJAX to allow the user to add 'sub content'. For example, if a user is creating a new research project, they will either select existing researchers or create new ones on the fly without leaving the form.

Equipment Loan System

Information visualisation, Flex, ActionScript 3, object oriented programming, Adobe AIR, PHP, MySQL Equipment Loan System
Flex Application Monash University Justin Tickner and Long Zheng This system allows Monash University to manage loans of multimedia equipment such as video cameras and microphones. It uses an innovative timeline component to show students when equipment is available and let them place bookings over the Internet.
When students hire equipment, they will often need multiple products at the same time, i.e. a video camera, lights and a microphone. Our timeline component allows students to see the availability of each item. A green square means that the item is available, and a red square means that the item is fully booked. This screenshot shows the timeline component with a camera, light and boom microphone. With no more than a glance at the timeline, you can tell that the next day all of the equipment is available is Thursday, May 29. We included inline 'Tip' panels to guide students through the application. This screenshot shows the confirmation form. We also developed a backend with an inventory management system.

HCI Portfolio

Flash, ActionScript 3, object oriented programming HCI Portfolio
Flash Website www.readymedia.com.au/hci_portfolio]]> This website showcases the four hardware/software interfaces I designed in FIT2016 Human Computer Interaction during second semester ‘07. Number 1 result for a Google search for "Human Computer Interaction portfolio".
In this assignment, we had to redesign the Nintendo DS hardware with Human Computer Interaction principles in mind and design a game for the new device. In this assignment, we had to design a metaphor based interface following interface design principles. In this assignment, we had to redesign the iPod hardware and software.