Portfolio

Project Description

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.

Design Decisions

Navigation

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.

Deep Linking

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.

Graceful Degradation

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.

Project Description

AddictingGames.com is one of the largest destinations for casual Flash games on the internet. It launched into the iPhone games market in mid 2009. Just as Flash games get consistent branding and shared features as part of the website, AddictingGames wanted to provide the same for their iPhone games. This set of consistently branded shared features included: a cross promotional network, sharing of games and high scores through social media channels, and various other features repeated across the games.

The above screenshots are of the Share component. As with every iPhone component built, the user interface is customized for both landscape and portrait games. Share lets users share the game or high scores through Facebook, Twitter and built-in email if available on a given device. This feature can be found in Bubble Spinner and Bubble Spinner Lite for the iPhone.

Each of the shared components are designed to be used independently of each other. This allows each game to be customized to only use the features that make sense in its respective game play. In addition to this, all of the developer APIs as well as the UI integration points into the game are designed to be fairly light and unobtrusive so that the game developer does not have to bend over backwards to include a particular component.

Role: Product Manager

Contract work as a Product Manager for iPhone Games. Business related responsibilities included managing launch schedules, advertising and marketing for new games, pinpointing new shared features, and working with the backend engineering team to determine feasibility of new features with existing systems.

Product related responsibilities included prototyping and designing the user experience of each of the shared components, user-testing, integrating with graphic designers, and programming the client side compoents (the piece that plugs into the iPhone games).

Project Description

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.

Role: Co-Founder & Front End Designer/Engineer

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.

Selected Design Challenges

Status Message

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.

Going Beyond the Immediate Vicinity

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.

Project Description

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.

Check out this lovely video of a young'un using the first version of Scribble. You can download the paid and free version of the app from the App Store.

Role: User Interface Designer and Programmer

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.

Selected Design Challenge

Allowing More Colors and Pen Sizes

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 :-)

Project Description

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.

Role: Co-Founder & User Experience and Graphic Designer

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.

Selected Design Challenge

Using Facebook on the iPhone before Facebook Connect

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.

Project Description

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:

• Tap to update tooltip
• Event delegates for point tap notification
• Multi-touch data point comparison
• Finger swiping to brush over data points (actively changing tooltip data)
• Movable/closable tooltip for maximum visibility of underlying data

Role: Graphics Programmer and Interaction Designer

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.

Selected Design Challenge

Where should the Tooltip Go?

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.

Getting your hands on it

The project is currently in perpetual alpha. If you are interested feel free to contact me or Greg Schwartz.

Project Description

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.

Role: Interface Design and Front End Programming

Designed and implemented the default look and behavior of the guided forms on in web browsers using Prototype, Scriptaculous and CSS.

Project Description

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".

Role: Interface Design and Programming & Facebook Integration Programming

Designed the interface and the graphics for the entire project. Was primarily responsible for programming the interface using Facebook's proprietary FBJS and FBML.