This page is an overview of some of the User Experience, Visual, and Motion Design I've been doing over the last eight years. It's organized chronologically. Click on the logos below to go directly to a section or scroll away!
Android App Redesign
The CMB Android app before 2016 used a hamburger menu for navigation. We found through analytics that many users were not visiting pages other than the Daily Bagel page. We wanted to increase engagement and make users aware of the many features of the app. By switching to a tabbed navigation, we were able to surface more pages and make buttons like “Invite” and “Bean Count” (in app currency) more accessible. We also took this redesign opportunity to align with Google Material guidelines.
On this project was I was responsible for the UI/UX design, the user testing, prototyping, visual design, and final spec and asset production. All the hats!
Here's the older CMB Android App. The App opened on the Daily Bagel Page and utilized the hamburger menu to navigate to the other main pages.
I placed the four main tabs on the bottom for easy thumb navigation. The menu bar at the top allows for a new CMB logo, the Bean Count, and the Invite button to be surfaced consistently. We implemented Snackbars for messaging.
This is the new overflow menu with newly designed iconography. We changed the font from Raleway to Roboto which has a more dependable baseline especially with numbers.
New icons in better detail. I designed them in Illustrator and Sketch.
iOS Sticker Pack
With the iOS 10 launch in September 2016, we wanted to offer our users a fun way to engage with each other and their friends. We explored many directions including dating specific stickers but found that when using iMessage, one really wants stickers to express or exaggerate an emotion. Emotional Bagels were born! During production we found that we didn’t have the space (an XCode limitation) to animate all 8 stickers so a few are static.
On this project was I was responsible for the concept, design, illustration, animation, and final spec and asset production.
He Likes You!
In the revamp, or what we called “The New Model” of Coffee Meets Bagel, women are only shown men who have already liked them as opposed to being shown a random user that fits the algorithm. After a couple of months though, we found through user testing and analytics that most women did not understand this. We needed to add something to the UI which would get their attention and it make this message clear. I worked with my team on several ideas but finding the answer proved illusive. In the end I came up with the following animated UI design which pleased the team and tested well.
On this project was I was responsible for the concept, prototyping, design, illustration, animation, and final spec and asset production.
Seasonally at Coffee Meets Bagel, we liked to feature what we called “Mystery Gift”. The idea is that you spend a certain number of Beans (in-app currency) and you could win a prize of equal or greater value up to a $100 gift card. For Summer 2016, I decided to go with an underwater theme. That way I could use the physics of water to animate various elements in and out.
On this project was I was responsible for the concept, prototyping, design, animation, about half of the illustration, and final spec and asset production.
Branding and Marketing Gifs
At different points in the season we would have sales to at Coffee Meets Bagel to boost our revenue. We did this through Localytics campaigns in both our Android and iOS platforms. Sometimes we’d use still files but when we had design flexibility, I would animate a few gifs. Gifs tested far more successful over stills time after time with our users so it was worth the effort.
While I designed the layout, colors, and animations, the illustrations were mostly drawn by other designers.
Hotel Tonight List Refresh
Tasked with redesigning the Hotel Tonight App to be a tabbed experience, I took the opportunity to refresh the Search Bar design on the Hotel List. The new design has a black search bar with a 1px outline around the field. That allowed for a gray highlight on the dates tab and for the purple highlight to be moved to the new bottom tab bar. Click on the images to enlarge them.
Tabbed User Interface
With a tabbed UI, we were able to surface pages that were hard to find in a single page design.
Tabs in Action
I thought it would be fun to have a subtly engaging scroll experience by adding a cityscape background with parallax. The cities (Chicago, SF, and NYC) and are offset in Z so they scroll at varying speeds. The stars also scroll.
Bonus Rate becomes Geo Rate
Hotel Tonight has location based discounts and various other discounts after 3pm locally. We decided to consolidate the discounts into one rate. I redesigned the badge and animated it in order to make the rate more poignant and noticeable to our users. The image on the left is the previous design which was static.
Check Out Flow
In order to simplify the Check Out Flow, we combined the various steps into one page. This was a challenge, especially when considering smaller phones. Some of the issues were solved by moving the open fields to the top to allow room for the keyboard. I designed the UI, UX, and the Motion.
Proposed Launch Experience - Storyboards
Here's a fun idea that would give new users an overview of the Houzz App. I worked with two genius colleagues on the concept and then went into the zone to develop the visual design, UI, UX, and motion design.
Launch Experience Prototype
I like to animate my designs to help communicate the idea more clearly to fellow designers, clients, and developers.
Mobile Splash Screens These screens appear when a User clicks on a Houzz link from their mobile devices as an incentive to download the awesome Houzz app. I wanted to create a consistent design and experience over both Android and iOS and phone and tablet devices. The text and images change based on the User's search.
Download of the app increased by 30%.
Add to Cart Animation
A fun way to add a product to your cart! This interaction is consistent on both iOS and Android platforms and on all devices.
These logos celebrated special days like Valentine's, St. Patrick's, July 4th, The World Cup, and the launch of the Japanese and Swedish sites.
Large Format Posters Two print posters measuring 35x23 inches. I built, lit, and composited these in Cinema 4D. They showcase the new white UI for the Houzz Mobile app. The design of the posters reflects the simple, clean design of Houzz.com. I also did a version of this image to promote the mobile apps. You can see it on the Houzz website here. Click on the images for bigger versions.
I spent six years at Apple in the Consumer Apps Group. Here are a few of the projects I had the pleasure of working on.
iOS Cards Application This application made beautiful custom letterpress cards right on your phone! I worked on the UX and animation of the theme browser, transitions, the edit states of card and envelope, some UI, designed various elements, and worked closely with our engineering team to make sure the shipping build looked and felt right.
Watch some of the application in action!
From your phone to your hand! BAM!
iPhoto Cards Theme Browser Before this theme browser, the print products were hard to find and comprised of a simple drop down menu with static pre-rendered images of our themes. This browser takes advantage of a full-screen experience where the user's photos appear live in each theme preview. It's a totally different experience when you can preview your own photos!
I was involved in the initial concept, the UI, the animation, spec delivery, asset creation, art direction, and I worked closely with engineering to make sure the shipping build looked and felt right.
Watch it in action!
iPhoto Books Theme BrowserApple ships three different kinds of books in effectively two sizes. I lined up each carousel for the smoothest transitions possible and the sizes of the books reflect the size they are in real life. When you switch from Extra Large to Large, the ratio adjusts accordingly. I worked with a visual designer to give the appearance of 3D when when in fact we could only work in a 2.5D space.
We incorporated some fun interactions like the paper swatches that lift up on hover and the glow surrounding the color choice.
Watch it in action!
iMovie for iOS This is one example of some work I did for iMovie on iOS. Sometimes even a simple animation can be a challenge. Working with iOS and probably all mobile OS, the devices have graphics cards which don't support some of the technology we have on our desktops or laptops. The challenge here was to get a realistic feel to the curtains opening without any using any deformation or fancy pre-made software plug-ins.
Watch it in action!
iMovie for Desktop I love watching films and I SUPER love a well designed title sequence. I was lucky enough to get to design these titles for iMovie. I animated them in After Effects and then built the approved titles in Quartz Composer.
New Fonts! We licensed several new typefaces for the new titles. I updated the handy-dandy fonts panel with a selection of colors which would look good over video and would compress well.