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
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
IBM Responsive Website
ROLE: lead designer
As the creative lead for an IBM scrum team, I helped design a responsive homepage for its mobile category. The original homepage, below, used a card metaphor that concealed the sites' business offerings. Through ad campaigns, the old site received quite a bit of traffic, but it was slowly dying off. To increase engagement, we decided to reveal the information behind the cards.
Guided by metrics, we decided to illustrate users' main concerns from a very general standpoint. Had we used super specific images for all 8 needs, we would have weighed the page down and made it less usable. Also, because the page is responsive, I recreated the illustrations for the mobile view.
After the homepage's launch, we advanced to #2 for "mobile enterprise" in Google (up from #5), the site visits increased 330%, and registration rates on the homepage grew 69%.
Iteration 1: new homepage design
This was the first stab at recreating the homepage. When we learned we would actually have to showcase all 8 business needs, as opposed to 4 (displayed here), I felt this composition no longer seemed appropriate.
An example of the illustrations by themselves
Ilustrations, mobile view
The original illustrations were too specific for our endeavor
IBM IBV Study
ROLE: lead designer
IBM ran a campaign for its IBV study, which looks at trends in the mobile enterprise. We had to create an overlay and translate it over to mobile. I handled everything from the task flows to the visual design, and ultimately the QA.
We also created several visual assets that were used to market the study on Pinterest, Facebook, and Twitter.
Once the user inputs their answer via a Likert scale, we reveal what IBM users say.
The navigation bar shoots up to display content (the factoids) beneath.
An early stab at creating task flows - I stepped up and helped the IA with documentation.
I got a chance to step into the print world for this fact sheet, which compared leaders to non-leaders in the mobile space. It appeared on Pinterest, Facebook, and other social platforms.
This datagram gives a quick "bite" to the user about the IBV study
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.