The primary goal of this portfolio is to showcase some of the projects I have worked on that don't show up on my résumé. It also serves to provide more detailed descriptions with select design decisions for highlighted projects. I also used the process of building it as a way to play around with jQuery (instead of my former favorite prototype) and CSS3.
The navigation of the site was inspired by the iPhone home screen, and further adapted to the affordances of a full browser experience. The reader can navigate between projects by three different means: by the left and right arrow links on the left and right edges of the screen; by clicking on the circular screen indicators on the top; and by pressing the left and right arrow keys. Each mechanism fulfills different use cases for navigating through the projects.
The big arrow buttons allow for clear and intuitive ways to flip through the different projects without any prior knowledge of how the interface works. The circular indicators on top serve multiple purposes: first, they let the reader know, where in the ordered list of project they are; second, clicking on a particular indicator allows long jumps between projects not possible with the left and right arrows; third, hovering over them gives quick tooltip with the title of the project. The arrow keys afford quick flipping through the projects without having to move the entire hand back and forth across the screen when using a mouse.
Each project has it's own unique URL even though it is not a separate page. All data is self contained in the single html file. Any navigation in the page causes the url the change so that it can be bookmarked or linked to.
The great thing about jQuery is that it gracefully degrades it's animations. As such, in old browsers that can't handle animation, it avoids animations all together without breaking the final visual state.
If scripts are turned off in a browser then the page simply turns into a list of projects, that can be scrolled though vertically. There are also a few CSS3 effects for rounded corners and drop shadows that don't work in older browsers. Since the use of the CSS3 properties are for strictly aesthetic purposes their lack of support on certain browsers doesn't break the usability and the interactivity of the page.
The zintin iPhone app let users in the same general vicinity share photos, notes and hand-drawn scribbles with each other. The application's user interface centered around a list of "Nearby Users" and their "Walls" of posts. The app is no longer active, but you can view a video of an early demo of the app.
Co-Founder of the startup zintin, which produced: zintin, Scribble and Photo Phonebook. I performed all the duties of the "front end guy", from designing and programming the entire user interface and interfacing with customers on our forums and handling support emails.
As the app evolved, we realized that we wanted the users to be more personally engaged with the app and be able to see interesting new things about the users in their vicinity. Since the first version, status messages were clearly part of each user's persona inside the network, but to edit it required going into a separate settings tab. We wanted this to be the simplest and the quickest piece of data to update to keep content fresh.
We changed the first screen of the app to include their own status message at the top of the list of things for users to see. To give a subtle prompt to update the status often and to draw attention to the hidden interaction, we included instructions in small text beneath it that read "Tap here to change status". Tapping the status area would transform it into an editable text box where users could quickly type out their latest thoughts.
After using the application for a few months, users wanted to be able to interact with more than the people in their immediate vicinity. Since the list of nearby users had an upper bound because of performance reasons we had to devise new ways for people to explore users and content.
First we added nearby city walls. This let users use city walls as a general discussion board that would always be around. Next, we added a way to continue viewing a longer list of users that pushed the performance limit of iPhone lists. Third, we let users navigate to users who posted a particular piece of data.
It must be noted that this request from users points to an important realization about location that can be summarized as follows: Location is a feature and not the application. If you want to talk further about what this means feel free to email me at ikhare+web [at] gmail [dot] com.
Scribble was initially designed as a feature of zintin. It was released soon after zintin as a marketing tool. It was the first free drawing application on the App Store and soon took a life of its own. Apple named Scribble one of the Top Entertainment Apps of 2008.
From the beginning Scribble was designed to be dead simple to use. The first version only had 4 color choices and only one default pen size. It's key feature that other similar applications lacked was a clear prominent button to save sketches to the device's Photo Library. Future versions added more color choices, pen sizes, background photos and colors without compromising on the simplicity of the application.
The programming was done using the native drawing APIs collectively known as Quartz or Core Graphics on the iPhone. I was also responsible for designing the entire user experience as well as doing the graphic design work including designing the highly recognizable icon.
After the success of the initial version of the application, it was clear to us and the users that the app needed a wider range of color choices and pen sizes. However, we did not want to compromise on the stark simplicity that the initial interface of 6 buttons on a blank screen provided.
The second version of the application maintained this simplicity by using sliding menus. We added a color picker at the bottom left corner, which slid on- and offscreen when the color was tapped. This let users have the full choice of colors available one tap away, while staying out of their way when utilizing the canvas. A similar pattern was followed by the pen size picker.
Other changes included making all interface buttons translucent to allow users to draw beneath them, aligning all the interface elements to the bottom of the screen to maximize the open drawing area, and reducing the size of the buttons to be the minimum possible without being too small to tap.
Though this new interface allowed for further color and pen size choice, the total number of choices was left limited. This is because the application was never targeted to be the ultimate drawing tool, but simply a quick sketching tool that stays out of the user's way. This is one of the reasons we constantly keep hearing about people giving it to their 2 year olds to play with :-)
A cross platform application that let users fill their mobile phone's contact list with their friend's photos. The service included an integration with Facebook, to get profile photos to jump start the data available to a particular user, an iPhone app to download and install the latest photos, and a website to upload the latest high quality photo for use in contact lists. The service is no longer active.
Designed and programmed the front end of the website. Helped program the backend of the service written in Python using Django. Co-Designed the interface for the primary iPhone application. Did all of the graphic design work across the entire front end.
The App was designed and built before Facebook Connect for the iPhone existed. To allow users to log into Facebook from the iPhone required building a Facebook application that actually lived on our servers but felt like it was on the iPhone. To achieve this we had to build in a hybrid native and web interface on the iPhone itself. A web page was built within the user acquisition flow to allow the user to log into Facebook. When completed this page would inform the native UI by using a redirect.
Experimental library for building simple interactive charts and graphs on the iPhone built for the Stanford Data Visualization Course. The library supports the following features:
Interaction design duties were shared with Greg Schwartz. Greg was also primarily responsible for the developer APIs. I was primarily responsible for the graphics programming using the native Quartz (Core Graphics) drawing APIs provided by Apple on the iPhone, as well as the touch event code.
One of the most important features of an interactive charting tool on any platform is to provide simple tooltips describing the data. On the iPhone there is very limited space screen. Further, unlike traditional PCs where there is a tiny mouse cursor on the screen, on the iPhone the user directly touches the screen, significantly occluding the screen.
After much user testing and simply trying all the different possible configurations of fingers touching the screen it was determined that there is no one single place to show a tooltip. As such the default tooltip provided by the library can be freely moved and closed at any point (the translucent gray window in the above screenshots).
In addition to the default tooltip, the library provides delegate methods for whenever a data point was touched. This way a developer using the library could build a custom view to describe the data point(s) actively being touched. This can be seen in the center screenshot above where the ticker symbol "T" is highlighted when its bar in the chart above is tapped.
The project is currently in perpetual alpha. If you are interested feel free to contact me or Greg Schwartz.
Experimental project for the Abstractions for Highly Interactive Web Applications class at Stanford. The goal of the project was to to see how to build a deeply integrated but usable step by step guided form with the Django framework. The project allows developers to describe forms once in python code and include the proper libraries to generate a highly dynamic form that automatically checks each step against the server for valid data.
Designed and implemented the default look and behavior of the guided forms on in web browsers using Prototype, Scriptaculous and CSS.
Experimental Facebook application for the Social Software class at Stanford. The app let users quickly organize pickup sport games with friends based on prerecorded preferences of friends.
Performed A/B testing to learn the effects of user behavior when starting users off in different pages of the applications. The key learning was that people are more likely to engage with the application when their experience started with "Create Event" instead of "Look through all Events".
Designed the interface and the graphics for the entire project. Was primarily responsible for programming the interface using Facebook's proprietary FBJS and FBML.