Breathometer is a portable smartphone breathalyzer. Users blow into a hardware sensor that plugs into the headphone jack of their iOS or Android device. Immediately afterward, the mobile app reveals their blood alcohol content level (B.A.C.).
The project began from a list of MVP feature requirements for early-adopting users. Working with the Breathometer core team (CEO, lead developer, VP of Marketing), I helped lead the visual and interaction design for the mobile app (beta), and craft the original desktop web presence.
Our goal was to create a beta/prototype for testing on focus groups. We focused on one main user journey:
- signing up/creating an account
- tutorial (optional)
- breathing into the hardware device
- recording the blood alcohol content level
- repeating the journey/viewing user history
After several rounds of experimentation, the concept for the design of the mobile app finally emerged. We used traffic light signals to convey a user’s B.A.C. level. Green indicated sobriety; yellow meant caution, and red signaled intoxication.
The idea succeeded on several levels:
- Since we reused a powerful, existing metaphor, users grasped the concept immediately - even when drunk.
- The traffic light rings reinforced the new branding expression - it used shapes found in the logo
- Using red, green, and yellow to indicate sobriety did not have any legal ramifications
- The rings allowed for animation, adding delight to the experience
The project lasted from September 2012 to around April 2013. It demoed on TechCrunch, but debuted formally on Indiegogo for crowdfunding.
Here are some of the highlights:
- The Indiegogo campaign achieved almost over 600% of its original funding goal
- Breathometer sold over 4000 units and $140K in the first 30 days of launching.
- Huffingtonpost on the usability: "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."
The alpha influenced the final app, which was featured on Shark Tank and secured a $1 million dollar deal with Mark Cuban.
In September, TheLadders introduced a responsive version of its core product, TheLadders.com. Combined with an updated technology stack, TheLadders adopted a refined visual design.
As the art director for the project, I collaborated with the lead UX designer and Associate Creative Director to translate wireframes into final mock-ups.
Several months had passed since the responsive reboot of the TheLadders.com, and a global design trend that favored flat design began to emerge. To keep the design fresh, the ACD and I simplified the About Us’ visual expression. Simple geometric shapes and clean typography put the content first, while a three colorway adds fun without undermining TheLadders’ credibility.
IBM.com serves as a portal for information about IBM products and services. Their mobile solutions are funneled through a marketing category website, IBM MobileFirst. IBM MobileFirst required a responsive homepage redesign. The original design, pictured below, used a card metaphor that concealed the sites’ business offerings. Although it received traffic, the engagement was dying off. Our goal was to increase site visits as well as registration rates, while also aligning the branding identity closer to that of IBM.
Our team’s goal was to build a responsive homepage that positioned IBM as a leader in the mobile technology space. As the lead visual/interaction designer and illustrator, I partnered with my scrum team to gather business requirements, user pain points, and technology constraints.
To capture everybody’s input, I helped facilitate a design studio, an agile collaborative sketching session. Afterward, the UX designer, product owner, and myself selected the strongest concept and moved onto low-fidelity sketches of the UI. I also included a visual design toolkit and style guide for handoff.
My team refreshed the IBM MobileFirst homepage in an agile development environment. We designed and built the design in parallel, while constantly iterating. The product owner and I agreed that the homepage should feature all eight mobile solutions. To enhance the user experience, I created responsive, on-brand illustrations in an agile environment.
Ultimately, the design achieved the following:
- broke up the density of the text and made it more legible
- made IBM MobileFirst’s story more compelling
- used illustrations as a wayfinding mechanism: they guided the user down the page
- solidified MobileFirst as a recognizable sub-brand of IBM
- Google ranking shot up to #2 for keyword search "mobile enterprise"
- Sites visits increased by 330%
- Registration rates grew by 69%
- Social reach increased by 550%
- Mobile traffic expanded by 29% to 56%
In 2012, TheLadders created an incubator for developing new software. Its flagship product, Caveer, was a career development resource built on a new concept called “social mentorship.” Users could see how people obtain their achievements, and help other people reach their goals.
The inspiration for Caveer was 1960s nostalgia, when career paths actually existed. As the lead visual designer, I combined vintage elements with a modern design aesthetic to appeal to a wide variety of generations - not only millennials. We emphasized the concept of tactility to suggest that using Caveer made career aspirations more tangible. During pair-programming, the developers and I implemented a CSS-based masonry layout and subtle design elements like texture drop-downs.
Plum District is a daily deals/e-commerce platform focused on Moms and their needs. The company had been receiving considerable mobile traffic (25%), but had outdated native apps. The goal was to create a native iOS app that would allow a user to purchase, save, redeem, and promote a deal.
As the lead designer, I collaborated with the head of mobile and a lead developer to create the iOS native app. I started worked on the interaction and visual design concurrently, letting each discipline inform the other. Since we were under a very tight deadline, I quickly compared interaction models from other daily deal native apps. We prioritized features and quickly built them into the interface. After having help shape the IA and UI, I moved onto finessing the visual design.
- Mobile app peaked at #9 in App Store's Business Category
- Appeared in TechCrunch and various news outlets: http://techcrunch.com/2012/08/09/daily-deals-for-moms-plum-district-debuts-iphone-app-local-loyalty-program-to-follow/
Sports Rewards Park (SRP) is a digital umbrella for sports-themed mobile apps. SRP’s founder asked us to design its first flagship product, Just Watch The Game.
Just Watch The Game’s vision was straightforward: users watch a match on TV, and then login to Just Watch The Game to test post-game knowledge. After answering a question correctly, the mobile app rewards them an opportunity to win a variety of prizes.
Armed with a list of business requirements, our team translated the user journey into a UI in a sketching session with SRP’s founder. We took in a couple observations:
- For SRP to work, it required a strong user engagement model
- SRP needed to allow users to dismiss/favorite a game as soon as possible
Recognizing these two challenges, I suggested an interface similar to Tinder: users login to Just Watch The Game, and then dislike or like a match by swiping the card left or right. After liking a card, users are prompted to answer questions relating to the game they had just watched. Like a baseball card, users could turn over cards to view the game stats. We achieved consensus on this design direction, and proceeded to move into low fidelity sketching, wireframing, and visual design.
As the lead visual designer for this project, I based the art direction on a gestural, immersive experience - channel surfing. To capture this vision, we used full-bleed photography, which changes based upon game selection.
I also applied a contrastive look and feel to the app: black and white colors; sans-serif and script typography; and huge headers and small bylines. To offset the app’s bold aesthetic, I introduced playful design elements like stars.
Adjacent to One (ATO) is a product design firm that needed a new, on-brand website. Since ATO is relatively unknown in the UX space and has little brand recognition, it required a digital presence that could tell its story in a powerful way.
We were restricted to a tight deadline and therefore had no wireframes to react to. As a result, the design director and I created low-fidelity sketches that I turned quickly into final mock-ups. I consulted with a UX designer and technology lead to ensure that the design was feasible, and then presented it to the company and CEO.
The website design is inspired by the same theory that crystalized Adjacent to One’s vision: The Adjacent Possible. Although the idea has its roots in biology, it can be applied to innovation - ATO’s main focus. Steven Johnson, author of Where Good Ideas Come From, believes “Generating new ideas is a process of looking for ideas that are adjacent to ideas that are already out there.” (source: http://agilelifestyle.net/the-adjacent-possible). The company story's complexity required an engaging, consumable experience for first-time users. Using ATO’s most distinctive branding element, a red slash, and parallax animation, I illustrated how the website gradually formed together like a magnet. The placement of the website copy reiterated the story: complexity was adjacent to simplicity; fuel was adjacent to monday. When the user hovered/tapped over these words, an explanation for them would appear.
During the design process, I established a visual system. Branding photography remained in black and white; whereas case study images were always in color. Red was always used on white or gray but never black; otherwise, it felt too severe. I set everything in the company typeface, Dagny, to create a uniform, polished look.
Other design explorations are pictured below.
For individuals and organizations that handle blue chip art, Art Service Group (ASG) is an intelligent online marketplace that offers field-tested, task-specific digital tools that seamlessly integrate with the full range of art services management activities such as art registration and inspection.
As the lead visual designer and creative lead, I designed the website while managing the client relationship and internal resources. I presented the design to our client, collected feedback, and responded to minor change requests.
Since Art Service Group lacked a branding identity, our design director engaged a branding exploration exercise with their team. We landed on a north star word to help guide the work: intelligence, or “showing consideration of the whole picture and everyone’s needs”. From there, I helped ASG’s in-house designer finesse their logo while determining an art direction for the online marketplace. In an effort to accurately capture our client’s design preferences, I lead a quick workshop with them and our team. Afterward, our UX designer and I collaborated on low-fidelity sketches, while consulting our tech lead. With little managerial oversight, I created the remaining visual design mock-ups in a few days.
I presented three polished directions to Art Service Group: the first reflected trends in the digital space; the second was distinctively on-brand, and the third elevated the brand. During our final review with the client, we achieved immediate consensus on design direction for the marketplace (pictured here).
I built out the pages in a few days and had the files ready for send-off by the end of the week.
BBM Channels is a service from BlackBerry that allows users and brands to create channels. A two-way communication portal, users can subscribe to channels while the channel owners can publicize custom content to subscribers.
In an effort to win new business, Adjacent to One proposed a redesign of BBM.
This pitch allotted us only a few days for visual design. I collaborated with the UX designer to create mock-ups and a prototype for one main user journey. When establishing the art direction, I purposely minimized BBM’s branding so that it would not compete with the sub brands on the platform.