In September 2012, the CEO of Breathometer and I started working on a beta for their flagship product, the world's smallest smartphone breathalyzer.
As the lead designer, I was in charge of leading the user interface design for across several platforms: web, mobile, and hardware signage.
Working with the CEO, CMO, and lead developer, we created a prototype that appeared at SXSW 2013. At the same time, we ran an Indiegogo campaign that achieved 600% of its funding goal and received a lot of press. Huffington Post wrote: "Judging by the demonstration in the product's promo video (above), part of the display turns red if you're over the legal limit. If you blow green, you're good to go. This offers a notable improvement over other handhelds, whose displays might be hard to read if you've been drinking." Breathometer sold over 4000 units and $140K in the first 30 days of launching.
In addition to the developing the beta, I assisted in designing the initial hardware signage and responsive website. Ultimately, the art direction helped influence the final design, which appeared on ABC's Shark Tank and landed a $1 million deal.
Voila! The final design - it appeared in several publications, and Huffingpost wrote a nice piece on it:
We collaborated with another studio to capture the Breathometer in the wild, and to use lifestyle photography to make the technology appear more human and friendly.
To convey that the app is calculating the user's BAC, we decided to rotate the button's rings. We had four colors, and each ring required 24 images for normal and retina. Everything had to be pixel-perfect - one mistake would make the animation choppy.
Use Your iPhone As A Breathalyzer With Breathometer
The beta was on TechCrunch tv.
Early logo concepts
Here were some of the original logo concepts that influenced the final design. For the brand, I thought about the idea of the quantified self, and understanding yourself better to make informed decisions about your health. Because the brand is social and fun, and therefore, interconnected, I felt that a circle, or a bubble, would best represent the brand. It also helped drive the brand essence for the rest of the application's design.
I also helped develop the initial color palette.
Rough sketches for prototype
Here are some super rough sketches that helped me clarify my idea. In the beginning of a project, I refrain from creating hi-fi *anything* - which includes sketches.
Sign up process wires
Voila - an arly exploration into the sign up process
Here's the register/sign up process for Breathometer, which helped influence the final design.
Designs for beta
Photoshop mock-ups of the "calculating phase" of the app
Typography + Hardware
Typographic/logo specs for hardware printing
IA for website
The website went through many iterations, including a single page version. Here is some initial IA for it.
Wires for website
Here's the splash page that debuted in 2012 to build up the user base
TheLadders' About Us
ROLE: Lead visual designer
During the midst of a global site design, I helped redesign TheLadders About Us page.
The current design uses the current visual system, and uses simple geometric shapes to highlight the content.
Daily Racing Form
ROLE: Visual Designer
The Daily Racing Form needed a redesign of their website to appeal to audiences of different generations.
I combined for a clean, slick aesthetic with a traditional editorial layout to reflect the interests of our target audiences.
Plum District iOS App
ROLE: lead designer
I helped build the app for Plum District, a web-based deals site for moms. Collaborating with the head of mobile and a developer, we created a responsive app so it could work well on both iOS and Android platforms.
Following the brand identity guidelines, and previous incorporating user research, I helped shape the IA and UI under a tight deadline. Following its release, it appeared in various news outlets, including TechCrunch.
Purchasing process flow
Here's the purchasing flow for a registered user with saved addresses/credit card information
The login/register process uses the Facebook API. It features a right-corner toggle to switch from login to register and vice versa. The feed uses large imagery to showcase the product, and the ancillary page shows a product testimonial.
The settings page appears rather simple, but we had to think of use cases for when the user was signed out and signed in. Which information was crucial to show behind the wall, and which wasn't? Personal stuff, like billing and addresses could only be accessed via login, but location was always available.
Some initial wires for the app
ROLE: Lead visual designer
In 2012, TheLadders created an incubator for developing new products. One product, Caveer, was envisioned to reveal peoples' career paths. After logging in, the user can follow achievements and mark them as "done". Each person has a profile that collects these goals, so people can see how somebody is advancing.
When I was assigned to this project, I thought of the idea of "cards", because they give a sense of collecting. The original art direction was vintage and tactile, to highlight a period in which career paths existed. Throughout the process, we modernized the look and feel to reflect our target audience -- mostly millennials.
I also collaborated with several front-end and back-end developers to employ new UI patterns, like masonry layouts and textured drop-downs.
Here, the user can search for activities she'd like to do, and add them to her profile, or mark them as complete.
Assets for marketing
We used these cards for the splash page
Registration via Facebook
User's profile page
About Us Careers page
PTC - ProEngineer Creo Redesign
ROLE: Lead designer
In 2011, I worked alongside Involution Studios in Boston to redesign a software application for PTC's ProEngineer Creo, a competitor to Autodesk. I lead a team of designers to re-skin the app and make it more usable using visual design. We faced many constraints: we had to use the Microsoft platform, as well as the original iconography. My team and I worked closely with the client to produce over 100s of UI elements. The application redesign was ultimately approved and went live.
All UI components - at least several hundred - had to be created for pixel-perfection.
Before vs after: design work
We worked hard to improve the legibility while remaining on-brand.
Ossia Symphony Orchestra Pamphlet
ROLE: lead designer
Ossia Symphony Orchestra, a non-profit based in New York, commissioned me to create a pamphlet and flyer for one of their performances.
There were a few challenges: a tight deadline and budget, and most notably, the need for the pamphlet and flyer to live apart and together.
I modeled my own origami design, and used its shapes to enhance the typography and layout. Because both items folded into each other, they could be handed out simultaneously at the concert, or they could be hung separately on the walls.