Following the concept stage, I worked with engineer Pat Bergschneider to build the minimum viable product. Following a month of real-world testing I made some design decisions that shifted both the user experience and visual design of the product.
Notably, I found I used the map a lot to validate I had selected the right stop, so making that primary information made a lot of sense.
We shared the app with around 10 testers, many of whom have since reported deleting their other MUNI apps from their phone. Analytics suggests that on average 6 out of 10 of those testers still use the app on a daily basis.
There are many excellent NextBus apps out there with lots of handy features and coverage for many cities and transit authorities, but they all miss what I think is the most important use case: “I want to know when my bus—not any other bus—is coming”.
My Bus automatically checks your location and displays the arrival countdowns for the next three buses at your nearest favorite stop.
Additionally, tapping on the map button displays your location in context to the bus stop, as well as the current location of the next bus to arrive at that stop.
The visual design is all about simplicity. The next bus arrival time is front and center while the map of the current stop is shown blurred in the background, giving each stop its own recognizable look.
The map view - shows you the stop, predicted times, and where you are in relation to it.
The route selection screen - a simple list with a couple handy smart lists up top (recent routes, nearest bus stop)
Design for Android 4
Design for Android 5 (L / Material)
Design for iPad
The app icon abstractly represents the wheel well of—and takes visual cues from—the design of older MUNI buses.
What might a wearable companion app look like?
Design for Android Wear
An earlier visual concept targeting simpler, content-driven design. I later felt that showing the location of the selected stop as primary information was very useful as validation for the user that they are looking at the intended stop.
I'm really happy that wearables seem to be on the way as this design largely inspired the designs for smaller interfaces seen above.
My visual design skills had been in hibernation for quite some time as I was working on a single product with little visual advancement for two and a half years. I used this project to visualize a concept I had had, and really think about the visual design above the granular level of user experience (which had been my focus since 2011). The next step on this project would be to combine this work with that granularity to complete a fully realized product, but for now this is a showcase of my personal style as of now.
While traveling in Korea, my wife and I were using our iPhones tied to a portable 4G wifi device. During that time, I realized that the iOS experience wasn't at all well tailored to the traveler's use case. Sure, there's a lot of great apps out there but it's a pain to reorganize your home screens for while you're away then switch them back to how they were before on your return.
On the last day of our trip, I opened the Google Search app on a whim and found that Google Now was incredibly useful when traveling - much more so than at home as it now included contextual sightseeing information, translations, exchange rates, etc. In the morning it taught me how to say 'good morning' in Korean and in the evening it taught me to ask for the bill at dinner.
I remembered that Android allows for third party 'launchers' or home screens that can perform different functionality to the stock Android home screens.
The initial idea for the travel launcher was to be the stock interface for a low-cost Android-powered handset designed specifically as a second device to your usual at-home device. I would hope even iPhone users would consider Android for this device! I'm not a hardware designer or a marketing expert, so I focused on the user interface.
The aim of the design was to be friendly, easily understood and taken-in.
On unlocking the phone the user is shown contextually useful information based on their location and the time of day. This could be their boarding pass if they're at the airport, a map screen if they're out and about, or a sightseeing view if they're at their hotel in the morning or evening.
Swiping down from the top of the screen reveals a sheet of useful information, visually differentiated using friendly, playful colors that communicate an almost childish ease of use while remaining modern and mature using clean, clear type and iconography.
Tapping on any of the rows will open a full screen, interactive version of the widget. From there, a simple swipe up from the bottom returns to the default view, or a swipe down from the top, back into the launcher sheet. Simple!
Swipe from the top of the screen to reveal the launcher.
Tap widgets to open full-screen views, and interactive versions of each widget.
Exchange rate conversion.
Boarding pass: becomes your default view 4 hours prior to your flight and/or when you're at the airport.
Sightseeing view: available in the launcher during the day, and the default view in the morning and evening at your hotel or Air BnB
Translate: type in a phrase or pick from your favorites.
Words With Friends
In the years I worked on Words With Friends I worked on and shipped a wide variety of product features outside of the core gameplay from leaderboards to physical board game companion mini-apps, as well as product-defining design to maintain the game's status as the #1 Mobile Word Game.
January 2014 We released Words With Friends 7.0 for Android and iOS.
For iOS, we consulted with Apple Developer Relations to fully utilize iOS 7 technology and design thinking on both the front and back end which resulted in a UI in line with customer expectations, and performance gains that cut load times in half on modern devices.
For Android, we took an Android-first approach in redesigning the functionality of the navigation system as well as updating the styles across the core UI elements. Words With Friends finally became a native Android app after three years in the Play Store.
September 2013 We were given the opportunity to lead the product design process in order to improve the user experience. Working closely with engineering and product management, we were able to restore our App Store and Play Store ratings to their former glory of 4.5 stars across all SKUs.
March 2013 I began managing the team of 5 designers that contribute to the success of both Words With Friends and Scramble With Friends.
2012 I developed a high level information architecture for Words With Friends for iPad and Android Tablet, which introduced landscape play and modern navigation patterns. This IA language also filtered into the iPhone and Android phone versions
The Words With Friends 7.0 release brought platform-specific design and technology to the game.
The 5.0 release of Words With Friends for iPad introduced landscape orientation and modern navigation patterns.
Word Check and Score Pad are companion features to the physical board game in partnership with Hasbro.
Flows for handling when a player loses their cellular connection while in the app
Android-specific IxD for Location-Based-Leaderboards
Sharing invalid words - failure handling
Flows for gifting word-o-meters on the web client.
New Scramble With Friends
New Scramble with Friends introduced new single-player gameplay in the form of Daily Challenges.
We also took the opportunity to update the UI to give it a fresher, more inviting look than the original deep green color scheme.
For iPad, we used user feedback from players already playing the iPhone SKU on iPad to make early design decisions for the new form-factor. From there we were able to iterate on the user experience and include platform-specific features like game board scaling to reach a 4.5 star rating in our soft launch regions.
New Scramble With Friends for iPad launched on December 11, 2013 with a "Best New Games" feature in the Apple App Store.
London Fashion Week
London Fashion Week / The British Fashion Council needed a way for their partners and sponsors to communicate their affiliation in a clear and consistent way.
I worked with their partnership management team to create a logo system that was tight enough for consistency across partnerships and different media, but loose enough that it allowed for easy implementation by partner teams.
Example of the logo lockup and guidelines in use - Virgin Atlantic in-flight magazine, "Vera", 2014.
I briefly worked with ClassDojo on improving their "Whole Class Reports" page for desktop and tablet.
ClassDojo were looking to increase the number of parents teachers connected with, as wall as increase the amount of information shared between parents and teachers (research suggests the more is shared, the better students do). Additionally, they were looking for a cleaner, less cluttered look that would appeal to teachers from different levels of education.
Designed for tablet and desktop web
A previous round of design tied more closely to ClassDojo's style at the time (a younger, more colorful and playful look).
Logo explorations that hold on to the concept of the original, without the direct visual pastiche of the word 'dojo'.
2011 - "Serious about Games" concept designs for Zynga.com (corporate, prior to the Zynga.com portal site's launch).
While there was a company need to represent Zynga as a company investors could trust (serious), it was also important to communicate our position as a strong games company. This is addressed by boldly displaying core values and focuses of the company in the carousel using strong brand imagery from the games themselves.
Beneath the carousel, all expected brand and company information is easily accessible no matter the reason for your visit.
Carousel: gift cards
Carousel: mobile games
Carousel: community and support
As an avid photographer for many years, and a flickr user for over 9 years, I have often wished flickr had features and experiences it currently lacks.
This page is a collection of feature concepts I'd love to see some day.
As a community for photographers, I've always been surprised there isn't a way to really cleanly display your photographs with text on Flickr. These concept comps explore the idea of giving photographers a place where they can display their photographs in an editorial way alongside text and with their choice of layout.
Camera and Lens Browser
When shopping around for cameras and lenses, I often turn to flickr groups to check out the lenses and cameras other people are using. I'd love a way to search flickr by camera body and lens in a detailed way to find photographs that represent the capabilities of the different combinations. In turn, flickr could use my search to serve relevant ads as well as other popular combinations of camera+lens.
The left rail filter unit including 'Similar Combinations' unit.
Various illustrations and sketches
Surf California Postcard
Cover for a film. Part of a skillshare lettering class in which students were asked to create a dropcap cover using the last initial of the author's name.